Creating a sidebar - flyout like Windows desktop app in WPF

问题

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

回答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 = ">";
    }        
}

回答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>

来源：https://stackoverflow.com/questions/11826568/creating-a-sidebar-flyout-like-windows-desktop-app-in-wpf

标签

wpf

sidebar