Creating a sidebar - flyout like Windows desktop app in WPF

Question

what i am trying to do is create a Desktop application in WPF whose UI is such that a small icon will remain fixed in the center of the left edge of screen and on click(or maybe hover) will slide open a sidebar(like the google desktop bar) running along the left edge of the screen (fixed position, cannot be moved).

do note that what i'm asking for might be like an appbar but i do not want the desktop icons along the left edge to be moved as it happens with an appbar i.e. i do not want it to hog up the desktop spacce....can anyone please suggest me a way out ??

I have implemented a partial solution using this, but i cant get the slide animation and fixed position to workout

Psycho

Answer 1

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">&gt;</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 = ">";
    }        
}

Drainage

FYI: in universal apps, you should use Windows.UI.Xaml.Visibility instead of System.Windows.Visibility – Marqueritemarques

shouldn't your rectangle and button have grid.columns="0" grid.rows="0"? – Marqueritemarques

@JPHellemons WPF assumes these values unless you specify otherwise. – Churlish

Answer 2

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>

Dorison

I downloaded and tried it out. its not working, gives object reference issue and goes to debug mode. Otherwise, looks great... can you fix the issue and upload changers to GitHub? – Uncloak

Yes it has a lot of issues I will rewrite this component as soon as possible, I need it in a production project I am just not in that point yet. But I will as soon as possible – Dorison

That will be great. Let me know once you have updated version, I would love to use it. – Uncloak

Link rot set in so the image is not available. Please read "Link-only answers", "Link rot" and "Your answer is in another castle: when is an answer not an answer?" – Shivers