How to create an identical button to the one in 'Settings' page? - xaml

Question

I want to create buttons on my UWP/XAML app similar to the buttons on the Windows 'Settings' page using the WinUI 3 library. The gallery didn't show this kind of button with an icon and a title/description. I'm wondering how it can be accomplished since I am developing an app that mostly serves as a portal to go to websites and navigate easily through web/PC apps. Any help would be appreciated.
I want the buttons to simply redirect the user to a NavigationView page (Page5.xaml)
I have a NavigationView on MainPage.xaml and these buttons are going on Page4, so I'm not sure how I can program the buttons to go to Page5.xaml
https://i.stack.imgur.com/7Uff8.png

Answer 1

You can create a usercontrol and use some of my code:
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="" Margin="0,0,20,0"/>
<TextBlock FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Font"/>
</StackPanel>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" 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);
}