WPF How to create a lateral menu like this (Modern-UI)

Question

I'm new on WPF and I want to create a lateral menu for my App. Searching for ideas i found this picture:

My idea is to add buttons like in the picture one bellow the other. When user click a button it expand the button to show sub menu options. Only one menu should be expanded at a time. My first test is to use a listbox, inside use a Expander for each button and then a stackpanel to add sub menu options. It look like this:

This is my XAML:

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox>
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>

            <Expander Background="GreenYellow"  Width="243" Header="Pedidos">                
                <StackPanel>                    
                    <RadioButton Margin="20,5,5,5" Content="Nuevo Pedido" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Consultar Pedidos" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Pedidos Pendientes" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="BurlyWood" Width="243" Header="Remitos" Expanded="Expander_Expanded">
                <StackPanel>
                    <RadioButton Content="Nuevo Remito" GroupName="Two"/>
                    <RadioButton Content="Consulta de Remitos" GroupName="Two"/>
                    <RadioButton Content="Remitos Pendientes de Facturar" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="OrangeRed" Width="243" Header="Facturas de Ventas">
                <StackPanel>
                    <RadioButton Content="Nueva Factura" GroupName="Two"/>
                    <RadioButton Content="Consulta Facturas" GroupName="Two"/>                    
                </StackPanel>
            </Expander>
        </ListBox>        
    </Grid>    
</Window>

So it has the behavior i wanted but not very similar in aspect. How can I improve this to make it more like the first image? Thanks!

UPDATE

What i want is to add an icon next to every group title like te buttons above and idealy replace the expander icon, then I replace the RadioButtons with Hyperlinks. Thanks!

Answer 1

After several test I got it!!!! Post the solution so other can use it:

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>            

            <Expander Background="OliveDrab">                
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Pedidos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />                            
                        </BulletDecorator.Bullet>                        
                        <TextBlock Margin="10,0,0,0" Text="Pedidos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Pedido"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Pedidos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Pedidos Pendientes"/>                    
                </WrapPanel>
            </Expander>

            <Expander Background="OrangeRed">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Remitos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Remitos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Remito"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Remitos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Remitos Pendientes de Facturar"/>
                </WrapPanel>
            </Expander>

            <Expander Background="Teal">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Facturas.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Facturas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Factura"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Facturas Normales y Anuladas"/>                    
                </WrapPanel>
            </Expander>          

        </ListBox>        
    </Grid>    
</Window>

And this is the result