Элементы splitview неправильно укладываются под кнопкой гамбургера

Question

Я работаю над Visual Studio 2015 и пытаюсь сделать навигацию по стилю гамбургера ... но элементы панели splitview автоматически получают маржу и не являются правильная укладка под кнопкой гамбургера [см. прикрепленное изображение]. Я хочу, чтобы они правильно складывались под кнопкой «Гамбургер» в самой левой части сетки. Я хочу использовать список, чтобы при переходе пользователя на другую страницу он оставался выбранным/выделенным, поэтому я не могу его удалить. Я прикрепил код MainPage.xaml и код стиля, который я использовал. Надеюсь, ты поможешь .. Спасибо!

<Page 
x:Class="MathAssistant.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:MathAssistant" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

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

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="50" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="25" Background="BlueViolet"/> 

    <TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="36" Foreground="CornflowerBlue" /> 

    <SplitView Grid.Row="1" 
       Grid.ColumnSpan="2" 
       Name="Menu" 
       DisplayMode="CompactOverlay" 
       OpenPaneLength="270" 
       CompactPaneLength="56"> 
     <SplitView.Pane> 
      <ListBox SelectionMode="Single" 
        SelectionChanged="MenuListBox_SelectionChanged"> 
       <ListBoxItem Name="MenuItemUnitConverter"> 
        <StackPanel Orientation="Horizontal"> 
         <Image Margin="0" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" /> 
         <TextBlock FontSize="24" Margin="20,0,0,0"> 
          <Run Text="Unit Converter"/> 
         </TextBlock> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="MenuItemCalculator" > 
        <StackPanel Orientation="Horizontal"> 
         <Image Margin="0" Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/> 
         <TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock> 
        </StackPanel> 
       </ListBoxItem> 
      </ListBox> 
     </SplitView.Pane> 
     <SplitView.Content> 
      <Frame Name="MyFrame" Grid.Column="1" Grid.Row="1"></Frame> 
     </SplitView.Content> 
    </SplitView> 

</Grid> 

<Application.Resources> 
    <Style TargetType="Image" x:Key="SplitviewLogoStyle"> 
     <Setter Property="Height" Value="50" /> 
     <Setter Property="Width" Value="45" /> 
    </Style> 

Answer 1

ListBoxItem имеет отступы по умолчанию (что противоположно перевесом) из "12,11,12,13". Попробуйте установить Padding из списка ListBoxItems в 0, затем его следует выровнять влево. Для того, чтобы установить его в центре вы могли бы сделать что-то вроде этого:

<ListBoxItem Name="MenuItemUnitConverter" Padding="0"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Margin="4" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" /> 
     <TextBlock FontSize="24" Margin="20,0,0,0"> 
      <Run Text="Unit Converter"/> 
     </TextBlock> 
    </StackPanel> 
</ListBoxItem> 

И изменить стиль настолько запас, что изображение на левой ширине + + Отступ на правом = SplitView.Width (4 + 48 + 4 = 56):

<Style TargetType="Image" x:Key="SplitviewLogoStyle"> 
    <Setter Property="Height" Value="50" /> 
    <Setter Property="Width" Value="48" /> 
</Style>