Menu button at the bottom UWP Hamburger Navigation pane

问题

I am currently building a hamburger menu for my UWP app build using SplitView.Pane. The "Buttons" are listBoxItems in a listBox. Is there a way to make the setting icon be located at the bottom of the SplitView.Pane like in the native windows new App...Thanks

回答1:

use 2 ListBox inside a RelativePanel. in down listbox set RelativePanel.AlignBottomWithPanel="True" and when select item from the fist listbox set the selectedIndex=-1 for the other listBox

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

回答2:

try this sample .....

it's working good like a native app

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

回答3:

There is no easy (if any) way to align part of ListBox items on the top and another part on the bottom, so the answer is pretty simple - don't use ListBox and build necessary layout manually. For example, like this:

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

Btw, it's recommended to use ListView instead of ListBox in UWP apps.

回答4:

I have an app with ham menu and I use Radio Buttons. In the group propertie of radio button I use the same group name. That way you can use any layout you like, for ex grid, with stack panels and your buttons can be anywhere. When you tapp any button it will selected like listview and tapping another one will unselect and select the new one.

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>

Radio button Style

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

回答5:

You should use a RelativePanel element:

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

来源：https://stackoverflow.com/questions/36522802/menu-button-at-the-bottom-uwp-hamburger-navigation-pane