Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a WPF-equivalent to UWP's SplitView Hamburger Menu?

Tags:

.net

wpf

uwp

The Hamburger-style SplitView control in the Universal Windows Platform is perfect, IMO. However, my project has a WPF frontend.

Does anybody know of a WPF equivalent to this (preferably open source)?

like image 772
BCA Avatar asked Oct 13 '15 13:10

BCA


People also ask

What is the hamburger menu on Windows?

The HamburgerMenu Control provides an easy-to-use, side-bar menu which users can show or hide by using a Hamburger button. By tapping the icon, it opens up a side menu with a selection of options or additional pages.

Why is it called a hamburger menu?

A hamburger menu is an icon used on a website and in apps that, when clicked or tapped, opens a side menu or navigation drawer. It's called a “hamburger menu” because it takes the form of the famous sandwich.


3 Answers

Using the GridSplitter control and a StoryBoard, you can set this up quite easily. You may need to tweak this code a bit to make it appear like the hamburger, but this should get you well on your way.

<UserControl
x:Class="Namespace.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="mainPage">

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="CloseLeft">
            <DoubleAnimation x:Name="animNavLinksClose"
                             Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth"
                             To="0.0" Duration="00:00:00.2" />
        </Storyboard>
        <Storyboard x:Name="OpenLeft">
            <DoubleAnimation x:Name="animNavLinksOpen"
                             Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth"
                             From="0" To="170" Duration="00:00:00.2" />
        </Storyboard>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="170" x:Name="NavLinksColumn" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="grdNavLinks" Grid.Column="0">
        <!-- Navigation Buttons -->
    </Grid>

    <GridSplitter x:Name="spltNavLinks" Grid.Column="1" />

    <Grid x:Name="contentSection" Grid.Column="2">
        <!-- Content or Frame -->
    </Grid>
</Grid>
</UserControl>

Then you can call your storyboard from the code-behind like this

// Begin Opening Animation
OpenLeft.Begin();

// Begin Closing Animation
CloseLeft.Begin();
like image 115
Muster Station Avatar answered Oct 23 '22 04:10

Muster Station


Another implementation to study is https://github.com/alicanerdogan/HamburgerMenu

enter image description here

like image 14
tofutim Avatar answered Oct 23 '22 05:10

tofutim


There is really nice one in MahappsMetro now

hamburger image

like image 8
igorushi Avatar answered Oct 23 '22 04:10

igorushi