terminal/src/cascadia/TerminalSettingsEditor/Profiles.xaml

<!--
    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
    the MIT License. See LICENSE in the project root for license information.
-->
<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:model="using:Microsoft.Terminal.Settings.Model"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <DataTemplate x:Key="EnumRadioButtonTemplate"
                          x:DataType="local:EnumEntry">
                <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
            </DataTemplate>

            <DataTemplate x:Key="EnumComboBoxItemTemplate"
                          x:DataType="local:EnumEntry">
                <TextBlock Text="{x:Bind EnumName, Mode=OneWay}" />
            </DataTemplate>

            <DataTemplate x:Key="FontFaceComboBoxItemTemplate"
                          x:DataType="local:Font">
                <TextBlock FontFamily="{x:Bind Name}"
                           Text="{x:Bind LocalizedName}" />
            </DataTemplate>

            <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
            <local:PercentageConverter x:Key="PercentageConverter" />
            <local:FontWeightConverter x:Key="FontWeightConverter" />
            <local:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter" />
            <local:StringIsEmptyConverter x:Key="StringIsEmptyConverter" />
            <local:PaddingConverter x:Key="PaddingConverter" />
            <local:StringIsNotDesktopConverter x:Key="StringIsNotDesktopConverter" />
            <local:DesktopWallpaperToEmptyStringConverter x:Key="DesktopWallpaperToEmptyStringConverter" />

        </ResourceDictionary>
    </Page.Resources>

    <!--  Use a Grid instead of a StackPanel. StackPanel suppresses the inner ScrollViewer.  -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
                   Grid.Row="0"
                   Margin="{StaticResource StandardIndentMargin}"
                   Style="{StaticResource DisclaimerStyle}"
                   Visibility="{x:Bind State.Profile.IsBaseLayer}" />

        <Pivot x:Name="ProfilesPivot"
               Grid.Row="1"
               Margin="1,0,0,0"
               HorizontalAlignment="Left"
               SelectionChanged="Pivot_SelectionChanged">
            <!--  General Tab  -->
            <PivotItem x:Uid="Profile_General">
                <ScrollViewer>
                    <StackPanel Style="{StaticResource PivotStackStyle}">

                        <!--  Name  -->
                        <!--
                            NOTE: Has/Clear is not bound because we don't want the reset button & override text to appear.
                            Additionally, the JSON stubs generated by auto-generated profiles come with a name,
                            so the name will always be overridden.
                        -->
                        <local:SettingContainer x:Uid="Profile_Name"
                                                Margin="0,0,0,24"
                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                     Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Commandline  -->
                        <local:SettingContainer x:Name="CommandlineContainer"
                                                x:Uid="Profile_Commandline"
                                                Margin="0,0,0,24"
                                                ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
                                                HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                            <StackPanel Orientation="Horizontal">
                                <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                         Text="{x:Bind State.Profile.Commandline, Mode=TwoWay}" />
                                <Button x:Uid="Profile_CommandlineBrowse"
                                        Click="Commandline_Click"
                                        Style="{StaticResource BrowseButtonStyle}" />
                            </StackPanel>
                        </local:SettingContainer>

                        <!--  Starting Directory  -->
                        <local:SettingContainer x:Name="StartingDirectoryContainer"
                                                x:Uid="Profile_StartingDirectory"
                                                Margin="0"
                                                ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
                                                HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Horizontal">
                                    <TextBox IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
                                             Style="{StaticResource TextBoxSettingStyle}"
                                             Text="{x:Bind State.Profile.StartingDirectory, Mode=TwoWay}" />
                                    <Button x:Name="StartingDirectoryBrowse"
                                            x:Uid="Profile_StartingDirectoryBrowse"
                                            Click="StartingDirectory_Click"
                                            IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
                                            Style="{StaticResource BrowseButtonStyle}" />
                                </StackPanel>
                                <CheckBox x:Name="StartingDirectoryUseParentCheckbox"
                                          x:Uid="Profile_StartingDirectoryUseParentCheckbox"
                                          IsChecked="{x:Bind State.Profile.UseParentProcessDirectory, Mode=TwoWay}" />
                            </StackPanel>
                        </local:SettingContainer>

                        <!--  Icon  -->
                        <local:SettingContainer x:Uid="Profile_Icon"
                                                ClearSettingValue="{x:Bind State.Profile.ClearIcon}"
                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}">
                            <StackPanel Orientation="Horizontal">
                                <TextBox FontFamily="Segoe UI, Segoe MDL2 Assets"
                                         Style="{StaticResource TextBoxSettingStyle}"
                                         Text="{x:Bind State.Profile.Icon, Mode=TwoWay}" />
                                <Button x:Uid="Profile_IconBrowse"
                                        Click="Icon_Click"
                                        Style="{StaticResource BrowseButtonStyle}" />
                            </StackPanel>
                        </local:SettingContainer>

                        <!--  Tab Title  -->
                        <local:SettingContainer x:Uid="Profile_TabTitle"
                                                ClearSettingValue="{x:Bind State.Profile.ClearTabTitle}"
                                                HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}">
                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                     Text="{x:Bind State.Profile.TabTitle, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Hidden  -->
                        <local:SettingContainer x:Uid="Profile_Hidden"
                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                            <ToggleSwitch IsOn="{x:Bind State.Profile.Hidden, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Delete Button  -->
                        <StackPanel Margin="{StaticResource StandardControlMargin}">
                            <Button x:Name="DeleteButton"
                                    IsEnabled="{x:Bind State.Profile.CanDeleteProfile}"
                                    Style="{StaticResource DeleteButtonStyle}">
                                <Button.Resources>
                                    <ResourceDictionary>
                                        <ResourceDictionary.ThemeDictionaries>
                                            <ResourceDictionary x:Key="Light">
                                                <SolidColorBrush x:Key="ButtonBackground"
                                                                 Color="Firebrick" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                                 Color="#C23232" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                                 Color="#A21212" />
                                                <SolidColorBrush x:Key="ButtonForeground"
                                                                 Color="White" />
                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                                 Color="White" />
                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                                 Color="White" />
                                            </ResourceDictionary>
                                            <ResourceDictionary x:Key="Dark">
                                                <SolidColorBrush x:Key="ButtonBackground"
                                                                 Color="Firebrick" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                                 Color="#C23232" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                                 Color="#A21212" />
                                                <SolidColorBrush x:Key="ButtonForeground"
                                                                 Color="White" />
                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                                 Color="White" />
                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                                 Color="White" />
                                            </ResourceDictionary>
                                            <ResourceDictionary x:Key="HighContrast">
                                                <SolidColorBrush x:Key="ButtonBackground"
                                                                 Color="{ThemeResource SystemColorButtonFaceColor}" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                                 Color="{ThemeResource SystemColorHighlightColor}" />
                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                                 Color="{ThemeResource SystemColorHighlightColor}" />
                                                <SolidColorBrush x:Key="ButtonForeground"
                                                                 Color="{ThemeResource SystemColorButtonTextColor}" />
                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                                 Color="{ThemeResource SystemColorHighlightTextColor}" />
                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                                 Color="{ThemeResource SystemColorHighlightTextColor}" />
                                            </ResourceDictionary>
                                        </ResourceDictionary.ThemeDictionaries>
                                    </ResourceDictionary>
                                </Button.Resources>
                                <Button.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                                  Glyph="&#xE74D;" />
                                        <TextBlock x:Uid="Profile_DeleteButton"
                                                   Margin="10,0,0,0" />
                                    </StackPanel>
                                </Button.Content>
                                <Button.Flyout>
                                    <Flyout>
                                        <StackPanel>
                                            <TextBlock x:Uid="Profile_DeleteConfirmationMessage"
                                                       Style="{StaticResource CustomFlyoutTextStyle}" />
                                            <Button x:Uid="Profile_DeleteConfirmationButton"
                                                    Click="DeleteConfirmation_Click" />
                                        </StackPanel>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                            <TextBlock x:Name="DeleteButtonDisclaimer"
                                       VerticalAlignment="Center"
                                       Style="{StaticResource DisclaimerStyle}" />
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>
            </PivotItem>

            <!--  Appearance Tab  -->
            <PivotItem x:Uid="Profile_Appearance">
                <ScrollViewer>
                    <StackPanel>
                        <StackPanel Style="{StaticResource PivotStackStyle}">
                            <!--  Grouping: Text  -->
                            <TextBlock x:Uid="Profile_TextHeader"
                                       Style="{StaticResource SubtitleTextBlockStyle}" />

                            <!--  Color Scheme  -->
                            <local:SettingContainer x:Uid="Profile_ColorScheme"
                                                    Margin="0"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearColorSchemeName}"
                                                    HasSettingValue="{x:Bind State.Profile.HasColorSchemeName, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.ColorSchemeNameOverrideSource, Mode=OneWay}">
                                <ComboBox ItemsSource="{x:Bind ColorSchemeList, Mode=OneWay}"
                                          SelectedItem="{x:Bind CurrentColorScheme, Mode=TwoWay}"
                                          Style="{StaticResource ComboBoxSettingStyle}">
                                    <ComboBox.ItemTemplate>
                                        <DataTemplate x:DataType="model:ColorScheme">
                                            <TextBlock Text="{x:Bind Name, Mode=OneWay}" />
                                        </DataTemplate>
                                    </ComboBox.ItemTemplate>
                                </ComboBox>
                            </local:SettingContainer>

                            <!--  Font Face  -->
                            <local:SettingContainer x:Uid="Profile_FontFace"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearFontFace}"
                                                    HasSettingValue="{x:Bind State.Profile.HasFontFace, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.FontFaceOverrideSource, Mode=OneWay}">
                                <StackPanel>
                                    <!--
                                        Binding the ItemsSource to a separate variable that switches between the
                                        two font lists causes a crash within the ComboBox code.
                                        As a workaround, introduce two ComboBox controls and only display one at a time.
                                    -->
                                    <ComboBox ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
                                              ItemsSource="{x:Bind State.Profile.MonospaceFontList, Mode=OneWay}"
                                              SelectedItem="{x:Bind CurrentFontFace, Mode=OneWay}"
                                              SelectionChanged="FontFace_SelectionChanged"
                                              Style="{StaticResource ComboBoxSettingStyle}"
                                              Visibility="{x:Bind State.Profile.ShowAllFonts, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" />
                                    <ComboBox ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
                                              ItemsSource="{x:Bind State.Profile.CompleteFontList, Mode=OneWay}"
                                              SelectedItem="{x:Bind CurrentFontFace, Mode=OneWay}"
                                              SelectionChanged="FontFace_SelectionChanged"
                                              Style="{StaticResource ComboBoxSettingStyle}"
                                              Visibility="{x:Bind State.Profile.ShowAllFonts, Mode=OneWay}" />
                                    <CheckBox x:Name="ShowAllFontsCheckbox"
                                              x:Uid="Profile_FontFaceShowAllFonts"
                                              IsChecked="{x:Bind State.Profile.ShowAllFonts, Mode=TwoWay}"
                                              IsEnabled="{x:Bind State.Profile.UsingMonospaceFont, Mode=OneWay}" />
                                </StackPanel>
                            </local:SettingContainer>

                            <!--  Font Size  -->
                            <local:SettingContainer x:Uid="Profile_FontSize"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearFontSize}"
                                                    HasSettingValue="{x:Bind State.Profile.HasFontSize, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.FontSizeOverrideSource, Mode=OneWay}">
                                <muxc:NumberBox AcceptsExpression="False"
                                                LargeChange="10"
                                                Maximum="128"
                                                Minimum="1"
                                                SmallChange="1"
                                                Style="{StaticResource NumberBoxSettingStyle}"
                                                Value="{x:Bind State.Profile.FontSize, Mode=TwoWay}" />
                            </local:SettingContainer>

                            <!--  Font Weight  -->
                            <local:SettingContainer x:Name="FontWeightContainer"
                                                    x:Uid="Profile_FontWeight"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearFontWeight}"
                                                    HasSettingValue="{x:Bind State.Profile.HasFontWeight, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.FontWeightOverrideSource, Mode=OneWay}">
                                <StackPanel>
                                    <ComboBox x:Name="FontWeightComboBox"
                                              ItemTemplate="{StaticResource EnumComboBoxItemTemplate}"
                                              ItemsSource="{x:Bind FontWeightList, Mode=OneWay}"
                                              SelectedItem="{x:Bind CurrentFontWeight, Mode=TwoWay}"
                                              Style="{StaticResource ComboBoxSettingStyle}" />

                                    <!--  Custom Font Weight Control  -->
                                    <Grid Margin="0,10,0,0"
                                          Style="{StaticResource CustomSliderControlGridStyle}"
                                          Visibility="{x:Bind IsCustomFontWeight, Mode=OneWay}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Slider x:Name="FontWeightSlider"
                                                Grid.Column="0"
                                                Maximum="1000"
                                                Minimum="0"
                                                TickFrequency="50"
                                                TickPlacement="Outside"
                                                Value="{x:Bind State.Profile.FontWeight, Converter={StaticResource FontWeightConverter}, Mode=TwoWay}" />
                                        <TextBlock Grid.Column="1"
                                                   Margin="10,0,0,0"
                                                   Style="{StaticResource SliderValueLabelStyle}"
                                                   Text="{Binding ElementName=FontWeightSlider, Path=Value, Mode=OneWay}" />
                                    </Grid>
                                </StackPanel>
                            </local:SettingContainer>

                            <!--  Retro Terminal Effect  -->
                            <local:SettingContainer x:Uid="Profile_RetroTerminalEffect"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearRetroTerminalEffect}"
                                                    HasSettingValue="{x:Bind State.Profile.HasRetroTerminalEffect, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.RetroTerminalEffectOverrideSource, Mode=OneWay}">
                                <ToggleSwitch IsOn="{x:Bind State.Profile.RetroTerminalEffect, Mode=TwoWay}" />
                            </local:SettingContainer>
                        </StackPanel>

                        <!--  Grouping: Cursor  -->
                        <StackPanel Style="{StaticResource PivotStackStyle}">
                            <TextBlock x:Uid="Profile_CursorHeader"
                                       Style="{StaticResource SubtitleTextBlockStyle}" />

                            <!--  Cursor Shape  -->
                            <local:SettingContainer x:Uid="Profile_CursorShape"
                                                    Margin="0"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearCursorShape}"
                                                    HasSettingValue="{x:Bind State.Profile.HasCursorShape, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.CursorShapeOverrideSource, Mode=OneWay}">
                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                   ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
                                                   SelectedItem="{x:Bind CurrentCursorShape, Mode=TwoWay}" />
                            </local:SettingContainer>

                            <!--  Cursor Height  -->
                            <local:SettingContainer x:Uid="Profile_CursorHeight"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearCursorHeight}"
                                                    HasSettingValue="{x:Bind State.Profile.HasCursorHeight, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.CursorHeightOverrideSource, Mode=OneWay}"
                                                    Visibility="{x:Bind IsVintageCursor, Mode=OneWay}">
                                <Grid Style="{StaticResource CustomSliderControlGridStyle}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Slider x:Name="CursorHeightSlider"
                                            Grid.Column="0"
                                            Maximum="100"
                                            Minimum="1"
                                            Value="{x:Bind State.Profile.CursorHeight, Mode=TwoWay}" />
                                    <TextBlock Grid.Column="1"
                                               Style="{StaticResource SliderValueLabelStyle}"
                                               Text="{Binding ElementName=CursorHeightSlider, Path=Value, Mode=OneWay}" />
                                </Grid>
                            </local:SettingContainer>
                        </StackPanel>

                        <!--  Grouping: Background  -->
                        <StackPanel Style="{StaticResource PivotStackStyle}">
                            <TextBlock x:Uid="Profile_BackgroundHeader"
                                       Style="{StaticResource SubtitleTextBlockStyle}" />

                            <!--  Background Image  -->
                            <local:SettingContainer x:Name="BackgroundImageContainer"
                                                    x:Uid="Profile_BackgroundImage"
                                                    Margin="0"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImagePath}"
                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImagePath, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImagePathOverrideSource, Mode=OneWay}">
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBox IsEnabled="{x:Bind State.Profile.BackgroundImagePath, Mode=OneWay, Converter={StaticResource StringIsNotDesktopConverter}}"
                                                 Style="{StaticResource TextBoxSettingStyle}"
                                                 Text="{x:Bind State.Profile.BackgroundImagePath, Mode=TwoWay, Converter={StaticResource DesktopWallpaperToEmptyStringConverter}}" />
                                        <Button x:Uid="Profile_BackgroundImageBrowse"
                                                Click="BackgroundImage_Click"
                                                IsEnabled="{x:Bind State.Profile.BackgroundImagePath, Mode=OneWay, Converter={StaticResource StringIsNotDesktopConverter}}"
                                                Style="{StaticResource BrowseButtonStyle}" />
                                    </StackPanel>
                                    <CheckBox x:Name="UseDesktopImageCheckBox"
                                              x:Uid="Profile_UseDesktopImage"
                                              IsChecked="{x:Bind State.Profile.UseDesktopBGImage, Mode=TwoWay}" />
                                </StackPanel>
                            </local:SettingContainer>

                            <!--  Background Image Stretch Mode  -->
                            <local:SettingContainer x:Uid="Profile_BackgroundImageStretchMode"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageStretchMode}"
                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageStretchMode, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImageStretchModeOverrideSource, Mode=OneWay}"
                                                    Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                   ItemsSource="{x:Bind BackgroundImageStretchModeList, Mode=OneWay}"
                                                   SelectedItem="{x:Bind CurrentBackgroundImageStretchMode, Mode=TwoWay}" />
                            </local:SettingContainer>

                            <!--  Background Image Alignment  -->
                            <local:SettingContainer x:Uid="Profile_BackgroundImageAlignment"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageAlignment}"
                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageAlignment, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
                                                    Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
                                <Grid HorizontalAlignment="Left">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <Grid.Resources>
                                        <Style BasedOn="{StaticResource DefaultToggleButtonStyle}"
                                               TargetType="ToggleButton">
                                            <Setter Property="Margin" Value="2" />
                                            <Setter Property="Width" Value="40" />
                                            <Setter Property="Height" Value="40" />
                                            <Setter Property="ToolTipService.Placement" Value="Mouse" />
                                        </Style>
                                    </Grid.Resources>

                                    <!--  Top Row  -->
                                    <ToggleButton x:Name="BIAlign_TopLeft"
                                                  x:Uid="Profile_BackgroundImageAlignmentTopLeft"
                                                  Grid.Row="0"
                                                  Grid.Column="0"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Left (0x01)  -->
                                            <x:Int32>17</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xE744;"
                                                      RenderTransformOrigin="0.5,0.5">
                                                <FontIcon.RenderTransform>
                                                    <RotateTransform Angle="90" />
                                                </FontIcon.RenderTransform>
                                            </FontIcon>
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_Top"
                                                  x:Uid="Profile_BackgroundImageAlignmentTop"
                                                  Grid.Row="0"
                                                  Grid.Column="1"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Center (0x00)  -->
                                            <x:Int32>16</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xE745;"
                                                      RenderTransformOrigin="0.5,0.5">
                                                <FontIcon.RenderTransform>
                                                    <RotateTransform Angle="180" />
                                                </FontIcon.RenderTransform>
                                            </FontIcon>
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_TopRight"
                                                  x:Uid="Profile_BackgroundImageAlignmentTopRight"
                                                  Grid.Row="0"
                                                  Grid.Column="2"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Right (0x02)  -->
                                            <x:Int32>18</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xEA5F;"
                                                      RenderTransformOrigin="0.5,0.5">
                                                <FontIcon.RenderTransform>
                                                    <RotateTransform Angle="270" />
                                                </FontIcon.RenderTransform>
                                            </FontIcon>
                                        </ToggleButton.Content>
                                    </ToggleButton>

                                    <!--  Middle Row  -->
                                    <ToggleButton x:Name="BIAlign_Left"
                                                  x:Uid="Profile_BackgroundImageAlignmentLeft"
                                                  Grid.Row="1"
                                                  Grid.Column="0"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Left (0x01)  -->
                                            <x:Int32>1</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xE746;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_Center"
                                                  x:Uid="Profile_BackgroundImageAlignmentCenter"
                                                  Grid.Row="1"
                                                  Grid.Column="1"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Center (0x00)  -->
                                            <x:Int32>0</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xF16E;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_Right"
                                                  x:Uid="Profile_BackgroundImageAlignmentRight"
                                                  Grid.Row="1"
                                                  Grid.Column="2"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Right (0x02)  -->
                                            <x:Int32>2</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xEA61;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>

                                    <!--  Bottom Row  -->
                                    <ToggleButton x:Name="BIAlign_BottomLeft"
                                                  x:Uid="Profile_BackgroundImageAlignmentBottomLeft"
                                                  Grid.Row="2"
                                                  Grid.Column="0"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Left (0x01)  -->
                                            <x:Int32>33</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xE744;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_Bottom"
                                                  x:Uid="Profile_BackgroundImageAlignmentBottom"
                                                  Grid.Row="2"
                                                  Grid.Column="1"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Center (0x00)  -->
                                            <x:Int32>32</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xE745;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                    <ToggleButton x:Name="BIAlign_BottomRight"
                                                  x:Uid="Profile_BackgroundImageAlignmentBottomRight"
                                                  Grid.Row="2"
                                                  Grid.Column="2"
                                                  Click="BIAlignment_Click">
                                        <ToggleButton.Tag>
                                            <!--  ConvergedAlignment: Vertical_Top (0x20) | Horizontal_Right (0x02)  -->
                                            <x:Int32>34</x:Int32>
                                        </ToggleButton.Tag>
                                        <ToggleButton.Content>
                                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                                      Glyph="&#xEA5F;" />
                                        </ToggleButton.Content>
                                    </ToggleButton>
                                </Grid>
                            </local:SettingContainer>

                            <!--  Background Image Opacity  -->
                            <local:SettingContainer x:Name="BackgroundImageOpacityContainer"
                                                    x:Uid="Profile_BackgroundImageOpacity"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageOpacity}"
                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageOpacity, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImageOpacityOverrideSource, Mode=OneWay}"
                                                    Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
                                <Grid Style="{StaticResource CustomSliderControlGridStyle}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Slider x:Name="BIOpacitySlider"
                                            Grid.Column="0"
                                            Value="{x:Bind State.Profile.BackgroundImageOpacity, Converter={StaticResource PercentageConverter}, Mode=TwoWay}" />
                                    <TextBlock Grid.Column="1"
                                               Style="{StaticResource SliderValueLabelStyle}"
                                               Text="{Binding ElementName=BIOpacitySlider, Path=Value, Mode=OneWay}" />
                                </Grid>
                            </local:SettingContainer>
                        </StackPanel>

                        <!--  Grouping: Acrylic  -->
                        <StackPanel Style="{StaticResource PivotStackStyle}">
                            <TextBlock x:Uid="Profile_AcrylicHeader"
                                       Style="{StaticResource SubtitleTextBlockStyle}" />

                            <!--  Use Acrylic  -->
                            <local:SettingContainer x:Uid="Profile_UseAcrylic"
                                                    Margin="0"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearUseAcrylic}"
                                                    HasSettingValue="{x:Bind State.Profile.HasUseAcrylic, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.UseAcrylicOverrideSource, Mode=OneWay}">
                                <ToggleSwitch x:Name="UseAcrylicToggleSwitch"
                                              IsOn="{x:Bind State.Profile.UseAcrylic, Mode=TwoWay}" />
                            </local:SettingContainer>

                            <!--  Acrylic Opacity  -->
                            <local:SettingContainer x:Name="AcrylicOpacityContainer"
                                                    x:Uid="Profile_AcrylicOpacity"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearAcrylicOpacity}"
                                                    HasSettingValue="{x:Bind State.Profile.HasAcrylicOpacity, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.AcrylicOpacityOverrideSource, Mode=OneWay}"
                                                    Visibility="{Binding ElementName=UseAcrylicToggleSwitch, Path=IsOn, Mode=OneWay}">
                                <StackPanel x:Name="AcrylicOpacityControl">
                                    <Grid Style="{StaticResource CustomSliderControlGridStyle}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Slider x:Name="AcrylicOpacitySlider"
                                                Grid.Column="0"
                                                Value="{x:Bind State.Profile.AcrylicOpacity, Converter={StaticResource PercentageConverter}, Mode=TwoWay}" />
                                        <TextBlock Grid.Column="1"
                                                   Style="{StaticResource SliderValueLabelStyle}"
                                                   Text="{Binding ElementName=AcrylicOpacitySlider, Path=Value, Mode=OneWay}" />
                                    </Grid>
                                </StackPanel>
                            </local:SettingContainer>
                        </StackPanel>

                        <!--  Grouping: Window  -->
                        <StackPanel Style="{StaticResource PivotStackStyle}">
                            <TextBlock x:Uid="Profile_WindowHeader"
                                       Style="{StaticResource SubtitleTextBlockStyle}" />

                            <!--  Padding  -->
                            <local:SettingContainer x:Uid="Profile_Padding"
                                                    Margin="0"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearPadding}"
                                                    HasSettingValue="{x:Bind State.Profile.HasPadding, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.PaddingOverrideSource, Mode=OneWay}">
                                <Grid Style="{StaticResource CustomSliderControlGridStyle}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Slider x:Name="PaddingSlider"
                                            Grid.Column="0"
                                            Value="{x:Bind State.Profile.Padding, Converter={StaticResource PaddingConverter}, Mode=TwoWay}" />
                                    <TextBlock Grid.Column="1"
                                               Style="{StaticResource SliderValueLabelStyle}"
                                               Text="{Binding ElementName=PaddingSlider, Path=Value, Mode=OneWay}" />
                                </Grid>
                            </local:SettingContainer>

                            <!--  Scrollbar Visibility  -->
                            <local:SettingContainer x:Uid="Profile_ScrollbarVisibility"
                                                    ClearSettingValue="{x:Bind State.Profile.ClearScrollState}"
                                                    HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
                                                    SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}">
                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                   ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
                                                   SelectedItem="{x:Bind CurrentScrollState, Mode=TwoWay}" />
                            </local:SettingContainer>
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>
            </PivotItem>

            <!--  Advanced Tab  -->
            <PivotItem x:Uid="Profile_Advanced">
                <ScrollViewer>
                    <StackPanel Style="{StaticResource PivotStackStyle}">
                        <!--  Suppress Application Title  -->
                        <local:SettingContainer x:Uid="Profile_SuppressApplicationTitle"
                                                Margin="0"
                                                ClearSettingValue="{x:Bind State.Profile.ClearSuppressApplicationTitle}"
                                                HasSettingValue="{x:Bind State.Profile.HasSuppressApplicationTitle, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind State.Profile.SuppressApplicationTitle, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Antialiasing Mode  -->
                        <local:SettingContainer x:Uid="Profile_AntialiasingMode"
                                                ClearSettingValue="{x:Bind State.Profile.ClearAntialiasingMode}"
                                                HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}">
                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                               ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentAntiAliasingMode, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  AltGr Aliasing  -->
                        <local:SettingContainer x:Uid="Profile_AltGrAliasing"
                                                ClearSettingValue="{x:Bind State.Profile.ClearAltGrAliasing}"
                                                HasSettingValue="{x:Bind State.Profile.HasAltGrAliasing, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.AltGrAliasingOverrideSource, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind State.Profile.AltGrAliasing, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Snap On Input  -->
                        <local:SettingContainer x:Uid="Profile_SnapOnInput"
                                                ClearSettingValue="{x:Bind State.Profile.ClearSnapOnInput}"
                                                HasSettingValue="{x:Bind State.Profile.HasSnapOnInput, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.SnapOnInputOverrideSource, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind State.Profile.SnapOnInput, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  History Size  -->
                        <local:SettingContainer x:Uid="Profile_HistorySize"
                                                ClearSettingValue="{x:Bind State.Profile.ClearHistorySize}"
                                                HasSettingValue="{x:Bind State.Profile.HasHistorySize, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.HistorySizeOverrideSource, Mode=OneWay}">
                            <muxc:NumberBox LargeChange="100"
                                            Minimum="0"
                                            SmallChange="10"
                                            Style="{StaticResource NumberBoxSettingStyle}"
                                            Value="{x:Bind State.Profile.HistorySize, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Close On Exit  -->
                        <local:SettingContainer x:Uid="Profile_CloseOnExit"
                                                ClearSettingValue="{x:Bind State.Profile.ClearCloseOnExit}"
                                                HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}">
                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                               ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentCloseOnExitMode, Mode=TwoWay}" />
                        </local:SettingContainer>

                        <!--  Bell Style  -->
                        <local:SettingContainer x:Uid="Profile_BellStyle"
                                                ClearSettingValue="{x:Bind State.Profile.ClearBellStyle}"
                                                HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
                                                SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}">
                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                               ItemsSource="{x:Bind BellStyleList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentBellStyle, Mode=TwoWay}" />
                        </local:SettingContainer>
                    </StackPanel>
                </ScrollViewer>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>