如何创建与页面'Settings'相同的按钮？

Question

我想在我的UWP/XAML应用程序上创建按钮，类似于使用WinUI 3库在Windows"设置"页面上的按钮。图库没有显示这种带有图标和标题/描述的按钮。我想知道它是如何完成的，因为我正在开发一款应用程序，主要作为一个门户网站，通过web/PC应用程序轻松导航。如有任何帮助，不胜感激。

我希望按钮简单地将用户重定向到NavigationView页面(Page5.xaml)

我在主页上有一个NavigationView。xaml和这些按钮都在Page4上，所以我不确定如何将这些按钮编程到page5上xaml

https://i.stack.imgur.com/7Uff8.png

Answer 1

您可以创建一个usercontrol并使用我的一些代码:

MyUserControl.xaml:

<Grid x:Name="MainGrid" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited" PointerPressed="FontIcon_PointerPressed" Margin="20,5,20,5" Height="70" CornerRadius="5" Padding="{StaticResource ExpanderHeaderPadding}" HorizontalAlignment="Stretch" Background="{ThemeResource ExpanderHeaderBackground}" BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}" BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}">
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8D2;" Margin="0,0,20,0"/>
<TextBlock FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Font"/>
</StackPanel>
<FontIcon  FontFamily="Segoe MDL2 Assets" Glyph="&#xE76C;" HorizontalAlignment="Right" Margin="0,0,20,0"/>
</Grid>

MyUserControl1.xaml.cs:

public MyUserControl1()
{
this.InitializeComponent();
var color = (MainGrid.Background as SolidColorBrush).Color;
color.A = 20;
MainGrid.Background = new SolidColorBrush(color);
}
private void FontIcon_PointerPressed(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(sender as UIElement).Properties.IsLeftButtonPressed)
{
//Do whatever you want
Debug.WriteLine("Pressed");
}
}
//Change the color on hover:
private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
var color = (MainGrid.Background as SolidColorBrush).Color;
color.A = 50;
MainGrid.Background = new SolidColorBrush(color);
}
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
var color = (MainGrid.Background as SolidColorBrush).Color;
color.A = 20;
MainGrid.Background = new SolidColorBrush(color);
}