使用 Mahapps.Metro 在 WPF 中设计汉堡菜单

Designing a Hamburger menu in WPF with Mahapps.Metro

提问by Sabyasachi Mukherjee

Currently, I'm using a Gridof Buttonsfor housing keys for navigation. It's hideous, but gets the job done.

目前，我正在使用 a GridofButtons住房钥匙进行导航。这很可怕，但完成了工作。

Here's the XAML chunk:

这是 XAML 块：

<Button x:Name="ShowMainMenu" Grid.Column="0" Margin="5" Content="Main Menu"/>
<Button x:Name="ShowReportsMenu" Grid.Column="2" Margin="5" Content="Reports"/>
<Button x:Name="Reset" Grid.Column="4" Margin="5" Content="Reset"/>
<Button x:Name="TryClose" Grid.Column="6" Margin="5" Content="Close"/>

Incidentally, I'm using Caliburn.micro, and so naming the buttons is enough to bind them to proper commands.

顺便说一句，我使用的是 Caliburn.micro，因此命名按钮足以将它们绑定到正确的命令。

Now, I want them to put them in a Hamburger Menu.

现在，我想让他们把它们放在汉堡菜单中。

What I have tried till now is this:

到目前为止，我尝试过的是：

<Controls:HamburgerMenu >
    <Controls:HamburgerMenu.ItemTemplate>
            <DataTemplate DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Text="{Binding Label}" />                            
                </Grid>
            </DataTemplate>                
    </Controls:HamburgerMenu.ItemTemplate>
    <Controls:HamburgerMenu.ItemsSource>
        <Controls:HamburgerMenuItemCollection>
            <Controls:HamburgerMenuGlyphItem Glyph="1" Label="Main Menu" cal:Message.Attach="[Event Click] = [Action ShowMainMenu]"/>
            </Controls:HamburgerMenuItemCollection>
    </Controls:HamburgerMenu.ItemsSource>
</Controls:HamburgerMenu>

But it doesn't work, because Controls:HamburgerMenuGlyphItemisn't a FrameworkElement.

但它不起作用，因为Controls:HamburgerMenuGlyphItem不是FrameworkElement.

By the way, the transitioning view is implemented like this:

顺便说一下，过渡视图是这样实现的：

So, how can I translate my bunch of Buttonsinto a HamburgerMenu? I can't find proper documentation for Caliburn.micro's HamburgerMenuas well.

那么，我怎样才能将我的一堆翻译Buttons成一个HamburgerMenu？我也找不到 Caliburn.micro 的正确文档HamburgerMenu。

回答by Sabyasachi Mukherjee

Well, I figured it out myself.

嗯，我自己想通了。

Here's the code:

这是代码：

<DockPanel>        
    <DockPanel.Resources>            
        <DataTemplate x:Key="MenuItemTemplate">
            <Grid Height="48" Background="Black">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <cal:ActionMessage MethodName="{Binding Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe MDL2 Assets" Foreground="BlanchedAlmond" Text="{Binding Glyph}"/>
                <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}"/>
            </Grid>
        </DataTemplate>
    </DockPanel.Resources>

    <Controls:HamburgerMenu Foreground="White" PaneBackground="#FF444444" IsPaneOpen="False" DisplayMode="CompactOverlay" OptionsItemTemplate="{StaticResource MenuItemTemplate}" ItemTemplate="{StaticResource MenuItemTemplate}">
        <Controls:HamburgerMenu.ItemsSource>
            <Controls:HamburgerMenuItemCollection>
                <Controls:HamburgerMenuGlyphItem Glyph="M" Label="Main Menu" Tag="ShowMainMenu"/>
                <Controls:HamburgerMenuGlyphItem Glyph="I" Label="Invoice" Tag="OpenInvoiceMaker"/>
                <Controls:HamburgerMenuGlyphItem Glyph="R" Label="Reports" Tag="ShowReportsMenu"/>
            </Controls:HamburgerMenuItemCollection>
        </Controls:HamburgerMenu.ItemsSource>
        <Controls:HamburgerMenu.OptionsItemsSource>
            <Controls:HamburgerMenuItemCollection>
                <Controls:HamburgerMenuGlyphItem Glyph="A" Label="About" Tag="About"/>
            </Controls:HamburgerMenuItemCollection>
        </Controls:HamburgerMenu.OptionsItemsSource>
        <Controls:HamburgerMenu.Content>
            <DockPanel>
                <Border Background="#FF444444" DockPanel.Dock="Top">
                    <TextBlock x:Name="Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding ActiveItem.DisplayName}" />
                </Border>
                <ScrollViewer Grid.Row="1" CanContentScroll="True" IsDeferredScrollingEnabled="False">
                    <Controls:TransitioningContentControl Transition="LeftReplace" x:Name="ActiveItem" Content="{Binding ActiveItem}"/>
                </ScrollViewer>
            </DockPanel>
        </Controls:HamburgerMenu.Content>
    </Controls:HamburgerMenu>
</DockPanel>

Basically, I used EventTriggerto achieve the same functionality as a button. The rest was easy.

基本上，我曾经EventTrigger实现与按钮相同的功能。剩下的就简单了。