Xaml splitview项为';不要在汉堡按钮下面正确堆放
我正在Visual Studio 2015上工作,试图制作一个汉堡包式的导航。。。但是splitview窗格中的项目会自动获得边距,并且没有正确地堆叠在汉堡包按钮下方[查看附加图像]。我想让它们正确地堆在网格最左边的汉堡按钮下面。 我想使用列表框,这样当用户导航到另一个页面时,它将保持选中/突出显示状态,因此我无法删除它。 我已经附上MainPage.xaml代码和我使用的样式代码。希望你能帮忙。。谢谢Xaml splitview项为';不要在汉堡按钮下面正确堆放,xaml,uwp,splitview,Xaml,Uwp,Splitview,我正在Visual Studio 2015上工作,试图制作一个汉堡包式的导航。。。但是splitview窗格中的项目会自动获得边距,并且没有正确地堆叠在汉堡包按钮下方[查看附加图像]。我想让它们正确地堆在网格最左边的汉堡按钮下面。 我想使用列表框,这样当用户导航到另一个页面时,它将保持选中/突出显示状态,因此我无法删除它。 我已经附上MainPage.xaml代码和我使用的样式代码。希望你能帮忙。。谢谢 <Page x:Class="MathAssistant.MainPage" xmln
<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="" 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>
计算器
ListBoxItem
有一个默认的填充(与边距相反)为“12,11,12,13”。尝试将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>
并修改样式,使左侧图像的边距+宽度+右侧图像的边距=拆分视图。宽度(4+48+4=56):
对不起,schumi1331。。。还是一样你加了填充物了吗?我刚刚注意到我的代码中忘记了,所以我已经更新了它。
<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>
<Style TargetType="Image" x:Key="SplitviewLogoStyle">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="48" />
</Style>