UWP 汉堡菜单顶部和底部答案

【问题标题】：UWP hamburger menu top and bottomUWP 汉堡菜单顶部和底部
【发布时间】：2016-04-28 07:04:09
【问题描述】：

如何在 XAML - UWP 中在顶部和底部制作汉堡菜单？

这是我的SplitView.Pane

      <SplitView.Pane>
            <Grid>
                <Border Background="{StaticResource PanelBackground}"/>
                <ListView x:Name="navMenuList"
                          SelectionMode="Single"
                          IsItemClickEnabled="True"
                          Margin="0,0,0,0" ItemsSource="{Binding Menus}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Width="240" HorizontalAlignment="Left" Height="48">
                                <SymbolIcon Margin="2,0,0,0" Symbol="{Binding Symbol}" Foreground="White"/>
                                <TextBlock Margin="24,0,0,0" Text="{Binding Text}" VerticalAlignment="Center" Foreground="White"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="ItemClick">
                            <core:InvokeCommandAction Command="{Binding Path=MenuCommand}" CommandParameter="{Binding Target}"/>
                        </core:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </ListView>
            </Grid>
        </SplitView.Pane>

用另一个绑定复制整个ListView 是一种好方法吗？

// 编辑

我需要这样的东西（但菜单项更多:)）：

【问题讨论】：

您想要两个菜单窗格吗？因为我不确定你想要实现什么。
@danny 我编辑了我的 Q
看看Template 10
也许你会发现AppShell template很有用。
Menu button at the bottom UWP Hamburger Navigation pane的可能重复

标签： xaml win-universal-app

【解决方案1】：

<SplitView x:Name"RootSplitView">
</SplitView>
<ToggleButton x:Name="TogglePaneButton"
                      TabIndex="1"
                      Style="{StaticResource SplitViewTogglePaneButtonStyle}"
                      IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
                      Unchecked="TogglePaneButton_Checked"
                      AutomationProperties.Name="Menu"
                      ToolTipService.ToolTip="Menu" Background="#E53DAFBD" Foreground="#FFF9EAEA" />

你可以试试这个代码

【讨论】：

【解决方案2】：

<SplitView.Pane>
    <Grid>
        <StackPanel>
            <ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                Width="50" Height="50" Background="Transparent" Tapped="HamburgerButton_Tapped" Foreground="White" 
                FontSize="16" FontWeight="Bold" Style="{StaticResource HamburgerToggleButtonStyle}" />

            <RadioButton Content="Top 1" x:Name="btn1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
            <RadioButton Content="Top 2" x:Name="btn2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="True" Foreground="White" GroupName="HamMenu"/>
            <RadioButton Content="Top 3" x:Name="btn3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>

        </StackPanel>
        <StackPanel VerticalAlignment="Bottom">
            <RadioButton Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
            <RadioButton Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
        </StackPanel>
    </Grid>
</SplitView.Pane>

【讨论】：