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" のデフォルトのパディングを（それが余裕の反対です）があります。 ListBoxItemsのPaddingを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>