PowerToys/src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml

<UserControl
    x:Class="Microsoft.PowerToys.Settings.UI.Controls.SettingsPageControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tk7controls="using:CommunityToolkit.WinUI.UI.Controls"
    Loaded="UserControl_Loaded"
    mc:Ignorable="d">
    <UserControl.Resources>
        <x:Double x:Key="PageMaxWidth">1000</x:Double>
        <x:Double x:Key="PageHeaderMaxWidth">1020</x:Double>
    </UserControl.Resources>
    <Grid Padding="20,0,0,0" RowSpacing="24">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock
            x:Name="Header"
            MaxWidth="{StaticResource PageHeaderMaxWidth}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            AutomationProperties.HeadingLevel="1"
            Style="{StaticResource TitleTextBlockStyle}"
            Text="{x:Bind ModuleTitle}" />

        <ScrollViewer Grid.Row="1">
            <Grid
                Padding="0,0,20,48"
                ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                RowSpacing="24">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!--  Top panel  -->
                <Grid
                    MaxWidth="{StaticResource PageMaxWidth}"
                    ColumnSpacing="16"
                    RowSpacing="16">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Border
                        MaxWidth="160"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        CornerRadius="{StaticResource OverlayCornerRadius}">
                        <Image AutomationProperties.AccessibilityView="Raw">
                            <Image.Source>
                                <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
                            </Image.Source>
                        </Image>
                    </Border>

                    <StackPanel x:Name="DescriptionPanel" Grid.Column="1">
                        <TextBlock
                            x:Name="AboutDescription"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Text="{x:Bind ModuleDescription}"
                            TextWrapping="Wrap" />

                        <ItemsControl
                            x:Name="PrimaryLinksControl"
                            Margin="0,8,0,0"
                            IsTabStop="False"
                            ItemsSource="{x:Bind PrimaryLinks}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate x:DataType="controls:PageLink">
                                    <HyperlinkButton NavigateUri="{x:Bind Link}" Style="{StaticResource TextButtonStyle}">
                                        <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
                                    </HyperlinkButton>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <tk7controls:WrapPanel HorizontalSpacing="24" Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
                </Grid>

                <!--  Content panel  -->
                <ContentPresenter
                    x:Name="ModuleContentPresenter"
                    Grid.Row="1"
                    MaxWidth="{StaticResource PageMaxWidth}"
                    Margin="0,12,0,0"
                    Content="{x:Bind ModuleContent}" />

                <!--  Bottom panel  -->
                <StackPanel
                    x:Name="SecondaryLinksPanel"
                    Grid.Row="2"
                    MaxWidth="{StaticResource PageMaxWidth}"
                    AutomationProperties.Name="{x:Bind SecondaryLinksHeader}"
                    Orientation="Vertical"
                    Visibility="{x:Bind SecondaryLinks.Count, Converter={StaticResource DoubleToVisibilityConverter}}">
                    <TextBlock
                        Margin="2,8,0,0"
                        AutomationProperties.HeadingLevel="Level2"
                        Style="{ThemeResource BodyStrongTextBlockStyle}"
                        Text="{x:Bind SecondaryLinksHeader}" />
                    <ItemsControl
                        x:Name="SecondaryLinksItemControl"
                        Margin="2,0,0,0"
                        IsTabStop="False"
                        ItemsSource="{x:Bind SecondaryLinks}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="controls:PageLink">
                                <HyperlinkButton NavigateUri="{x:Bind Link}" Style="{StaticResource TextButtonStyle}">
                                    <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
                                </HyperlinkButton>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <tk7controls:WrapPanel HorizontalSpacing="24" Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </StackPanel>
            </Grid>
        </ScrollViewer>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DescriptionPanel.(Grid.Row)" Value="1" />
                        <Setter Target="DescriptionPanel.(Grid.Column)" Value="0" />
                        <Setter Target="DescriptionPanel.(Grid.ColumnSpan)" Value="2" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>