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

<Page
    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: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">

    <Page.Resources>
        <DataTemplate x:Key="KeyVisualTemplate">
            <controls:KeyVisual
                VerticalAlignment="Center"
                AutomationProperties.AccessibilityView="Raw"
                Content="{Binding}"
                IsTabStop="False"
                VisualType="TextOnly" />
        </DataTemplate>
        <DataTemplate x:Key="CommaTemplate">
            <StackPanel Background="{ThemeResource SystemFillColorSolidAttentionBackground}">
                <TextBlock
                    Margin="4,0"
                    VerticalAlignment="Bottom"
                    Text="," />
            </StackPanel>
        </DataTemplate>
        <converters:KeyVisualTemplateSelector
            x:Key="KeyVisualTemplateSelector"
            CommaTemplate="{StaticResource CommaTemplate}"
            KeyVisualTemplate="{StaticResource KeyVisualTemplate}" />
        <converters:ModuleItemTemplateSelector
            x:Key="ModuleItemTemplateSelector"
            ButtonTemplate="{StaticResource ModuleItemButtonTemplate}"
            KBMTemplate="{StaticResource ModuleItemKBMTemplate}"
            ShortcutTemplate="{StaticResource ModuleItemShortcutTemplate}"
            TextTemplate="{StaticResource ModuleItemTextTemplate}" />
        <tkconverters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
        <Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
            <Setter Property="IsTabStop" Value="False" />
        </Style>
        <converters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
        <tkconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
        <tkconverters:BoolToVisibilityConverter
            x:Key="BoolToInvertedVisibilityConverter"
            FalseValue="Visible"
            TrueValue="Collapsed" />
        <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
            <controls:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
        </DataTemplate>

        <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
            <controls:KeyVisual Content="{Binding}" VisualType="Small" />
        </DataTemplate>

        <DataTemplate x:Key="ModuleItemTextTemplate" x:DataType="viewmodels:DashboardModuleTextItem">
            <TextBlock
                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                Style="{StaticResource CaptionTextBlockStyle}"
                Text="{x:Bind Label, Mode=OneWay}"
                TextWrapping="WrapWholeWords" />
        </DataTemplate>

        <DataTemplate x:Key="ModuleItemButtonTemplate" x:DataType="viewmodels:DashboardModuleButtonItem">
            <Button
                HorizontalAlignment="Stretch"
                Click="{x:Bind ButtonClickHandler, Mode=OneWay}"
                Content="{x:Bind ButtonTitle}" />
        </DataTemplate>

        <DataTemplate x:Key="ModuleItemShortcutTemplate" x:DataType="viewmodels:DashboardModuleShortcutItem">
            <Grid ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border
                    Padding="8,4"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="{StaticResource ControlCornerRadius}">
                    <ItemsControl
                        AutomationProperties.AccessibilityView="Raw"
                        IsTabStop="False"
                        ItemsSource="{x:Bind Shortcut, Mode=TwoWay}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" Spacing="12" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <controls:KeyVisual
                                    VerticalAlignment="Center"
                                    AutomationProperties.AccessibilityView="Raw"
                                    Content="{Binding}"
                                    IsTabStop="False"
                                    VisualType="TextOnly" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Border>

                <TextBlock
                    Grid.Column="1"
                    VerticalAlignment="Center"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Text="{x:Bind Label, Mode=OneWay}"
                    TextWrapping="WrapWholeWords" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ModuleItemKBMTemplate" x:DataType="viewmodels:DashboardModuleKBMItem">
            <Button x:Uid="DashboardKBMShowMappingsButton" HorizontalAlignment="Stretch">
                <Button.Flyout>
                    <Flyout
                        x:Name="DetailsFlyout"
                        Placement="Bottom"
                        ShouldConstrainToRootBounds="False">
                        <StackPanel Orientation="Vertical" Spacing="4">
                            <ItemsControl ItemsSource="{x:Bind RemapKeys, Mode=OneWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Spacing="4" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="Lib:KeysDataModel">
                                        <StackPanel Orientation="Horizontal">
                                            <Border
                                                Padding="8,4"
                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                                BorderThickness="1"
                                                CornerRadius="{StaticResource ControlCornerRadius}">
                                                <ItemsControl
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    IsTabStop="False"
                                                    ItemsSource="{x:Bind GetMappedOriginalKeys()}">
                                                    <ItemsControl.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
                                                        </ItemsPanelTemplate>
                                                    </ItemsControl.ItemsPanel>
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <controls:KeyVisual
                                                                VerticalAlignment="Center"
                                                                AutomationProperties.AccessibilityView="Raw"
                                                                Content="{Binding}"
                                                                IsTabStop="False"
                                                                VisualType="TextOnly" />
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </Border>
                                            <controls:IsEnabledTextBlock
                                                x:Uid="To"
                                                Margin="8,0,8,0"
                                                VerticalAlignment="Center"
                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />
                                            <Border
                                                Padding="8,4"
                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                                BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
                                                BorderThickness="1"
                                                CornerRadius="{StaticResource ControlCornerRadius}">
                                                <ItemsControl
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    IsTabStop="False"
                                                    ItemsSource="{x:Bind GetMappedNewRemapKeys(15)}">
                                                    <ItemsControl.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
                                                        </ItemsPanelTemplate>
                                                    </ItemsControl.ItemsPanel>
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <controls:KeyVisual
                                                                VerticalAlignment="Center"
                                                                AutomationProperties.AccessibilityView="Raw"
                                                                Content="{Binding}"
                                                                FontSize="12"
                                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
                                                                IsTabStop="False"
                                                                VisualType="TextOnly" />
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </Border>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                            <ItemsControl ItemsSource="{x:Bind RemapShortcuts, Mode=OneWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Spacing="4" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
                                        <StackPanel Orientation="Horizontal">
                                            <Border
                                                Padding="8,0"
                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                                BorderThickness="1"
                                                CornerRadius="{StaticResource ControlCornerRadius}">
                                                <ItemsControl
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    IsTabStop="False"
                                                    ItemTemplateSelector="{StaticResource KeyVisualTemplateSelector}"
                                                    ItemsSource="{x:Bind GetMappedOriginalKeysWithSplitChord()}">
                                                    <ItemsControl.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
                                                        </ItemsPanelTemplate>
                                                    </ItemsControl.ItemsPanel>
                                                </ItemsControl>
                                            </Border>
                                            <controls:IsEnabledTextBlock
                                                x:Uid="To"
                                                Margin="8,0,8,0"
                                                VerticalAlignment="Center"
                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
                                            <controls:IsEnabledTextBlock
                                                x:Uid="Starts"
                                                Margin="8,0,8,0"
                                                VerticalAlignment="Center"
                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay}" />
                                            <Border
                                                Padding="8,4"
                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                                BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
                                                BorderThickness="1"
                                                CornerRadius="{StaticResource ControlCornerRadius}">
                                                <ItemsControl
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    IsTabStop="False"
                                                    ItemsSource="{x:Bind GetMappedNewRemapKeys(15)}">
                                                    <ItemsControl.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
                                                        </ItemsPanelTemplate>
                                                    </ItemsControl.ItemsPanel>
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <controls:KeyVisual
                                                                VerticalAlignment="Center"
                                                                AutomationProperties.AccessibilityView="Raw"
                                                                Content="{Binding}"
                                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
                                                                IsTabStop="False"
                                                                VisualType="TextOnly" />
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </Border>
                                            <TextBlock
                                                Margin="4,0,0,0"
                                                VerticalAlignment="Center"
                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
                                                Text="{x:Bind TargetApp}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </DataTemplate>
    </Page.Resources>
    <Grid Margin="16,0,0,0" RowSpacing="24">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock
            x:Uid="DashboardTitle"
            VerticalAlignment="Center"
            Style="{StaticResource TitleTextBlockStyle}" />

        <InfoBar
            x:Uid="UpdateAvailable"
            Margin="0,0,16,0"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            CornerRadius="8"
            IsClosable="False"
            IsOpen="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"
            Severity="Informational">
            <InfoBar.ActionButton>
                <Button x:Uid="LearnMore" Click="SWVersionButtonClicked" />
            </InfoBar.ActionButton>
        </InfoBar>

        <ScrollViewer x:Name="MainScrollViewer" Grid.Row="1">
            <StackPanel Padding="0,0,16,16" Orientation="Vertical">
                <TextBlock
                    x:Uid="EnabledModules"
                    Margin="0,0,0,12"
                    Style="{StaticResource SubtitleTextBlockStyle}" />
                <ItemsRepeater x:Name="DashboardView" ItemsSource="{x:Bind ViewModel.ActiveModules, Mode=OneWay}">
                    <ItemsRepeater.Layout>
                        <tkcontrols:StaggeredLayout
                            ColumnSpacing="8"
                            DesiredColumnWidth="378"
                            RowSpacing="8" />
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="viewmodels:DashboardListItem">
                            <Button
                                Padding="0"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Stretch"
                                AutomationProperties.Name="{x:Bind Label}"
                                Background="Transparent"
                                BorderThickness="0"
                                Click="DashboardListItemClick"
                                CornerRadius="{StaticResource OverlayCornerRadius}"
                                Tag="{x:Bind Tag, Mode=OneWay}">
                                <Grid
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                    BorderThickness="1"
                                    CornerRadius="{StaticResource OverlayCornerRadius}"
                                    RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Grid Margin="16,8,16,0" ColumnSpacing="12">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Image Width="20" Margin="0,0,0,0">
                                            <Image.Source>
                                                <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                            </Image.Source>
                                        </Image>
                                        <TextBlock
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            FontWeight="SemiBold"
                                            Text="{x:Bind Label, Mode=OneWay}"
                                            TextTrimming="CharacterEllipsis" />
                                        <FontIcon
                                            Grid.Column="2"
                                            Width="20"
                                            Margin="0,0,-12,0"
                                            FontSize="16"
                                            Glyph="&#xE72E;"
                                            Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
                                            </ToolTipService.ToolTip>
                                        </FontIcon>
                                        <ToggleSwitch
                                            x:Uid="Enable_Module"
                                            Grid.Column="3"
                                            Margin="0,-2,0,0"
                                            HorizontalAlignment="Right"
                                            AutomationProperties.HelpText="{x:Bind Label}"
                                            IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
                                            IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
                                            OffContent=""
                                            OnContent=""
                                            Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
                                    </Grid>

                                    <ItemsControl
                                        Grid.Row="1"
                                        Margin="16,8,16,16"
                                        IsTabStop="False"
                                        ItemTemplateSelector="{StaticResource ModuleItemTemplateSelector}"
                                        ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}"
                                        Visibility="{x:Bind IsEnabled, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Spacing="4" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                </Grid>
                            </Button>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>

                <TextBlock
                    x:Uid="DisabledModules"
                    Margin="0,24,0,12"
                    Style="{StaticResource SubtitleTextBlockStyle}" />

                <ItemsRepeater ItemsSource="{x:Bind ViewModel.DisabledModules, Mode=OneWay}">
                    <ItemsRepeater.Layout>
                        <tkcontrols:StaggeredLayout
                            ColumnSpacing="8"
                            DesiredColumnWidth="378"
                            RowSpacing="8" />
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="viewmodels:DashboardListItem">
                            <Button
                                Padding="0"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Stretch"
                                AutomationProperties.Name="{x:Bind Label}"
                                Background="Transparent"
                                BorderThickness="0"
                                Click="DashboardListItemClick"
                                CornerRadius="{StaticResource OverlayCornerRadius}"
                                Tag="{x:Bind Tag, Mode=OneWay}">
                                <Grid
                                    Padding="16,12"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                    BorderThickness="1"
                                    CornerRadius="{StaticResource OverlayCornerRadius}"
                                    RowSpacing="12">
                                    <Grid ColumnSpacing="12">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Image Width="20">
                                            <Image.Source>
                                                <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                            </Image.Source>
                                        </Image>
                                        <TextBlock
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            FontWeight="SemiBold"
                                            Text="{x:Bind Label, Mode=OneWay}"
                                            TextTrimming="CharacterEllipsis" />
                                        <FontIcon
                                            Grid.Column="2"
                                            Width="20"
                                            Margin="0,0,-12,0"
                                            FontSize="16"
                                            Glyph="&#xE72E;"
                                            Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
                                            </ToolTipService.ToolTip>
                                        </FontIcon>
                                        <ToggleSwitch
                                            x:Uid="Enable_Module"
                                            Grid.Column="3"
                                            Margin="0,-2,0,0"
                                            HorizontalAlignment="Right"
                                            AutomationProperties.HelpText="{x:Bind Label}"
                                            IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
                                            IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
                                            OffContent=""
                                            OnContent=""
                                            Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
                                    </Grid>
                                </Grid>
                            </Button>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </StackPanel>

        </ScrollViewer>
    </Grid>
</Page>