Creating a sidebar - flyout like Windows desktop app in WPF

Something like this could work:

then of course you could create a slide in animation for the sidebar. This shows (partial) transparency and the switching principle.

XAML:

<Window x:Class="WpfApplication1.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        WindowStyle="None" Topmost="True" WindowState="Maximized"         AllowsTransparency="True" Background="Transparent">    <Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="Auto" />            <ColumnDefinition />        </Grid.ColumnDefinitions>        <Rectangle Name="rect" Width="100" VerticalAlignment="Stretch" Fill="#99000000" Visibility="Collapsed" />        <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Width="32" Height="32" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Background="White" Click="Button_Click">></Button>    </Grid></Window>

C#:

private void Button_Click(object sender, RoutedEventArgs e){    if (rect.Visibility == System.Windows.Visibility.Collapsed)    {        rect.Visibility = System.Windows.Visibility.Visible;        (sender as Button).Content = "<";    }    else     {        rect.Visibility = System.Windows.Visibility.Collapsed;        (sender as Button).Content = ">";    }        }

Based on this answer and more answers on this site I made a side bar, I liked the result so i made a repo.

https://github.com/beto-rodriguez/MaterialMenu

you can install it from nuget too.

here is an example

<materialMenu:SideMenu HorizontalAlignment="Left" x:Name="Menu"                           MenuWidth="300"                           Theme="Default"                           State="Hidden">        <materialMenu:SideMenu.Menu>            <ScrollViewer VerticalScrollBarVisibility="Hidden">                <StackPanel Orientation="Vertical">                    <Border Background="#337AB5">                        <Grid Margin="10">                            <TextBox Height="150" BorderThickness="0" Background="Transparent"                                VerticalContentAlignment="Bottom" FontFamily="Calibri" FontSize="18"                                Foreground="WhiteSmoke" FontWeight="Bold">Welcome</TextBox>                        </Grid>                    </Border>                    <materialMenu:MenuButton Text="Administration"></materialMenu:MenuButton>                    <materialMenu:MenuButton Text="Packing"></materialMenu:MenuButton>                    <materialMenu:MenuButton Text="Logistics"></materialMenu:MenuButton>                </StackPanel>            </ScrollViewer>        </materialMenu:SideMenu.Menu>    </materialMenu:SideMenu>