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项目没有正确堆放在汉堡包按钮下

回答

相关问题