PowerToys/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml

<local:NavigablePage
    x:Class="Microsoft.PowerToys.Settings.UI.Views.DashboardPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:controlConverters="using:Microsoft.PowerToys.Settings.UI.Controls.Converters"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
    xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
    AutomationProperties.LandmarkType="Main"
    DataContext="DashboardViewModel"
    mc:Ignorable="d">
    <local:NavigablePage.Resources>
        <converters:ModuleItemTemplateSelector
            x:Key="ModuleItemTemplateSelector"
            ActivationTemplate="{StaticResource ModuleItemActivationTemplate}"
            ShortcutTemplate="{StaticResource ModuleItemShortcutTemplate}" />
        <controlConverters:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
        <converters:EnumToModuleListSortOptionConverter x:Key="EnumToModuleListSortOptionConverter" />
        <DataTemplate x:Key="ModuleItemShortcutTemplate" x:DataType="viewmodels:DashboardModuleShortcutItem">
            <Grid MinHeight="36" ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" MinWidth="140" />
                </Grid.ColumnDefinitions>
                <ItemsControl
                    Grid.Column="1"
                    HorizontalAlignment="Left"
                    AutomationProperties.AccessibilityView="Raw"
                    IsTabStop="False"
                    ItemsSource="{x:Bind Shortcut, Mode=OneWay}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Spacing="4" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <controls:KeyVisual
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"
                                Content="{Binding}"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                IsTabStop="False"
                                RenderKeyAsGlyph="True" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <TextBlock
                    VerticalAlignment="Center"
                    Text="{x:Bind Label, Mode=OneWay}"
                    TextWrapping="WrapWholeWords" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ModuleItemActivationTemplate" x:DataType="viewmodels:DashboardModuleActivationItem">
            <Grid MinHeight="36" ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" MinWidth="140" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    VerticalAlignment="Center"
                    Text="{x:Bind Label, Mode=OneWay}"
                    TextWrapping="WrapWholeWords" />
                <TextBlock
                    Grid.Column="1"
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Text="{x:Bind Activation, Mode=OneWay}"
                    TextWrapping="WrapWholeWords" />
            </Grid>
        </DataTemplate>
    </local:NavigablePage.Resources>
    <Grid Margin="16,0,0,0" RowSpacing="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock
            x:Uid="DashboardTitle"
            MaxWidth="{StaticResource PageMaxWidth}"
            Margin="1,0,0,0"
            VerticalAlignment="Center"
            AutomationProperties.HeadingLevel="1"
            Style="{StaticResource TitleTextBlockStyle}" />
        <Grid
            Grid.Row="1"
            MaxWidth="{StaticResource PageMaxWidth}"
            Padding="0,0,20,0"
            ColumnSpacing="16">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Button
                Padding="0,0,8,0"
                AutomationProperties.Name="WhatsNewButton"
                Click="WhatsNewButton_Click"
                Style="{StaticResource SubtleButtonStyle}">
                <Grid ColumnSpacing="16">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid CornerRadius="{StaticResource OverlayCornerRadius}">
                        <Image
                            Width="120"
                            AutomationProperties.AccessibilityView="Raw"
                            Source="ms-appx:///Assets/Settings/Modules/PT.png" />
                        <Grid Background="{ThemeResource SmokeFillColorDefaultBrush}" />
                    </Grid>
                    <StackPanel
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        Orientation="Vertical">
                        <TextBlock x:Uid="LearnWhatsNew" FontWeight="SemiBold" />
                        <TextBlock
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="{x:Bind ViewModel.PowerToysVersion, Mode=OneWay}" />
                    </StackPanel>
                </Grid>
            </Button>
            <StackPanel
                x:Name="TopButtonPanel"
                Grid.Column="1"
                Orientation="Horizontal"
                Spacing="16">
                <controls:ShortcutConflictControl AllHotkeyConflictsData="{x:Bind ViewModel.AllHotkeyConflictsData, Mode=OneWay}" />
                <controls:CheckUpdateControl />
            </StackPanel>
        </Grid>
        <ScrollViewer x:Name="MainScrollViewer" Grid.Row="2">
            <Grid>
                <!--  This grid is required to ensure that the content is horizontally aligned  -->
                <Grid
                    MaxWidth="{StaticResource PageMaxWidth}"
                    Padding="0,0,20,48"
                    ColumnSpacing="16"
                    RowSpacing="16">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <controls:Card x:Uid="QuickAccessTitle" VerticalAlignment="Top">
                        <Grid>
                            <controls:QuickAccessList
                                x:Name="QuickAccessItemsControl"
                                Margin="8,0,12,12"
                                ItemsSource="{x:Bind ViewModel.QuickAccessItems, Mode=OneWay}"
                                Visibility="{x:Bind ViewModel.QuickAccessItems.Count, Mode=OneWay, Converter={StaticResource DoubleToVisibilityConverter}}" />
                            <TextBlock
                                x:Uid="NoActionsToShow"
                                Margin="12"
                                HorizontalAlignment="Left"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Visibility="{x:Bind ViewModel.QuickAccessItems.Count, Mode=OneWay, Converter={StaticResource DoubleToInvertedVisibilityConverter}}" />
                        </Grid>
                    </controls:Card>
                    <controls:Card
                        x:Uid="ShortcutsOverview"
                        Grid.Row="1"
                        VerticalAlignment="Top">
                        <Grid>
                            <ItemsRepeater
                                Grid.Row="2"
                                Margin="8,0,0,0"
                                ItemsSource="{x:Bind ViewModel.ShortcutModules, Mode=OneWay}">
                                <ItemsRepeater.Layout>
                                    <StackLayout Orientation="Vertical" Spacing="0" />
                                </ItemsRepeater.Layout>
                                <ItemsRepeater.ItemTemplate>
                                    <DataTemplate x:DataType="viewmodels:DashboardListItem">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="32" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Image
                                                Width="16"
                                                Margin="0,10,0,0"
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Top"
                                                AutomationProperties.AccessibilityView="Raw"
                                                Source="{x:Bind Icon, Mode=OneWay}"
                                                ToolTipService.ToolTip="{x:Bind Label}" />
                                            <ItemsControl
                                                Grid.Column="1"
                                                IsTabStop="False"
                                                ItemTemplateSelector="{StaticResource ModuleItemTemplateSelector}"
                                                ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}">
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <StackPanel Spacing="0" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                            </ItemsControl>
                                        </Grid>
                                    </DataTemplate>
                                </ItemsRepeater.ItemTemplate>
                            </ItemsRepeater>
                            <TextBlock
                                x:Uid="NoShortcutsToShow"
                                Margin="12"
                                HorizontalAlignment="Left"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Visibility="{x:Bind ViewModel.ShortcutModules.Count, Mode=OneWay, Converter={StaticResource DoubleToInvertedVisibilityConverter}}" />
                        </Grid>
                    </controls:Card>
                    <controls:Card
                        x:Uid="UtilitiesHeader"
                        Grid.RowSpan="2"
                        Grid.Column="1"
                        MinWidth="400"
                        Padding="0"
                        VerticalAlignment="Top"
                        DividerVisibility="Collapsed">
                        <controls:Card.TitleContent>
                            <Button
                                x:Uid="Dashboard_SortBy"
                                Margin="0,0,4,0"
                                VerticalAlignment="Center"
                                Style="{StaticResource SubtleButtonStyle}">
                                <ToolTipService.ToolTip>
                                    <TextBlock x:Uid="Dashboard_SortBy_ToolTip" />
                                </ToolTipService.ToolTip>
                                <Button.Content>
                                    <FontIcon FontSize="16" Glyph="&#xE8CB;" />
                                </Button.Content>
                                <Button.Flyout>
                                    <MenuFlyout>
                                        <ToggleMenuFlyoutItem
                                            x:Uid="Dashboard_SortAlphabetical"
                                            Click="SortAlphabetical_Click"
                                            IsChecked="{x:Bind ViewModel.DashboardSortOrder, Mode=OneWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Alphabetical}" />
                                        <ToggleMenuFlyoutItem
                                            x:Uid="Dashboard_SortByStatus"
                                            Click="SortByStatus_Click"
                                            IsChecked="{x:Bind ViewModel.DashboardSortOrder, Mode=OneWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=ByStatus}" />
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>
                        </controls:Card.TitleContent>
                        <controls:ModuleList
                            x:Name="ModulesCard"
                            Grid.Row="1"
                            ItemsSource="{x:Bind ViewModel.AllModules, Mode=OneWay}"
                            SortOption="{x:Bind ViewModel.DashboardSortOrder, Mode=TwoWay, Converter={StaticResource EnumToModuleListSortOptionConverter}}" />
                    </controls:Card>
                </Grid>
            </Grid>
        </ScrollViewer>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="840" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="TopButtonPanel.(Grid.Row)" Value="1" />
                        <Setter Target="TopButtonPanel.Margin" Value="0,16,0,0" />
                        <Setter Target="TopButtonPanel.(Grid.Column)" Value="0" />
                        <Setter Target="ModulesCard.(Grid.Column)" Value="0" />
                        <Setter Target="ModulesCard.(Grid.Row)" Value="2" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</local:NavigablePage>