UWP 汉堡包导航窗格底部的菜单按钮

Question

我目前正在使用 SplitView.Pane 为我的 UWP 应用构建一个汉堡菜单。 "Buttons" 是 listBox 中的 listBoxItems。有没有办法让设置图标像原生 windows 新 App 一样位于 SplitView.Pane 的底部...谢谢

Answer 1

没有简单的方法（如果有的话）将列表框的一部分项目对齐在顶部，另一部分在底部对齐，所以答案很简单 - 不要使用列表框并手动构建必要的布局。例如，像这样：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Button x:Name="TopButton1" Grid.Row="0" Content="TopButton" />
    <Button x:Name="TopButton2" Grid.Row="1" Content="TopButton" />
    <Button x:Name="TopButton3" Grid.Row="2" Content="TopButton" />

    <Button x:Name="BottomButton" Grid.Row="4" Content="BottomButton" />
</Grid>

顺便说一句，建议在 UWP 应用程序中使用 ListView 而不是 ListBox。

Answer 2

我有一个带火腿菜单的应用程序，我使用单选按钮。在单选按钮的组属性中，我使用相同的组名。这样你就可以使用任何你喜欢的布局，对于 ex 网格，堆栈面板和你的按钮可以在任何地方。当您点击任何按钮时，它将 select 像列表视图一样编辑，点击另一个按钮将取消 select 和 select 新按钮。

嗡嗡声菜单

   <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 Tag="&#xE1E0;" Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
            <RadioButton Tag="&#xE115;" Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>

        </StackPanel>

    </Grid>
</SplitView.Pane>

单选按钮样式

    <Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="Padding" Value="8,6,0,0"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="MinWidth" Value="120"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid x:Name="MainRadioGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SecondaryRadioGrid" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Target="MainRadioGrid.(Panel.Background)">
                                        <Setter.Value>
                                            <SolidColorBrush Color="White"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
                                        <Setter.Value>
                                            <Color>Black</Color>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
                                        <Setter.Value>
                                            <Color>Black</Color>
                                        </Setter.Value>
                                    </Setter>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
                                        <Setter.Value>
                                            <Color>Black</Color>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
                                        <Setter.Value>
                                            <Color>Black</Color>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Target="SecondaryRadioGrid.(Panel.Background).(SolidColorBrush.Color)">
                                        <Setter.Value>
                                            <Color>#02000000</Color>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Target="MainRadioGrid.(Panel.Background)">
                                        <Setter.Value>
                                            <SolidColorBrush Color="White"/>
                                        </Setter.Value>
                                    </Setter>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="SecondaryRadioGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#02000000">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid x:Name="grid1" Height="50" VerticalAlignment="Top" Width="50">
                            <TextBlock x:Name="IconTextHum" TextWrapping="Wrap" Text="{TemplateBinding Tag}" d:LayoutOverrides="Width, Height" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="21.333"/>
                        </Grid>
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 3

试试这个示例 .....

它像原生应用一样运行良好

https://mohamedsaqer.wordpress.com/category/xaml/

Answer 4

您应该使用 RelativePanel 元素：

<SplitView.Pane>
    <RelativePanel>
        <StackPanel RelativePanel.AlignTopWithPanel="True">
            ...
        </StackPanel>
        <StackPanel RelativePanel.AlignBottomWithPanel="True">
            ...
        </StackPanel>
    </RelativePanel>
</SplitView.Pane>

Answer 5

在 RelativePanel 中使用 2 个 ListBox。在向下列表框中设置 RelativePanel.AlignBottomWithPanel="True" 并且当第一个列表框中的 select 项设置 selectedIndex=-1 用于另一个列表框

<SplitView.Pane>
<RelativePanel>
  <ListBox x:Name="UpperListBox">
     <ListBoxItem .....
  </ListBox>
  <ListBox x:Name="DownListBox" RelativePanel.AlignBottomWithPanel="True">
      <ListBoxItem .....
  </ListBox>
</RelativePanel>

UWP 汉堡包导航窗格底部的菜单按钮

Menu button at the bottom UWP Hamburger Navigation pane

xaml

win-universal-app

uwp-xaml