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: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}" />
        <converters:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
        <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"
            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>
                            <ItemsControl
                                x:Name="QuickAccessItemsControl"
                                Margin="8,0,12,12"
                                ItemsSource="{x:Bind ViewModel.ActionModules, Mode=OneWay}"
                                Visibility="{x:Bind ViewModel.ActionModules.Count, Mode=OneWay, Converter={StaticResource DoubleToVisibilityConverter}}">

                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <tkcontrols:WrapPanel
                                            Padding="12"
                                            HorizontalSpacing="16"
                                            VerticalSpacing="24" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="viewmodels:DashboardListItem">
                                        <ItemsControl IsTabStop="False" ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate x:DataType="viewmodels:DashboardModuleButtonItem">
                                                    <controls:FlyoutMenuButton AutomationProperties.Name="{x:Bind ButtonTitle}" Click="{x:Bind ButtonClickHandler}">
                                                        <controls:FlyoutMenuButton.Content>
                                                            <TextBlock
                                                                Style="{StaticResource CaptionTextBlockStyle}"
                                                                Text="{x:Bind ButtonTitle}"
                                                                TextAlignment="Center"
                                                                TextWrapping="Wrap" />
                                                        </controls:FlyoutMenuButton.Content>
                                                        <controls:FlyoutMenuButton.Icon>
                                                            <Image Width="24">
                                                                <Image.Source>
                                                                    <BitmapImage UriSource="{x:Bind ButtonGlyph}" />
                                                                </Image.Source>
                                                            </Image>
                                                        </controls:FlyoutMenuButton.Icon>
                                                        <ToolTipService.ToolTip>
                                                            <ToolTip Content="{x:Bind ButtonDescription}" />
                                                        </ToolTipService.ToolTip>
                                                    </controls:FlyoutMenuButton>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>

                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Spacing="0" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

                            <TextBlock
                                x:Uid="NoActionsToShow"
                                Margin="12"
                                HorizontalAlignment="Left"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Visibility="{x:Bind ViewModel.ActionModules.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:Name="ModulesCard"
                        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>

                        <ItemsRepeater
                            x:Name="DashboardView"
                            Grid.Row="1"
                            ItemsSource="{x:Bind ViewModel.AllModules, Mode=OneWay}">
                            <ItemsRepeater.Layout>
                                <StackLayout Orientation="Vertical" Spacing="0" />
                            </ItemsRepeater.Layout>
                            <ItemsRepeater.ItemTemplate>
                                <DataTemplate x:DataType="viewmodels:DashboardListItem">
                                    <tkcontrols:SettingsCard
                                        MinHeight="0"
                                        Padding="12,4,12,4"
                                        AutomationProperties.Name="{x:Bind Label}"
                                        Background="Transparent"
                                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                                        BorderThickness="0,1,0,0"
                                        Click="DashboardListItemClick"
                                        CornerRadius="0"
                                        IsClickEnabled="True"
                                        Tag="{x:Bind Tag}">
                                        <tkcontrols:SettingsCard.Resources>
                                            <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
                                            <x:Double x:Key="SettingsCardHeaderIconMaxSize">16</x:Double>
                                        </tkcontrols:SettingsCard.Resources>
                                        <tkcontrols:SettingsCard.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{x:Bind Label}" />
                                                <InfoBadge
                                                    Margin="4,0,0,0"
                                                    Style="{StaticResource NewInfoBadge}"
                                                    Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}}" />
                                                <FontIcon
                                                    Grid.Column="2"
                                                    Width="20"
                                                    Margin="0,0,-12,0"
                                                    FontSize="16"
                                                    Glyph="&#xE72E;"
                                                    Visibility="{x:Bind IsLocked, Converter={StaticResource ReverseBoolToVisibilityConverter}, ConverterParameter=True}">
                                                    <ToolTipService.ToolTip>
                                                        <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
                                                    </ToolTipService.ToolTip>
                                                </FontIcon>
                                            </StackPanel>
                                        </tkcontrols:SettingsCard.Header>
                                        <tkcontrols:SettingsCard.HeaderIcon>
                                            <ImageIcon>
                                                <ImageIcon.Source>
                                                    <BitmapImage UriSource="{x:Bind Icon}" />
                                                </ImageIcon.Source>
                                            </ImageIcon>
                                        </tkcontrols:SettingsCard.HeaderIcon>
                                        <ToggleSwitch
                                            AutomationProperties.Name="{x:Bind Label}"
                                            IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
                                            IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
                                            OffContent=""
                                            OnContent="" />
                                    </tkcontrols:SettingsCard>
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </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>