Localize and polish Profile page navigators (#12321)

## Summary of the Pull Request Adds some polish around the navigators in the profile page (i.e. "appearance" and "advanced" button) by doing the following: - use the localized resources for the pivot on the navigators - simplify the navigators to be buttons instead of toggle buttons Doing so has Narrator identify these as buttons rather than toggle buttons. So now Narrator won't say that the button is "off", which just makes more sense. ## Validation Steps Performed ✅ Narrator says "Advanced button" or "Appearance button" on the navigator ✅ The navigators look the same as before
microsoft · Mar 3, 2022 · c0ae683 · c0ae683
1 parent 38eb777
commit c0ae683
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -799,23 +799,24 @@
         </Setter>
     </Style>
 
-    <Style x:Key="ToggleButtonStyle"
-           TargetType="ToggleButton">
+    <Style x:Key="NavigatorButtonStyle"
+           TargetType="Button">
         <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
         <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
         <Setter Property="MaxWidth" Value="1000" />
         <Setter Property="MinHeight" Value="64" />
         <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
         <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
         <Setter Property="Padding" Value="16,0,8,0" />
-        <Setter Property="Margin" Value="0,4,8,0" />
+        <Setter Property="Margin" Value="0,4,0,0" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="ToggleButton">
+                <ControlTemplate TargetType="Button">
                     <Grid x:Name="Grid"
                           Padding="{TemplateBinding Padding}"
                           AutomationProperties.AccessibilityView="Raw"

diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp b/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
@@ -23,6 +23,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Automation::AutomationProperties::SetFullDescription(StartingDirectoryUseParentCheckbox(), unbox_value<hstring>(startingDirCheckboxTooltip));
 
         Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"Profile_DeleteButton/Text"));
+        AppearanceNavigator().Content(box_value(RS_(L"Profile_Appearance/Header")));
+        AdvancedNavigator().Content(box_value(RS_(L"Profile_Advanced/Header")));
     }
 
     void Profiles_Base::OnNavigatedTo(const NavigationEventArgs& e)

diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
@@ -146,19 +146,18 @@
                            Margin="0,48,0,0"
                            Style="{StaticResource TextBlockSubHeaderStyle}" />
 
-                <ToggleButton Click="Appearance_Click"
-                              Style="{StaticResource ToggleButtonStyle}">
+                <Button x:Name="AppearanceNavigator"
+                        Click="Appearance_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
+                    Appearance
+                </Button>
+                <Button x:Name="AdvancedNavigator"
+                        Click="Advanced_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
                     <TextBlock HorizontalAlignment="Left"
                                VerticalAlignment="Center"
-                               Text="Appearance" />
-                </ToggleButton>
-                <ToggleButton Click="Advanced_Click"
-                              Style="{StaticResource ToggleButtonStyle}">
-                    <ContentPresenter HorizontalAlignment="Left">
-                        <TextBlock HorizontalAlignment="Left"
-                                   Text="Advanced" />
-                    </ContentPresenter>
-                </ToggleButton>
+                               Text="Advanced" />
+                </Button>
                 <!--  Delete Button  -->
                 <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
                     <Button x:Name="DeleteButton"