From a2b7dfa5a62282354c2dcb15255f3495b0574cb3 Mon Sep 17 00:00:00 2001
From: hanzhang54 <zhangh@microsoft.com>
Date: Thu, 29 Jul 2021 17:42:10 +0800
Subject: [PATCH] Update focus style (#1622)

* Update focus style

* Update style name
---
 src/Calculator/App.xaml                       | 31 +++++++++++++++++--
 src/Calculator/Views/Calculator.xaml          |  4 ++-
 .../Views/CalculatorProgrammerOperators.xaml  | 20 +++++++++---
 .../GraphingCalculator/EquationInputArea.xaml |  3 +-
 .../GraphingCalculator.xaml                   | 13 +++++---
 src/Calculator/Views/HistoryList.xaml         |  4 +--
 src/Calculator/Views/Memory.xaml              |  2 +-
 .../CalculatorProgrammerDisplayPanel.xaml     |  6 ++--
 src/Calculator/Views/UnitConverter.xaml       | 23 +++++++++-----
 9 files changed, 80 insertions(+), 26 deletions(-)

diff --git a/src/Calculator/App.xaml b/src/Calculator/App.xaml
index f94645c..2bf5bc2 100644
--- a/src/Calculator/App.xaml
+++ b/src/Calculator/App.xaml
@@ -757,7 +757,7 @@
                                   Background="{TemplateBinding Background}"
                                   FlowDirection="LeftToRight">
                                 <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="16"/>
+                                    <ColumnDefinition Width="12"/>
                                     <ColumnDefinition/>
                                     <ColumnDefinition Width="12"/>
                                 </Grid.ColumnDefinitions>
@@ -834,6 +834,14 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+            <contract7NotPresent:Style x:Key="ConditionalCalculationResultStyle"
+                                       BasedOn="{StaticResource CalculationResultStyle}"
+                                       TargetType="Controls:CalculationResult"/>
+            <contract7Present:Style x:Key="ConditionalCalculationResultStyle"
+                                    BasedOn="{StaticResource CalculationResultStyle}"
+                                    TargetType="Controls:CalculationResult">
+                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            </contract7Present:Style>
 
             <Style x:Key="OperatorPanelButtonSmallStyle"
                    BasedOn="{StaticResource OperatorPanelButtonStyle}"
@@ -1799,6 +1807,7 @@
                 <Setter Property="VerticalContentAlignment" Value="Center"/>
                 <Setter Property="FontFamily" Value="{StaticResource CalculatorFontFamily}"/>
                 <Setter Property="FontSize" Value="16"/>
+                <Setter Property="FocusVisualMargin" Value="-3"/>
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="RadioButton">
@@ -1806,7 +1815,7 @@
                                   Background="{TemplateBinding Background}"
                                   BorderBrush="{TemplateBinding BorderBrush}"
                                   BorderThickness="{ThemeResource ControlBorderThemeThickness}"
-                                  contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
+                                  contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
                                 <Grid.RowDefinitions>
                                     <RowDefinition/>
                                     <RowDefinition Height="Auto"/>
@@ -1905,6 +1914,15 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+            <contract7NotPresent:Style x:Key="ConditionalProgKeypadRadioButtonStyle"
+                                       BasedOn="{StaticResource ProgKeypadRadioButtonStyle}"
+                                       TargetType="RadioButton"/>
+            <contract7Present:Style x:Key="ConditionalProgKeypadRadioButtonStyle"
+                                    BasedOn="{StaticResource ProgKeypadRadioButtonStyle}"
+                                    TargetType="RadioButton">
+                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            </contract7Present:Style>
+
 
             <Style x:Key="SquareIconButtonStyle"
                    BasedOn="{StaticResource SubtleButtonStyle}"
@@ -2080,6 +2098,15 @@
                 </Setter>
             </Style>
 
+            <contract7NotPresent:Style x:Key="ConditionalHistoryMemoryItemContainerStyle"
+                                       BasedOn="{StaticResource HistoryMemoryItemContainerStyle}"
+                                       TargetType="ListViewItem"/>
+            <contract7Present:Style x:Key="ConditionalHistoryMemoryItemContainerStyle"
+                                    BasedOn="{StaticResource HistoryMemoryItemContainerStyle}"
+                                    TargetType="ListViewItem">
+                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            </contract7Present:Style>
+
             <Style x:Key="OperatorPanelFlyoutStyle"
                    BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
                    TargetType="FlyoutPresenter">
diff --git a/src/Calculator/Views/Calculator.xaml b/src/Calculator/Views/Calculator.xaml
index 1a8ee98..b5d2378 100644
--- a/src/Calculator/Views/Calculator.xaml
+++ b/src/Calculator/Views/Calculator.xaml
@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:common="using:CalculatorApp.ViewModel.Common"
+             xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:contract8NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,8)"
              xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
              xmlns:controls="using:CalculatorApp.Controls"
@@ -209,7 +210,7 @@
 
         <!-- Calculation Result Styles -->
         <Style x:Key="ResultsStyle"
-               BasedOn="{StaticResource CalculationResultStyle}"
+               BasedOn="{StaticResource ConditionalCalculationResultStyle}"
                TargetType="controls:CalculationResult">
             <Setter Property="HorizontalContentAlignment" Value="Right"/>
             <Setter Property="VerticalContentAlignment" Value="Top"/>
@@ -1071,6 +1072,7 @@
                                         <ContentControl x:Name="HeaderClipper"
                                                         Grid.Column="1"
                                                         HorizontalContentAlignment="Stretch"
+                                                        contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                                                         UseSystemFocusVisuals="{StaticResource UseSystemFocusVisuals}">
                                             <ContentControl.Clip>
                                                 <RectangleGeometry x:Name="HeaderClipperGeometry"/>
diff --git a/src/Calculator/Views/CalculatorProgrammerOperators.xaml b/src/Calculator/Views/CalculatorProgrammerOperators.xaml
index 90c9f58..2d0ed1a 100644
--- a/src/Calculator/Views/CalculatorProgrammerOperators.xaml
+++ b/src/Calculator/Views/CalculatorProgrammerOperators.xaml
@@ -2,6 +2,7 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:common="using:CalculatorApp.Common"
+             xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:controls="using:CalculatorApp.Controls"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -27,13 +28,14 @@
             <Setter Property="FontSize" Value="{ThemeResource CaptionFontSize}"/>
             <Setter Property="FontWeight" Value="Normal"/>
             <Setter Property="IsTextScaleFactorEnabled" Value="True"/>
+            <Setter Property="FocusVisualMargin" Value="-3"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="RadioButton">
                         <Grid x:Name="ControlRoot"
                               VerticalAlignment="Stretch"
                               Background="{ThemeResource SubtleFillColorTransparentBrush}"
-                              contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
+                              contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="CommonStates">
                                     <VisualState x:Name="Normal"/>
@@ -153,6 +155,14 @@
                 </Setter.Value>
             </Setter>
         </Style>
+        <contract7NotPresent:Style x:Key="ConditionalProgModeRadioButtonStyle"
+                                   BasedOn="{StaticResource ProgModeRadioButtonStyle}"
+                                   TargetType="RadioButton"/>
+        <contract7Present:Style x:Key="ConditionalProgModeRadioButtonStyle"
+                                BasedOn="{StaticResource ProgModeRadioButtonStyle}"
+                                TargetType="RadioButton">
+            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        </contract7Present:Style>
 
         <MenuFlyout x:Key="ProgrammerOperatorsContextMenu" x:Name="ProgrammerOperatorsContextMenu">
             <MenuFlyoutItem x:Name="CopyMenuItem"
@@ -196,7 +206,7 @@
         <controls:RadixButton x:Name="HexButton"
                               x:Uid="hexButton"
                               HorizontalAlignment="Stretch"
-                              Style="{ThemeResource ProgModeRadioButtonStyle}"
+                              Style="{ThemeResource ConditionalProgModeRadioButtonStyle}"
                               AutomationProperties.AutomationId="hexButton"
                               AutomationProperties.Name="{x:Bind Model.HexDisplayValue_AutomationName, Mode=OneWay}"
                               Checked="HexButtonChecked"
@@ -207,7 +217,7 @@
                               x:Uid="decimalButton"
                               Grid.Row="1"
                               HorizontalAlignment="Stretch"
-                              Style="{ThemeResource ProgModeRadioButtonStyle}"
+                              Style="{ThemeResource ConditionalProgModeRadioButtonStyle}"
                               AutomationProperties.AutomationId="decimalButton"
                               AutomationProperties.Name="{x:Bind Model.DecDisplayValue_AutomationName, Mode=OneWay}"
                               Checked="DecButtonChecked"
@@ -219,7 +229,7 @@
                               x:Uid="octButton"
                               Grid.Row="2"
                               HorizontalAlignment="Stretch"
-                              Style="{ThemeResource ProgModeRadioButtonStyle}"
+                              Style="{ThemeResource ConditionalProgModeRadioButtonStyle}"
                               AutomationProperties.AutomationId="octolButton"
                               AutomationProperties.Name="{x:Bind Model.OctDisplayValue_AutomationName, Mode=OneWay}"
                               Checked="OctButtonChecked"
@@ -230,7 +240,7 @@
                               x:Uid="binaryButton"
                               Grid.Row="3"
                               HorizontalAlignment="Stretch"
-                              Style="{ThemeResource ProgModeRadioButtonStyle}"
+                              Style="{ThemeResource ConditionalProgModeRadioButtonStyle}"
                               AutomationProperties.AutomationId="binaryButton"
                               AutomationProperties.Name="{x:Bind Model.BinDisplayValue_AutomationName, Mode=OneWay}"
                               Checked="BinButtonChecked"
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
index 92051e5..b04f573 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
@@ -142,7 +142,8 @@
                                     ValueChanged="Slider_ValueChanged"
                                     Value="{x:Bind Value, Mode=TwoWay}"
                                     Maximum="{x:Bind Max, Mode=TwoWay}"
-                                    Minimum="{x:Bind Min, Mode=TwoWay}"/>
+                                    Minimum="{x:Bind Min, Mode=TwoWay}"
+                                    contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"/>
 
                             <Grid Grid.Row="1"
                                   Padding="8,0,8,8"
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 3de04f3..039b4e2 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -268,15 +268,20 @@
                                             </ControlTemplate>
                                         </Thumb.Template>
                                     </Thumb>
-
                                 </Grid>
-
                             </Grid>
-
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>
+            <contract7NotPresent:Style x:Key="ConditionalGraphModeToggleSwitchStyle"
+                                       BasedOn="{StaticResource GraphModeToggleSwitchStyle}"
+                                       TargetType="ToggleSwitch"/>
+            <contract7Present:Style x:Key="ConditionalGraphModeToggleSwitchStyle"
+                                    BasedOn="{StaticResource GraphModeToggleSwitchStyle}"
+                                    TargetType="ToggleSwitch">
+                <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            </contract7Present:Style>
             <Style x:Name="GraphViewToggleButtonStyle"
                    BasedOn="{StaticResource GraphToggleButtonStyle}"
                    TargetType="ToggleButton">
@@ -552,7 +557,7 @@
                           Margin="0,0,12,2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
-                          Style="{StaticResource GraphModeToggleSwitchStyle}"
+                          Style="{StaticResource ConditionalGraphModeToggleSwitchStyle}"
                           AutomationProperties.AutomationId="SwitchModeToggleButton"
                           AutomationProperties.Name="{x:Bind local:GraphingCalculator.GetInfoForSwitchModeToggleButton(SwitchModeToggleButton.IsOn), Mode=OneWay}"
                           Toggled="SwitchModeToggleButton_Toggled"
diff --git a/src/Calculator/Views/HistoryList.xaml b/src/Calculator/Views/HistoryList.xaml
index d154723..bd1e65a 100644
--- a/src/Calculator/Views/HistoryList.xaml
+++ b/src/Calculator/Views/HistoryList.xaml
@@ -1,4 +1,4 @@
-<UserControl x:Class="CalculatorApp.HistoryList"
+<UserControl x:Class="CalculatorApp.HistoryList"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
@@ -81,7 +81,7 @@
                 </muxc:SwipeControl>
             </DataTemplate>
             <Style x:Key="HistoryItemContainerStyle"
-                   BasedOn="{StaticResource HistoryMemoryItemContainerStyle}"
+                   BasedOn="{StaticResource ConditionalHistoryMemoryItemContainerStyle}"
                    TargetType="ListViewItem">
                 <Setter Property="Margin" Value="0,0,0,20"/>
                 <Setter Property="ContextFlyout" Value="{StaticResource HistoryContextMenu}"/>
diff --git a/src/Calculator/Views/Memory.xaml b/src/Calculator/Views/Memory.xaml
index 7e96d78..a435423 100644
--- a/src/Calculator/Views/Memory.xaml
+++ b/src/Calculator/Views/Memory.xaml
@@ -39,7 +39,7 @@
             <local:MemoryListItem Model="{x:Bind Mode=OneWay}"/>
         </DataTemplate>
         <Style x:Key="MemoryItemContainerStyle"
-               BasedOn="{StaticResource HistoryMemoryItemContainerStyle}"
+               BasedOn="{StaticResource ConditionalHistoryMemoryItemContainerStyle}"
                TargetType="ListViewItem">
             <Setter Property="Margin" Value="0,0,0,8"/>
             <Setter Property="ContextFlyout" Value="{StaticResource MemoryContextMenu}"/>
diff --git a/src/Calculator/Views/StateTriggers/CalculatorProgrammerDisplayPanel.xaml b/src/Calculator/Views/StateTriggers/CalculatorProgrammerDisplayPanel.xaml
index ba22a11..8b29513 100644
--- a/src/Calculator/Views/StateTriggers/CalculatorProgrammerDisplayPanel.xaml
+++ b/src/Calculator/Views/StateTriggers/CalculatorProgrammerDisplayPanel.xaml
@@ -1,4 +1,4 @@
-<UserControl x:Class="CalculatorApp.CalculatorProgrammerDisplayPanel"
+<UserControl x:Class="CalculatorApp.CalculatorProgrammerDisplayPanel"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:common="using:CalculatorApp.Common"
@@ -61,14 +61,14 @@
 
             <RadioButton x:Name="FullKeypad"
                          x:Uid="fullKeypad"
-                         Style="{StaticResource ProgKeypadRadioButtonStyle}"
+                         Style="{StaticResource ConditionalProgKeypadRadioButtonStyle}"
                          AutomationProperties.AutomationId="fullKeypad"
                          Content="&#xe75f;"
                          IsChecked="{x:Bind Model.IsBitFlipChecked, Converter={StaticResource BooleanNegationConverter}, Mode=TwoWay}"/>
             <RadioButton x:Name="BitFlip"
                          x:Uid="bitFlip"
                          Grid.Column="1"
-                         Style="{StaticResource ProgKeypadRadioButtonStyle}"
+                         Style="{StaticResource ConditionalProgKeypadRadioButtonStyle}"
                          AutomationProperties.AutomationId="bitFlip"
                          Content="&#xf7d0;"
                          IsChecked="{x:Bind Model.IsBitFlipChecked, Mode=TwoWay}"/>
diff --git a/src/Calculator/Views/UnitConverter.xaml b/src/Calculator/Views/UnitConverter.xaml
index 72b7bb5..455161a 100644
--- a/src/Calculator/Views/UnitConverter.xaml
+++ b/src/Calculator/Views/UnitConverter.xaml
@@ -1,8 +1,9 @@
-<UserControl x:Class="CalculatorApp.UnitConverter"
+<UserControl x:Class="CalculatorApp.UnitConverter"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:common="using:CalculatorApp.Common"
+             xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:controls="using:CalculatorApp.Controls"
              xmlns:converters="using:CalculatorApp.Converters"
@@ -66,6 +67,7 @@
             <Setter Property="VerticalContentAlignment" Value="Center"/>
             <Setter Property="IsTextScaleFactorEnabled" Value="True"/>
             <Setter Property="UseSystemFocusVisuals" Value="True"/>
+            <Setter Property="FocusVisualMargin" Value="-3"/>
             <Setter Property="ItemsPanel">
                 <Setter.Value>
                     <ItemsPanelTemplate>
@@ -125,7 +127,7 @@
                                         Background="{TemplateBinding Background}"
                                         BorderBrush="{TemplateBinding BorderBrush}"
                                         BorderThickness="{TemplateBinding BorderThickness}"
-                                        contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"/>
+                                        contract7Present:CornerRadius="{TemplateBinding CornerRadius}"/>
                                 <!--
                                     This first ContentPresenter must be named "ContentPresenter" because
                                     XAML expects it in the template and has dependencies. It is not used
@@ -188,14 +190,23 @@
                 </Setter.Value>
             </Setter>
         </Style>
+        <contract7NotPresent:Style x:Key="ConditionalComboStyle"
+                                   BasedOn="{StaticResource ComboStyle}"
+                                   TargetType="ComboBox"/>
+        <contract7Present:Style x:Key="ConditionalComboStyle"
+                                BasedOn="{StaticResource ComboStyle}"
+                                TargetType="ComboBox">
+            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        </contract7Present:Style>
 
         <Style x:Key="ValueBaseStyle"
-               BasedOn="{StaticResource CalculationResultStyle}"
+               BasedOn="{StaticResource ConditionalCalculationResultStyle}"
                TargetType="controls:CalculationResult">
             <Setter Property="Background" Value="Transparent"/>
             <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
             <Setter Property="HorizontalContentAlignment" Value="Left"/>
             <Setter Property="VerticalContentAlignment" Value="Bottom"/>
+            <Setter Property="Margin" Value="4,0,0,0"/>
             <Setter Property="FontWeight" Value="Light"/>
             <Setter Property="MinFontSize" Value="{ThemeResource BodyFontSize}"/>
         </Style>
@@ -203,14 +214,12 @@
                BasedOn="{StaticResource ValueBaseStyle}"
                TargetType="controls:CalculationResult">
             <Setter Property="MaxFontSize" Value="46"/>
-            <Setter Property="Margin" Value="-2,0,0,0"/>
             <Setter Property="DisplayMargin" Value="0,0,0,12"/>
         </Style>
         <Style x:Key="ValueMediumStyle"
                BasedOn="{StaticResource ValueBaseStyle}"
                TargetType="controls:CalculationResult">
             <Setter Property="MaxFontSize" Value="40"/>
-            <Setter Property="Margin" Value="0,0,0,0"/>
             <Setter Property="DisplayMargin" Value="0,0,0,4"/>
         </Style>
         <Style x:Key="CurrencySymbolBaseStyle" TargetType="TextBlock">
@@ -552,7 +561,7 @@
                   Grid.Row="2"
                   Grid.Column="1"
                   HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
-                  Style="{ThemeResource ComboStyle}"
+                  Style="{ThemeResource ConditionalComboStyle}"
                   AutomationProperties.AutomationId="Units1"
                   AutomationProperties.Name="{x:Bind Model.Unit1AutomationName, Mode=OneWay}"
                   DropDownClosed="UpdateDropDownState"
@@ -602,7 +611,7 @@
                   Grid.Row="4"
                   Grid.Column="1"
                   HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
-                  Style="{ThemeResource ComboStyle}"
+                  Style="{ThemeResource ConditionalComboStyle}"
                   AutomationProperties.AutomationId="Units2"
                   AutomationProperties.Name="{x:Bind Model.Unit2AutomationName, Mode=OneWay}"
                   DropDownClosed="UpdateDropDownState"