Update to WinUI 2.6 (#1618)

* Update to WinUI 2.6

Co-authored-by: Han Zhang <zhangh@microsoft.com>
Co-authored-by: Kenny Guo <kennyguo@microsoft.com>

**Description of the changes:**
1. Update to WinUI 2.6 styles and controls #1606.
2. Add Mica Material #1611.
3. Add Settings page #596.
4. Fix Ctrl+E shortcuts in AoT mode #1590.

**How changes were validated:**
Passed build, UT/UI test and manually tested.

* Fixed the display issue in AOT mode (#1615)

* Fixed the display issue in AOT mode

* Get the OpenPaneLength from the resource

* Fix CalendarView style in DateCalculation of dark mode (#1616)

* Fix a style problem of Date Calculator, and clean some unused codes

* Remove some unused codes

* Disable Mica before close the window to resolve a crash (#1619)

* Bump internal package build number (#1621)

build/pipelines/azure-pipelines.ci-internal.yaml

@@ -30,6 +30,11 @@ jobs:
     platform: x64
     runsettingsFileName: CalculatorUITests.release.runsettings
 
+- template: ./templates/run-ui-tests.yaml
+  parameters:
+    platform: x86
+    runsettingsFileName: CalculatorUITests.release.runsettings
+
 - template: ./templates/run-unit-tests.yaml
   parameters:
     platform: x64

build/pipelines/azure-pipelines.release.yaml

@@ -4,20 +4,13 @@
 # Store and the Windows image. This pipeline relies on Microsoft-internal resources to run.
 #
 
-schedules:
-- cron: "0 7 * * *"
-  displayName: Daily midnight build
-  branches:
-    include:
-    - master
-
 trigger: none
 pr: none
 
 variables:
   versionMajor: 10
-  versionMinor: 2108
-  versionBuild: $[counter('10.2108.*', 0)]
+  versionMinor: 2109
+  versionBuild: $[counter('10.2109.*', 0)]
   versionPatch: 0
 
 name: '$(versionMajor).$(versionMinor).$(versionBuild).$(versionPatch)'
@@ -26,27 +19,20 @@ jobs:
 - template: ./templates/build-app-internal.yaml
   parameters:
     platform: x64
+    isPublicRelease: true
 
 - template: ./templates/build-app-internal.yaml
   parameters:
     platform: x86
+    isPublicRelease: true
     condition: not(eq(variables['Build.Reason'], 'PullRequest'))
 
 - template: ./templates/build-app-internal.yaml
   parameters:
     platform: ARM
+    isPublicRelease: true
     condition: not(eq(variables['Build.Reason'], 'PullRequest'))
 
-- template: ./templates/run-ui-tests.yaml
-  parameters:
-    platform: x64
-    runsettingsFileName: CalculatorUITests.release.runsettings
-
-- template: ./templates/run-ui-tests.yaml
-  parameters:
-    platform: x86
-    runsettingsFileName: CalculatorUITests.release.runsettings
-
 - template: ./templates/run-unit-tests.yaml
   parameters:
     platform: x64

build/pipelines/templates/build-app-internal.yaml

@@ -6,6 +6,7 @@
 parameters:
   platform: ''
   condition: ''
+  isPublicRelease: false
 
 jobs:
 - job: Build${{ parameters.platform }}
@@ -27,7 +28,10 @@ jobs:
       downloadDirectory: $(Build.SourcesDirectory)
       vstsFeed: WindowsInboxApps
       vstsFeedPackage: calculator-internals
-      vstsPackageVersion: 0.0.54
+      ${{ if eq(parameters.isPublicRelease, true) }}:
+        vstsPackageVersion: 0.0.66
+      ${{ if eq(parameters.isPublicRelease, false) }}:
+        vstsPackageVersion: 0.0.65
 
   - template: ./build-single-architecture.yaml
     parameters:

build/pipelines/templates/prepare-release-internalonly.yaml

@@ -81,7 +81,7 @@ jobs:
       downloadDirectory: $(Build.SourcesDirectory)
       vstsFeed: WindowsInboxApps
       vstsFeedPackage: calculator-internals
-      vstsPackageVersion: 0.0.54
+      vstsPackageVersion: 0.0.66
 
   - powershell: |
       # Just modify this line to indicate where your en-us PDP file is. Leave the other lines alone.

src/Calculator/AboutFlyout.xaml

@@ -1,95 +0,0 @@
-<UserControl x:Class="CalculatorApp.AboutFlyout"
-             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:CalculatorApp.Common"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d">
-    <UserControl.Transitions>
-        <TransitionCollection>
-            <EdgeUIThemeTransition Edge="Left"/>
-        </TransitionCollection>
-    </UserControl.Transitions>
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto"/>
-            <ColumnDefinition Width="*"/>
-        </Grid.ColumnDefinitions>
-
-        <TextBlock x:Name="Header"
-                   Grid.Column="1"
-                   Margin="12,10,12,0"
-                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
-        <StackPanel Grid.Row="1"
-                    Grid.ColumnSpan="2"
-                    Margin="0,12,0,0"
-                    Orientation="Vertical">
-            <RichTextBlock x:Name="AboutContentBody"
-                           MaxWidth="292"
-                           Margin="12,0,12,18"
-                           HorizontalAlignment="Left"
-                           Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
-                           FontSize="{ThemeResource BodyFontSize}">
-                <Paragraph>
-                    <Run x:Name="AboutFlyoutVersion"/>
-                    <LineBreak/>
-                    <Run x:Name="AboutControlCopyrightRun"/>
-                </Paragraph>
-            </RichTextBlock>
-            <HyperlinkButton x:Name="AboutFlyoutEULA"
-                             Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
-                <TextBlock x:Uid="AboutFlyoutEULA"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <HyperlinkButton Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
-                <TextBlock x:Uid="AboutControlServicesAgreement"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <HyperlinkButton Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
-                <TextBlock x:Uid="AboutControlPrivacyStatement"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <Button x:Name="FeedbackButton"
-                    x:Uid="FeedbackButton"
-                    MinWidth="120"
-                    Margin="12,12,0,0"
-                    HorizontalAlignment="Left"
-                    VerticalAlignment="Top"
-                    Style="{StaticResource ButtonRevealStyle}"
-                    Click="FeedbackButton_Click"/>
-
-        </StackPanel>
-        <RichTextBlock x:Name="AboutFlyoutContribute"
-                       Grid.Row="2"
-                       Grid.ColumnSpan="2"
-                       Margin="12,18,12,6"
-                       HorizontalAlignment="Left"
-                       Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
-                       FontSize="{ThemeResource BodyFontSize}"
-                       TextWrapping="Wrap">
-            <Paragraph>
-                <Run x:Name="ContributeRunBeforeLink"/>
-                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
-                           TextDecorations="None"
-                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939">
-                    <Run x:Name="ContributeRunLink"/>
-                </Hyperlink>
-                <Run x:Name="ContributeRunAfterLink"/>
-            </Paragraph>
-        </RichTextBlock>
-    </Grid>
-</UserControl>

src/Calculator/App.xaml.cs

@@ -124,7 +124,7 @@ private static Frame CreateFrame()
             return frame;
         }
 
-        private static void SetMinWindowSizeAndActivate(Frame rootFrame, Size minWindowSize)
+        private static void SetMinWindowSizeAndThemeAndActivate(Frame rootFrame, Size minWindowSize)
         {
             // SetPreferredMinSize should always be called before Window.Activate
             ApplicationView appView = ApplicationView.GetForCurrentView();
@@ -132,6 +132,7 @@ private static void SetMinWindowSizeAndActivate(Frame rootFrame, Size minWindowS
 
             // Place the frame in the current Window
             Window.Current.Content = rootFrame;
+            CalculatorApp.Utils.ThemeHelper.InitializeAppTheme();
             Window.Current.Activate();
         }
 
@@ -199,7 +200,7 @@ private void OnAppLaunch(IActivatedEventArgs args, string argument)
                     throw new SystemException();
                 }
 
-                SetMinWindowSizeAndActivate(rootFrame, minWindowSize);
+                SetMinWindowSizeAndThemeAndActivate(rootFrame, minWindowSize);
                 m_mainViewId = ApplicationView.GetForCurrentView().Id;
                 AddWindowToMap(WindowFrameService.CreateNewWindowFrameService(rootFrame, false, weak));
             }
@@ -223,7 +224,7 @@ private void OnAppLaunch(IActivatedEventArgs args, string argument)
                                 {
                                     var newRootFrame = App.CreateFrame();
 
-                                    SetMinWindowSizeAndActivate(newRootFrame, minWindowSize);
+                                    SetMinWindowSizeAndThemeAndActivate(newRootFrame, minWindowSize);
 
                                     if (!newRootFrame.Navigate(typeof(MainPage), argument))
                                     {
@@ -439,6 +440,10 @@ private async Task HandleViewReleaseAndRemoveWindowFromMap(WindowFrameService fr
 
             mainPage.UnregisterEventHandlers();
 
+            // TODO, remove this workaround after Mica fix
+            // Workaround app crash caused by Mica in multi-view case.
+            Microsoft.UI.Xaml.Controls.BackdropMaterial.SetApplyToRootOrPageBackground(mainPage, false);
+
             await frameService.HandleViewRelease();
             await Task.Run(() =>
             {

src/Calculator/Calculator.csproj

@@ -137,9 +137,6 @@
     <RestoreProjectStyle>PackageReference</RestoreProjectStyle>
   </PropertyGroup>
   <ItemGroup>
-    <Compile Include="AboutFlyout.xaml.cs">
-      <DependentUpon>AboutFlyout.xaml</DependentUpon>
-    </Compile>
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
@@ -167,10 +164,11 @@
     <Compile Include="Converters\ItemSizeToVisibilityConverter.cs" />
     <Compile Include="Converters\RadixToStringConverter.cs" />
     <Compile Include="Converters\VisibilityNegationConverter.cs" />
-    <Compile Include="EquationStylePanelControl.xaml.cs">
+    <Compile Include="Utils\ThemeHelper.cs" />
+    <Compile Include="Views\GraphingCalculator\EquationStylePanelControl.xaml.cs">
       <DependentUpon>EquationStylePanelControl.xaml</DependentUpon>
     </Compile>
-    <Compile Include="KeyGraphFeaturesTemplateSelector.cs" />
+    <Compile Include="Views\GraphingCalculator\KeyGraphFeaturesTemplateSelector.cs" />
     <Compile Include="Utils\DelegateCommandUtils.cs" />
     <Compile Include="Views\Calculator.xaml.cs">
       <DependentUpon>Calculator.xaml</DependentUpon>
@@ -232,6 +230,9 @@
     <Compile Include="Views\OperatorsPanel.xaml.cs">
       <DependentUpon>OperatorsPanel.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\Settings.xaml.cs">
+      <DependentUpon>Settings.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\StateTriggers\AspectRatioTrigger.cs" />
     <Compile Include="Views\StateTriggers\CalculatorProgrammerDisplayPanel.xaml.cs">
       <DependentUpon>CalculatorProgrammerDisplayPanel.xaml</DependentUpon>
@@ -678,11 +679,7 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </ApplicationDefinition>
-    <Page Include="EquationStylePanelControl.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
-    <Page Include="AboutFlyout.xaml">
+    <Page Include="Views\GraphingCalculator\EquationStylePanelControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
@@ -766,6 +763,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\Settings.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\StateTriggers\CalculatorProgrammerDisplayPanel.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -787,7 +788,7 @@
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.2.10</Version>
     </PackageReference>
-    <PackageReference Include="Microsoft.UI.Xaml" Version="2.4.3" />
+    <PackageReference Include="Microsoft.UI.Xaml" Version="2.6.1" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\CalcViewModel\CalcViewModel.vcxproj">
@@ -804,7 +805,7 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
-    <Content Include="Assets\CalcMDL2.ttf" />
+    <Content Include="Assets\CalculatorIcons.ttf" />
     <None Include="WindowsDev_TemporaryKey.pfx" />
   </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">

src/Calculator/Common/KeyboardShortcuManager.cs

@@ -575,6 +575,48 @@ private static void OnVirtualKeyControlShiftChordPropertyChanged(DependencyObjec
                 }
             }
 
+            private static bool CanNavigateModeByShortcut(MUXC.NavigationView navView, MUXC.NavigationViewItem nvi
+                , ApplicationViewModel vm, ViewMode toMode)
+            {
+                return nvi != null && nvi.IsEnabled && navView.Visibility == Visibility.Visible
+                    && !vm.IsAlwaysOnTop && NavCategory.IsValidViewMode(toMode);
+            }
+
+            private static void NavigateModeByShortcut(bool controlKeyPressed, bool shiftKeyPressed, bool altPressed
+                , Windows.System.VirtualKey key, ViewMode? toMode)
+            {
+                var lookupMap = GetCurrentKeyDictionary(controlKeyPressed, shiftKeyPressed, altPressed);
+                if (lookupMap != null)
+                {
+                    var listItems = EqualRange(lookupMap, (MyVirtualKey)key);
+                    foreach (var itemRef in listItems)
+                    {
+                        var item = itemRef.Target as MUXC.NavigationView;
+                        if (item != null)
+                        {
+                            var navView = (MUXC.NavigationView)item;
+
+                            var menuItems = ((ObservableCollection<object>)navView.MenuItemsSource);
+                            if (menuItems != null)
+                            {
+                                var vm = (navView.DataContext as ApplicationViewModel);
+                                if (null != vm)
+                                {
+                                    ViewMode realToMode = toMode.HasValue ? toMode.Value : NavCategory.GetViewModeForVirtualKey(((MyVirtualKey)key));
+                                    var nvi = (menuItems[NavCategory.GetFlatIndex(realToMode)] as MUXC.NavigationViewItem);
+                                    if (CanNavigateModeByShortcut(navView, nvi, vm, realToMode))
+                                    {
+                                        vm.Mode = realToMode;
+                                        navView.SelectedItem = nvi;
+                                    }
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+
             // In the three event handlers below we will not mark the event as handled
             // because this is a supplemental operation and we don't want to interfere with
             // the normal keyboard handling.
@@ -610,22 +652,7 @@ private static void OnKeyDownHandler(CoreWindow sender, KeyEventArgs args)
                 // Handle Ctrl + E for DateCalculator
                 if ((key == Windows.System.VirtualKey.E) && isControlKeyPressed && !isShiftKeyPressed && !isAltKeyPressed)
                 {
-                    var lookupMap = GetCurrentKeyDictionary(isControlKeyPressed, isShiftKeyPressed, false);
-                    if (lookupMap == null)
-                    {
-                        return;
-                    }
-
-                    var buttons = EqualRange(lookupMap, (MyVirtualKey)key);
-                    var navView = buttons.ElementAt(0).Target as MUXC.NavigationView;
-                    var appViewModel = (navView.DataContext as ApplicationViewModel);
-                    appViewModel.Mode = ViewMode.Date;
-                    var categoryName = AppResourceProvider.GetInstance().GetResourceString("DateCalculationModeText");
-                    appViewModel.CategoryName = categoryName;
-
-                    var menuItems = ((ObservableCollection<object>)navView.MenuItemsSource);
-                    var flatIndex = NavCategory.GetFlatIndex(ViewMode.Date);
-                    navView.SelectedItem = menuItems[flatIndex];
+                    NavigateModeByShortcut(isControlKeyPressed, isShiftKeyPressed, false, key, ViewMode.Date);
                     return;
                 }
 
@@ -701,36 +728,7 @@ private static void OnAcceleratorKeyActivated(CoreDispatcher dispatcher, Acceler
                     }
 
                     bool shiftKeyPressed = (Window.Current.CoreWindow.GetKeyState(Windows.System.VirtualKey.Shift) & CoreVirtualKeyStates.Down) == CoreVirtualKeyStates.Down;
-                    var lookupMap = GetCurrentKeyDictionary(controlKeyPressed, shiftKeyPressed, altPressed);
-                    if (lookupMap != null)
-                    {
-                        var listItems = EqualRange(lookupMap, (MyVirtualKey)key);
-                        foreach (var itemRef in listItems)
-                        {
-                            var item = itemRef.Target as MUXC.NavigationView;
-                            if (item != null)
-                            {
-                                var navView = (MUXC.NavigationView)item;
-
-                                var menuItems = ((ObservableCollection<object>)navView.MenuItemsSource);
-                                if (menuItems != null)
-                                {
-                                    var vm = (navView.DataContext as ApplicationViewModel);
-                                    if (null != vm)
-                                    {
-                                        ViewMode toMode = NavCategory.GetViewModeForVirtualKey(((MyVirtualKey)key));
-                                        var nvi = (menuItems[NavCategory.GetFlatIndex(toMode)] as MUXC.NavigationViewItem);
-                                        if (nvi != null && nvi.IsEnabled && NavCategory.IsValidViewMode(toMode))
-                                        {
-                                            vm.Mode = toMode;
-                                            navView.SelectedItem = nvi;
-                                        }
-                                    }
-                                }
-                                break;
-                            }
-                        }
-                    }
+                    NavigateModeByShortcut(controlKeyPressed, shiftKeyPressed, altPressed, key, null);
                 }
             }
 

src/Calculator/Controls/CalculatorButton.cs

@@ -98,6 +98,26 @@ public Windows.UI.Xaml.Media.Brush PressForeground
             public static readonly DependencyProperty PressForegroundProperty =
                 DependencyProperty.Register(nameof(PressForeground), typeof(Windows.UI.Xaml.Media.Brush), typeof(CalculatorButton), new PropertyMetadata(default(Windows.UI.Xaml.Media.Brush)));
 
+            public Windows.UI.Xaml.Media.Brush DisabledBackground
+            {
+                get { return (Windows.UI.Xaml.Media.Brush)GetValue(DisabledBackgroundProperty); }
+                set { SetValue(DisabledBackgroundProperty, value); }
+            }
+
+            // Using a DependencyProperty as the backing store for DisabledBackground.  This enables animation, styling, binding, etc...
+            public static readonly DependencyProperty DisabledBackgroundProperty =
+                DependencyProperty.Register(nameof(DisabledBackground), typeof(Windows.UI.Xaml.Media.Brush), typeof(CalculatorButton), new PropertyMetadata(default(Windows.UI.Xaml.Media.Brush)));
+
+            public Windows.UI.Xaml.Media.Brush DisabledForeground
+            {
+                get { return (Windows.UI.Xaml.Media.Brush)GetValue(DisabledForegroundProperty); }
+                set { SetValue(DisabledForegroundProperty, value); }
+            }
+
+            // Using a DependencyProperty as the backing store for DisabledForeground.  This enables animation, styling, binding, etc...
+            public static readonly DependencyProperty DisabledForegroundProperty =
+                DependencyProperty.Register(nameof(DisabledForeground), typeof(Windows.UI.Xaml.Media.Brush), typeof(CalculatorButton), new PropertyMetadata(default(Windows.UI.Xaml.Media.Brush)));
+
             protected override void OnKeyDown(KeyRoutedEventArgs e)
             {
                 // Ignore the Enter key

src/Calculator/Package.appxmanifest

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5" IgnorableNamespaces="uap uap5 mp">
     <Identity Name="Microsoft.WindowsCalculator.Dev" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="0.0.1.0" />
     <mp:PhoneIdentity PhoneProductId="b58171c6-c70c-4266-a2e8-8f9c994f4456" PhonePublisherId="95d94207-0c7c-47ed-82db-d75c81153c35" />
@@ -8,7 +8,7 @@
         <Logo>Assets\CalculatorStoreLogo.png</Logo>
     </Properties>
     <Dependencies>
-        <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17133.0" MaxVersionTested="10.0.18362.0" />
+        <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17133.0" MaxVersionTested="10.0.22000.0" />
     </Dependencies>
     <Resources>
         <Resource Language="x-generate" />

src/Calculator/Resources/en-US/Resources.resw

@@ -2701,7 +2701,7 @@
     <value>Back</value>
     <comment>Content of tooltip being displayed on AboutControlBackButton</comment>
   </data>
-  <data name="AboutFlyoutEULA.Text" xml:space="preserve">
+  <data name="AboutEULA.Text" xml:space="preserve">
     <value>Microsoft Software License Terms</value>
     <comment>Displayed on a link to the Microsoft Software License Terms on the About panel</comment>
   </data>
@@ -2717,13 +2717,13 @@
     <value>© %1 Microsoft. All rights reserved.</value>
     <comment>{Locked="%1"}. Copyright statement, displayed on the About panel. %1 = the current year (4 digits)</comment>
   </data>
-  <data name="AboutFlyoutContribute" xml:space="preserve">
+  <data name="AboutControlContribute" xml:space="preserve">
     <value>To learn how you can contribute to Windows Calculator, check out the project on %HL%GitHub%HL%.</value>
     <comment>{Locked="%HL%GitHub%HL%"}. GitHub link, Displayed on the About panel</comment>
   </data>
-  <data name="AboutButton.Content" xml:space="preserve">
+  <data name="AboutGroupTitle.Text" xml:space="preserve">
     <value>About</value>
-    <comment>The text that shows in the dropdown navigation control to open About panel</comment>
+    <comment>Subtitle of about message on Settings page</comment>
   </data>
   <data name="FeedbackButton.Content" xml:space="preserve">
     <value>Send feedback</value>
@@ -3143,10 +3143,6 @@
     <value>Could not update rates</value>
     <comment>This string is what is read by Narrator, and other screen readers, when the currency rates in Currency converter have failed to update.</comment>
   </data>
-  <data name="AboutButton.AccessKey" xml:space="preserve">
-    <value>AB</value>
-    <comment>AccessKey for the About button. {StringCategory="Accelerator"}</comment>
-  </data>
   <data name="HistoryButton.AccessKey" xml:space="preserve">
     <value>I</value>
     <comment>Access key for the History button. {StringCategory="Accelerator"}</comment>
@@ -4699,4 +4695,32 @@
     <value>Rotate Through Carry Circular Shift selected</value>
     <comment>Label for a radio button that toggles rotate circular with carry behavior for the shift operations.</comment>
   </data>
+  <data name="SettingsHeader.Text" xml:space="preserve">
+    <value>Settings</value>
+    <comment>Header text of Settings page</comment>
+  </data>
+  <data name="SettingsAppearance.Text" xml:space="preserve">
+    <value>Appearance</value>
+    <comment>Subtitle of appearance setting on Settings page</comment>
+  </data>
+  <data name="SettingsAppThemeTitle.Text" xml:space="preserve">
+    <value>App theme</value>
+    <comment>Title of App Theme expender</comment>
+  </data>
+  <data name="SettingsAppThemeDescription.Text" xml:space="preserve">
+    <value>Select which app theme to display</value>
+    <comment>Description of App Theme expender</comment>
+  </data>
+  <data name="LightThemeRadioButton.Content" xml:space="preserve">
+    <value>Light</value>
+    <comment>Lable for light theme option</comment>
+  </data>
+  <data name="DarkThemeRadioButton.Content" xml:space="preserve">
+    <value>Dark</value>
+    <comment>Lable for dark theme option</comment>
+  </data>
+  <data name="SystemThemeRadioButton.Content" xml:space="preserve">
+    <value>Use system setting</value>
+    <comment>Lable for the app theme option to use system setting</comment>
+  </data>
 </root>

src/Calculator/Utils/ThemeHelper.cs

@@ -0,0 +1,88 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using System;
+using System.Reflection;
+using Windows.Storage;
+using Windows.UI;
+using Windows.UI.ViewManagement;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace CalculatorApp.Utils
+{
+    /// <summary>
+    /// Class providing functionality around switching and restoring theme settings
+    /// </summary>
+    public static class ThemeHelper
+    {
+        private const string SelectedAppThemeKey = "SelectedAppTheme";
+
+        /// <summary>
+        /// Get or set (with LocalSettings persistence) the RequestedTheme of the root element.
+        /// </summary>
+        public static ElementTheme RootTheme
+        {
+            get
+            {
+                if (Window.Current.Content is FrameworkElement rootElement)
+                {
+                    return rootElement.RequestedTheme;
+                }
+
+                return ElementTheme.Default;
+            }
+            set
+            {
+                if (Window.Current.Content is FrameworkElement rootElement)
+                {
+                    rootElement.RequestedTheme = value;
+
+                    ApplicationData.Current.LocalSettings.Values[SelectedAppThemeKey] = rootElement.RequestedTheme.ToString();
+                }
+            }
+        }
+
+        public static TEnum GetEnum<TEnum>(string text) where TEnum : struct
+        {
+            if (!typeof(TEnum).GetTypeInfo().IsEnum)
+            {
+                throw new InvalidOperationException("Generic parameter 'TEnum' must be an enum.");
+            }
+            return (TEnum)Enum.Parse(typeof(TEnum), text);
+        }
+
+        public static void InitializeAppTheme()
+        {
+            string savedTheme = ApplicationData.Current.LocalSettings.Values[SelectedAppThemeKey]?.ToString();
+
+            if (!string.IsNullOrEmpty(savedTheme))
+            {
+                RootTheme = GetEnum<ElementTheme>(savedTheme);
+            }
+        }
+
+        public struct ThemeChangedCallbackToken
+        {
+            public WeakReference RootFrame;
+            public long Token;
+        }
+
+        public static ThemeChangedCallbackToken RegisterAppThemeChangedCallback(DependencyPropertyChangedCallback callback)
+        {
+            Frame rootFrame = Window.Current.Content as Frame;
+            long token = rootFrame.RegisterPropertyChangedCallback(Frame.RequestedThemeProperty, callback);
+            return new ThemeChangedCallbackToken{ RootFrame = new WeakReference(rootFrame), Token = token };
+        }
+
+        public static void UnregisterAppThemeChangedCallback(ThemeChangedCallbackToken callbackToken)
+        {
+            if(callbackToken.RootFrame.IsAlive)
+            {
+                Frame rootFrame = callbackToken.RootFrame.Target as Frame;
+                rootFrame.UnregisterPropertyChangedCallback(Frame.RequestedThemeProperty, callbackToken.Token);
+            }
+        }
+    }
+}
+

src/Calculator/Views/Calculator.xaml

@@ -3,6 +3,8 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:common="using:CalculatorApp.ViewModel.Common"
+             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"
              xmlns:converters="using:CalculatorApp.Converters"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -74,18 +76,18 @@
                                     Grid.Column="0"
                                     Margin="-4,3,-4,0"
                                     Style="{StaticResource ScrollButtonStyle}">
-                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                <FontIcon FontFamily="{ThemeResource CalculatorFontFamily}"
                                           FontSize="12"
-                                          Glyph="&#xE26C;"/>
+                                          Glyph="&#xE96F;"/>
                             </Button>
                             <Button x:Name="ScrollRight"
                                     x:Uid="scrollRight"
                                     Grid.Column="2"
-                                    Margin="0,3,-9,0"
+                                    Margin="-4,3,-4,0"
                                     Style="{StaticResource ScrollButtonStyle}">
-                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                <FontIcon FontFamily="{ThemeResource CalculatorFontFamily}"
                                           FontSize="12"
-                                          Glyph="&#xE26B;"/>
+                                          Glyph="&#xE970;"/>
                             </Button>
                         </Grid>
                     </ControlTemplate>
@@ -183,9 +185,9 @@
                                     VerticalAlignment="Stretch"
                                     Style="{StaticResource AlwaysOnTopScrollButtonStyleS}"
                                     Background="Transparent">
-                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                <FontIcon FontFamily="{ThemeResource CalculatorFontFamily}"
                                           FontSize="{TemplateBinding ScrollButtonsFontSize}"
-                                          Glyph="&#xE26C;"/>
+                                          Glyph="&#xE96F;"/>
                             </Button>
                             <Button x:Name="ScrollRight"
                                     x:Uid="scrollRight"
@@ -195,9 +197,9 @@
                                     VerticalAlignment="Stretch"
                                     Style="{StaticResource AlwaysOnTopScrollButtonStyleS}"
                                     Background="Transparent">
-                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                <FontIcon FontFamily="{ThemeResource CalculatorFontFamily}"
                                           FontSize="{TemplateBinding ScrollButtonsFontSize}"
-                                          Glyph="&#xE26B;"/>
+                                          Glyph="&#xE970;"/>
                             </Button>
                         </Grid>
                     </ControlTemplate>
@@ -217,18 +219,22 @@
         </Style>
 
         <!-- Button Styles -->
-        <Style x:Key="ScrollButtonStyle" TargetType="Button">
+        <Style x:Key="ScrollButtonStyle"
+               BasedOn="{StaticResource SubtleButtonStyle}"
+               TargetType="Button">
             <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Margin" Value="0"/>
             <Setter Property="Padding" Value="0,0,0,0"/>
             <Setter Property="VerticalAlignment" Value="Center"/>
             <Setter Property="VerticalContentAlignment" Value="Center"/>
             <Setter Property="HorizontalContentAlignment" Value="Center"/>
             <Setter Property="Width" Value="20"/>
+            <Setter Property="Height" Value="20"/>
             <Setter Property="MinWidth" Value="20"/>
-            <Setter Property="MinHeight" Value="24"/>
-            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundAccentBrush}"/>
-            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="MinHeight" Value="20"/>
+            <Setter Property="Background" Value="{ThemeResource ControlFillColorDefault}"/>
             <Setter Property="Visibility" Value="Collapsed"/>
+            <Setter Property="FontSize" Value="12"/>
         </Style>
 
         <Style x:Key="AlwaysOnTopScrollButtonStyleS" TargetType="Button">
@@ -240,7 +246,7 @@
 
         <!-- Flyout Styles -->
 
-        <Style x:Key="MemoryFlyoutStyle" TargetType="FlyoutPresenter">
+        <Style x:Key="MemoryFlyoutBaseStyle" TargetType="FlyoutPresenter">
             <Setter Property="MinWidth" Value="200"/>
             <Setter Property="MaxHeight" Value="2400"/>
             <Setter Property="MaxWidth" Value="2400"/>
@@ -255,7 +261,7 @@
                 <Setter.Value>
                     <ControlTemplate TargetType="FlyoutPresenter">
                         <Grid Margin="0"
-                              Background="Transparent"
+                              Background="{ThemeResource BackgroundSmokeFillColorBrush}"
                               Tapped="OnMemoryFlyOutTapped">
                             <ContentPresenter HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch"
@@ -268,7 +274,16 @@
             </Setter>
         </Style>
 
-        <Style x:Key="HistoryFlyoutStyle" TargetType="FlyoutPresenter">
+        <contract8Present:Style x:Key="MemoryFlyoutStyle"
+                                BasedOn="{StaticResource MemoryFlyoutBaseStyle}"
+                                TargetType="FlyoutPresenter">
+            <Setter Property="IsDefaultShadowEnabled" Value="False"/>
+        </contract8Present:Style>
+        <contract8NotPresent:Style x:Key="MemoryFlyoutStyle"
+                                   BasedOn="{StaticResource MemoryFlyoutBaseStyle}"
+                                   TargetType="FlyoutPresenter"/>
+
+        <Style x:Key="HistoryFlyoutBaseStyle" TargetType="FlyoutPresenter">
             <Setter Property="MinWidth" Value="200"/>
             <Setter Property="MaxHeight" Value="2400"/>
             <Setter Property="MaxWidth" Value="2400"/>
@@ -283,7 +298,7 @@
                 <Setter.Value>
                     <ControlTemplate TargetType="FlyoutPresenter">
                         <Grid Margin="0"
-                              Background="Transparent"
+                              Background="{ThemeResource BackgroundSmokeFillColorBrush}"
                               Tapped="OnHistoryFlyOutTapped">
                             <ContentPresenter HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch"
@@ -296,6 +311,15 @@
             </Setter>
         </Style>
 
+        <contract8Present:Style x:Key="HistoryFlyoutStyle"
+                                BasedOn="{StaticResource HistoryFlyoutBaseStyle}"
+                                TargetType="FlyoutPresenter">
+            <Setter Property="IsDefaultShadowEnabled" Value="False"/>
+        </contract8Present:Style>
+        <contract8NotPresent:Style x:Key="HistoryFlyoutStyle"
+                                   BasedOn="{StaticResource HistoryFlyoutBaseStyle}"
+                                   TargetType="FlyoutPresenter"/>
+
         <!-- Storyboards -->
 
         <Storyboard x:Name="Animate">
@@ -578,7 +602,7 @@
             <Grid.RowDefinitions>
                 <RowDefinition x:Name="RowHamburger" Height="{StaticResource HamburgerHeightGridLength}"/>
                 <RowDefinition x:Name="RowExpression"
-                               Height="20*"
+                               Height="22*"
                                MinHeight="0"/>
                 <RowDefinition x:Name="RowResult"
                                Height="72*"
@@ -705,7 +729,7 @@
                                            Style="{StaticResource CaptionButtonStyle}"
                                            AutomationProperties.AutomationId="ClearMemoryButton"
                                            Command="{x:Bind Model.ClearMemoryCommand}"
-                                           Content="MC"
+                                           Content="&#xF754;"
                                            TabIndex="10"
                                            Visibility="{Binding IsProgrammer, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
                 <controls:CalculatorButton x:Name="MemRecall"
@@ -715,7 +739,7 @@
                                            AutomationProperties.AutomationId="MemRecall"
                                            Command="{x:Bind Model.MemoryItemPressed}"
                                            CommandParameter="{StaticResource Zero}"
-                                           Content="MR"
+                                           Content="&#xF755;"
                                            TabIndex="11"
                                            Visibility="{Binding IsProgrammer, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
                 <controls:CalculatorButton x:Name="MemPlus"
@@ -725,7 +749,7 @@
                                            AutomationProperties.AutomationId="MemPlus"
                                            Command="{x:Bind Model.MemoryAdd}"
                                            CommandParameter="{StaticResource Zero}"
-                                           Content="M+"
+                                           Content="&#xF757;"
                                            TabIndex="12"
                                            Visibility="{Binding IsProgrammer, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
                 <controls:CalculatorButton x:Name="MemMinus"
@@ -735,7 +759,7 @@
                                            AutomationProperties.AutomationId="MemMinus"
                                            Command="{x:Bind Model.MemorySubtract}"
                                            CommandParameter="{StaticResource Zero}"
-                                           Content="M-"
+                                           Content="&#xF758;"
                                            TabIndex="13"
                                            Visibility="{Binding IsProgrammer, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
                 <controls:CalculatorButton x:Name="MemButton"
@@ -744,17 +768,17 @@
                                            Style="{StaticResource CaptionButtonStyle}"
                                            AutomationProperties.AutomationId="memButton"
                                            ButtonId="Memory"
-                                           Content="MS"
+                                           Content="&#xF756;"
                                            TabIndex="14"/>
                 <Button x:Name="MemoryButton"
                         x:Uid="MemoryButton"
                         Grid.Column="6"
                         MinWidth="15.5"
                         MinHeight="8.402"
-                        Style="{StaticResource PathFakeButtonStyle}"
+                        Style="{StaticResource CaptionButtonStyle}"
                         AutomationProperties.AutomationId="MemoryButton"
                         Click="ToggleMemoryFlyout"
-                        Content="M0,9.46968e-006L1.96199,9.46968e-006L4.17099,5.59502C4.33899,6.02501 4.44899,6.34502 4.5,6.55602L4.52899,6.55602C4.67299,6.11501 4.791,5.78701 4.87999,5.57201L7.12999,9.46968e-006L9.023,9.46968e-006L9.023,8.402L7.64,8.402L7.64,2.96501C7.64,2.519 7.668,1.97401 7.722,1.33L7.69899,1.33C7.613,1.697 7.53699,1.96101 7.46999,2.12102L4.96199,8.402L4.002,8.402L1.48799,2.16801C1.418,1.98399 1.34299,1.705 1.265,1.33L1.24199,1.33C1.273,1.666 1.28899,2.21501 1.28899,2.976L1.28899,8.402L0,8.402zM10.5,0L15.5,0L12.99,2.5z"
+                        Content="&#xE61D;"
                         ExitDisplayModeOnAccessKeyInvoked="False"
                         TabIndex="15"
                         IsEnabled="{x:Bind Model.IsMemoryEmpty, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}">
@@ -954,9 +978,9 @@
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Foreground="{ThemeResource PivotNextButtonForeground}"
-                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontFamily="{ThemeResource CalculatorFontFamily}"
                                                   FontSize="12"
-                                                  Glyph="&#xE0E3;"
+                                                  Glyph="&#xE970;"
                                                   MirroredWhenRightToLeft="True"
                                                   UseLayoutRounding="False"/>
                                     </Border>
@@ -1002,9 +1026,9 @@
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Foreground="{ThemeResource PivotPreviousButtonForeground}"
-                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontFamily="{ThemeResource CalculatorFontFamily}"
                                                   FontSize="12"
-                                                  Glyph="&#xE0E2;"
+                                                  Glyph="&#xE96F;"
                                                   MirroredWhenRightToLeft="True"
                                                   UseLayoutRounding="False"/>
                                     </Border>
@@ -1129,20 +1153,38 @@
                    Tapped="DockPanelTapped"
                    Template="{StaticResource DockPanelTemplate}">
                 <Pivot.Resources>
+                    <!--
+                        This is a copy/paste of DefaultPivotHeaderItemStyle, but
+                        1. Updated the Foreground in ViewStates.
+                        2. Updated the SelectedPipe
+                    -->
                     <Style TargetType="PivotHeaderItem">
-                        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
-                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
+                        <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
+                        <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}"/>
+                        <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}"/>
+                        <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
+                        <Setter Property="Background" Value="{ThemeResource PivotHeaderItemBackgroundUnselected}"/>
+                        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}"/>
+                        <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}"/>
+                        <Setter Property="Height" Value="48"/>
+                        <Setter Property="VerticalContentAlignment" Value="Center"/>
+                        <Setter Property="IsTabStop" Value="False"/>
+                        <Setter Property="UseSystemFocusVisuals" Value="False"/>
                         <Setter Property="Template">
                             <Setter.Value>
                                 <ControlTemplate TargetType="PivotHeaderItem">
                                     <Grid x:Name="Grid"
                                           Padding="{TemplateBinding Padding}"
-                                          Background="{TemplateBinding Background}">
+                                          Background="{TemplateBinding Background}"
+                                          CornerRadius="{ThemeResource ControlCornerRadius}">
+
                                         <Grid.RenderTransform>
                                             <TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
                                         </Grid.RenderTransform>
+
                                         <VisualStateManager.VisualStateGroups>
                                             <VisualStateGroup x:Name="SelectionStates">
+
                                                 <VisualStateGroup.Transitions>
                                                     <VisualTransition From="Unselected"
                                                                       GeneratedDuration="0:0:0.33"
@@ -1151,37 +1193,48 @@
                                                                       GeneratedDuration="0:0:0.33"
                                                                       To="Unselected"/>
                                                 </VisualStateGroup.Transitions>
+
                                                 <VisualState x:Name="Disabled">
                                                     <VisualState.Setters>
                                                         <Setter Target="SelectedPipe.Visibility" Value="Collapsed"/>
-                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource PivotHeaderItemForegroundDisabled}"/>
-                                                        <Setter Target="Grid.Background" Value="{ThemeResource PivotHeaderItemBackgroundDisabled}"/>
+                                                    </VisualState.Setters>
+
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorDisabledBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundDisabled}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Unselected">
+                                                    <VisualState.Setters>
+                                                        <Setter Target="SelectedPipe.Visibility" Value="Collapsed"/>
                                                     </VisualState.Setters>
                                                 </VisualState>
-                                                <VisualState x:Name="Unselected"/>
                                                 <VisualState x:Name="UnselectedLocked">
                                                     <VisualState.Setters>
                                                         <Setter Target="SelectedPipe.Visibility" Value="Collapsed"/>
-                                                        <Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0"/>
                                                     </VisualState.Setters>
+
                                                     <Storyboard>
                                                         <DoubleAnimation Duration="0"
                                                                          Storyboard.TargetName="ContentPresenterTranslateTransform"
                                                                          Storyboard.TargetProperty="X"
                                                                          To="{ThemeResource PivotHeaderItemLockedTranslation}"/>
+                                                        <DoubleAnimation Duration="0"
+                                                                         Storyboard.TargetName="ContentPresenter"
+                                                                         Storyboard.TargetProperty="(UIElement.Opacity)"
+                                                                         To="0"/>
                                                     </Storyboard>
                                                 </VisualState>
+
                                                 <VisualState x:Name="Selected">
-                                                    <!--
-                                                        TODO: MSFT 13767760: Need to use storyboards here because
-                                                        visualstate setters are bugged
-                                                    -->
+
                                                     <Storyboard>
-                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedPipe" Storyboard.TargetProperty="Visibility">
-                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
-                                                        </ObjectAnimationUsingKeyFrames>
                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemForegroundSelected}"/>
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorPrimaryBrush}"/>
                                                         </ObjectAnimationUsingKeyFrames>
                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundSelected}"/>
@@ -1191,63 +1244,82 @@
                                                 <VisualState x:Name="UnselectedPointerOver">
                                                     <VisualState.Setters>
                                                         <Setter Target="SelectedPipe.Visibility" Value="Collapsed"/>
-                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource PivotHeaderItemForegroundUnselectedPointerOver}"/>
-                                                        <Setter Target="Grid.Background" Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPointerOver}"/>
                                                     </VisualState.Setters>
+
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPointerOver}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
                                                 </VisualState>
                                                 <VisualState x:Name="SelectedPointerOver">
-                                                    <VisualState.Setters>
-                                                        <Setter Target="SelectedPipe.Visibility" Value="Visible"/>
-                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource PivotHeaderItemForegroundSelectedPointerOver}"/>
-                                                        <Setter Target="Grid.Background" Value="{ThemeResource PivotHeaderItemBackgroundSelectedPointerOver}"/>
-                                                    </VisualState.Setters>
+
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundSelectedPointerOver}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedPipe" Storyboard.TargetProperty="Fill">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AccentFillColorSecondaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
                                                 </VisualState>
                                                 <VisualState x:Name="UnselectedPressed">
                                                     <VisualState.Setters>
                                                         <Setter Target="SelectedPipe.Visibility" Value="Collapsed"/>
-                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource PivotHeaderItemForegroundUnselectedPressed}"/>
-                                                        <Setter Target="Grid.Background" Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPressed}"/>
                                                     </VisualState.Setters>
+
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorTertiaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPressed}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
                                                 </VisualState>
                                                 <VisualState x:Name="SelectedPressed">
-                                                    <VisualState.Setters>
-                                                        <Setter Target="SelectedPipe.Visibility" Value="Visible"/>
-                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource PivotHeaderItemForegroundSelectedPressed}"/>
-                                                        <Setter Target="Grid.Background" Value="{ThemeResource PivotHeaderItemBackgroundSelectedPressed}"/>
-                                                    </VisualState.Setters>
+
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorTertiaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderItemBackgroundSelectedPressed}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedPipe" Storyboard.TargetProperty="Fill">
+                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AccentFillColorTertiaryBrush}"/>
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
                                                 </VisualState>
                                             </VisualStateGroup>
-                                            <VisualStateGroup x:Name="FocusStates">
-                                                <VisualState x:Name="Focused">
-                                                    <VisualState.Setters>
-                                                        <Setter Target="FocusPipe.Visibility" Value="Visible"/>
-                                                    </VisualState.Setters>
-                                                </VisualState>
-                                                <VisualState x:Name="Unfocused"/>
-                                            </VisualStateGroup>
+
                                         </VisualStateManager.VisualStateGroups>
-                                        <Rectangle x:Name="FocusPipe"
-                                                   Stroke="{ThemeResource SystemControlFocusVisualPrimaryBrush}"
-                                                   StrokeThickness="2"
-                                                   Visibility="Collapsed"/>
-                                        <Grid Margin="4,0,4,0">
-                                            <ContentPresenter x:Name="ContentPresenter"
-                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                              FontFamily="{TemplateBinding FontFamily}"
-                                                              FontSize="{TemplateBinding FontSize}"
-                                                              FontWeight="{TemplateBinding FontWeight}"
-                                                              Content="{TemplateBinding Content}"
-                                                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                                                              OpticalMarginAlignment="TrimSideBearings"/>
-                                            <Rectangle x:Name="SelectedPipe"
-                                                       Height="3"
-                                                       Margin="0,0,0,6"
-                                                       HorizontalAlignment="Stretch"
-                                                       VerticalAlignment="Bottom"
-                                                       Fill="{ThemeResource AppControlTransparentAccentColorBrush}"
-                                                       Visibility="Collapsed"/>
-                                        </Grid>
+
+                                        <ContentPresenter x:Name="ContentPresenter"
+                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                          FontFamily="{TemplateBinding FontFamily}"
+                                                          FontSize="{TemplateBinding FontSize}"
+                                                          FontWeight="{TemplateBinding FontWeight}"
+                                                          Content="{TemplateBinding Content}"
+                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                          OpticalMarginAlignment="TrimSideBearings"/>
+                                        <Rectangle x:Name="SelectedPipe"
+                                                   Width="16"
+                                                   Height="3"
+                                                   Margin="0,0,0,2"
+                                                   HorizontalAlignment="Center"
+                                                   VerticalAlignment="Bottom"
+                                                   Fill="{ThemeResource AccentFillColorDefaultBrush}"
+                                                   RadiusX="1.5"
+                                                   RadiusY="1.5"/>
+
                                     </Grid>
                                 </ControlTemplate>
                             </Setter.Value>

src/Calculator/Views/CalculatorProgrammerBitFlipPanel.xaml

@@ -104,7 +104,7 @@
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Foreground="{TemplateBinding Foreground}"
                                            FontSize="{TemplateBinding FontSize}"
-                                           FontWeight="Bold"
+                                           FontWeight="SemiBold"
                                            AutomationProperties.AccessibilityView="Raw"
                                            IsTextScaleFactorEnabled="False"/>
                                 <TextBlock x:Name="BinaryOne"
@@ -112,9 +112,9 @@
                                            Margin="{TemplateBinding Padding}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                           Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
+                                           Foreground="{ThemeResource AccentTextFillColorTertiaryBrush}"
                                            FontSize="{TemplateBinding FontSize}"
-                                           FontWeight="Bold"
+                                           FontWeight="SemiBold"
                                            AutomationProperties.AccessibilityView="Raw"
                                            IsTextScaleFactorEnabled="False"
                                            Visibility="Collapsed"/>
@@ -139,9 +139,9 @@
     <Grid x:Name="BitFlipPanel"
           x:Uid="BitFlipPanel"
           Margin="0,1,0,1"
-          Background="{ThemeResource SystemControlAcrylicWindowBrush}"
           AutomationProperties.HeadingLevel="Level1">
         <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
             <RowDefinition Height="1*"/>
             <RowDefinition Height="1*"/>
             <RowDefinition Height="1*"/>
@@ -213,88 +213,98 @@
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
+        <!-- Horizontal divider -->
+        <Rectangle Grid.ColumnSpan="21"
+                   Height="1"
+                   Margin="-3,4,-3,1"
+                   HorizontalAlignment="Stretch"
+                   VerticalAlignment="Top"
+                   Fill="{ThemeResource DividerStrokeColorDefaultBrush}"
+                   RadiusX="0.5"
+                   RadiusY="0.5"/>
         <TextBlock x:Name="Label60"
-                   Grid.Row="1"
+                   Grid.Row="2"
                    Grid.Column="4"
                    Style="{StaticResource TextBlockStyle}"
                    Text="60"/>
         <TextBlock x:Name="Label56"
-                   Grid.Row="1"
+                   Grid.Row="2"
                    Grid.Column="9"
                    Style="{StaticResource TextBlockStyle}"
                    Text="56"/>
         <TextBlock x:Name="Label52"
-                   Grid.Row="1"
+                   Grid.Row="2"
                    Grid.Column="14"
                    Style="{StaticResource TextBlockStyle}"
                    Text="52"/>
         <TextBlock x:Name="Label48"
-                   Grid.Row="1"
+                   Grid.Row="2"
                    Grid.Column="19"
                    Style="{StaticResource TextBlockStyle}"
                    Text="48"/>
         <TextBlock x:Name="Label44"
-                   Grid.Row="3"
+                   Grid.Row="4"
                    Grid.Column="4"
                    Style="{StaticResource TextBlockStyle}"
                    Text="44"/>
         <TextBlock x:Name="Label40"
-                   Grid.Row="3"
+                   Grid.Row="4"
                    Grid.Column="9"
                    Style="{StaticResource TextBlockStyle}"
                    Text="40"/>
         <TextBlock x:Name="Label36"
-                   Grid.Row="3"
+                   Grid.Row="4"
                    Grid.Column="14"
                    Style="{StaticResource TextBlockStyle}"
                    Text="36"/>
         <TextBlock x:Name="Label32"
-                   Grid.Row="3"
+                   Grid.Row="4"
                    Grid.Column="19"
                    Style="{StaticResource TextBlockStyle}"
                    Text="32"/>
         <TextBlock x:Name="Label28"
-                   Grid.Row="5"
+                   Grid.Row="6"
                    Grid.Column="4"
                    Style="{StaticResource TextBlockStyle}"
                    Text="28"/>
         <TextBlock x:Name="Label24"
-                   Grid.Row="5"
+                   Grid.Row="6"
                    Grid.Column="9"
                    Style="{StaticResource TextBlockStyle}"
                    Text="24"/>
         <TextBlock x:Name="Label20"
-                   Grid.Row="5"
+                   Grid.Row="6"
                    Grid.Column="14"
                    Style="{StaticResource TextBlockStyle}"
                    Text="20"/>
         <TextBlock x:Name="Label16"
-                   Grid.Row="5"
+                   Grid.Row="6"
                    Grid.Column="19"
                    Style="{StaticResource TextBlockStyle}"
                    Text="16"/>
         <TextBlock x:Name="Label12"
-                   Grid.Row="7"
+                   Grid.Row="8"
                    Grid.Column="4"
                    Style="{StaticResource TextBlockStyle}"
                    Text="12"/>
         <TextBlock x:Name="Label8"
-                   Grid.Row="7"
+                   Grid.Row="8"
                    Grid.Column="9"
                    Style="{StaticResource TextBlockStyle}"
                    Text="8"/>
         <TextBlock x:Name="Label4"
-                   Grid.Row="7"
+                   Grid.Row="8"
                    Grid.Column="14"
                    Style="{StaticResource TextBlockStyle}"
                    Text="4"/>
         <TextBlock x:Name="Label0"
-                   Grid.Row="7"
+                   Grid.Row="8"
                    Grid.Column="19"
                    Style="{StaticResource TextBlockStyle}"
                    Text="0"/>
 
         <controls:FlipButtons x:Name="Bit63"
+                              Grid.Row="1"
                               Grid.Column="1"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS63"
@@ -306,6 +316,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit62"
+                              Grid.Row="1"
                               Grid.Column="2"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS62"
@@ -317,6 +328,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit61"
+                              Grid.Row="1"
                               Grid.Column="3"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS61"
@@ -328,6 +340,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit60"
+                              Grid.Row="1"
                               Grid.Column="4"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS60"
@@ -340,6 +353,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit59"
+                              Grid.Row="1"
                               Grid.Column="6"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS59"
@@ -351,6 +365,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit58"
+                              Grid.Row="1"
                               Grid.Column="7"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS58"
@@ -362,6 +377,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit57"
+                              Grid.Row="1"
                               Grid.Column="8"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS57"
@@ -373,6 +389,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit56"
+                              Grid.Row="1"
                               Grid.Column="9"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS56"
@@ -385,6 +402,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit55"
+                              Grid.Row="1"
                               Grid.Column="11"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS55"
@@ -396,6 +414,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit54"
+                              Grid.Row="1"
                               Grid.Column="12"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS54"
@@ -407,6 +426,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit53"
+                              Grid.Row="1"
                               Grid.Column="13"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS53"
@@ -418,6 +438,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit52"
+                              Grid.Row="1"
                               Grid.Column="14"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS52"
@@ -430,6 +451,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit51"
+                              Grid.Row="1"
                               Grid.Column="16"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS51"
@@ -441,6 +463,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit50"
+                              Grid.Row="1"
                               Grid.Column="17"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS50"
@@ -452,6 +475,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit49"
+                              Grid.Row="1"
                               Grid.Column="18"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS49"
@@ -463,6 +487,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit48"
+                              Grid.Row="1"
                               Grid.Column="19"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS48"
@@ -475,7 +500,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit47"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="1"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS47"
@@ -487,7 +512,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit46"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="2"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS46"
@@ -499,7 +524,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit45"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="3"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS45"
@@ -511,7 +536,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit44"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="4"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS44"
@@ -524,7 +549,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit43"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="6"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS43"
@@ -536,7 +561,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit42"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="7"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS42"
@@ -548,7 +573,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit41"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="8"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS41"
@@ -560,7 +585,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit40"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="9"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS40"
@@ -573,7 +598,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit39"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="11"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS39"
@@ -585,7 +610,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit38"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="12"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS38"
@@ -597,7 +622,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit37"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="13"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS37"
@@ -609,7 +634,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit36"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="14"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS36"
@@ -622,7 +647,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit35"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="16"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS35"
@@ -634,7 +659,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit34"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="17"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS34"
@@ -646,7 +671,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit33"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="18"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS33"
@@ -658,7 +683,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit32"
-                              Grid.Row="2"
+                              Grid.Row="3"
                               Grid.Column="19"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS32"
@@ -671,7 +696,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit31"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="1"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS31"
@@ -683,7 +708,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit30"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="2"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS30"
@@ -695,7 +720,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit29"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="3"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS29"
@@ -707,7 +732,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit28"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="4"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS28"
@@ -720,7 +745,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit27"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="6"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS27"
@@ -732,7 +757,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit26"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="7"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS26"
@@ -744,7 +769,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit25"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="8"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS25"
@@ -756,7 +781,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit24"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="9"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS24"
@@ -769,7 +794,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit23"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="11"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS23"
@@ -781,7 +806,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit22"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="12"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS22"
@@ -793,7 +818,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit21"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="13"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS21"
@@ -805,7 +830,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit20"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="14"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS20"
@@ -818,7 +843,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit19"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="16"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS19"
@@ -830,7 +855,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit18"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="17"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS18"
@@ -842,7 +867,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit17"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="18"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS17"
@@ -854,7 +879,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit16"
-                              Grid.Row="4"
+                              Grid.Row="5"
                               Grid.Column="19"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS16"
@@ -867,7 +892,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit15"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="1"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS15"
@@ -879,7 +904,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit14"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="2"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS14"
@@ -891,7 +916,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit13"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="3"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS13"
@@ -903,7 +928,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit12"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="4"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS12"
@@ -916,7 +941,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit11"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="6"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS11"
@@ -928,7 +953,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit10"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="7"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS10"
@@ -940,7 +965,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit9"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="8"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS9"
@@ -952,7 +977,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit8"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="9"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS8"
@@ -965,7 +990,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit7"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="11"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS7"
@@ -976,7 +1001,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit6"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="12"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS6"
@@ -987,7 +1012,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit5"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="13"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS5"
@@ -998,7 +1023,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit4"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="14"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS4"
@@ -1010,7 +1035,7 @@
         </controls:FlipButtons>
 
         <controls:FlipButtons x:Name="Bit3"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="16"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS3"
@@ -1021,7 +1046,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit2"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="17"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS2"
@@ -1032,7 +1057,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit1"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="18"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS1"
@@ -1043,7 +1068,7 @@
             </controls:FlipButtons.Tag>
         </controls:FlipButtons>
         <controls:FlipButtons x:Name="Bit0"
-                              Grid.Row="6"
+                              Grid.Row="7"
                               Grid.Column="19"
                               Style="{StaticResource FlippingToggleButtonStyle}"
                               ButtonId="BINPOS0"

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: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"
              xmlns:designdata="using:CalculatorApp.DesignData"
@@ -15,7 +16,7 @@
     <UserControl.Resources>
         <!-- Programmer mode display radio button -->
         <Style x:Key="ProgModeRadioButtonStyle" TargetType="RadioButton">
-            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}"/>
+            <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}"/>
             <Setter Property="MinHeight" Value="12"/>
             <Setter Property="MinWidth" Value="280"/>
             <Setter Property="MaxHeight" Value="60"/>
@@ -24,31 +25,28 @@
             <Setter Property="Padding" Value="8,0,0,0"/>
             <Setter Property="Typography.NumeralAlignment" Value="Tabular"/>
             <Setter Property="FontSize" Value="{ThemeResource CaptionFontSize}"/>
-            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="FontWeight" Value="Normal"/>
             <Setter Property="IsTextScaleFactorEnabled" Value="True"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="RadioButton">
                         <Grid x:Name="ControlRoot"
                               VerticalAlignment="Stretch"
-                              Background="{ThemeResource SystemControlBackgroundTransparentBrush}">
+                              Background="{ThemeResource SubtleFillColorTransparentBrush}"
+                              contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="CommonStates">
                                     <VisualState x:Name="Normal"/>
                                     <VisualState x:Name="PointerOver">
                                         <VisualState.Setters>
-                                            <Setter Target="ControlRoot.(RevealBrush.State)" Value="PointerOver"/>
-                                            <Setter Target="ControlRoot.Background" Value="{ThemeResource ListViewItemRevealBackgroundPointerOver}"/>
-                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
-                                            <Setter Target="LabelPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
+                                            <Setter Target="ControlRoot.Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}"/>
                                         </VisualState.Setters>
                                     </VisualState>
                                     <VisualState x:Name="Pressed">
                                         <VisualState.Setters>
-                                            <Setter Target="ControlRoot.(RevealBrush.State)" Value="Pressed"/>
-                                            <Setter Target="ControlRoot.Background" Value="{ThemeResource ListViewItemRevealBackgroundPressed}"/>
-                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
-                                            <Setter Target="LabelPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
+                                            <Setter Target="ControlRoot.Background" Value="{ThemeResource SubtleFillColorTertiaryBrush}"/>
+                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                            <Setter Target="LabelPresenter.Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
                                         </VisualState.Setters>
                                     </VisualState>
                                     <VisualState x:Name="Disabled">
@@ -77,7 +75,7 @@
 
                             <Grid x:Name="NormalStatesGrid">
                                 <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="4"/>
+                                    <ColumnDefinition Width="3"/>
                                     <ColumnDefinition Width="Auto" MinWidth="48"/>
                                     <ColumnDefinition Width="*"/>
                                 </Grid.ColumnDefinitions>
@@ -111,16 +109,19 @@
                                   Background="{ThemeResource SystemControlHighlightTransparentBrush}"
                                   Opacity="0">
                                 <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="4"/>
+                                    <ColumnDefinition Width="3"/>
                                     <ColumnDefinition Width="Auto" MinWidth="48"/>
                                     <ColumnDefinition Width="*"/>
                                 </Grid.ColumnDefinitions>
                                 <Rectangle x:Name="CheckedRectangle"
                                            Grid.Column="0"
+                                           MaxHeight="16"
                                            Margin="0,5,0,5"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
-                                           Fill="{ThemeResource SystemControlHighlightAccentBrush}"/>
+                                           Fill="{ThemeResource AccentFillColorDefaultBrush}"
+                                           RadiusX="1.5"
+                                           RadiusY="1.5"/>
                                 <TextBlock x:Name="CheckedContentPresenter"
                                            Grid.Column="2"
                                            Margin="4,0,4,0"
@@ -163,6 +164,7 @@
     <Grid x:Name="ProgrammerOperators"
           x:Uid="RadixGroup"
           MaxHeight="244"
+          Margin="4,0"
           AutomationProperties.HeadingLevel="Level1"
           FlowDirection="LeftToRight">
         <Grid.RowDefinitions>

src/Calculator/Views/CalculatorScientificAngleButtons.xaml

@@ -14,6 +14,13 @@
         <Style x:Key="CaptionButtonSmallStyle"
                BasedOn="{StaticResource CaptionButtonStyle}"
                TargetType="Button">
+            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
+            <Setter Property="FontSize" Value="13"/>
+        </Style>
+
+        <Style x:Key="CaptionButtonZeroMinHeightStyle"
+               BasedOn="{StaticResource CaptionButtonSmallStyle}"
+               TargetType="Button">
             <Setter Property="MinHeight" Value="0"/>
         </Style>
     </UserControl.Resources>
@@ -44,10 +51,10 @@
                         <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="DegreeButton.Style" Value="{StaticResource CaptionButtonSmallStyle}"/>
-                        <Setter Target="RadianButton.Style" Value="{StaticResource CaptionButtonSmallStyle}"/>
-                        <Setter Target="GradsButton.Style" Value="{StaticResource CaptionButtonSmallStyle}"/>
-                        <Setter Target="FtoeButton.Style" Value="{StaticResource CaptionToggleButtonSmallStyle}"/>
+                        <Setter Target="DegreeButton.Style" Value="{StaticResource CaptionButtonZeroMinHeightStyle}"/>
+                        <Setter Target="RadianButton.Style" Value="{StaticResource CaptionButtonZeroMinHeightStyle}"/>
+                        <Setter Target="GradsButton.Style" Value="{StaticResource CaptionButtonZeroMinHeightStyle}"/>
+                        <Setter Target="FtoeButton.Style" Value="{StaticResource CaptionToggleButtonWithIndicatorSmallStyle}"/>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
@@ -65,14 +72,14 @@
         </VisualStateManager.VisualStateGroups>
         <Button x:Name="DegreeButton"
                 x:Uid="degButton"
-                Style="{StaticResource CaptionButtonStyle}"
+                Style="{StaticResource CaptionButtonSmallStyle}"
                 AutomationProperties.AutomationId="degButton"
                 Command="{x:Bind ButtonPressed}"
                 CommandParameter="0"
                 Content="DEG"/>
         <Button x:Name="RadianButton"
                 x:Uid="radButton"
-                Style="{StaticResource CaptionButtonStyle}"
+                Style="{StaticResource CaptionButtonSmallStyle}"
                 AutomationProperties.AutomationId="radButton"
                 Command="{x:Bind ButtonPressed}"
                 CommandParameter="1"
@@ -80,7 +87,7 @@
                 Visibility="Collapsed"/>
         <Button x:Name="GradsButton"
                 x:Uid="gradButton"
-                Style="{StaticResource CaptionButtonStyle}"
+                Style="{StaticResource CaptionButtonSmallStyle}"
                 AutomationProperties.AutomationId="gradButton"
                 Command="{x:Bind ButtonPressed}"
                 CommandParameter="2"
@@ -89,9 +96,8 @@
         <ToggleButton x:Name="FtoeButton"
                       x:Uid="ftoeButton"
                       Grid.Column="1"
-                      Style="{StaticResource CaptionToggleButtonStyle}"
+                      Style="{StaticResource CaptionToggleButtonWithIndicatorStyle}"
                       Background="{ThemeResource SystemControlBackgroundTransparentBrush}"
-                      FontWeight="SemiBold"
                       AutomationProperties.AutomationId="ftoeButton"
                       Checked="FToEButton_Toggled"
                       Content="F-E"

src/Calculator/Views/CalculatorScientificOperators.xaml

@@ -288,18 +288,18 @@
                         <Setter Target="OpenParenthesisButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
                         <Setter Target="CloseParenthesisButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
 
-                        <Setter Target="SinButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CosButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="TanButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="SinhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CoshButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="TanhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvsinButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcosButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvtanButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvsinhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcoshButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvtanhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
+                        <Setter Target="SinButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CosButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="TanButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="SinhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CoshButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="TanhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvsinButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcosButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvtanButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvsinhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcoshButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvtanhButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
 
                         <Setter Target="PowerButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
                         <Setter Target="PowerOf10Button.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
@@ -332,24 +332,24 @@
 
                         <Setter Target="ShiftButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
                         <Setter Target="TrigShiftButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="HypButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="SecButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CscButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CotButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvsecButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcscButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcotButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="SechButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CschButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="CothButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvsechButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcschButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
-                        <Setter Target="InvcothButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
+                        <Setter Target="HypButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="SecButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CscButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CotButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvsecButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcscButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcotButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="SechButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CschButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="CothButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvsechButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcschButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
+                        <Setter Target="InvcothButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
 
                         <Setter Target="AbsFlyoutButton.FontSize" Value="{ThemeResource CalcOperatorTextIconCaptionSize}"/>
                         <Setter Target="FloorButton.FontSize" Value="{ThemeResource CalcOperatorTextIconCaptionSize}"/>
                         <Setter Target="CeilButton.FontSize" Value="{ThemeResource CalcOperatorTextIconCaptionSize}"/>
-                        <Setter Target="RandButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSize}"/>
+                        <Setter Target="RandButton.FontSize" Value="{ThemeResource CalcOperatorCaptionSizeSmall}"/>
                         <Setter Target="DmsButton.FontSize" Value="{ThemeResource CalcOperatorTextIconCaptionSize}"/>
                         <Setter Target="DegreesButton.FontSize" Value="{ThemeResource CalcOperatorTextIconCaptionSize}"/>
 
@@ -405,8 +405,9 @@
                             -->
                             <ToggleButton x:Name="TrigShiftButton"
                                           x:Uid="trigShiftButton"
-                                          Style="{StaticResource CaptionToggleEmphasizedButtonStyle}"
+                                          Style="{StaticResource CaptionToggleButtonStyle}"
                                           FontFamily="{StaticResource CalculatorFontFamily}"
+                                          FontSize="{StaticResource CalcOperatorCaptionSize}"
                                           AutomationProperties.AutomationId="trigShiftButton"
                                           Checked="TrigFlyoutShift_Toggle"
                                           Content="&#xF897;"
@@ -416,7 +417,7 @@
                             <ToggleButton x:Name="HypButton"
                                           x:Uid="hypButton"
                                           Grid.Row="1"
-                                          Style="{StaticResource CaptionToggleEmphasizedButtonStyle}"
+                                          Style="{StaticResource CaptionToggleButtonStyle}"
                                           AutomationProperties.AutomationId="hypShiftButton"
                                           Checked="TrigFlyoutHyp_Toggle"
                                           Content="hyp"
@@ -442,6 +443,7 @@
                                 <controls:CalculatorButton x:Name="SinButton"
                                                            x:Uid="sinButton"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="sinButton"
                                                            ButtonId="Sin"
                                                            Click="FlyoutButton_Clicked"
@@ -453,6 +455,7 @@
                                                            x:Uid="cosButton"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="cosButton"
                                                            ButtonId="Cos"
                                                            Click="FlyoutButton_Clicked"
@@ -464,6 +467,7 @@
                                                            x:Uid="tanButton"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="tanButton"
                                                            ButtonId="Tan"
                                                            Click="FlyoutButton_Clicked"
@@ -475,6 +479,7 @@
                                                            x:Uid="secButton"
                                                            Grid.Row="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="secButton"
                                                            ButtonId="Sec"
                                                            Click="FlyoutButton_Clicked"
@@ -487,6 +492,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="cscButton"
                                                            ButtonId="Csc"
                                                            Click="FlyoutButton_Clicked"
@@ -499,6 +505,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="cotButton"
                                                            ButtonId="Cot"
                                                            Click="FlyoutButton_Clicked"
@@ -525,6 +532,7 @@
                                 <controls:CalculatorButton x:Name="InvsinButton"
                                                            x:Uid="invsinButton"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invsinButton"
                                                            ButtonId="InvSin"
                                                            Click="FlyoutButton_Clicked"
@@ -536,6 +544,7 @@
                                                            x:Uid="invcosButton"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcosButton"
                                                            ButtonId="InvCos"
                                                            Click="FlyoutButton_Clicked"
@@ -547,6 +556,7 @@
                                                            x:Uid="invtanButton"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invtanButton"
                                                            ButtonId="InvTan"
                                                            Click="FlyoutButton_Clicked"
@@ -558,6 +568,7 @@
                                                            x:Uid="invsecButton"
                                                            Grid.Row="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invsecButton"
                                                            ButtonId="InvSec"
                                                            Click="FlyoutButton_Clicked"
@@ -570,6 +581,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcscButton"
                                                            ButtonId="InvCsc"
                                                            Click="FlyoutButton_Clicked"
@@ -582,6 +594,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcotButton"
                                                            ButtonId="InvCot"
                                                            Click="FlyoutButton_Clicked"
@@ -608,6 +621,7 @@
                                 <controls:CalculatorButton x:Name="SinhButton"
                                                            x:Uid="sinhButton"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="sinhButton"
                                                            ButtonId="Sinh"
                                                            Click="FlyoutButton_Clicked"
@@ -619,6 +633,7 @@
                                                            x:Uid="coshButton"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="coshButton"
                                                            ButtonId="Cosh"
                                                            Click="FlyoutButton_Clicked"
@@ -630,6 +645,7 @@
                                                            x:Uid="tanhButton"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="tanhButton"
                                                            ButtonId="Tanh"
                                                            Click="FlyoutButton_Clicked"
@@ -641,6 +657,7 @@
                                                            x:Uid="sechButton"
                                                            Grid.Row="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="sechButton"
                                                            ButtonId="Sech"
                                                            Click="FlyoutButton_Clicked"
@@ -653,6 +670,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="cschButton"
                                                            ButtonId="Csch"
                                                            Click="FlyoutButton_Clicked"
@@ -665,6 +683,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="cothButton"
                                                            ButtonId="Coth"
                                                            Click="FlyoutButton_Clicked"
@@ -690,6 +709,7 @@
                                 <controls:CalculatorButton x:Name="InvsinhButton"
                                                            x:Uid="invsinhButton"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invsinhButton"
                                                            ButtonId="InvSinh"
                                                            Click="FlyoutButton_Clicked"
@@ -701,6 +721,7 @@
                                                            x:Uid="invcoshButton"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcoshButton"
                                                            ButtonId="InvCosh"
                                                            Click="FlyoutButton_Clicked"
@@ -712,6 +733,7 @@
                                                            x:Uid="invtanhButton"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invtanhButton"
                                                            ButtonId="InvTanh"
                                                            Click="FlyoutButton_Clicked"
@@ -723,6 +745,7 @@
                                                            x:Uid="invsechButton"
                                                            Grid.Row="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invsechButton"
                                                            ButtonId="InvSech"
                                                            Click="FlyoutButton_Clicked"
@@ -735,6 +758,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="1"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcschButton"
                                                            ButtonId="InvCsch"
                                                            Click="FlyoutButton_Clicked"
@@ -747,6 +771,7 @@
                                                            Grid.Row="1"
                                                            Grid.Column="2"
                                                            Style="{StaticResource OperatorButtonStyle}"
+                                                           FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                            AutomationProperties.AutomationId="invcothButton"
                                                            ButtonId="InvCoth"
                                                            Click="FlyoutButton_Clicked"
@@ -820,6 +845,7 @@
                                                        x:Uid="randButton"
                                                        Grid.Row="1"
                                                        Style="{StaticResource OperatorButtonStyle}"
+                                                       FontSize="{StaticResource CalcOperatorCaptionSizeSmall}"
                                                        AutomationProperties.AutomationId="randButton"
                                                        ButtonId="Rand"
                                                        Click="FlyoutButton_Clicked"
@@ -861,7 +887,7 @@
                       Grid.Row="1"
                       Style="{StaticResource CaptionToggleEmphasizedButtonStyle}"
                       FontFamily="{StaticResource CalculatorFontFamily}"
-                      FontSize="20"
+                      FontSize="{StaticResource CalcOperatorCaptionSize}"
                       AutomationProperties.AutomationId="shiftButton"
                       Checked="ShiftButton_Check"
                       Content="&#xF897;"
@@ -875,7 +901,7 @@
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Style="{StaticResource SymbolOperatorButtonStyle}"
-                                   FontSize="14"
+                                   FontSize="{StaticResource CalcOperatorCaptionSize}"
                                    AutomationProperties.AutomationId="piButton"
                                    ButtonId="Pi"
                                    Content="&#xf7cf;"/>
@@ -885,7 +911,7 @@
                                    Grid.Row="1"
                                    Grid.Column="2"
                                    Style="{StaticResource OperatorButtonStyle}"
-                                   FontSize="14"
+                                   FontSize="{StaticResource CalcOperatorCaptionSize}"
                                    AutomationProperties.AutomationId="eulerButton"
                                    ButtonId="Euler"
                                    Content="e"/>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.EquationInputArea"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             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"
@@ -23,7 +24,6 @@
                       Tapped="VariableAreaTapped">
                     <Grid.Resources>
                         <ResourceDictionary>
-
                             <Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
                                 <Setter Property="Margin" Value="1,0,0,0"/>
                                 <Setter Property="Padding" Value="2,6,2,2"/>
@@ -42,7 +42,7 @@
                                     <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
                                     <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
                                     <Style x:Key="VariableContainerStyle" TargetType="Border">
-                                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
+                                        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefault}"/>
                                     </Style>
                                     <Style x:Key="ThemedVariableTextBoxStyle"
                                            BasedOn="{StaticResource VariableTextBoxStyle}"
@@ -56,12 +56,12 @@
                                     <SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
                                     <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
                                     <Style x:Key="VariableContainerStyle" TargetType="Border">
-                                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
+                                        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefault}"/>
                                     </Style>
                                     <Style x:Key="ThemedVariableTextBoxStyle"
                                            BasedOn="{StaticResource VariableTextBoxStyle}"
                                            TargetType="TextBox">
-                                        <Setter Property="BorderBrush" Value="#70000000"/>
+                                        <Setter Property="BorderBrush" Value="{ThemeResource AccentFillColorDisabledBrush}"/>
                                     </Style>
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="HighContrast">
@@ -88,7 +88,9 @@
                             </ResourceDictionary.ThemeDictionaries>
                         </ResourceDictionary>
                     </Grid.Resources>
-                    <Border Margin="0,3" Style="{ThemeResource VariableContainerStyle}">
+                    <Border Margin="4,3"
+                            Style="{ThemeResource VariableContainerStyle}"
+                            contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
                         <StackPanel Padding="12,0,12,6">
                             <Grid HorizontalAlignment="Stretch">
                                 <Grid.ColumnDefinitions>
@@ -159,13 +161,14 @@
                                     <TextBlock x:Uid="MinTextBlock"
                                                Margin="0,12,4,0"
                                                VerticalAlignment="Center"
-                                               FontSize="11"/>
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                               FontSize="12"/>
                                     <TextBox x:Name="MinTextBox"
                                              x:Uid="VariableMinTextBox"
                                              Grid.Column="1"
                                              Padding="2,16,2,2"
                                              Style="{StaticResource ThemedVariableTextBoxStyle}"
-                                             FontSize="11"
+                                             FontSize="12"
                                              GotFocus="TextBoxGotFocus"
                                              KeyDown="TextBoxKeyDown"
                                              LosingFocus="TextBoxLosingFocus"
@@ -184,13 +187,14 @@
                                                Margin="0,12,4,0"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
-                                               FontSize="11"/>
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                               FontSize="12"/>
                                     <TextBox x:Name="StepTextBox"
                                              x:Uid="VariableStepTextBox"
                                              Grid.Column="1"
                                              Padding="2,16,2,2"
                                              Style="{StaticResource ThemedVariableTextBoxStyle}"
-                                             FontSize="11"
+                                             FontSize="12"
                                              GotFocus="TextBoxGotFocus"
                                              KeyDown="TextBoxKeyDown"
                                              LosingFocus="TextBoxLosingFocus"
@@ -208,13 +212,14 @@
                                     <TextBlock x:Uid="MaxTextBlock"
                                                Margin="0,12,4,0"
                                                VerticalAlignment="Center"
-                                               FontSize="11"/>
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                               FontSize="12"/>
                                     <TextBox x:Name="MaxTextBox"
                                              x:Uid="VariableMaxTextBox"
                                              Grid.Column="1"
                                              Padding="2,16,2,2"
                                              Style="{StaticResource ThemedVariableTextBoxStyle}"
-                                             FontSize="11"
+                                             FontSize="12"
                                              GotFocus="TextBoxGotFocus"
                                              KeyDown="TextBoxKeyDown"
                                              LosingFocus="TextBoxLosingFocus"
@@ -231,6 +236,7 @@
                                           Margin="0,6,0,0"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
+                                          BorderThickness="0"
                                           Click="VariableAreaClicked"
                                           IsChecked="{x:Bind SliderSettingsVisible, Mode=OneWay}"
                                           Tapped="VariableAreaButtonTapped">
@@ -238,27 +244,25 @@
                                     <ResourceDictionary>
                                         <ResourceDictionary.ThemeDictionaries>
                                             <ResourceDictionary x:Key="Default">
-                                                <SolidColorBrush x:Key="ToggleButtonBackground" Color="Transparent"/>
-                                                <SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="ToggleButtonBorderBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="ToggleButtonBackground"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="ToggleButtonForeground"/>
                                                 <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="ToggleButtonBackgroundPointerOver"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="ToggleButtonBorderBrushPointerOver"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="ToggleButtonForegroundPointerOver"/>
                                                 <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="ToggleButtonBackgroundPressed"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="ToggleButtonBorderBrushPressed"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="ToggleButtonForegroundPressed"/>
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="Light">
-                                                <SolidColorBrush x:Key="ToggleButtonBackground" Color="Transparent"/>
-                                                <SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="ToggleButtonBorderBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+                                                <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="ToggleButtonBackground"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="ToggleButtonForeground"/>
                                                 <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="ToggleButtonBackgroundPointerOver"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="ToggleButtonBorderBrushPointerOver"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="ToggleButtonForegroundPointerOver"/>
                                                 <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="ToggleButtonBackgroundPressed"/>
-                                                <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="ToggleButtonBorderBrushPressed"/>
                                                 <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="ToggleButtonForegroundPressed"/>
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="HighContrast"/>
@@ -340,7 +344,6 @@
                                     </ResourceDictionary>
                                 </Grid.Resources>
                                 <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto"/>
                                     <ColumnDefinition Width="Auto"/>
                                     <ColumnDefinition Width="*"/>
                                 </Grid.ColumnDefinitions>
@@ -448,189 +451,205 @@
                                            Width="10"
                                            Margin="0,0,2,0"
                                            Fill="{TemplateBinding EquationColor}"
+                                           RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource CornerRadiusTopLeftToDoubleConverter}, Mode=OneWay}"
+                                           RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource CornerRadiusTopLeftToDoubleConverter}, Mode=OneWay}"
                                            Visibility="{ThemeResource ColorRectangleVisibility}"/>
-                                <ToggleButton x:Name="EquationButton"
-                                              Grid.Column="1"
-                                              MinWidth="44"
-                                              MinHeight="44"
-                                              VerticalAlignment="Stretch"
-                                              IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsEquationLineDisabled, Mode=TwoWay}">
-                                    <ToggleButton.Content>
-                                        <StackPanel HorizontalAlignment="Center"
-                                                    VerticalAlignment="Center"
-                                                    Background="Transparent"
-                                                    FlowDirection="LeftToRight"
-                                                    Orientation="Horizontal">
-                                            <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xF893;"/>
-                                            <TextBlock x:Name="FunctionNumberLabelTextBlock"
-                                                       Margin="-5,19,0,0"
-                                                       FontSize="11"
-                                                       Text="{TemplateBinding EquationButtonContentIndex}"/>
-                                        </StackPanel>
-                                    </ToggleButton.Content>
-                                    <ToggleButton.Resources>
-                                        <ResourceDictionary>
-                                            <ResourceDictionary.ThemeDictionaries>
-                                                <ResourceDictionary x:Key="Default">
-                                                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.3</x:Double>
-                                                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.5</x:Double>
-                                                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                </ResourceDictionary>
-                                                <ResourceDictionary x:Key="Light">
-                                                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.2</x:Double>
-                                                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.4</x:Double>
-                                                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
-                                                    <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="EquationButtonHideLineForegroundBrush"/>
-                                                </ResourceDictionary>
-                                                <ResourceDictionary x:Key="HighContrast">
-                                                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0</x:Double>
-                                                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0</x:Double>
-                                                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Transparent"/>
-                                                </ResourceDictionary>
-                                            </ResourceDictionary.ThemeDictionaries>
-                                        </ResourceDictionary>
-                                    </ToggleButton.Resources>
-                                    <ToggleButton.Style>
-                                        <Style TargetType="ToggleButton">
-                                            <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}"/>
-                                            <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/>
-                                            <Setter Property="Template">
-                                                <Setter.Value>
-                                                    <ControlTemplate TargetType="ToggleButton">
-                                                        <Grid x:Name="RootGrid"
-                                                              Background="{TemplateBinding Background}"
-                                                              BorderBrush="{TemplateBinding BorderBrush}"
-                                                              BorderThickness="1">
-                                                            <VisualStateManager.VisualStateGroups>
-                                                                <VisualStateGroup x:Name="CommonStates">
-                                                                    <VisualState x:Name="Normal">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="Overlay.Opacity" Value="0.0"/>
-                                                                            <Setter Target="ContentPresenter.Visibility" Value="Visible"/>
-                                                                            <Setter Target="ShowHideIcon.Visibility" Value="Collapsed"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                    <VisualState x:Name="PointerOver">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundPointerOver}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/>
-                                                                            <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundPointerOver}"/>
-                                                                            <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPointerOverOpacity}"/>
-                                                                            <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
-                                                                            <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
-                                                                            <Setter Target="ShowHideIcon.Glyph" Value="&#xF6AC;"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                    <VisualState x:Name="Pressed">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundPressed}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/>
-                                                                            <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPressedOpacity}"/>
-                                                                            <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundPressed}"/>
-                                                                            <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
-                                                                            <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
-                                                                            <Setter Target="ShowHideIcon.Glyph" Value="&#xF6AC;"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                    <VisualState x:Name="Checked">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/>
-                                                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                    <VisualState x:Name="CheckedPointerOver">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/>
-                                                                            <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/>
-                                                                            <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPointerOverOpacity}"/>
-                                                                            <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
-                                                                            <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
-                                                                            <Setter Target="ShowHideIcon.Glyph" Value="&#xE890;"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                    <VisualState x:Name="CheckedPressed">
-                                                                        <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/>
-                                                                            <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}"/>
-                                                                            <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPressedOpacity}"/>
-                                                                            <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
-                                                                            <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
-                                                                            <Setter Target="ShowHideIcon.Glyph" Value="&#xE890;"/>
-                                                                        </VisualState.Setters>
-                                                                    </VisualState>
-                                                                </VisualStateGroup>
-                                                            </VisualStateManager.VisualStateGroups>
-                                                            <Rectangle x:Name="Overlay"
-                                                                       Fill="{ThemeResource EquationButtonOverlayBackgroundBrush}"
-                                                                       Opacity="0"
-                                                                       IsHitTestVisible="False"/>
-                                                            <ContentPresenter x:Name="ContentPresenter"
-                                                                              AutomationProperties.AccessibilityView="Raw"
-                                                                              IsHitTestVisible="False"/>
-                                                            <FontIcon x:Name="ShowHideIcon"
-                                                                      FontFamily="{StaticResource CalculatorFontFamily}"
-                                                                      Visibility="Collapsed"/>
-                                                        </Grid>
-                                                    </ControlTemplate>
-                                                </Setter.Value>
-                                            </Setter>
-                                        </Style>
-                                    </ToggleButton.Style>
-                                </ToggleButton>
                                 <Border x:Name="EquationBoxBorder"
-                                        Grid.Column="2"
+                                        Grid.Column="1"
                                         Background="{ThemeResource TextControlBackground}"
                                         BorderBrush="{ThemeResource EquationTextBoxBorderBrush}"
                                         BorderThickness="{ThemeResource EquationTextBoxBorderThickness}"
-                                        contract7Present:BackgroundSizing="OuterBorderEdge">
+                                        contract7Present:BackgroundSizing="OuterBorderEdge"
+                                        contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
                                     <Grid contract7Present:Margin="{TemplateBinding BorderThickness}">
+                                        <Grid.Resources>
+                                            <ResourceDictionary>
+                                                <ResourceDictionary.ThemeDictionaries>
+                                                    <ResourceDictionary x:Key="Default">
+                                                        <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                                        <SolidColorBrush x:Key="ButtonRevealBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}"/>
+                                                        <SolidColorBrush x:Key="ButtonRevealBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                        <SolidColorBrush x:Key="ButtonRevealBackground" Color="{ThemeResource TextControlBackgroundFocused}"/>
+                                                    </ResourceDictionary>
+                                                    <ResourceDictionary x:Key="HighContrast"/>
+                                                </ResourceDictionary.ThemeDictionaries>
+                                            </ResourceDictionary>
+                                        </Grid.Resources>
                                         <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="Auto"/>
                                             <ColumnDefinition Width="*"/>
                                             <ColumnDefinition Width="Auto"/>
                                             <ColumnDefinition Width="Auto"/>
                                             <ColumnDefinition Width="Auto"/>
                                             <ColumnDefinition Width="Auto"/>
                                         </Grid.ColumnDefinitions>
+                                        <ToggleButton x:Name="EquationButton"
+                                                      MinWidth="44"
+                                                      MinHeight="44"
+                                                      VerticalAlignment="Stretch"
+                                                      IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsEquationLineDisabled, Mode=TwoWay}">
+                                            <ToggleButton.Content>
+                                                <StackPanel HorizontalAlignment="Center"
+                                                            VerticalAlignment="Center"
+                                                            Background="Transparent"
+                                                            FlowDirection="LeftToRight"
+                                                            Orientation="Horizontal">
+                                                    <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xF893;"/>
+                                                    <TextBlock x:Name="FunctionNumberLabelTextBlock"
+                                                               Margin="-5,19,0,0"
+                                                               FontSize="11"
+                                                               Text="{TemplateBinding EquationButtonContentIndex}"/>
+                                                </StackPanel>
+                                            </ToggleButton.Content>
+                                            <ToggleButton.Resources>
+                                                <ResourceDictionary>
+                                                    <ResourceDictionary.ThemeDictionaries>
+                                                        <ResourceDictionary x:Key="Default">
+                                                            <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.3</x:Double>
+                                                            <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.5</x:Double>
+                                                            <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                        </ResourceDictionary>
+                                                        <ResourceDictionary x:Key="Light">
+                                                            <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.2</x:Double>
+                                                            <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.4</x:Double>
+                                                            <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
+                                                            <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushCheckedPointerOver" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundCheckedPointerOver" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBackgroundCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonBorderBrushCheckedPressed" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
+                                                            <StaticResource x:Key="ToggleButtonForegroundCheckedPressed" ResourceKey="EquationButtonHideLineForegroundBrush"/>
+                                                        </ResourceDictionary>
+                                                        <ResourceDictionary x:Key="HighContrast">
+                                                            <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0</x:Double>
+                                                            <x:Double x:Key="EquationButtonOverlayPressedOpacity">0</x:Double>
+                                                            <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Transparent"/>
+                                                        </ResourceDictionary>
+                                                    </ResourceDictionary.ThemeDictionaries>
+                                                </ResourceDictionary>
+                                            </ToggleButton.Resources>
+                                            <ToggleButton.Style>
+                                                <Style TargetType="ToggleButton">
+                                                    <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}"/>
+                                                    <Setter Property="Template">
+                                                        <Setter.Value>
+                                                            <ControlTemplate TargetType="ToggleButton">
+                                                                <Grid x:Name="RootGrid"
+                                                                      Background="{TemplateBinding Background}"
+                                                                      BorderThickness="0"
+                                                                      CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                                    <VisualStateManager.VisualStateGroups>
+                                                                        <VisualStateGroup x:Name="CommonStates">
+                                                                            <VisualState x:Name="Normal">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="Overlay.Opacity" Value="0.0"/>
+                                                                                    <Setter Target="ContentPresenter.Visibility" Value="Visible"/>
+                                                                                    <Setter Target="ShowHideIcon.Visibility" Value="Collapsed"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                            <VisualState x:Name="PointerOver">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundPointerOver}"/>
+                                                                                    <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/>
+                                                                                    <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundPointerOver}"/>
+                                                                                    <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPointerOverOpacity}"/>
+                                                                                    <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
+                                                                                    <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
+                                                                                    <Setter Target="ShowHideIcon.Glyph" Value="&#xF6AC;"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                            <VisualState x:Name="Pressed">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundPressed}"/>
+                                                                                    <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/>
+                                                                                    <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPressedOpacity}"/>
+                                                                                    <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundPressed}"/>
+                                                                                    <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
+                                                                                    <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
+                                                                                    <Setter Target="ShowHideIcon.Glyph" Value="&#xF6AC;"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                            <VisualState x:Name="Checked">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}"/>
+                                                                                    <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/>
+                                                                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                            <VisualState x:Name="CheckedPointerOver">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}"/>
+                                                                                    <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/>
+                                                                                    <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/>
+                                                                                    <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPointerOverOpacity}"/>
+                                                                                    <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
+                                                                                    <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
+                                                                                    <Setter Target="ShowHideIcon.Glyph" Value="&#xE890;"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                            <VisualState x:Name="CheckedPressed">
+                                                                                <VisualState.Setters>
+                                                                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}"/>
+                                                                                    <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/>
+                                                                                    <Setter Target="ShowHideIcon.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}"/>
+                                                                                    <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPressedOpacity}"/>
+                                                                                    <Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
+                                                                                    <Setter Target="ShowHideIcon.Visibility" Value="Visible"/>
+                                                                                    <Setter Target="ShowHideIcon.Glyph" Value="&#xE890;"/>
+                                                                                </VisualState.Setters>
+                                                                            </VisualState>
+                                                                        </VisualStateGroup>
+                                                                    </VisualStateManager.VisualStateGroups>
+                                                                    <Rectangle x:Name="Overlay"
+                                                                               Fill="{ThemeResource EquationButtonOverlayBackgroundBrush}"
+                                                                               Opacity="0"
+                                                                               IsHitTestVisible="False"/>
+                                                                    <ContentPresenter x:Name="ContentPresenter"
+                                                                                      AutomationProperties.AccessibilityView="Raw"
+                                                                                      IsHitTestVisible="False"/>
+                                                                    <FontIcon x:Name="ShowHideIcon"
+                                                                              FontFamily="{StaticResource CalculatorFontFamily}"
+                                                                              Visibility="Collapsed"/>
+                                                                </Grid>
+                                                            </ControlTemplate>
+                                                        </Setter.Value>
+                                                    </Setter>
+                                                </Style>
+                                            </ToggleButton.Style>
+                                        </ToggleButton>
                                         <controls:MathRichEditBox x:Name="MathRichEditBox"
                                                                   x:Uid="mathRichEditBox"
+                                                                  Grid.Column="1"
                                                                   MinHeight="44"
                                                                   Padding="{TemplateBinding Padding}"
                                                                   VerticalAlignment="Stretch"
@@ -681,49 +700,25 @@
 
                                         <Button x:Name="FunctionButton"
                                                 x:Uid="functionAnalysisButton"
-                                                Grid.Column="1"
-                                                MinWidth="34"
+                                                Grid.Column="2"
+                                                MinWidth="38"
                                                 Margin="1,2"
                                                 VerticalAlignment="Stretch"
                                                 Style="{ThemeResource ButtonRevealStyle}"
+                                                BorderThickness="0"
                                                 FontFamily="{StaticResource CalculatorFontFamily}"
                                                 AutomationProperties.AccessibilityView="Raw"
                                                 Content="&#xE945;"
                                                 IsTabStop="False"
-                                                Visibility="Collapsed">
-                                            <Button.Resources>
-                                                <ResourceDictionary>
-                                                    <ResourceDictionary.ThemeDictionaries>
-                                                        <ResourceDictionary x:Key="Default">
-                                                            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
-                                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackgroundPointerOver" Color="Transparent"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackground" Color="Transparent"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackgroundDisabled" Color="Transparent"/>
-                                                            <RevealBorderBrush x:Key="ButtonRevealBorderBrush"
-                                                                               Opacity="0.33"
-                                                                               FallbackColor="Transparent"
-                                                                               TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                               Color="Transparent"/>
-                                                            <RevealBorderBrush x:Key="ButtonRevealBorderBrushPointerOver"
-                                                                               Opacity="0.33"
-                                                                               FallbackColor="{StaticResource SystemBaseMediumLowColor}"
-                                                                               TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                               Color="{StaticResource SystemRevealBaseMediumLowColor}"/>
-                                                        </ResourceDictionary>
-                                                        <ResourceDictionary x:Key="HighContrast"/>
-                                                    </ResourceDictionary.ThemeDictionaries>
-                                                </ResourceDictionary>
-                                            </Button.Resources>
-                                        </Button>
+                                                Visibility="Collapsed"/>
                                         <ToggleButton x:Name="ColorChooserButton"
                                                       x:Uid="colorChooserButton"
-                                                      Grid.Column="2"
-                                                      MinWidth="34"
+                                                      Grid.Column="3"
+                                                      MinWidth="38"
                                                       Margin="1,2"
                                                       VerticalAlignment="Stretch"
                                                       Style="{ThemeResource ToggleButtonRevealStyle}"
+                                                      BorderThickness="0"
                                                       FontFamily="{StaticResource CalculatorFontFamily}"
                                                       AutomationProperties.AccessibilityView="Raw"
                                                       Content="&#xE790;"
@@ -735,13 +730,12 @@
                                                         <ResourceDictionary x:Key="Default">
                                                             <SolidColorBrush x:Name="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
                                                             <SolidColorBrush x:Name="ToggleButtonForegroundChecked" Color="{ThemeResource SystemChromeWhiteColor}"/>
-                                                            <SolidColorBrush x:Name="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                             <SolidColorBrush x:Name="ToggleButtonRevealBackground" Color="Transparent"/>
                                                             <SolidColorBrush x:Name="ToggleButtonRevealBackgroundChecked" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                             <SolidColorBrush x:Name="ToggleButtonRevealBackgroundCheckedPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                             <SolidColorBrush x:Name="ToggleButtonRevealBackgroundCheckedPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                             <SolidColorBrush x:Name="ToggleButtonRevealBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                            <SolidColorBrush x:Name="ToggleButtonRevealBackgroundPointerOver" Color="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
+                                                            <SolidColorBrush x:Name="ToggleButtonRevealBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}"/>
                                                             <RevealBorderBrush x:Key="ToggleButtonRevealBorderBrush"
                                                                                Opacity="0.33"
                                                                                FallbackColor="Transparent"
@@ -759,92 +753,44 @@
                                             </ToggleButton.Resources>
                                         </ToggleButton>
                                         <FontIcon x:Name="ErrorIcon"
-                                                  Grid.Column="3"
-                                                  MinWidth="28"
+                                                  Grid.Column="4"
+                                                  MinWidth="32"
                                                   VerticalAlignment="Stretch"
-                                                  Foreground="{ThemeResource ButtonForeground}"
-                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  Foreground="{ThemeResource SystemFillColorCriticalBrush}"
+                                                  FontFamily="{ThemeResource CalculatorFontFamily}"
                                                   FontSize="16"
                                                   AutomationProperties.AccessibilityView="Raw"
-                                                  Glyph="&#xE7BA;"
+                                                  Glyph="&#xF736;"
                                                   ToolTipService.ToolTip="{TemplateBinding ErrorText}"
                                                   Visibility="Collapsed"/>
-                                        <Grid x:Name="RemoveButtonPanel" Grid.Column="4">
+                                        <Grid x:Name="RemoveButtonPanel" Grid.Column="5">
                                             <Button x:Name="RemoveButton"
                                                     x:Uid="removeButton"
-                                                    MinWidth="34"
+                                                    MinWidth="38"
                                                     Margin="1,2"
                                                     VerticalAlignment="Stretch"
                                                     Style="{StaticResource ButtonRevealStyle}"
+                                                    BorderThickness="0"
                                                     FontFamily="{StaticResource CalculatorFontFamily}"
                                                     AutomationProperties.AccessibilityView="Raw"
-                                                    Content="&#xECC9;"
+                                                    Content="&#xE74D;"
                                                     IsTabStop="False"
-                                                    Visibility="Collapsed">
-                                                <Button.Resources>
-                                                    <ResourceDictionary>
-                                                        <ResourceDictionary.ThemeDictionaries>
-                                                            <ResourceDictionary x:Key="Default">
-                                                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
-                                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                                <SolidColorBrush x:Key="ButtonRevealBackgroundPointerOver" Color="Transparent"/>
-                                                                <SolidColorBrush x:Key="ButtonRevealBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                                <SolidColorBrush x:Key="ButtonRevealBackground" Color="Transparent"/>
-                                                                <RevealBorderBrush x:Key="ButtonRevealBorderBrush"
-                                                                                   Opacity="0.33"
-                                                                                   FallbackColor="Transparent"
-                                                                                   TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                                   Color="Transparent"/>
-                                                                <RevealBorderBrush x:Key="ButtonRevealBorderBrushPointerOver"
-                                                                                   Opacity="0.33"
-                                                                                   FallbackColor="{StaticResource SystemBaseMediumLowColor}"
-                                                                                   TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                                   Color="{StaticResource SystemRevealBaseMediumLowColor}"/>
-                                                            </ResourceDictionary>
-                                                            <ResourceDictionary x:Key="HighContrast"/>
-                                                        </ResourceDictionary.ThemeDictionaries>
-                                                    </ResourceDictionary>
-                                                </Button.Resources>
-                                            </Button>
+                                                    Visibility="Collapsed"/>
                                         </Grid>
                                         <Button x:Name="DeleteButton"
-                                                Grid.Column="4"
-                                                MinWidth="34"
+                                                Grid.Column="5"
+                                                MinWidth="38"
                                                 Margin="1,2"
                                                 VerticalAlignment="Stretch"
                                                 Style="{StaticResource ButtonRevealStyle}"
                                                 Foreground="{ThemeResource TextControlForegroundFocused}"
-                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                BorderThickness="0"
+                                                FontFamily="{ThemeResource CalculatorFontFamily}"
                                                 FontSize="12"
                                                 AutomationProperties.AccessibilityView="Raw"
-                                                Content="&#xE10A;"
+                                                Content="&#xE947;"
                                                 IsTabStop="False"
-                                                Visibility="Collapsed">
-                                            <Button.Resources>
-                                                <ResourceDictionary>
-                                                    <ResourceDictionary.ThemeDictionaries>
-                                                        <ResourceDictionary x:Key="Default">
-                                                            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
-                                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackgroundPointerOver" Color="Transparent"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                            <SolidColorBrush x:Key="ButtonRevealBackground" Color="{ThemeResource TextControlBackgroundFocused}"/>
-                                                            <RevealBorderBrush x:Key="ButtonRevealBorderBrush"
-                                                                               Opacity="0.33"
-                                                                               FallbackColor="Transparent"
-                                                                               TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                               Color="Transparent"/>
-                                                            <RevealBorderBrush x:Key="ButtonRevealBorderBrushPointerOver"
-                                                                               Opacity="0.33"
-                                                                               FallbackColor="{StaticResource SystemBaseMediumLowColor}"
-                                                                               TargetTheme="{ThemeResource CalcApplicationTheme}"
-                                                                               Color="{StaticResource SystemRevealBaseMediumLowColor}"/>
-                                                        </ResourceDictionary>
-                                                        <ResourceDictionary x:Key="HighContrast"/>
-                                                    </ResourceDictionary.ThemeDictionaries>
-                                                </ResourceDictionary>
-                                            </Button.Resources>
-                                        </Button>
+                                                Visibility="Collapsed"/>
                                     </Grid>
                                 </Border>
                             </Grid>
@@ -880,7 +826,7 @@
                         <Setter Property="IsTabStop" Value="False"/>
                         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                         <Setter Property="Padding" Value="0"/>
-                        <Setter Property="Margin" Value="1,0,1,0"/>
+                        <Setter Property="Margin" Value="4,0"/>
                     </Style>
                 </ListView.ItemContainerStyle>
                 <ListView.ItemTemplate>
@@ -922,7 +868,7 @@
             <StackPanel x:Name="VariableStackPanel" x:Load="{x:Bind local:EquationInputArea.ManageEditVariablesButtonLoaded(Variables.Count), Mode=OneWay}">
                 <Rectangle Height="1"
                            Margin="12"
-                           Fill="{ThemeResource DividerBrush}"/>
+                           Fill="{ThemeResource DividerStrokeColorDefaultBrush}"/>
                 <ListView x:Uid="VariableListView"
                           IsItemClickEnabled="False"
                           ItemTemplate="{StaticResource VariableDataTemplate}"

src/Calculator/Views/GraphingCalculator/EquationStylePanelControl.xaml

@@ -75,7 +75,9 @@
                 </Style>
             </GridView.Resources>
             <GridView.Header>
-                <TextBlock x:Uid="LineColorText" Margin="8,0,8,8"/>
+                <TextBlock x:Uid="LineColorText"
+                           Margin="8,0,8,8"
+                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
             </GridView.Header>
             <GridView.ItemTemplate>
                 <DataTemplate x:DataType="Brush">
@@ -106,7 +108,9 @@
                   Visibility="Visible"
                   IsEnabled="{x:Bind EnableLineStylePicker, Mode=OneWay}">
             <ComboBox.Header>
-                <TextBlock x:Uid="StyleChooserBoxHeading" Margin="0,0,8,8"/>
+                <TextBlock x:Uid="StyleChooserBoxHeading"
+                           Margin="0,0,8,8"
+                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
             </ComboBox.Header>
             <ComboBox.ItemTemplate>
                 <!-- Set x:DataType to be Platform::Object so that we can pass it to the x:Bind function directly since we cannot pass an enum in c++/cx -->

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.GraphingCalculator"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             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:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
              xmlns:converters="using:CalculatorApp.Converters"
@@ -18,40 +19,27 @@
             <Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
                 <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                 <Setter Property="Background" Value="Transparent"/>
-                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-                <Setter Property="BorderThickness" Value="1"/>
-                <Setter Property="Margin" Value="-1"/>
+                <Setter Property="BorderThickness" Value="0"/>
                 <Setter Property="Padding" Value="8"/>
                 <Setter Property="HorizontalAlignment" Value="Stretch"/>
                 <Setter Property="VerticalAlignment" Value="Stretch"/>
                 <Setter Property="HorizontalContentAlignment" Value="Center"/>
                 <Setter Property="VerticalContentAlignment" Value="Center"/>
                 <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
-                <Setter Property="FontWeight" Value="Normal"/>
             </Style>
 
-            <Style x:Key="GraphButtonStyle" TargetType="Button">
-                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
-                <Setter Property="Background" Value="Transparent"/>
-                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-                <Setter Property="BorderThickness" Value="1"/>
-                <Setter Property="Margin" Value="-1"/>
+            <Style x:Key="GraphButtonStyle"
+                   BasedOn="{StaticResource SubtleButtonStyle}"
+                   TargetType="Button">
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}"/>
                 <Setter Property="Padding" Value="8"/>
-                <Setter Property="HorizontalAlignment" Value="Stretch"/>
-                <Setter Property="VerticalAlignment" Value="Stretch"/>
-                <Setter Property="HorizontalContentAlignment" Value="Center"/>
-                <Setter Property="VerticalContentAlignment" Value="Center"/>
-                <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
-                <Setter Property="FontWeight" Value="Normal"/>
             </Style>
 
             <Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton">
                 <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
                 <Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/>
-                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-                <Setter Property="BorderThickness" Value="1"/>
-                <Setter Property="Margin" Value="-1"/>
-                <Setter Property="Padding" Value="0"/>
+                <Setter Property="BorderThickness" Value="0"/>
+                <Setter Property="Padding" Value="4"/>
                 <Setter Property="HorizontalAlignment" Value="Stretch"/>
                 <Setter Property="VerticalAlignment" Value="Stretch"/>
                 <Setter Property="HorizontalContentAlignment" Value="Center"/>
@@ -66,7 +54,7 @@
             </Style>
 
             <Style x:Key="GraphModeToggleSwitchStyle" TargetType="ToggleSwitch">
-                <Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}"/>
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}"/>
                 <Setter Property="HorizontalAlignment" Value="Left"/>
                 <Setter Property="VerticalAlignment" Value="Center"/>
                 <Setter Property="HorizontalContentAlignment" Value="Left"/>
@@ -204,7 +192,7 @@
                                                RadiusY="4"/>
                                     <Grid x:Name="SwitchKnob" HorizontalAlignment="Left">
                                         <Rectangle Width="32"
-                                                   Fill="{ThemeResource SystemAccentColor}"
+                                                   Fill="{ThemeResource ToggleSwitchKnobBrush}"
                                                    RadiusX="4"
                                                    RadiusY="4"/>
                                         <Grid.RenderTransform>
@@ -212,7 +200,7 @@
                                         </Grid.RenderTransform>
                                     </Grid>
                                     <Rectangle x:Name="OuterBorderStroke"
-                                               Stroke="{ThemeResource SystemAccentColor}"
+                                               Stroke="{ThemeResource ToggleSwitchOuterBorderStrokeBrush}"
                                                StrokeThickness="1"
                                                IsHitTestVisible="False"
                                                RadiusX="4"
@@ -223,7 +211,7 @@
                                         <FontIcon x:Name="GraphIcon"
                                                   Margin="0,0,22,0"
                                                   VerticalAlignment="Center"
-                                                  Foreground="White"
+                                                  Foreground="{ThemeResource ToggleSwitchIconOnBrush}"
                                                   FontFamily="{StaticResource CalculatorFontFamily}"
                                                   FontSize="14"
                                                   Glyph="&#xF770;"/>
@@ -232,6 +220,7 @@
                                               FlowDirection="LeftToRight">
                                             <FontIcon x:Name="EquationsIcon"
                                                       VerticalAlignment="Center"
+                                                      Foreground="{ThemeResource ToggleSwitchIconOffBrush}"
                                                       FontFamily="{StaticResource CalculatorFontFamily}"
                                                       FontSize="12"
                                                       Glyph="&#xF893;"/>
@@ -239,6 +228,7 @@
                                                        Margin="0,8,-1,0"
                                                        HorizontalAlignment="Right"
                                                        VerticalAlignment="Bottom"
+                                                       Foreground="{ThemeResource ToggleSwitchIconOffBrush}"
                                                        FontSize="10"
                                                        FontWeight="Light"
                                                        Text="x"/>
@@ -251,19 +241,20 @@
                                                 Orientation="Horizontal">
                                         <FontIcon Margin="0,0,22,0"
                                                   VerticalAlignment="Center"
+                                                  Foreground="{ThemeResource ToggleSwitchIconOffBrush}"
                                                   FontFamily="{StaticResource CalculatorFontFamily}"
                                                   FontSize="14"
                                                   Glyph="&#xF770;"/>
                                         <Grid Margin="-2,0,2,0" VerticalAlignment="Center">
                                             <FontIcon VerticalAlignment="Center"
-                                                      Foreground="White"
+                                                      Foreground="{ThemeResource ToggleSwitchIconOnBrush}"
                                                       FontFamily="{StaticResource CalculatorFontFamily}"
                                                       FontSize="12"
                                                       Glyph="&#xF893;"/>
                                             <TextBlock Margin="0,8,-1,0"
                                                        HorizontalAlignment="Right"
                                                        VerticalAlignment="Bottom"
-                                                       Foreground="White"
+                                                       Foreground="{ThemeResource ToggleSwitchIconOnBrush}"
                                                        FontSize="10"
                                                        FontWeight="Light"
                                                        Text="x"/>
@@ -292,7 +283,9 @@
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="ToggleButton">
-                            <ContentPresenter x:Name="ContentPresenter">
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}"
+                                              contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
                                         <VisualState x:Name="Normal">
@@ -301,7 +294,7 @@
                                         <VisualState x:Name="PointerOver">
                                             <Storyboard>
                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPointerOver}"/>
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorSecondaryBrush}"/>
                                                 </ObjectAnimationUsingKeyFrames>
                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/>
@@ -328,7 +321,7 @@
                                         <VisualState x:Name="CheckedPointerOver">
                                             <Storyboard>
                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPointerOver}"/>
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorSecondaryBrush}"/>
                                                 </ObjectAnimationUsingKeyFrames>
                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/>
@@ -372,6 +365,11 @@
 
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Default">
+                    <StaticResource x:Key="ToggleSwitchKnobBrush" ResourceKey="AccentFillColorDefaultBrush"/>
+                    <StaticResource x:Key="ToggleSwitchOuterBorderStrokeBrush" ResourceKey="AccentFillColorDefaultBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOnBrush" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOffBrush" ResourceKey="TextFillColorPrimaryBrush"/>
+
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle"
                            BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
                            TargetType="ToggleButton"/>
@@ -404,7 +402,7 @@
                     <Style x:Key="GraphTooltipStyle" TargetType="Border">
                         <Setter Property="BorderBrush" Value="#e0e0e0"/>
                         <Setter Property="BorderThickness" Value="1"/>
-                        <Setter Property="CornerRadius" Value="4"/>
+                        <Setter Property="CornerRadius" Value="8"/>
                         <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
                     </Style>
                     <SolidColorBrush x:Key="SwitchToggleBackground" Color="#40000000"/>
@@ -415,14 +413,19 @@
                     </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
+                    <StaticResource x:Key="ToggleSwitchKnobBrush" ResourceKey="AccentFillColorDefaultBrush"/>
+                    <StaticResource x:Key="ToggleSwitchOuterBorderStrokeBrush" ResourceKey="AccentFillColorDefaultBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOnBrush" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOffBrush" ResourceKey="TextFillColorPrimaryBrush"/>
+
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle"
                            BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
                            TargetType="ToggleButton"/>
                     <Style x:Key="GraphControlCommandPanel" TargetType="Border">
-                        <Setter Property="Background" Value="{StaticResource SystemControlAcrylicElementBrush}"/>
-                        <Setter Property="BorderBrush" Value="#e0e0e0"/>
+                        <Setter Property="Background" Value="{ThemeResource SolidBackgroundFillColorBase}"/>
+                        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolid}"/>
                         <Setter Property="BorderThickness" Value="1"/>
-                        <Setter Property="CornerRadius" Value="4"/>
+                        <Setter Property="CornerRadius" Value="8"/>
                     </Style>
                     <Style x:Key="ThemedGraphRepeatButtonStyle"
                            BasedOn="{StaticResource GraphRepeatButtonStyle}"
@@ -450,6 +453,13 @@
                     <SolidColorBrush x:Key="SwitchToggleBackground" Color="#60ffffff"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
+                    <StaticResource x:Key="ToggleSwitchKnobBrush" ResourceKey="SystemControlHighlightBaseHighBrush"/>
+                    <StaticResource x:Key="ToggleSwitchOuterBorderStrokeBrush" ResourceKey="SystemControlHighlightBaseHighBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOnBrush" ResourceKey="SystemColorButtonTextColorBrush"/>
+                    <StaticResource x:Key="ToggleSwitchIconOffBrush" ResourceKey="SystemColorButtonTextColorBrush"/>
+                    <StaticResource x:Key="ToggleSwitchFillOffPointerOver" ResourceKey="ControlFillColorTransparentBrush"/>
+                    <StaticResource x:Key="ToggleSwitchFillOffPressed" ResourceKey="SystemControlHighlightBaseHighBrush"/>
+
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/>
                     <Style x:Key="GraphControlCommandPanel" TargetType="Border"/>
                     <Style x:Key="ThemedGraphRepeatButtonStyle" TargetType="RepeatButton">
@@ -562,23 +572,9 @@
                             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#20000000"/>
                             <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="#10000000"/>
                             <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="#20000000"/>
-                            <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
-                            <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
-                            <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
-                            <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
-                        </ResourceDictionary>
-                        <ResourceDictionary x:Key="Dark">
-                            <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
-                            <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
-                            <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
-                            <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
-                        </ResourceDictionary>
-                        <ResourceDictionary x:Key="HighContrast">
-                            <CornerRadius x:Key="TopButtonCornerRadius">0</CornerRadius>
-                            <CornerRadius x:Key="BottomButtonCornerRadius">0</CornerRadius>
-                            <CornerRadius x:Key="LeftButtonCornerRadius">0</CornerRadius>
-                            <CornerRadius x:Key="RightButtonCornerRadius">0</CornerRadius>
                         </ResourceDictionary>
+                        <ResourceDictionary x:Key="Dark"/>
+                        <ResourceDictionary x:Key="HighContrast"/>
                     </ResourceDictionary.ThemeDictionaries>
                 </ResourceDictionary>
             </Grid.Resources>
@@ -600,46 +596,64 @@
                     </MenuFlyout>
                 </graphControl:Grapher.ContextFlyout>
             </graphControl:Grapher>
-            <Border MinHeight="36"
-                    Margin="0,12,12,0"
+            <Border MinHeight="40"
+                    Margin="0,8,8,0"
                     HorizontalAlignment="Right"
                     VerticalAlignment="Top"
                     Style="{ThemeResource GraphControlCommandPanel}">
                 <StackPanel Orientation="Horizontal">
                     <ToggleButton x:Name="ActiveTracing"
-                                  MinWidth="40"
-                                  Margin="0,-1"
+                                  MinWidth="32"
+                                  Margin="4"
                                   Style="{ThemeResource ThemedGraphToggleButtonStyle}"
-                                  contract7Present:CornerRadius="{ThemeResource LeftButtonCornerRadius}"
+                                  contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                                   AutomationProperties.Name="{x:Bind local:GraphingCalculator.GetTracingLegend(GraphingControl.ActiveTracing), Mode=OneWay}"
                                   Checked="ActiveTracing_Checked"
                                   IsChecked="{x:Bind GraphingControl.ActiveTracing, Mode=TwoWay}"
                                   Unchecked="ActiveTracing_Unchecked">
+                        <ToggleButton.Resources>
+                            <ResourceDictionary>
+                                <ResourceDictionary.ThemeDictionaries>
+                                    <ResourceDictionary x:Key="Default">
+                                        <StaticResource x:Key="ToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                    </ResourceDictionary>
+                                    <ResourceDictionary x:Key="Light">
+                                        <StaticResource x:Key="ToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                    </ResourceDictionary>
+                                    <ResourceDictionary x:Key="HighContrast">
+                                        <StaticResource x:Key="ToggleButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush"/>
+                                    </ResourceDictionary>
+                                </ResourceDictionary.ThemeDictionaries>
+                            </ResourceDictionary>
+                        </ToggleButton.Resources>
                         <ToolTipService.ToolTip>
                             <ToolTip Content="{x:Bind ActiveTracing.(AutomationProperties.Name), Mode=OneWay}"/>
                         </ToolTipService.ToolTip>
                         <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
-                                  FontSize="18"
+                                  FontSize="16"
                                   Glyph="&#xE3B3;"/>
                     </ToggleButton>
 
                     <Button x:Uid="shareButton"
-                            MinWidth="40"
+                            MinWidth="32"
+                            Margin="0,4,0,4"
                             Style="{ThemeResource ThemedGraphButtonStyle}"
+                            contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                             Click="OnShareClick">
-                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
-                                  FontSize="18"
+                        <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
+                                  FontSize="16"
                                   Glyph="&#xE72D;"/>
                     </Button>
 
                     <Button x:Name="GraphSettingsButton"
                             x:Uid="graphSettingsButton"
-                            MinWidth="40"
+                            MinWidth="3"
+                            Margin="4"
                             Style="{ThemeResource ThemedGraphButtonStyle}"
-                            contract7Present:CornerRadius="{ThemeResource RightButtonCornerRadius}"
+                            contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                             Click="GraphSettingsButton_Click">
                         <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
-                                  FontSize="18"
+                                  FontSize="16"
                                   Glyph="&#xE3B4;"/>
                     </Button>
                 </StackPanel>
@@ -657,24 +671,43 @@
                           Stretch="Uniform"/>
                 </Grid>
             </Canvas>
-            <Border MinWidth="36"
-                    Margin="0,0,12,12"
+            <Border MinWidth="40"
+                    Margin="0,0,8,8"
                     HorizontalAlignment="Right"
                     VerticalAlignment="Bottom"
                     Style="{ThemeResource GraphControlCommandPanel}">
                 <StackPanel Orientation="Vertical">
+                    <StackPanel.Resources>
+                        <ResourceDictionary>
+                            <ResourceDictionary.ThemeDictionaries>
+                                <ResourceDictionary x:Key="Default">
+                                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+                                </ResourceDictionary>
+                                <ResourceDictionary x:Key="Light">
+                                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+                                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+                                </ResourceDictionary>
+                                <ResourceDictionary x:Key="HighContrast">
+                                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush"/>
+                                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="SystemColorHighlightTextColorBrush"/>
+                                </ResourceDictionary>
+                            </ResourceDictionary.ThemeDictionaries>
+                        </ResourceDictionary>
+                    </StackPanel.Resources>
                     <RepeatButton x:Name="ZoomInButton"
                                   x:Uid="zoomInButton"
-                                  MinHeight="40"
+                                  MinHeight="32"
+                                  Margin="4"
                                   HorizontalAlignment="Stretch"
                                   Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
-                                  FontFamily="{StaticResource SymbolThemeFontFamily}"
-                                  contract7Present:CornerRadius="{ThemeResource TopButtonCornerRadius}"
+                                  FontFamily="{StaticResource CalculatorFontFamily}"
+                                  contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                                   AutomationProperties.AutomationId="zoomInButton"
                                   Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}">
-                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
+                        <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
                                   FontSize="14"
-                                  Glyph="&#xE710;"/>
+                                  Glyph="&#xE948;"/>
                         <RepeatButton.KeyboardAccelerators>
                             <KeyboardAccelerator Key="Add" Modifiers="Control"/>
                         </RepeatButton.KeyboardAccelerators>
@@ -682,25 +715,27 @@
 
                     <RepeatButton x:Name="ZoomOutButton"
                                   x:Uid="zoomOutButton"
-                                  MinHeight="40"
+                                  MinHeight="32"
+                                  Margin="4,0,4,0"
                                   HorizontalAlignment="Stretch"
                                   Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
-                                  FontFamily="{StaticResource SymbolThemeFontFamily}"
+                                  FontFamily="{StaticResource CalculatorFontFamily}"
+                                  contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                                   AutomationProperties.AutomationId="zoomOutButton"
                                   Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}">
-                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
+                        <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
                                   FontSize="14"
-                                  Glyph="&#xE738;"/>
+                                  Glyph="&#xE949;"/>
                         <RepeatButton.KeyboardAccelerators>
                             <KeyboardAccelerator Key="Subtract" Modifiers="Control"/>
                         </RepeatButton.KeyboardAccelerators>
                     </RepeatButton>
 
                     <ToggleButton x:Uid="graphViewButton"
-                                  MinWidth="40"
-                                  MinHeight="40"
+                                  MinHeight="32"
+                                  Margin="4"
                                   Style="{ThemeResource ThemedGraphViewToggleButtonStyle}"
-                                  contract7Present:CornerRadius="{ThemeResource BottomButtonCornerRadius}"
+                                  contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                                   AutomationProperties.AutomationId="graphViewButton"
                                   Click="GraphViewButton_Click"
                                   IsChecked="{x:Bind IsManualAdjustment, Mode=TwoWay}">

src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml

@@ -87,8 +87,9 @@
                 </Setter>
             </Style>
             <Style x:Key="SubTitleTextBoxStyle" TargetType="TextBlock">
-                <Setter Property="FontSize" Value="16"/>
-                <Setter Property="FontWeight" Value="Medium"/>
+                <Setter Property="FontSize" Value="12"/>
+                <Setter Property="FontWeight" Value="Normal"/>
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
             </Style>
 
             <Style x:Key="ErrorTextBoxStyle" TargetType="TextBox">
@@ -97,7 +98,9 @@
             </Style>
 
             <DataTemplate x:Key="XYTextBoxHeaderTemplate" x:DataType="x:String">
-                <TextBlock FontSize="14" Text="{x:Bind}"/>
+                <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                           FontSize="12"
+                           Text="{x:Bind}"/>
             </DataTemplate>
 
             <converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
@@ -111,7 +114,7 @@
                        FontSize="20"
                        FontWeight="Medium"
                        AutomationProperties.HeadingLevel="Level1"/>
-            <Grid Margin="0,12,0,0">
+            <Grid Margin="0,16,0,4">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="Auto"/>
@@ -122,7 +125,18 @@
                            AutomationProperties.HeadingLevel="Level2"/>
                 <HyperlinkButton x:Uid="ResetViewButton"
                                  Grid.Column="1"
-                                 Click="ResetViewButton_Clicked"/>
+                                 Padding="0"
+                                 FontSize="12"
+                                 Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                 BorderThickness="0"
+                                 Click="ResetViewButton_Clicked">
+                    <HyperlinkButton.Resources>
+                        <ResourceDictionary>
+                            <StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/>
+                            <StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/>
+                        </ResourceDictionary>
+                    </HyperlinkButton.Resources>
+                </HyperlinkButton>
             </Grid>
             <Grid>
                 <Grid.RowDefinitions>
@@ -140,7 +154,7 @@
                          x:Uid="GraphSettingsXMin"
                          MaxWidth="160"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMinError), Mode=OneWay}"
-                         contract7Present:CornerRadius="2"
+                         contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
                          Text="{x:Bind ViewModel.XMin, Mode=TwoWay}"/>
@@ -149,7 +163,7 @@
                          Grid.Column="2"
                          MaxWidth="160"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMaxError), Mode=OneWay}"
-                         contract7Present:CornerRadius="2"
+                         contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
                          Text="{x:Bind ViewModel.XMax, Mode=TwoWay}"/>
@@ -158,7 +172,7 @@
                          Grid.Row="2"
                          MaxWidth="160"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMinError), Mode=OneWay}"
-                         contract7Present:CornerRadius="2"
+                         contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
                          Text="{x:Bind ViewModel.YMin, Mode=TwoWay}"/>
@@ -168,7 +182,7 @@
                          Grid.Column="2"
                          MaxWidth="160"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMaxError), Mode=OneWay}"
-                         contract7Present:CornerRadius="2"
+                         contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
                          Text="{x:Bind ViewModel.YMax, Mode=TwoWay}"/>
@@ -184,17 +198,18 @@
                 <RadioButton x:Name="Radians"
                              x:Uid="TrigModeRadians"
                              Style="{StaticResource TrigUnitsRadioButtonStyle}"
-                             contract7Present:CornerRadius="4,0,0,4"
+                             contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                              IsChecked="{x:Bind ViewModel.TrigModeRadians, Mode=TwoWay}"/>
                 <RadioButton x:Name="Degrees"
                              x:Uid="TrigModeDegrees"
-                             Margin="1,0"
+                             Margin="4,0"
                              Style="{StaticResource TrigUnitsRadioButtonStyle}"
+                             contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                              IsChecked="{x:Bind ViewModel.TrigModeDegrees, Mode=TwoWay}"/>
                 <RadioButton x:Name="Gradians"
                              x:Uid="TrigModeGradians"
                              Style="{StaticResource TrigUnitsRadioButtonStyle}"
-                             contract7Present:CornerRadius="0,4,4,0"
+                             contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                              IsChecked="{x:Bind ViewModel.TrigModeGradians, Mode=TwoWay}"/>
             </StackPanel>
 

src/Calculator/Views/GraphingCalculator/KeyGraphFeaturesPanel.xaml

@@ -130,8 +130,8 @@
             </Style>
 
             <Style x:Name="KGF_TitleTextBlockStyle" TargetType="TextBlock">
-                <Setter Property="FontWeight" Value="Medium"/>
-                <Setter Property="FontSize" Value="16"/>
+                <Setter Property="FontWeight" Value="Normal"/>
+                <Setter Property="FontSize" Value="12"/>
                 <Setter Property="TextWrapping" Value="WrapWholeWords"/>
                 <Setter Property="AutomationProperties.HeadingLevel" Value="Level2"/>
             </Style>
@@ -153,6 +153,7 @@
                 <StackPanel>
                     <TextBlock x:Name="TitleTextBlock"
                                Style="{StaticResource KGF_TitleTextBlockStyle}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind Title, Mode=OneWay}"/>
                     <ItemsControl ItemsSource="{x:Bind DisplayItems, Mode=OneWay}" UseSystemFocusVisuals="True">
                         <ItemsControl.ItemTemplate>
@@ -168,6 +169,7 @@
                 <StackPanel>
                     <TextBlock x:Name="TitleTextBlock"
                                Style="{StaticResource KGF_TitleTextBlockStyle}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind Title, Mode=OneWay}"/>
                     <ItemsControl ItemsSource="{x:Bind GridItems, Mode=OneWay}" UseSystemFocusVisuals="True">
                         <ItemsControl.ItemTemplate>
@@ -195,6 +197,7 @@
                 <StackPanel>
                     <TextBlock x:Name="TitleTextBlock"
                                Style="{StaticResource KGF_TitleTextBlockStyle}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind Title, Mode=OneWay}"/>
                     <ItemsControl ItemsSource="{x:Bind DisplayItems, Mode=OneWay}" UseSystemFocusVisuals="True">
                         <ItemsControl.ItemTemplate>
@@ -224,7 +227,9 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
-        <Grid Margin="0,0,1,0" Background="{ThemeResource TextControlBackground}">
+        <Grid Margin="4,0"
+              Background="{ThemeResource TextControlBackground}"
+              CornerRadius="{ThemeResource ControlCornerRadius}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
@@ -234,7 +239,7 @@
                     MinWidth="44"
                     VerticalAlignment="Stretch"
                     Style="{ThemeResource ThemedBackButtonStyle}"
-                    contract7Present:CornerRadius="0"
+                    contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
                     Click="BackButton_Click">
                 <StackPanel Margin="5,0"
                             HorizontalAlignment="Center"
@@ -242,7 +247,7 @@
                             Orientation="Horizontal">
                     <FontIcon Margin="0,0,6,0"
                               VerticalAlignment="Center"
-                              FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                              FontFamily="{StaticResource CalculatorFontFamily}"
                               FontSize="16"
                               Glyph="&#xE72B;"/>
                     <StackPanel FlowDirection="LeftToRight" Orientation="Horizontal">
@@ -267,6 +272,7 @@
                    Margin="12,12,10,0"
                    Style="{StaticResource KGF_TitleTextBlockStyle}"
                    FontSize="20"
+                   FontWeight="Medium"
                    AutomationProperties.HeadingLevel="Level1"/>
 
         <ListView x:Name="KeyGraphFeaturesListView"

src/Calculator/Views/HistoryList.xaml

@@ -57,7 +57,7 @@
 
             <DataTemplate x:Key="HistoryItemTemplate" x:DataType="model:HistoryItemViewModel">
                 <muxc:SwipeControl RightItems="{StaticResource HistorySwipeItems}">
-                    <StackPanel Margin="0,6,4,6" Background="Transparent">
+                    <StackPanel Margin="0,6,16,6" Background="Transparent">
                         <TextBlock x:Name="ExprTextBlock"
                                    Margin="0,0,0,4"
                                    HorizontalAlignment="Right"
@@ -70,8 +70,7 @@
                                    TextWrapping="Wrap"/>
                         <TextBlock x:Name="ResultTextBlock"
                                    HorizontalAlignment="Right"
-                                   Style="{ThemeResource TitleTextBlockStyle}"
-                                   FontWeight="SemiBold"
+                                   Style="{ThemeResource SubtitleTextBlockStyle}"
                                    AutomationProperties.AutomationId="HistoryItemValue"
                                    AutomationProperties.Name="{x:Bind AccResult}"
                                    IsTextSelectionEnabled="True"
@@ -122,9 +121,10 @@
                 Padding="0"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
-                Background="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}"
+                Background="{ThemeResource SolidBackgroundFillColorBase}"
                 BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
-                BorderThickness="{ThemeResource HighContrastThicknessTop}"/>
+                BorderThickness="{ThemeResource HighContrastThicknessTop}"
+                CornerRadius="{ThemeResource OverlayCornerRadius}"/>
 
         <Grid x:Name="HistoryListRootGrid" Grid.Row="1">
             <Grid.RowDefinitions>
@@ -133,15 +133,15 @@
             </Grid.RowDefinitions>
             <TextBlock x:Name="HistoryEmpty"
                        x:Uid="HistoryEmpty"
-                       Margin="16,14,24,0"
-                       Style="{ThemeResource BaseTextBlockStyle}"
-                       Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
-                       FontWeight="SemiLight"
+                       Margin="12,8,24,0"
+                       Style="{ThemeResource BodyTextBlockStyle}"
+                       Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                        TextWrapping="Wrap"
                        Visibility="{x:Bind Model.ItemsCount, Converter={StaticResource ItemSizeToVisibilityConverter}, Mode=OneWay}"/>
             <ListView x:Name="HistoryListView"
                       MinHeight="60"
-                      Padding="0,12,0,0"
+                      Margin="4,0"
+                      Padding="0,24,0,0"
                       HorizontalAlignment="Stretch"
                       AutomationProperties.AutomationId="HistoryListView"
                       IsItemClickEnabled="True"

src/Calculator/Views/MainPage.xaml

@@ -11,7 +11,7 @@
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       xmlns:vm="using:CalculatorApp.ViewModel"
       x:Name="PageRoot"
-      Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
+      muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
       Loaded="OnPageLoaded"
       mc:Ignorable="d">
 
@@ -25,21 +25,10 @@
             <Setter Property="IsEnabled" Value="False"/>
             <Setter Property="Margin" Value="0,0,0,0"/>
         </Style>
-        <Style x:Key="AboutFlyoutPresenterStyle" TargetType="FlyoutPresenter">
-            <Setter Property="IsTabStop" Value="False"/>
-            <Setter Property="AutomationProperties.AccessibilityView" Value="Raw"/>
-            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
-        </Style>
         <Style x:Key="NavViewItemStyle" TargetType="muxc:NavigationViewItem">
             <Setter Property="KeyTipPlacementMode" Value="Right"/>
         </Style>
 
-        <Style x:Key="CategoryNameTextBlockStyle" TargetType="TextBlock">
-            <Setter Property="FontSize" Value="20"/>
-            <Setter Property="FontWeight" Value="SemiBold"/>
-            <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
-        </Style>
-
         <converters:BooleanToVisibilityNegationConverter x:Key="BooleanToVisibilityNegationConverter"/>
         <converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
     </Page.Resources>
@@ -93,64 +82,13 @@
                     Command="{x:Bind Model.PasteCommand}"/>
         </StackPanel>
 
-        <local:TitleBar Grid.Row="0"
+        <local:TitleBar x:Name="AppTitleBar"
+                        Grid.Row="0"
                         AlwaysOnTopClick="TitleBarAlwaysOnTopButtonClick"
+                        BackButtonClick="TitleBarBackButtonClick"
+                        BackButtonVisibility="{x:Bind ShouldShowBackButton(Model.IsAlwaysOnTop, Popup.IsOpen), Mode=OneWay}"
                         IsAlwaysOnTopMode="{x:Bind Model.IsAlwaysOnTop, Mode=OneWay}"/>
 
-        <Grid Grid.Row="1">
-            <Border x:Name="CalcHolder">
-                <!-- PLACEHOLDER!!!! This is where the calculator goes when it is delay loaded -->
-            </Border>
-            <Border x:Name="DateCalcHolder">
-                <!-- PLACEHOLDER!!!! This is where the date calculator goes when it is delay loaded -->
-            </Border>
-            <Border x:Name="GraphingCalcHolder">
-                <!-- PLACEHOLDER!!!! This is where the graphing calculator goes when it is delay loaded -->
-            </Border>
-            <Border x:Name="ConverterHolder">
-                <!-- PLACEHOLDER!!!! This is where the converter goes when it is delay loaded -->
-            </Border>
-        </Grid>
-
-        <Grid Grid.Row="1"
-              Height="{StaticResource HamburgerHeight}"
-              HorizontalAlignment="Left"
-              VerticalAlignment="Top">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{StaticResource HamburgerHeightGridLength}"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-            </Grid.ColumnDefinitions>
-
-            <TextBlock x:Name="Header"
-                       Grid.Column="1"
-                       Margin="8,-3,0,0"
-                       HorizontalAlignment="Left"
-                       VerticalAlignment="Center"
-                       Style="{StaticResource CategoryNameTextBlockStyle}"
-                       Text="{x:Bind Model.CategoryName, Mode=OneWay}"
-                       Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>
-
-            <Button x:Name="NormalAlwaysOnTopButton"
-                    x:Uid="EnterAlwaysOnTopButton"
-                    Grid.Column="2"
-                    Margin="10,0,0,0"
-                    VerticalAlignment="Center"
-                    HorizontalContentAlignment="Center"
-                    Style="{StaticResource SquareIconButtonStyle}"
-                    Background="Transparent"
-                    FontFamily="{StaticResource CalculatorFontFamily}"
-                    AutomationProperties.AutomationId="NormalAlwaysOnTopButton"
-                    Click="AlwaysOnTopButtonClick"
-                    Content="&#xEE49;"
-                    TabIndex="3"
-                    Visibility="{x:Bind Model.DisplayNormalAlwaysOnTopOption, Mode=OneWay}">
-                <Button.KeyboardAccelerators>
-                    <KeyboardAccelerator Key="Up" Modifiers="Menu"/>
-                </Button.KeyboardAccelerators>
-            </Button>
-        </Grid>
-
         <muxc:NavigationView x:Name="NavView"
                              x:Uid="NavView"
                              Grid.Row="1"
@@ -159,40 +97,81 @@
                              ExpandedModeThresholdWidth="Infinity"
                              IsBackButtonVisible="Collapsed"
                              IsPaneToggleButtonVisible="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
-                             IsSettingsVisible="False"
+                             IsSettingsVisible="True"
                              ItemInvoked="OnNavItemInvoked"
                              Loaded="OnNavLoaded"
                              MenuItemsSource="{x:Bind CreateUIElementsForCategories(Model.Categories), Mode=OneWay}"
-                             OpenPaneLength="{StaticResource SplitViewOpenPaneLength}"
+                             OpenPaneLength="{x:Bind NavigationViewOpenPaneLength(Model.IsAlwaysOnTop), Mode=OneWay}"
                              PaneClosed="OnNavPaneClosed"
                              PaneOpened="OnNavPaneOpened"
-                             PaneOpening="OnNavPaneOpening"
                              SelectionChanged="OnNavSelectionChanged"
                              TabIndex="1"
                              UseSystemFocusVisuals="True"
-                             IsEnabled="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
-                             x:Load="False">
+                             Visibility="{x:Bind Popup.IsOpen, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
+            <Grid>
+                <Grid>
+                    <Border x:Name="CalcHolder">
+                        <!-- PLACEHOLDER!!!! This is where the calculator goes when it is delay loaded -->
+                    </Border>
+                    <Border x:Name="DateCalcHolder">
+                        <!-- PLACEHOLDER!!!! This is where the date calculator goes when it is delay loaded -->
+                    </Border>
+                    <Border x:Name="GraphingCalcHolder">
+                        <!-- PLACEHOLDER!!!! This is where the graphing calculator goes when it is delay loaded -->
+                    </Border>
+                    <Border x:Name="ConverterHolder">
+                        <!-- PLACEHOLDER!!!! This is where the converter goes when it is delay loaded -->
+                    </Border>
+                </Grid>
 
-            <muxc:NavigationView.PaneFooter>
-                <muxc:NavigationViewItem x:Name="AboutButton"
-                                         x:Uid="AboutButton"
-                                         Style="{StaticResource NavViewItemStyle}"
-                                         KeyDown="OnAboutButtonKeyDown"
-                                         Tapped="OnAboutButtonClick">
-                    <muxc:NavigationViewItem.Icon>
-                        <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xe946;"/>
-                    </muxc:NavigationViewItem.Icon>
-                    <FlyoutBase.AttachedFlyout>
-                        <Flyout x:Name="AboutPageFlyout"
-                                x:Uid="AboutPageFlyout"
-                                Closed="OnAboutFlyoutClosed"
-                                FlyoutPresenterStyle="{StaticResource AboutFlyoutPresenterStyle}"
-                                Opened="OnAboutFlyoutOpened">
-                            <local:AboutFlyout x:Name="AboutPage" x:Load="False"/>
-                        </Flyout>
-                    </FlyoutBase.AttachedFlyout>
-                </muxc:NavigationViewItem>
-            </muxc:NavigationView.PaneFooter>
+                <Grid Height="{StaticResource HamburgerHeight}"
+                      HorizontalAlignment="Left"
+                      VerticalAlignment="Top">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="{StaticResource HamburgerHeightGridLength}"/>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+
+                    <TextBlock x:Name="Header"
+                               Grid.Column="1"
+                               Style="{StaticResource CategoryNameTextBlockStyle}"
+                               Text="{x:Bind Model.CategoryName, Mode=OneWay}"
+                               Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>
+
+                    <Button x:Name="NormalAlwaysOnTopButton"
+                            x:Uid="EnterAlwaysOnTopButton"
+                            Grid.Column="2"
+                            Style="{StaticResource SquareIconButtonStyle}"
+                            AutomationProperties.AutomationId="NormalAlwaysOnTopButton"
+                            Click="AlwaysOnTopButtonClick"
+                            Content="&#xEE49;"
+                            TabIndex="3"
+                            Visibility="{x:Bind Model.DisplayNormalAlwaysOnTopOption, Mode=OneWay}">
+                        <Button.KeyboardAccelerators>
+                            <KeyboardAccelerator Key="Up" Modifiers="Menu"/>
+                        </Button.KeyboardAccelerators>
+                    </Button>
+                </Grid>
+            </Grid>
         </muxc:NavigationView>
+
+        <Popup x:Name="Popup"
+               Closed="Popup_Closed"
+               HorizontalOffset="0"
+               IsLightDismissEnabled="False"
+               LightDismissOverlayMode="Off"
+               Opened="Popup_Opened"
+               VerticalOffset="{x:Bind AppTitleBar.Height, Mode=OneWay}">
+            <Popup.ChildTransitions>
+                <TransitionCollection>
+                    <EntranceThemeTransition/>
+                </TransitionCollection>
+            </Popup.ChildTransitions>
+
+            <Grid x:Name="PopupContent" x:Load="false">
+                <local:Settings/>
+            </Grid>
+        </Popup>
     </Grid>
 </Page>

src/Calculator/Views/MainPage.xaml.cs

@@ -18,7 +18,6 @@
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
 using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Navigation;
 using MUXC = Microsoft.UI.Xaml.Controls;
 
@@ -150,10 +149,20 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
             m_model.Initialize(initialMode);
         }
 
+        private void UpdatePopupSize(Windows.UI.Core.WindowSizeChangedEventArgs e)
+        {
+            if(PopupContent != null)
+            {
+                PopupContent.Width = e.Size.Width;
+                PopupContent.Height = e.Size.Height - AppTitleBar.ActualHeight;
+            }
+        }
+
         private void WindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
         {
             // We don't use layout aware page's view states, we have our own
             UpdateViewState();
+            UpdatePopupSize(e);
         }
 
         private void OnAppPropertyChanged(object sender, PropertyChangedEventArgs e)
@@ -232,18 +241,23 @@ private void OnAppPropertyChanged(object sender, PropertyChangedEventArgs e)
             }
         }
 
+        private void SelectNavigationItemByModel()
+        {
+            var menuItems = ((ObservableCollection<object>)NavView.MenuItemsSource);
+            var itemCount = ((int)menuItems.Count);
+            var flatIndex = NavCategory.GetFlatIndex(Model.Mode);
+
+            if (flatIndex >= 0 && flatIndex < itemCount)
+            {
+                NavView.SelectedItem = menuItems[flatIndex];
+            }
+        }
+
         private void OnNavLoaded(object sender, RoutedEventArgs e)
         {
             if (NavView.SelectedItem == null)
             {
-                var menuItems = ((ObservableCollection<object>)NavView.MenuItemsSource);
-                var itemCount = ((int)menuItems.Count);
-                var flatIndex = NavCategory.GetFlatIndex(Model.Mode);
-
-                if (flatIndex >= 0 && flatIndex < itemCount)
-                {
-                    NavView.SelectedItem = menuItems[flatIndex];
-                }
+                SelectNavigationItemByModel();
             }
 
             var acceleratorList = new List<MyVirtualKey>();
@@ -257,14 +271,6 @@ private void OnNavLoaded(object sender, RoutedEventArgs e)
             NavView.SetValue(KeyboardShortcutManager.VirtualKeyControlChordProperty, MyVirtualKey.E);
         }
 
-        private void OnNavPaneOpening(MUXC.NavigationView sender, object args)
-        {
-            if (AboutButton != null)
-            {
-                FindName("AboutButton");
-            }
-        }
-
         private void OnNavPaneOpened(MUXC.NavigationView sender, object args)
         {
             KeyboardShortcutManager.HonorShortcuts(false);
@@ -273,6 +279,11 @@ private void OnNavPaneOpened(MUXC.NavigationView sender, object args)
 
         private void OnNavPaneClosed(MUXC.NavigationView sender, object args)
         {
+            if (Popup.IsOpen)
+            {
+                return;
+            }
+
             if (Model.Mode != ViewMode.Graphing)
             {
                 KeyboardShortcutManager.HonorShortcuts(true);
@@ -281,8 +292,51 @@ private void OnNavPaneClosed(MUXC.NavigationView sender, object args)
             SetDefaultFocus();
         }
 
+        private void EnsurePopupContent()
+        {
+            if (PopupContent == null)
+            {
+                FindName("PopupContent");
+
+                var windowBounds = Window.Current.Bounds;
+                PopupContent.Width = windowBounds.Width;
+                PopupContent.Height = windowBounds.Height - AppTitleBar.ActualHeight;
+            }
+        }
+
+        private void ShowSettingsPopup()
+        {
+            EnsurePopupContent();
+            Popup.IsOpen = true;
+        }
+
+        private void CloseSettingsPopup()
+        {
+            Popup.IsOpen = false;
+            SelectNavigationItemByModel();
+            SetDefaultFocus();
+        }
+
+        private void Popup_Opened(object sender, object e)
+        {
+            KeyboardShortcutManager.IgnoreEscape(false);
+            KeyboardShortcutManager.HonorShortcuts(false);
+        }
+
+        private void Popup_Closed(object sender, object e)
+        {
+            KeyboardShortcutManager.HonorEscape();
+            KeyboardShortcutManager.HonorShortcuts(!NavView.IsPaneOpen);
+        }
+
         private void OnNavSelectionChanged(object sender, MUXC.NavigationViewSelectionChangedEventArgs e)
         {
+            if(e.IsSettingsSelected)
+            {
+                ShowSettingsPopup();
+                return;
+            }
+
             var item = (e.SelectedItemContainer as MUXC.NavigationViewItem);
             if (item != null)
             {
@@ -296,33 +350,6 @@ private void OnNavItemInvoked(MUXC.NavigationView sender, MUXC.NavigationViewIte
             NavView.IsPaneOpen = false;
         }
 
-        private void OnAboutButtonClick(object sender, TappedRoutedEventArgs e)
-        {
-            ShowAboutPage();
-        }
-
-        private void OnAboutButtonKeyDown(object sender, KeyRoutedEventArgs e)
-        {
-            if (e.Key == Windows.System.VirtualKey.Space || e.Key == Windows.System.VirtualKey.Enter)
-            {
-                ShowAboutPage();
-            }
-        }
-
-        private void OnAboutFlyoutOpened(object sender, object e)
-        {
-            // Keep Ignoring Escape till the About page flyout is opened
-            KeyboardShortcutManager.IgnoreEscape(false);
-            KeyboardShortcutManager.HonorShortcuts(false);
-        }
-
-        private void OnAboutFlyoutClosed(object sender, object e)
-        {
-            // Start Honoring Escape once the About page flyout is closed
-            KeyboardShortcutManager.HonorEscape();
-            KeyboardShortcutManager.HonorShortcuts(!NavView.IsPaneOpen);
-        }
-
         private void AlwaysOnTopButtonClick(object sender, RoutedEventArgs e)
         {
             Model.ToggleAlwaysOnTop(0, 0);
@@ -451,8 +478,6 @@ private void OnPageLoaded(object sender, RoutedEventArgs args)
                         AppLifecycleLogger.GetInstance().LaunchUIResponsive();
                         AppLifecycleLogger.GetInstance().LaunchVisibleComplete();
                     }
-
-                    FindName("NavView");
                 }));
         }
 
@@ -546,16 +571,6 @@ private void EnsureConverter()
             }
         }
 
-        private void ShowAboutPage()
-        {
-            if (AboutPage == null)
-            {
-                FindName("AboutPage");
-            }
-
-            FlyoutBase.ShowAttachedFlyout(AboutButton);
-        }
-
         private void AnnounceCategoryName()
         {
             string categoryName = AutomationProperties.GetName(Header);
@@ -563,6 +578,21 @@ private void AnnounceCategoryName()
             NarratorNotifier.Announce(announcement);
         }
 
+        private void TitleBarBackButtonClick(object sender, RoutedEventArgs e)
+        {
+            CloseSettingsPopup();
+        }
+
+        private Visibility ShouldShowBackButton(bool isAlwaysOnTop, bool isPopupOpen)
+        {
+            return !isAlwaysOnTop && isPopupOpen ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        private double NavigationViewOpenPaneLength(bool isAlwaysOnTop)
+        {
+            return isAlwaysOnTop ? 0 : (double)Application.Current.Resources["SplitViewOpenPaneLength"];
+        }
+
         private CalculatorApp.Calculator m_calculator;
         private GraphingCalculator m_graphingCalculator;
         private CalculatorApp.UnitConverter m_converter;

src/Calculator/Views/Memory.xaml

@@ -86,9 +86,10 @@
                 Padding="0"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
-                Background="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}"
+                Background="{ThemeResource SolidBackgroundFillColorBase}"
                 BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
-                BorderThickness="{ThemeResource HighContrastThicknessTop}"/>
+                BorderThickness="{ThemeResource HighContrastThicknessTop}"
+                CornerRadius="{ThemeResource OverlayCornerRadius}"/>
         <Grid x:Name="MemoryPanel" Grid.Row="1">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*"/>
@@ -96,14 +97,14 @@
             </Grid.RowDefinitions>
             <TextBlock x:Name="MemoryPaneEmpty"
                        x:Uid="MemoryPaneEmpty"
-                       Margin="16,14,24,0"
-                       Style="{ThemeResource BaseTextBlockStyle}"
-                       Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
-                       FontWeight="SemiLight"
+                       Margin="12,8,24,0"
+                       Style="{ThemeResource BodyTextBlockStyle}"
+                       Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                        TextWrapping="Wrap"
                        Visibility="{Binding IsMemoryEmpty, Converter={StaticResource BooleanToVisibilityConverter}}"/>
             <ListView x:Name="MemoryListView"
-                      Padding="0,12,0,0"
+                      Margin="4,0"
+                      Padding="0,24,0,0"
                       HorizontalAlignment="Stretch"
                       IsItemClickEnabled="true"
                       ItemClick="MemoryListItemClick"

src/Calculator/Views/MemoryListItem.xaml

@@ -49,10 +49,9 @@
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="Auto"/>
             </Grid.RowDefinitions>
-            <TextBlock Margin="0,2,14,0"
+            <TextBlock Margin="0,4,20,0"
                        HorizontalAlignment="Right"
-                       Style="{ThemeResource TitleTextBlockStyle}"
-                       FontWeight="SemiBold"
+                       Style="{ThemeResource SubtitleTextBlockStyle}"
                        AutomationProperties.AutomationId="MemoryItemValue"
                        FlowDirection="LeftToRight"
                        IsTextSelectionEnabled="True"
@@ -62,7 +61,7 @@
                        TextWrapping="Wrap"/>
             <Grid x:Name="MemoryHoverButtons"
                   Grid.Row="1"
-                  Margin="0,0,10,2"
+                  Margin="0,0,16,4"
                   HorizontalAlignment="Right"
                   Opacity="0">
                 <Grid.ColumnDefinitions>
@@ -72,22 +71,19 @@
                 </Grid.ColumnDefinitions>
                 <Button x:Uid="ClearMemoryItemButton"
                         Style="{StaticResource MemoryHoverButtonStyle}"
-                        Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
                         AutomationProperties.AutomationId="MClearButton"
                         Click="OnClearButtonClicked"
                         Content="MC"/>
                 <Button x:Uid="MemPlusItem"
                         Grid.Column="1"
-                        Margin="0"
+                        Margin="1,0"
                         Style="{StaticResource MemoryHoverButtonStyle}"
-                        Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
                         AutomationProperties.AutomationId="MAddButton"
                         Click="OnMemoryAddButtonClicked"
                         Content="M+"/>
                 <Button x:Uid="MemMinusItem"
                         Grid.Column="2"
                         Style="{StaticResource MemoryHoverButtonStyle}"
-                        Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
                         AutomationProperties.AutomationId="MSubButton"
                         Click="OnMemorySubtractButtonClicked"
                         Content="M-"/>

src/Calculator/Views/Settings.xaml

@@ -0,0 +1,223 @@
+<UserControl x:Class="CalculatorApp.Settings"
+             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:CalculatorApp"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+             Loaded="OnLoaded"
+             Unloaded="OnUnloaded"
+             mc:Ignorable="d">
+
+
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <Style x:Key="SettingsContentScrollViewStyle" TargetType="ScrollViewer">
+                <Setter Property="HorizontalAlignment" Value="Stretch"/>
+                <Setter Property="VerticalAlignment" Value="Top"/>
+                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
+                <Setter Property="HorizontalScrollMode" Value="Disabled"/>
+                <Setter Property="IsHorizontalRailEnabled" Value="False"/>
+                <Setter Property="IsVerticalRailEnabled" Value="True"/>
+                <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
+                <Setter Property="VerticalScrollMode" Value="Auto"/>
+                <Setter Property="ZoomMode" Value="Disabled"/>
+            </Style>
+
+            <Style x:Key="SettingsRichTextBlockStyle" TargetType="RichTextBlock">
+                <Setter Property="HorizontalAlignment" Value="Left"/>
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimary}"/>
+                <Setter Property="FontSize" Value="{ThemeResource BodyFontSize}"/>
+                <Setter Property="TextWrapping" Value="Wrap"/>
+            </Style>
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Grid>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="LargeWideView">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="690"/>
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="ColumnAbout.Width" Value="324"/>
+                        <Setter Target="AboutContentGrid.(Grid.Row)" Value="0"/>
+                        <Setter Target="AboutContentGrid.(Grid.RowSpan)" Value="3"/>
+                        <Setter Target="AboutContentGrid.(Grid.Column)" Value="1"/>
+                        <Setter Target="AboutGroupTitle.Margin" Value="0"/>
+                        <Setter Target="AboutContentGrid.Margin" Value="60,0,0,0"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SideVisible">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="632"/>
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="ColumnMain.Width" Value="*"/>
+                        <Setter Target="ColumnAbout.Width" Value="*"/>
+                        <Setter Target="AboutContentGrid.(Grid.Row)" Value="0"/>
+                        <Setter Target="AboutContentGrid.(Grid.RowSpan)" Value="3"/>
+                        <Setter Target="AboutContentGrid.(Grid.Column)" Value="1"/>
+                        <Setter Target="AboutGroupTitle.Margin" Value="0"/>
+                        <Setter Target="AboutContentGrid.Margin" Value="60,0,0,0"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="DefaultLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
+                    </VisualState.StateTriggers>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+
+        <Grid Height="{StaticResource HamburgerHeight}"
+              Padding="24,0"
+              HorizontalAlignment="Stretch"
+              VerticalAlignment="Top">
+            <TextBlock x:Name="Header"
+                       x:Uid="SettingsHeader"
+                       Style="{StaticResource CategoryNameTextBlockStyle}"/>
+        </Grid>
+
+        <ScrollViewer Margin="0,60,0,0"
+                      Padding="24,0,24,16"
+                      Style="{StaticResource SettingsContentScrollViewStyle}">
+            <Grid x:Name="ContentGrid">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition x:Name="ColumnMain" Width="*"/>
+                    <ColumnDefinition x:Name="ColumnAbout" Width="0"/>
+                </Grid.ColumnDefinitions>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition x:Name="AppearanceTitleRow" Height="Auto"/>
+                    <RowDefinition x:Name="AppearanceExpanderRow" Height="Auto"/>
+                    <RowDefinition x:Name="AboutTitleContentRow" Height="*"/>
+                </Grid.RowDefinitions>
+
+                <TextBlock x:Uid="SettingsAppearance" Style="{StaticResource BodyStrongTextBlockStyle}"/>
+
+                <muxc:Expander x:Name="AppThemeExpander"
+                               Grid.Row="1"
+                               Margin="0,8,0,0"
+                               HorizontalAlignment="Stretch"
+                               VerticalAlignment="Top"
+                               HorizontalContentAlignment="Left"
+                               ExpandDirection="Down"
+                               IsExpanded="False">
+                    <muxc:Expander.Header>
+                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+
+                            <FontIcon Margin="0,0,12,0"
+                                      VerticalAlignment="Center"
+                                      Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                                      FontFamily="{ThemeResource CalculatorFontFamily}"
+                                      FontSize="16"
+                                      Glyph="&#xE790;"/>
+
+                            <StackPanel Grid.Column="1"
+                                        Margin="0,12"
+                                        Orientation="Vertical">
+                                <TextBlock x:Uid="SettingsAppThemeTitle" Style="{StaticResource BodyTextBlockStyle}"/>
+                                <TextBlock x:Uid="SettingsAppThemeDescription"
+                                           Style="{StaticResource CaptionTextBlockStyle}"
+                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                           TextWrapping="WrapWholeWords"/>
+                            </StackPanel>
+                        </Grid>
+                    </muxc:Expander.Header>
+                    <muxc:Expander.Content>
+                        <muxc:RadioButtons x:Name="ThemeRadioButtons"
+                                           Margin="32,0,0,0"
+                                           SelectionChanged="OnThemeSelectionChanged">
+                            <RadioButton x:Name="LightThemeRadioButton"
+                                         x:Uid="LightThemeRadioButton"
+                                         Tag="Light"/>
+                            <RadioButton x:Name="DarkThemeRadioButton"
+                                         x:Uid="DarkThemeRadioButton"
+                                         Tag="Dark"/>
+                            <RadioButton x:Name="SystemThemeRadioButton"
+                                         x:Uid="SystemThemeRadioButton"
+                                         Tag="Default"/>
+                        </muxc:RadioButtons>
+                    </muxc:Expander.Content>
+                </muxc:Expander>
+
+                <Grid x:Name="AboutContentGrid" Grid.Row="2">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <TextBlock x:Name="AboutGroupTitle"
+                               x:Uid="AboutGroupTitle"
+                               Margin="0,20,0,0"
+                               Style="{ThemeResource BodyStrongTextBlockStyle}"/>
+                    <StackPanel Grid.Row="1"
+                                Margin="0,8,0,0"
+                                Orientation="Vertical">
+                        <RichTextBlock x:Name="AboutContentBody" Style="{StaticResource SettingsRichTextBlockStyle}">
+                            <Paragraph>
+                                <Run x:Name="AboutBuildVersion"/>
+                                <LineBreak/>
+                                <Run x:Name="AboutControlCopyrightRun"/>
+                            </Paragraph>
+
+                            <Paragraph Margin="0,16,0,0">
+                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
+                                           TextDecorations="None"
+                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
+                                    <Run x:Name="AboutEULA"/>
+                                </Hyperlink>
+                            </Paragraph>
+
+                            <Paragraph Margin="0,16,0,0">
+                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
+                                           TextDecorations="None"
+                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
+                                    <Run x:Name="AboutControlServicesAgreement"/>
+                                </Hyperlink>
+                            </Paragraph>
+
+                            <Paragraph Margin="0,16,0,0">
+                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
+                                           TextDecorations="None"
+                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
+                                    <Run x:Name="AboutControlPrivacyStatement"/>
+                                </Hyperlink>
+                            </Paragraph>
+                        </RichTextBlock>
+
+                        <Button x:Name="FeedbackButton"
+                                x:Uid="FeedbackButton"
+                                MinWidth="120"
+                                Margin="0,24,0,0"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Top"
+                                FontSize="{StaticResource BodyFontSize}"
+                                Click="FeedbackButton_Click"/>
+                    </StackPanel>
+                    <RichTextBlock x:Name="AboutContribute"
+                                   Grid.Row="2"
+                                   Margin="0,16,0,0"
+                                   Style="{StaticResource SettingsRichTextBlockStyle}">
+                        <Paragraph>
+                            <Run x:Name="ContributeRunBeforeLink"/>
+                            <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
+                                       TextDecorations="None"
+                                       ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939">
+                                <Run x:Name="ContributeRunLink"/>
+                            </Hyperlink>
+                            <Run x:Name="ContributeRunAfterLink"/>
+                        </Paragraph>
+                    </RichTextBlock>
+                </Grid>
+            </Grid>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

src/Calculator/Views/Settings.xaml.cs

@@ -1,22 +1,34 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
+using CalculatorApp.Utils;
 using CalculatorApp.ViewModel.Common;
 using System;
+using System.Collections.Generic;
 using System.Diagnostics;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
 using Windows.ApplicationModel;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
 using Windows.System;
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
 
 namespace CalculatorApp
 {
-    public sealed partial class AboutFlyout
+    public sealed partial class Settings : UserControl
     {
         // CSHARP_MIGRATION: TODO:
         // BUILD_YEAR was a C++/CX macro and may update the value from the pipeline
         private const string BUILD_YEAR = "2021";
 
-        public AboutFlyout()
+        public Settings()
         {
             var locService = LocalizationService.GetInstance();
             var resourceLoader = AppResourceProvider.GetInstance();
@@ -25,9 +37,7 @@ public AboutFlyout()
 
             Language = locService.GetLanguage();
 
-            SetVersionString();
-
-            Header.Text = resourceLoader.GetResourceString("AboutButton/Content");
+            InitializeAboutContentTextBlock();
 
             var copyrightText =
                 LocalizationStringUtil.GetLocalizedString(resourceLoader.GetResourceString("AboutControlCopyright"), BUILD_YEAR);
@@ -36,9 +46,33 @@ public AboutFlyout()
             InitializeContributeTextBlock();
         }
 
+        private void OnThemeSelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            if (e.AddedItems.Count > 0 && e.AddedItems[0] is RadioButton selectItem)
+            {
+                ThemeHelper.RootTheme = ThemeHelper.GetEnum<ElementTheme>(selectItem.Tag.ToString());
+            }
+        }
+
         public void SetDefaultFocus()
         {
-            AboutFlyoutEULA.Focus(FocusState.Programmatic);
+            AppThemeExpander.Focus(FocusState.Programmatic);
+        }
+
+        // OnLoaded would be invoked by Popup several times while contructed once
+        private void OnLoaded(object sender, RoutedEventArgs args)
+        {
+            var currentTheme = ThemeHelper.RootTheme.ToString();
+            (ThemeRadioButtons.Items.Cast<RadioButton>().FirstOrDefault(c => c?.Tag?.ToString() == currentTheme)).IsChecked = true;
+
+            SetDefaultFocus();
+        }
+
+        // OnUnloaded would be invoked by Popup several times while contructed once
+        private void OnUnloaded(object sender, RoutedEventArgs e)
+        {
+            // back to the default state
+            AppThemeExpander.IsExpanded = false;
         }
 
         private void FeedbackButton_Click(object sender, RoutedEventArgs e)
@@ -49,17 +83,33 @@ private void FeedbackButton_Click(object sender, RoutedEventArgs e)
             _ = Launcher.LaunchUriAsync(new Uri("windows-feedback:?contextid=130&metadata=%7B%22Metadata%22:[%7B%22AppBuild%22:%22" + versionNumber + "%22%7D]%7D"));
         }
 
+        private void InitializeAboutContentTextBlock()
+        {
+            SetVersionString();
+            SetContentLinks();
+        }
+
         private void SetVersionString()
         {
             PackageVersion version = Package.Current.Id.Version;
             string appName = AppResourceProvider.GetInstance().GetResourceString("AppName");
-            AboutFlyoutVersion.Text = appName + " " + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
+            AboutBuildVersion.Text = appName + " " + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
+        }
+
+        private void SetContentLinks()
+        {
+            string eula = AppResourceProvider.GetInstance().GetResourceString(AboutEULA.Name + "/Text");
+            AboutEULA.Text = eula;
+            string agreement = AppResourceProvider.GetInstance().GetResourceString(AboutControlServicesAgreement.Name + "/Text");
+            AboutControlServicesAgreement.Text = agreement;
+            string privacyState = AppResourceProvider.GetInstance().GetResourceString(AboutControlPrivacyStatement.Name + "/Text");
+            AboutControlPrivacyStatement.Text = privacyState;
         }
 
         private void InitializeContributeTextBlock()
         {
             var resProvider = AppResourceProvider.GetInstance();
-            string contributeHyperlinkText = resProvider.GetResourceString("AboutFlyoutContribute");
+            string contributeHyperlinkText = resProvider.GetResourceString("AboutControlContribute");
 
             // The resource string has the 'GitHub' hyperlink wrapped with '%HL%'.
             // Break the string and assign pieces appropriately.

src/Calculator/Views/SupplementaryResults.xaml

@@ -1,4 +1,4 @@
-<UserControl x:Class="CalculatorApp.SupplementaryResults"
+<UserControl x:Class="CalculatorApp.SupplementaryResults"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:common="using:CalculatorApp.Common"
@@ -15,7 +15,7 @@
     <UserControl.Resources>
         <DataTemplate x:Name="SupplementaryValueTemplate" x:DataType="vm:SupplementaryResult">
             <StackPanel Margin="0" Orientation="Horizontal">
-                <TextBlock Margin="0,0,4,0"
+                <TextBlock Margin="16,0,4,0"
                            Padding="0"
                            VerticalAlignment="Bottom"
                            Style="{ThemeResource BaseTextBlockStyle}"
@@ -90,7 +90,7 @@
 
     <StackPanel>
         <TextBlock x:Uid="SupplementaryResultsHeader"
-                   Margin="0,0,0,-6"
+                   Margin="16,0,0,-6"
                    HorizontalAlignment="Left"
                    Style="{ThemeResource CaptionTextBlockStyle}"
                    Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"

src/Calculator/Views/TitleBar.xaml

@@ -3,10 +3,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             Height="32"
              mc:Ignorable="d">
     <Grid x:Name="LayoutRoot"
-          Height="32"
-          HorizontalAlignment="Stretch">
+          HorizontalAlignment="Stretch"
+          VerticalAlignment="Stretch">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="WindowFocusStates">
                 <VisualState x:Name="WindowFocused"/>
@@ -16,20 +17,72 @@
                 <VisualState x:Name="AOTNormalState"/>
                 <VisualState x:Name="AOTMiniState">
                     <VisualState.Setters>
-                        <Setter Target="AppName.Visibility" Value="Collapsed"/>
+                        <Setter Target="TitleHolder.Visibility" Value="Collapsed"/>
                         <Setter Target="ExitAlwaysOnTopButton.Visibility" Value="Visible"/>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+
+            <VisualStateGroup x:Name="BackButtonVisibilityState">
+                <VisualState x:Name="BackButtonCollapsed"/>
+                <VisualState x:Name="BackButtonVisible">
+                    <VisualState.Setters>
+                        <Setter Target="BackButton.Visibility" Value="Visible"/>
+                        <Setter Target="AppIcon.Margin" Value="0"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <Grid x:Name="BackgroundElement" Background="Transparent">
-            <TextBlock x:Name="AppName"
-                       x:Uid="AppName"
-                       Margin="12,0,12,0"
-                       HorizontalAlignment="Left"
-                       VerticalAlignment="Center"
-                       FontSize="12"
-                       TextTrimming="CharacterEllipsis"/>
+
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+
+            <Grid.Transitions>
+                <TransitionCollection>
+                    <RepositionThemeTransition/>
+                </TransitionCollection>
+            </Grid.Transitions>
+
+            <Button x:Name="BackButton"
+                    Width="44"
+                    Height="32"
+                    Margin="0,0,4,0"
+                    Padding="2,0,0,0"
+                    Style="{StaticResource SquareIconButtonStyle}"
+                    FontSize="12"
+                    Click="BackButton_Click"
+                    Content="&#xE72B;"
+                    Visibility="Collapsed"/>
+
+            <Grid x:Name="BackgroundElement"
+                  Grid.Column="1"
+                  Background="Transparent">
+                <Grid x:Name="TitleHolder">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+
+                    <Image x:Name="AppIcon"
+                           Width="16"
+                           Height="16"
+                           Margin="16,0,0,0"
+                           VerticalAlignment="Center"
+                           Source="ms-appx:///Assets/CalculatorAppList.png"/>
+                    <TextBlock x:Name="AppName"
+                               x:Uid="AppName"
+                               Grid.Column="1"
+                               Margin="16,0,16,0"
+                               HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               FontSize="12"
+                               TextTrimming="CharacterEllipsis"/>
+                </Grid>
+            </Grid>
         </Grid>
         <Button x:Name="ExitAlwaysOnTopButton"
                 x:Uid="ExitAlwaysOnTopButton"

src/Calculator/Views/TitleBar.xaml.cs

@@ -1,5 +1,6 @@
 using CalculatorApp.ViewModel.Common;
 using System;
+using System.ComponentModel;
 using Windows.ApplicationModel.Core;
 using Windows.System.Profile;
 using Windows.UI;
@@ -50,6 +51,7 @@ public bool IsAlwaysOnTopMode
             }));
 
         public event Windows.UI.Xaml.RoutedEventHandler AlwaysOnTopClick;
+        public event Windows.UI.Xaml.RoutedEventHandler BackButtonClick;
 
         private void OnLoaded(object sender, RoutedEventArgs e)
         {
@@ -61,6 +63,10 @@ private void OnLoaded(object sender, RoutedEventArgs e)
             m_accessibilitySettings.HighContrastChanged += OnHighContrastChanged;
             Window.Current.Activated += OnWindowActivated;
 
+            // Register RequestedTheme changed callback to update title bar system button colors.
+            m_rootFrameRequestedThemeCallbackToken =
+                Utils.ThemeHelper.RegisterAppThemeChangedCallback(RootFrame_RequestedThemeChanged);
+
             // Set properties
             SetTitleBarControlColors();
             SetTitleBarHeightAndPadding();
@@ -81,6 +87,16 @@ private void OnUnloaded(object sender, RoutedEventArgs e)
             m_uiSettings.ColorValuesChanged -= ColorValuesChanged;
             m_accessibilitySettings.HighContrastChanged -= OnHighContrastChanged;
             Window.Current.Activated -= OnWindowActivated;
+            Utils.ThemeHelper.
+                UnregisterAppThemeChangedCallback(m_rootFrameRequestedThemeCallbackToken);
+        }
+
+        private void RootFrame_RequestedThemeChanged(DependencyObject sender, DependencyProperty dp)
+        {
+            if(Frame.RequestedThemeProperty == dp)
+            {
+                _ = Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(() => { SetTitleBarControlColors(); }));
+            }
         }
 
         private void CoreTitleBarIsVisibleChanged(CoreApplicationViewTitleBar cTitleBar, object args)
@@ -122,7 +138,7 @@ private void SetTitleBarHeightAndPadding()
             }
 
             LayoutRoot.Padding = new Thickness(leftAddition, 0, rightAddition, 0);
-            LayoutRoot.Height = m_coreTitleBar.Height;
+            this.Height = m_coreTitleBar.Height;
         }
 
         private void ColorValuesChanged(Windows.UI.ViewManagement.UISettings sender, object e)
@@ -158,22 +174,14 @@ private void SetTitleBarControlColors()
             }
             else
             {
-                Color bgColor = Colors.Transparent;
-                Color fgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlPageTextBaseHighBrush"]).Color;
-                Color inactivefgColor =
-                    ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundChromeDisabledLowBrush"]).Color;
-                Color hoverbgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlBackgroundListLowBrush"]).Color;
-                Color hoverfgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundBaseHighBrush"]).Color;
-                Color pressedbgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlBackgroundListMediumBrush"]).Color;
-                Color pressedfgCoolor = ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundBaseHighBrush"]).Color;
-                applicationTitleBar.ButtonBackgroundColor = bgColor;
-                applicationTitleBar.ButtonForegroundColor = fgColor;
-                applicationTitleBar.ButtonInactiveBackgroundColor = bgColor;
-                applicationTitleBar.ButtonInactiveForegroundColor = inactivefgColor;
-                applicationTitleBar.ButtonHoverBackgroundColor = hoverbgColor;
-                applicationTitleBar.ButtonHoverForegroundColor = hoverfgColor;
-                applicationTitleBar.ButtonPressedBackgroundColor = pressedbgColor;
-                applicationTitleBar.ButtonPressedForegroundColor = pressedfgCoolor;
+                applicationTitleBar.ButtonBackgroundColor = ButtonBackground?.Color;
+                applicationTitleBar.ButtonForegroundColor = ButtonForeground?.Color;
+                applicationTitleBar.ButtonInactiveBackgroundColor = ButtonInactiveBackground?.Color;
+                applicationTitleBar.ButtonInactiveForegroundColor = ButtonInactiveForeground?.Color;
+                applicationTitleBar.ButtonHoverBackgroundColor = ButtonHoverBackground?.Color;
+                applicationTitleBar.ButtonHoverForegroundColor = ButtonHoverForeground?.Color;
+                applicationTitleBar.ButtonPressedBackgroundColor = ButtonPressedBackground?.Color;
+                applicationTitleBar.ButtonPressedForegroundColor = ButtonPressedForeground?.Color;
             }
         }
 
@@ -203,8 +211,93 @@ private void AlwaysOnTopButton_Click(object sender, RoutedEventArgs e)
             AlwaysOnTopClick?.Invoke(this, e);
         }
 
+        // Dependency properties for the color of the system title bar buttons
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonBackground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonBackgroundProperty); }
+            set { SetValue(ButtonBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonBackgroundProperty =
+            DependencyProperty.Register(nameof(ButtonBackground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonForeground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonForegroundProperty); }
+            set { SetValue(ButtonForegroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonForegroundProperty =
+            DependencyProperty.Register(nameof(ButtonForeground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonInactiveBackground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonInactiveBackgroundProperty); }
+            set { SetValue(ButtonInactiveBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonInactiveBackgroundProperty =
+            DependencyProperty.Register(nameof(ButtonInactiveBackground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonInactiveForeground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonInactiveForegroundProperty); }
+            set { SetValue(ButtonInactiveForegroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonInactiveForegroundProperty =
+            DependencyProperty.Register(nameof(ButtonInactiveForeground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonHoverBackground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonHoverBackgroundProperty); }
+            set { SetValue(ButtonHoverBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonHoverBackgroundProperty =
+            DependencyProperty.Register(nameof(ButtonHoverBackground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonHoverForeground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonHoverForegroundProperty); }
+            set { SetValue(ButtonHoverForegroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonHoverForegroundProperty =
+            DependencyProperty.Register(nameof(ButtonHoverForeground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonPressedBackground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonPressedBackgroundProperty); }
+            set { SetValue(ButtonPressedBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonPressedBackgroundProperty =
+            DependencyProperty.Register(nameof(ButtonPressedBackground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Windows.UI.Xaml.Media.SolidColorBrush ButtonPressedForeground
+        {
+            get { return (Windows.UI.Xaml.Media.SolidColorBrush)GetValue(ButtonPressedForegroundProperty); }
+            set { SetValue(ButtonPressedForegroundProperty, value); }
+        }
+        public static readonly DependencyProperty ButtonPressedForegroundProperty =
+            DependencyProperty.Register(nameof(ButtonPressedForeground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
+
+        public Visibility BackButtonVisibility
+        {
+            get { return (Visibility)GetValue(BackButtonVisibilityProperty); }
+            set { SetValue(BackButtonVisibilityProperty, value); }
+        }
+        public static readonly DependencyProperty BackButtonVisibilityProperty =
+            DependencyProperty.Register(
+                nameof(BackButtonVisibility), typeof(Visibility), typeof(TitleBar),
+                new PropertyMetadata(false, new PropertyChangedCallback((sender, args) => {
+                    var self = sender as TitleBar;
+                    VisualStateManager.GoToState(
+                        self, (Visibility)args.NewValue == Visibility.Visible ? self.BackButtonVisible.Name : self.BackButtonCollapsed.Name, true);
+                })));
+
         private Windows.ApplicationModel.Core.CoreApplicationViewTitleBar m_coreTitleBar;
         private Windows.UI.ViewManagement.UISettings m_uiSettings;
         private Windows.UI.ViewManagement.AccessibilitySettings m_accessibilitySettings;
+        private Utils.ThemeHelper.ThemeChangedCallbackToken m_rootFrameRequestedThemeCallbackToken;
+
+        private void BackButton_Click(object sender, RoutedEventArgs e)
+        {
+            BackButtonClick?.Invoke(this, e);
+        }
     }
 }

src/Calculator/Views/UnitConverter.xaml

@@ -3,11 +3,13 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:common="using:CalculatorApp.Common"
+             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"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:CalculatorApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
              xmlns:triggers="using:CalculatorApp.Views.StateTriggers"
              xmlns:vm="using:CalculatorApp.ViewModel"
              d:DesignHeight="658"
@@ -36,19 +38,20 @@
         <!-- if you switch between modes when no currencies are available for example) -->
         <DataTemplate x:Key="SelectedUnitTemplate">
             <TextBlock Style="{ThemeResource BodyTextBlockStyle}"
-                       FontWeight="SemiBold"
+                       FontWeight="Normal"
                        AutomationProperties.Name="{Binding AccessibleName, Mode=OneTime, FallbackValue=''}"
                        Text="{Binding Name, Mode=OneTime, FallbackValue=''}"
                        TextWrapping="NoWrap"/>
         </DataTemplate>
 
         <Style x:Key="ComboStyle" TargetType="ComboBox">
-            <Setter Property="Padding" Value="12,0,0,0"/>
+            <Setter Property="Margin" Value="12,0,0,0"/>
+            <Setter Property="Padding" Value="4,0,0,0"/>
             <Setter Property="MinHeight" Value="32"/>
             <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
             <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
             <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"/>
-            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="BorderThickness" Value="{ThemeResource ControlBorderThemeThickness}"/>
             <Setter Property="TabNavigation" Value="Once"/>
             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
@@ -121,7 +124,8 @@
                                         Grid.ColumnSpan="2"
                                         Background="{TemplateBinding Background}"
                                         BorderBrush="{TemplateBinding BorderBrush}"
-                                        BorderThickness="{TemplateBinding BorderThickness}"/>
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"/>
                                 <!--
                                     This first ContentPresenter must be named "ContentPresenter" because
                                     XAML expects it in the template and has dependencies. It is not used
@@ -144,18 +148,21 @@
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"
                                            Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
-                                           FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                           FontFamily="{StaticResource CalculatorFontFamily}"
                                            FontSize="12"
                                            AutomationProperties.AccessibilityView="Raw"
                                            IsHitTestVisible="False"
-                                           Text="&#xE0E5;"/>
+                                           Text="&#xE70D;"/>
                                 <Popup x:Name="Popup">
                                     <Border x:Name="PopupBorder"
-                                            Margin="0,-1,0,-1"
+                                            Margin="0,-0.5,0,-1"
+                                            Padding="{ThemeResource ComboBoxDropdownBorderPadding}"
                                             HorizontalAlignment="Stretch"
-                                            Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
-                                            BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
-                                            BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
+                                            Background="{ThemeResource ComboBoxDropDownBackground}"
+                                            BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
+                                            BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
+                                            contract7Present:BackgroundSizing="InnerBorderEdge"
+                                            CornerRadius="{ThemeResource OverlayCornerRadius}">
                                         <ScrollViewer x:Name="ScrollViewer"
                                                       MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
                                                       Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
@@ -185,7 +192,7 @@
         <Style x:Key="ValueBaseStyle"
                BasedOn="{StaticResource CalculationResultStyle}"
                TargetType="controls:CalculationResult">
-            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
+            <Setter Property="Background" Value="Transparent"/>
             <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
             <Setter Property="HorizontalContentAlignment" Value="Left"/>
             <Setter Property="VerticalContentAlignment" Value="Bottom"/>
@@ -202,7 +209,7 @@
         <Style x:Key="ValueMediumStyle"
                BasedOn="{StaticResource ValueBaseStyle}"
                TargetType="controls:CalculationResult">
-            <Setter Property="MaxFontSize" Value="34"/>
+            <Setter Property="MaxFontSize" Value="40"/>
             <Setter Property="Margin" Value="0,0,0,0"/>
             <Setter Property="DisplayMargin" Value="0,0,0,4"/>
         </Style>
@@ -221,7 +228,7 @@
         <Style x:Key="CurrencySymbolMediumStyle"
                BasedOn="{StaticResource CurrencySymbolBaseStyle}"
                TargetType="TextBlock">
-            <Setter Property="FontSize" Value="24"/>
+            <Setter Property="FontSize" Value="20"/>
             <Setter Property="Margin" Value="0,0,0,8"/>
         </Style>
         <Style x:Key="CurrencySymbolSmallStyle"
@@ -315,8 +322,8 @@
                                                      Threshold="1"/>
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="GutterLeft.Width" Value="48"/>
-                        <Setter Target="GutterRight.Width" Value="48"/>
+                        <Setter Target="GutterLeft.Width" Value="0"/>
+                        <Setter Target="GutterRight.Width" Value="0"/>
                         <Setter Target="ColumnLeft.Width" Value="1*"/>
                         <Setter Target="ColumnRight.Width" Value="1*"/>
                         <Setter Target="RowDisplay1.Height" Value="4*"/>
@@ -353,23 +360,6 @@
                         <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle46}"/>
                     </VisualState.Setters>
                 </VisualState>
-                <VisualState x:Name="Portrait">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowHeight="1024" MinWindowWidth="640"/>
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SupplementaryResults.VerticalAlignment" Value="Top"/>
-                        <Setter Target="Value1.Style" Value="{ThemeResource ValueLargeStyle}"/>
-                        <Setter Target="Value2.Style" Value="{ThemeResource ValueLargeStyle}"/>
-                        <Setter Target="CurrencySymbol1Block.Style" Value="{ThemeResource CurrencySymbolLargeStyle}"/>
-                        <Setter Target="CurrencySymbol2Block.Style" Value="{ThemeResource CurrencySymbolLargeStyle}"/>
-                        <Setter Target="Units1.Height" Value="44"/>
-                        <Setter Target="Units2.Height" Value="44"/>
-                        <Setter Target="ConverterNegateButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
-                        <Setter Target="ClearEntryButtonPos0.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
-                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle34}"/>
-                    </VisualState.Setters>
-                </VisualState>
                 <VisualState x:Name="Wide640">
                     <VisualState.StateTriggers>
                         <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="640"/>
@@ -384,7 +374,7 @@
                         <Setter Target="ConverterNegateButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                         <Setter Target="ClearEntryButtonPos0.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                         <Setter Target="BackSpaceButtonSmall.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
-                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle34}"/>
+                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle28}"/>
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="MinSizeLayout">
@@ -516,14 +506,14 @@
                 <RowDefinition Height="7*"/>
                 <RowDefinition Height="10*"/>
             </Grid.RowDefinitions>
-            <ProgressRing x:Name="CurrencyLoadingProgressRing"
-                          Grid.Row="1"
-                          Grid.Column="1"
-                          MaxWidth="140"
-                          MaxHeight="140"
-                          HorizontalAlignment="Stretch"
-                          VerticalAlignment="Stretch"
-                          IsActive="False"/>
+            <muxc:ProgressRing x:Name="CurrencyLoadingProgressRing"
+                               Grid.Row="1"
+                               Grid.Column="1"
+                               MaxWidth="140"
+                               MaxHeight="140"
+                               HorizontalAlignment="Stretch"
+                               VerticalAlignment="Stretch"
+                               IsActive="False"/>
         </Grid>
 
         <Grid x:Name="Value1Container"
@@ -538,7 +528,7 @@
             </Grid.ColumnDefinitions>
             <TextBlock x:Name="CurrencySymbol1Block"
                        Grid.Column="0"
-                       Padding="12,0,0,0"
+                       Padding="16,0,0,0"
                        Style="{ThemeResource CurrencySymbolMediumStyle}"
                        AutomationProperties.AccessibilityView="Raw"
                        Text="{x:Bind Model.CurrencySymbol1, Mode=OneWay}"
@@ -587,7 +577,7 @@
             </Grid.ColumnDefinitions>
             <TextBlock x:Name="CurrencySymbol2Block"
                        Grid.Column="0"
-                       Padding="12,0,0,0"
+                       Padding="16,0,0,0"
                        Style="{ThemeResource CurrencySymbolMediumStyle}"
                        AutomationProperties.AccessibilityView="Raw"
                        Text="{x:Bind Model.CurrencySymbol2, Mode=OneWay}"
@@ -628,7 +618,7 @@
                     Grid.Row="5"
                     Grid.Column="1"
                     MinHeight="48"
-                    Padding="12,0,6,0"
+                    Padding="0,0,6,0"
                     HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                     VerticalAlignment="Top"
                     FlowDirection="{x:Bind LayoutDirection}"
@@ -641,14 +631,17 @@
             <StackPanel Visibility="{x:Bind Model.IsCurrencyCurrentCategory, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}">
                 <!-- Currency Ratio Equality -->
                 <TextBlock x:Name="CurrencyRatioEqualityBlock"
+                           Margin="16,0,0,0"
                            Style="{ThemeResource CaptionTextBlockStyle}"
-                           Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
+                           Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                            AutomationProperties.Name="{x:Bind Model.CurrencyRatioEqualityAutomationName, Mode=OneWay}"
                            Text="{x:Bind Model.CurrencyRatioEquality, Mode=OneWay}"/>
 
                 <!-- Currency Timestamp -->
                 <TextBlock x:Name="CurrencyTimestampTextBlock"
+                           Margin="16,0,0,0"
                            Style="{ThemeResource CaptionTextBlockStyle}"
+                           Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                            Text="{x:Bind Model.CurrencyTimestamp, Mode=OneWay}"/>
 
                 <!-- Currency Refresh button and additional status text -->
@@ -659,8 +652,18 @@
                     <StackPanel Orientation="Horizontal">
                         <HyperlinkButton x:Name="CurrencyRefreshBlock"
                                          x:Uid="RefreshButtonText"
-                                         Foreground="{ThemeResource SystemControlHyperlinkBaseHighBrush}"
-                                         Click="CurrencyRefreshButton_Click"/>
+                                         Margin="16,4,0,0"
+                                         Padding="0"
+                                         Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                         BorderThickness="0"
+                                         Click="CurrencyRefreshButton_Click">
+                            <HyperlinkButton.Resources>
+                                <ResourceDictionary>
+                                    <StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/>
+                                    <StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/>
+                                </ResourceDictionary>
+                            </HyperlinkButton.Resources>
+                        </HyperlinkButton>
                         <TextBlock Margin="3,7,0,0" Style="{ThemeResource CaptionTextBlockStyle}">
                             <Run x:Name="CurrencySecondaryStatus"
                                  FontWeight="SemiBold"
@@ -671,6 +674,7 @@
 
                 <!-- Offline TextBlock -->
                 <ContentControl x:Name="OfflineBlock"
+                                Margin="16,4,0,0"
                                 IsTabStop="False"
                                 TabIndex="5"
                                 Visibility="Collapsed">
@@ -722,7 +726,7 @@
                                            x:Uid="clearEntryButton"
                                            HorizontalAlignment="Stretch"
                                            Style="{StaticResource OperatorButtonStyle}"
-                                           FontSize="16"
+                                           FontSize="14"
                                            ButtonId="Clear"
                                            Content="CE"
                                            TabIndex="7"/>
@@ -730,10 +734,9 @@
                                            x:Uid="backSpaceButton"
                                            Grid.Column="1"
                                            Style="{StaticResource SymbolOperatorButtonStyle}"
-                                           FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                           FontSize="16"
+                                           FontSize="14"
                                            ButtonId="Backspace"
-                                           Content="&#xE750;"
+                                           Content="&#xE94F;"
                                            TabIndex="8"/>
             </Grid>
 
@@ -745,7 +748,7 @@
                              Grid.ColumnSpan="3"
                              VerticalAlignment="Stretch"
                              AutomationProperties.HeadingLevel="Level1"
-                             ButtonStyle="{StaticResource NumericButtonStyle24}"
+                             ButtonStyle="{StaticResource NumericButtonStyle18}"
                              TabIndex="10"
                              TabNavigation="Local"/>
             <controls:CalculatorButton x:Name="ConverterNegateButton"