Question

如何在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是一种好方法吗？

//编辑

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

Answer 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" />

您可以尝试此代码

Answer 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>

UWP汉堡包菜单顶部和底部

2 个答案: