I want to make a navigation view like Microsoft Store.
So far I have done this.
But there is two problem.
How can I solve this problem. Here is my 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="" 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>
An easy fix is to use a negative left margin for the StackPanel
:
<NavigationViewItem Tag="SamplePage1" Height="80" BackgroundSizing="OuterBorderEdge">
<StackPanel HorizontalAlignment="Center" Margin="-5 0 0 0">
<TextBlock Text="" ... />
...
You could adjust the value ( -5
in the sample markup above) according to your requirements and size.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.