Click here to Skip to main content
15,882,209 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
<Grid>
               <StackPanel HorizontalAlignment="Left" Width="228" Margin="0,100,0,0">
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel>
                           <StackPanel Orientation="Horizontal">
                               <Image Source="dashboard (1).png" Margin="20,0,0,0" Width="56" Height="45"/>
                               <Button x:Name="Dasboard" Content="Dashboard"  VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" Height="45" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Background="{x:Null}"  Click="Dasboard_Click"/>
                           </StackPanel>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="scrum.png" Margin="20,0,0,0" Width="56" Height="45"/>
                           <Button Content="Master"  VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" Height="45" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="inventory (1).png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Inventory" Content="Inventory" VerticalAlignment="Top"  FontWeight="Bold" FontSize="18" Padding="15,12,0,0"  Width="145" HorizontalAlignment="Center" Foreground="White" VerticalContentAlignment="Top" Height="45" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="salary.png" Margin="20,0,0,0" Width="55"/>
                           <Button x:Name="Payroll" Content="Payroll" VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" VerticalContentAlignment="Top" Height="45" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="report (1).png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Reports" Content="Reports" VerticalAlignment="Center"  FontWeight="Bold" FontSize="18" Padding="15,12,0,0"  Width="145" HorizontalAlignment="Left" Foreground="White" VerticalContentAlignment="Top" Height="46" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="settings.png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Settings" Content="Settings" VerticalAlignment="Center" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Left" Foreground="White" Height="45" VerticalContentAlignment="Top" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
               </StackPanel>
               <DatePicker HorizontalAlignment="Left" Height="50" Margin="42,0,0,50" VerticalAlignment="Bottom" Width="160" Foreground="Black" Background="White" FontWeight="Bold"/>
           </Grid>


What I have tried:


<Grid>
               <StackPanel HorizontalAlignment="Left" Width="228" Margin="0,100,0,0">
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel>
                           <StackPanel Orientation="Horizontal">
                               <Image Source="dashboard (1).png" Margin="20,0,0,0" Width="56" Height="45"/>
                               <Button x:Name="Dasboard" Content="Dashboard"  VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" Height="45" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Background="{x:Null}"  Click="Dasboard_Click"/>
                           </StackPanel>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="scrum.png" Margin="20,0,0,0" Width="56" Height="45"/>
                           <Button Content="Master"  VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" Height="45" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="inventory (1).png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Inventory" Content="Inventory" VerticalAlignment="Top"  FontWeight="Bold" FontSize="18" Padding="15,12,0,0"  Width="145" HorizontalAlignment="Center" Foreground="White" VerticalContentAlignment="Top" Height="45" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="salary.png" Margin="20,0,0,0" Width="55"/>
                           <Button x:Name="Payroll" Content="Payroll" VerticalAlignment="Top" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Center" Foreground="White" VerticalContentAlignment="Top" Height="45" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="report (1).png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Reports" Content="Reports" VerticalAlignment="Center"  FontWeight="Bold" FontSize="18" Padding="15,12,0,0"  Width="145" HorizontalAlignment="Left" Foreground="White" VerticalContentAlignment="Top" Height="46" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
                   <Grid Height="45" Margin="0 20 0 0">
                       <StackPanel Orientation="Horizontal">
                           <Image Source="settings.png" Margin="20,0,0,0" Width="54" Height="36"/>
                           <Button x:Name="Settings" Content="Settings" VerticalAlignment="Center" FontWeight="Bold" FontSize="18" Padding="15,12,0,0" Width="145" HorizontalAlignment="Left" Foreground="White" Height="45" VerticalContentAlignment="Top" Background="{x:Null}"/>
                       </StackPanel>
                   </Grid>
               </StackPanel>
               <DatePicker HorizontalAlignment="Left" Height="50" Margin="42,0,0,50" VerticalAlignment="Bottom" Width="160" Foreground="Black" Background="White" FontWeight="Bold"/>
           </Grid>
Posted
Updated 2-Sep-22 2:20am

1 solution

This is a great tutorial that will answer this question and more: Switching Views - WPF MVVM NAVIGATION TUTORIAL #1 - YouTube[^]

[Update] This may be exactly what you are looking for: Sidebar Navigation In WPF - YouTube[^] with full source code in the description.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900