0

我想制作一个类似 Microsoft Store 的导航视图。

微软商店

到目前为止,我已经做到了。

我的应用

但是有两个问题。

  1. 图标和文本未居中。
  2. 选择指标非常小。

我怎么解决这个问题。这是我的 xaml。

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Torrent"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:Custom="using:System.Numerics"
x:Class="Torrent.MainPage"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


<muxc:NavigationView 
    x:Name="nvSample"
    IsBackButtonVisible="Collapsed" IsPaneToggleButtonVisible="False" PaneDisplayMode="LeftCompact" CompactPaneLength="80" FontSize="24" >

    <muxc:NavigationView.MenuItems>
        <!--<muxc:NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />-->
        <muxc:NavigationViewItem Tag="SamplePage1" Height="80" BackgroundSizing="OuterBorderEdge">
            <StackPanel HorizontalAlignment="Center">
                <TextBlock Text="&#xE138;" FontFamily="Segoe Fluent Icons" FontSize="26" HorizontalAlignment="Center" />
                <TextBlock Text="All" HorizontalAlignment="Center" />
            </StackPanel>
        </muxc:NavigationViewItem>
    </muxc:NavigationView.MenuItems>

    <Frame x:Name="contentFrame"/>
</muxc:NavigationView>
4

1 回答 1

0

一个简单的解决方法是使用负左边距StackPanel

<NavigationViewItem Tag="SamplePage1" Height="80" BackgroundSizing="OuterBorderEdge">
    <StackPanel HorizontalAlignment="Center" Margin="-5 0 0 0">
        <TextBlock Text="&#xE138;" ... />
        ...

-5您可以根据您的要求和大小调整值(在上面的示例标记中)。

于 2021-07-16T12:01:58.363 回答