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

Answers


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>


try this sample .....

it's working good like a native app

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


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.


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>

You should use a RelativePanel element:

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

Need Your Help

How Should I Design TAX Table?

sql sql-server database oracle database-design

I have a db with many tables. Some tables have unit price column, no tax, gst and such columns. What should i do now? Should i create GST table, HST table and PST table separately. In other words, ...

3D Geometry: Transform One Pair of Points to be Aligned Parallel to Another

3d geometry transform direct3d

I have a line (actually a cube) going from (x1,y1,z1) to (x2,y2,z2). I would like to rotate it so that it is aligned along another line going from (x3,y3,z3) to (x4,y4,z4). Presently I am using Math::