目前,我正在使用Grid
的Buttons
来存放导航键。这很可怕,但完成了工作。
这是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"/>
顺便说一下,我正在使用Caliburn.micro,因此命名按钮足以将它们绑定到正确的命令。
现在,我希望他们把它们放在汉堡菜单中。
我到现在为止尝试的是:
<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>
但它不起作用,因为Controls:HamburgerMenuGlyphItem
不是FrameworkElement
。
顺便说一下,转换视图是这样实现的:
那么,我怎样才能将我的一堆Buttons
翻译成HamburgerMenu
?我找不到适合Caliburn.micro的HamburgerMenu
的文档。
好吧,我自己弄清楚了。
这是代码:
<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>
基本上,我使用EventTrigger
来实现与按钮相同的功能。其余的很容易。