splitview項目沒有正確堆放在漢堡包按鈕下

我在Visual Studio 2015上工作，並試圖做一個漢堡包樣式的導航......但splitview的窗格項目自動獲得一個保證金，而不是正確堆疊在漢堡按鈕下方[看附圖]。我希望它們能夠正確堆疊在網格最左邊的漢堡按鈕之下。我想使用列表框，以便當用戶導航到不同的頁面時，它仍然選中/突出顯示，所以我不能刪除它。我附上了MainPage.xaml代碼和我用過的樣式代碼。希望你會幫助..謝謝！splitview項目沒有正確堆放在漢堡包按鈕下

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

This is a screenshot of the designer view

來源

2017-01-15 Pratyush Pareek

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>

來源

2017-01-16 00:06:18 schumi1331

對不起schumi1331 ...它仍然是一樣的 –

你有沒有添加填充？我只是注意到我忘記了我的代碼，所以我已經更新了它。 – schumi1331

splitview項目沒有正確堆放在漢堡包按鈕下

回答

相關問題