There is a stanitsa on which the menu is a "gambourgeter". Implemented like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <RelativePanel> <Button x:Name="HamburgerButton" RelativePanel.AlignLeftWithPanel="True" FontFamily="Segoe MDL2 Assets" FontSize="30" Content="&#xE700;" Click="HamburgerButton_Click" Background="#FF238072"/> <TextBlock Name="TitleTextBlock" RelativePanel.RightOf="HamburgerButton" FontSize="26" FontWeight="Bold" Margin="30 5 0 0" /> </RelativePanel> <SplitView Name="mySplitView" Grid.Row="1" OpenPaneLength="240" DisplayMode="CompactInline" CompactPaneLength="50" Loading="mySplitView_Loading"> <SplitView.Pane> <ListBox x:Name="menu" SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged"> <ListBoxItem Name="MyPage"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="28" FontFamily="Segoe MDL2 Assets" Text="&#xE77B;" /> <TextBlock FontSize="24" Text="Моя страница" Margin="10 0 0 0" /> </StackPanel> </ListBoxItem> <ListBoxItem Name="Groups"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="28" FontFamily="Segoe MDL2 Assets" Text="&#xE716;"/> <TextBlock FontSize="24" Text="Сообщества" Margin="10 0 0 0" /> </StackPanel> </ListBoxItem> <ListBoxItem Name="Login" VerticalAlignment="Bottom"> <StackPanel Orientation="Horizontal"> <Image x:Name="Login_Image" Visibility="Collapsed" Width="30" Height="30" Margin="0" HorizontalAlignment="Left"/> <TextBlock x:Name="Login_Icon" FontSize="28" FontFamily="Segoe MDL2 Assets" Text="&#xE8FA;"/> <TextBlock x:Name="Login_Text" FontSize="24" Text="Войти" Margin="10 0 0 0"/> </StackPanel> </ListBoxItem> </ListBox> </SplitView.Pane> <SplitView.Content> <Frame Name="Content" /> </SplitView.Content> </SplitView> </Grid>

It looks like this: The current menu view

I would like to get a menu that will leave completely (in my case, there is a black piece to the right of the "hamburger" button) as here and the element pressed to the bottom: enter image description here

I tried to remove the TextBlock to the right of the button and play a little with the attributes until nothing came out worthwhile.

    1 answer 1

    Button and SplitView are in different rows of the grid. Make them in one line, and indent the contents of the SplitView panel so that the button does not overlap the menu items. Well, Zindex at the button increase, so that it is always on top.

    • With the button, I didn’t really make the right decision, but I just made the button as a ListBoxItem. Now I can not press the last item to the bottom. - Kind_predatoR
    • On the example of the second screenshot: The bottom item does not apply to the main menu. Make the same grid in the menu bar with several lines. In the top line, place the search, in the second - with the leaves from the main menu, in the third - the "Playlists" button, in the fourth - the settings button. You are all trying to fit in one list, but these are different elements. - Make Makeluv
    • I tried to follow your advice, but due to little experience I could not achieve the desired result in full. Here's what happened at the moment: screenshot . Here is the code - Kind_predatoR
    • Understood, thanks! - Kind_predatoR