Question

我目前正在使用SplitView.Pane为我的UWP应用构建构建汉堡菜单。 “按钮”是listBox中的listBoxItems。有没有办法让设置图标位于SplitView.Pane的底部，就像在原生Windows新应用程序中...谢谢

Answer 1

试试这个样本......

它像本机应用程序一样好用

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

Answer 2

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

Hum Menu

   <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

您应该使用RelativePanel元素：

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

Answer 4

在RelativePanel中使用2个ListBox。在下方列表框中设置RelativePanel.AlignBottomWithPanel =＆＃34; True＆＃34;当从第一个列表框中选择项目时，为其他listBox设置selectedIndex = -1

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

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

4 个答案: