Merge pull request #58 from nventive/dev/madi/fix-background-color

Fix Background color for xamarin platforms

src/Calculator.Shared/Styles.xaml

@@ -1,17 +1,16 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:xamarin="http://uno.ui/xamarin" 
-    xmlns:android="http://uno.ui/android" 
-    xmlns:ios="http://uno.ui/ios" 
-    xmlns:wasm="http://uno.ui/wasm" 
-    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:Controls="using:CalculatorApp.Controls"
-    xmlns:common="using:CalculatorApp.Common"
-    xmlns:converters="using:CalculatorApp.Converters"
-	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:local="using:CalculatorApp"
-	mc:Ignorable="xamarin android ios wasm">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:xamarin="http://uno.ui/xamarin"
+					xmlns:android="http://uno.ui/android"
+					xmlns:ios="http://uno.ui/ios"
+					xmlns:wasm="http://uno.ui/wasm"
+					xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:Controls="using:CalculatorApp.Controls"
+					xmlns:common="using:CalculatorApp.Common"
+					xmlns:converters="using:CalculatorApp.Converters"
+					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+					xmlns:local="using:CalculatorApp"
+					mc:Ignorable="xamarin android ios wasm">
 
 	<ResourceDictionary.MergedDictionaries>
 		<!--
@@ -193,6 +192,8 @@
 
 	<Color x:Key="AccentHoverColor">#FF0077D7</Color>
 
+	<Color x:Key="XamarinBackgroundColor">#FFEBEBEB</Color>
+
 	<SolidColorBrush x:Key="AccentPressBackgroundColorBrush"
 					 Color="{StaticResource AccentPressColor}" />
 
@@ -229,17 +230,20 @@
 	<SolidColorBrush x:Key="AppControlPageTextBaseMediumHighBrush"
 					 Color="{StaticResource SystemBaseMediumHighColor}" />
 
-  <win:RevealBackgroundBrush x:Key="AppControlHoverButtonFaceBrush"
-               Color="#17000000" />
+	<SolidColorBrush x:Key="XamarinBackgroundBrush"
+					 Color="{StaticResource XamarinBackgroundColor}" />
 
-  <xamarin:SolidColorBrush x:Key="AppControlHoverButtonFaceBrush"
-               Color="{ThemeResource SystemColorHighlightColor}" />
+	<win:RevealBackgroundBrush x:Key="AppControlHoverButtonFaceBrush"
+							   Color="#17000000" />
 
-  <win:RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush"
-               Color="#30000000" />
+	<xamarin:SolidColorBrush x:Key="AppControlHoverButtonFaceBrush"
+							 Color="{ThemeResource SystemColorHighlightColor}" />
 
-  <xamarin:SolidColorBrush x:Key="AppControlPressedButtonFaceBrush"
-               Color="{ThemeResource SystemColorButtonFaceColor}" />
+	<win:RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush"
+							   Color="#30000000" />
+
+	<xamarin:SolidColorBrush x:Key="AppControlPressedButtonFaceBrush"
+							 Color="{ThemeResource SystemColorButtonFaceColor}" />
 
 	<SolidColorBrush x:Key="AppControlTransparentAccentColorBrush"
 					 Color="{ThemeResource SystemAccentColor}" />
@@ -575,15 +579,68 @@
 		   BasedOn="{StaticResource SymbolOperatorButtonStyle}"
 		   TargetType="Controls:CalculatorButton">
 
-		<Setter Property="HoverBackground"
-				Value="{StaticResource AccentHoverBackgroundColorBrush}" />
-		<Setter Property="HoverForeground"
-				Value="{ThemeResource AccentHoverForegroundColorBrush}" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="Controls:CalculatorButton">
+					<Grid x:Name="RootGrid"
+						  Background="{TemplateBinding Background}">
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="CommonStates">
+								<VisualStateGroup.Transitions>
+									<VisualTransition GeneratedDuration="0" />
+									<VisualTransition From="Normal"
+													  GeneratedDuration="0:0:0.1"
+													  To="KeyBoardEntry" />
+								</VisualStateGroup.Transitions>
+								<VisualState x:Name="Normal" />
+								<win:VisualState x:Name="PointerOver">
+									<VisualState.Setters>
+										<Setter Target="RootGrid.(RevealBrush.State)"
+												Value="PointerOver" />
+										<Setter Target="RootGrid.Background"
+												Value="{StaticResource AccentHoverBackgroundColorBrush}" />
+										<Setter Target="ContentPresenter.(ContentPresenter.Foreground)"
+												Value="{ThemeResource AccentHoverForegroundColorBrush}" />
+									</VisualState.Setters>
+								</win:VisualState>
+								<VisualState x:Name="Pressed">
+									<VisualState.Setters>
+										<Setter Target="RootGrid.(RevealBrush.State)"
+												Value="Pressed" />
+										<Setter Target="RootGrid.Background"
+												Value="{StaticResource AccentPressBackgroundColorBrush}" />
+										<Setter Target="ContentPresenter.(ContentPresenter.Foreground)"
+												Value="{ThemeResource AccentHoverForegroundColorBrush}" />
+									</VisualState.Setters>
+								</VisualState>
+								<VisualState x:Name="Disabled">
+									<VisualState.Setters>
+										<Setter Target="ContentPresenter.Foreground"
+												Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
+										<Setter Target="ContentPresenter.BorderThickness"
+												Value="0" />
+									</VisualState.Setters>
+								</VisualState>
+								<VisualState x:Name="KeyBoardEntry" />
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
 
-		<Setter Property="PressBackground"
-				Value="{StaticResource AccentPressBackgroundColorBrush}"  />
-		<Setter Property="PressForeground"
-				Value="{ThemeResource AccentHoverForegroundColorBrush}" />
+						<ContentPresenter x:Name="ContentPresenter"
+										  Margin="{TemplateBinding Padding}"
+										  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+										  VerticalAlignment="{TemplateBinding VerticalAlignment}"
+										  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+										  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+										  BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"
+										  BorderThickness="{TemplateBinding BorderThickness}"
+										  AutomationProperties.AccessibilityView="Raw"
+										  Content="{TemplateBinding Content}"
+										  ContentTemplate="{TemplateBinding ContentTemplate}"
+										  ContentTransitions="{TemplateBinding ContentTransitions}" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
 	</Style>
 
 	<!-- RESULTS -->
@@ -619,103 +676,103 @@
 				Value="Disabled" />
 	</Style>
 
-  <Style x:Key="CalculationResultStyleL"
-       TargetType="Controls:CalculationResult">
-    <Setter Property="Background"
-        Value="Transparent" />
-    <Setter Property="Foreground"
-        Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
-    <Setter Property="HorizontalAlignment"
-        Value="Stretch" />
-    <Setter Property="VerticalAlignment"
-        Value="Stretch" />
-    <Setter Property="HorizontalContentAlignment"
-        Value="Right" />
-    <Setter Property="VerticalContentAlignment"
-        Value="Top" />
-    <Setter Property="IsTextScaleFactorEnabled"
-        Value="False" />
-    <Setter Property="UseSystemFocusVisuals"
-        Value="True" />
-    <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate TargetType="Controls:CalculationResult">
-          <Grid x:Name="Border"
-              Background="{TemplateBinding Background}">
-            <Grid.ColumnDefinitions>
-              <ColumnDefinition Width="12" />
-              <ColumnDefinition />
-              <ColumnDefinition Width="12" />
-            </Grid.ColumnDefinitions>
-            <VisualStateManager.VisualStateGroups>
-              <VisualStateGroup x:Name="ActiveStates">
-                <VisualState x:Name="Active" />
-                <VisualState x:Name="Normal">
-                  <VisualState.Setters>
-                    <Setter Target="NormalOutput.FontWeight"
-                        Value="Light" />
-                  </VisualState.Setters>
-                </VisualState>
-              </VisualStateGroup>
-            </VisualStateManager.VisualStateGroups>
-            <ScrollViewer x:Name="TextContainer"
-                    Grid.Column="1"
-                    Padding="0,0,0,0"
-                    Style="{ThemeResource ResultsScrollerSnapped}"
-                    AutomationProperties.AccessibilityView="Raw">
-              <TextBlock x:Name="NormalOutput"
-                     Margin="{TemplateBinding DisplayMargin}"
-                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                     Foreground="{TemplateBinding Foreground}"
-                     FontSize="{TemplateBinding FontSize}"
-                     FontWeight="SemiBold"
-                     AutomationProperties.AccessibilityView="Raw"
-                     Text="{TemplateBinding DisplayValue}"
-                     TextAlignment="{TemplateBinding HorizontalContentAlignment}"
-                     TextWrapping="NoWrap" />
-            </ScrollViewer>
-            <HyperlinkButton x:Name="ScrollLeft"
-                     Grid.Column="0"
-                     Width="20"
-                     MinWidth="20"
-                     MinHeight="24"
-                     Margin="-4,0,-4,0"
-                     Padding="0,-3,0,4"
-                     VerticalAlignment="Top"
-                     HorizontalContentAlignment="Center"
-                     VerticalContentAlignment="Center"
-                     Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
-                     BorderThickness="0"
-                     Visibility="Collapsed">
-              <FontIcon x:Name="ScrollLeftText"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    FontSize="12"
-                    Glyph="&#xE26C;" />
-            </HyperlinkButton>
-            <HyperlinkButton x:Name="ScrollRight"
-                     Grid.Column="2"
-                     Width="20"
-                     MinWidth="20"
-                     MinHeight="24"
-                     Margin="-4,0,-4,0"
-                     Padding="0,-3,0,4"
-                     VerticalAlignment="Top"
-                     HorizontalContentAlignment="Center"
-                     VerticalContentAlignment="Center"
-                     Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
-                     BorderThickness="0"
-                     Visibility="Collapsed">
-              <FontIcon x:Name="ScrollRightText"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    FontSize="12"
-                    Glyph="&#xE26B;" />
-            </HyperlinkButton>
-          </Grid>
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
+	<Style x:Key="CalculationResultStyleL"
+		   TargetType="Controls:CalculationResult">
+		<Setter Property="Background"
+				Value="Transparent" />
+		<Setter Property="Foreground"
+				Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
+		<Setter Property="HorizontalAlignment"
+				Value="Stretch" />
+		<Setter Property="VerticalAlignment"
+				Value="Stretch" />
+		<Setter Property="HorizontalContentAlignment"
+				Value="Right" />
+		<Setter Property="VerticalContentAlignment"
+				Value="Top" />
+		<Setter Property="IsTextScaleFactorEnabled"
+				Value="False" />
+		<Setter Property="UseSystemFocusVisuals"
+				Value="True" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="Controls:CalculationResult">
+					<Grid x:Name="Border"
+						  Background="{TemplateBinding Background}">
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="12" />
+							<ColumnDefinition />
+							<ColumnDefinition Width="12" />
+						</Grid.ColumnDefinitions>
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="ActiveStates">
+								<VisualState x:Name="Active" />
+								<VisualState x:Name="Normal">
+									<VisualState.Setters>
+										<Setter Target="NormalOutput.FontWeight"
+												Value="Light" />
+									</VisualState.Setters>
+								</VisualState>
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
+						<ScrollViewer x:Name="TextContainer"
+									  Grid.Column="1"
+									  Padding="0,0,0,0"
+									  Style="{ThemeResource ResultsScrollerSnapped}"
+									  AutomationProperties.AccessibilityView="Raw">
+							<TextBlock x:Name="NormalOutput"
+									   Margin="{TemplateBinding DisplayMargin}"
+									   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+									   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+									   Foreground="{TemplateBinding Foreground}"
+									   FontSize="{TemplateBinding FontSize}"
+									   FontWeight="SemiBold"
+									   AutomationProperties.AccessibilityView="Raw"
+									   Text="{TemplateBinding DisplayValue}"
+									   TextAlignment="{TemplateBinding HorizontalContentAlignment}"
+									   TextWrapping="NoWrap" />
+						</ScrollViewer>
+						<HyperlinkButton x:Name="ScrollLeft"
+										 Grid.Column="0"
+										 Width="20"
+										 MinWidth="20"
+										 MinHeight="24"
+										 Margin="-4,0,-4,0"
+										 Padding="0,-3,0,4"
+										 VerticalAlignment="Top"
+										 HorizontalContentAlignment="Center"
+										 VerticalContentAlignment="Center"
+										 Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
+										 BorderThickness="0"
+										 Visibility="Collapsed">
+							<FontIcon x:Name="ScrollLeftText"
+									  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+									  FontSize="12"
+									  Glyph="&#xE26C;" />
+						</HyperlinkButton>
+						<HyperlinkButton x:Name="ScrollRight"
+										 Grid.Column="2"
+										 Width="20"
+										 MinWidth="20"
+										 MinHeight="24"
+										 Margin="-4,0,-4,0"
+										 Padding="0,-3,0,4"
+										 VerticalAlignment="Top"
+										 HorizontalContentAlignment="Center"
+										 VerticalContentAlignment="Center"
+										 Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
+										 BorderThickness="0"
+										 Visibility="Collapsed">
+							<FontIcon x:Name="ScrollRightText"
+									  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+									  FontSize="12"
+									  Glyph="&#xE26B;" />
+						</HyperlinkButton>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
 
 	<Style x:Key="CalculationResultStyleM"
 		   TargetType="Controls:CalculationResult">
@@ -741,8 +798,8 @@
 			<Setter.Value>
 				<ControlTemplate TargetType="Controls:CalculationResult">
 
-          <Grid x:Name="Border"
-              Background="{TemplateBinding Background}">
+					<Grid x:Name="Border"
+						  Background="{TemplateBinding Background}">
 
 						<Grid.ColumnDefinitions>
 							<ColumnDefinition Width="12" />
@@ -750,79 +807,79 @@
 							<ColumnDefinition Width="12" />
 						</Grid.ColumnDefinitions>
 
-            <VisualStateManager.VisualStateGroups>
-              <VisualStateGroup x:Name="ActiveStates">
-                <VisualState x:Name="Active" />
-                <VisualState x:Name="Normal">
-                  <VisualState.Setters>
-                    <Setter Target="NormalOutput.FontWeight"
-                        Value="Light" />
-                  </VisualState.Setters>
-                </VisualState>
-              </VisualStateGroup>
-            </VisualStateManager.VisualStateGroups>
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="ActiveStates">
+								<VisualState x:Name="Active" />
+								<VisualState x:Name="Normal">
+									<VisualState.Setters>
+										<Setter Target="NormalOutput.FontWeight"
+												Value="Light" />
+									</VisualState.Setters>
+								</VisualState>
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
 
-            <ScrollViewer x:Name="TextContainer"
-                    Grid.Column="1"
-                    Padding="0,0,0,0"
-                    Style="{ThemeResource ResultsScrollerSnapped}"
-                    AutomationProperties.AccessibilityView="Raw">
+						<ScrollViewer x:Name="TextContainer"
+									  Grid.Column="1"
+									  Padding="0,0,0,0"
+									  Style="{ThemeResource ResultsScrollerSnapped}"
+									  AutomationProperties.AccessibilityView="Raw">
 
-              <TextBlock x:Name="NormalOutput"
-                     Margin="{TemplateBinding DisplayMargin}"
-                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                     Foreground="{TemplateBinding Foreground}"
-                     FontSize="{TemplateBinding FontSize}"
-                     FontWeight="SemiBold"
-                     AutomationProperties.AccessibilityView="Raw"
-                     Text="{TemplateBinding DisplayValue}"
-                     TextAlignment="{TemplateBinding HorizontalContentAlignment}"
-                     TextWrapping="NoWrap" />
-            </ScrollViewer>
+							<TextBlock x:Name="NormalOutput"
+									   Margin="{TemplateBinding DisplayMargin}"
+									   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+									   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+									   Foreground="{TemplateBinding Foreground}"
+									   FontSize="{TemplateBinding FontSize}"
+									   FontWeight="SemiBold"
+									   AutomationProperties.AccessibilityView="Raw"
+									   Text="{TemplateBinding DisplayValue}"
+									   TextAlignment="{TemplateBinding HorizontalContentAlignment}"
+									   TextWrapping="NoWrap" />
+						</ScrollViewer>
 
-            <HyperlinkButton x:Name="ScrollLeft"
-                     Grid.Column="0"
-                     Width="20"
-                     MinWidth="20"
-                     MinHeight="24"
-                     Margin="-4,0,-4,0"
-                     Padding="0,-3,0,4"
-                     VerticalAlignment="Top"
-                     HorizontalContentAlignment="Center"
-                     VerticalContentAlignment="Center"
-                     Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
-                     BorderThickness="0"
-                     Visibility="Collapsed">
-              <FontIcon x:Name="ScrollLeftText"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    FontSize="12"
-                    Glyph="&#xE26C;" />
-            </HyperlinkButton>
+						<HyperlinkButton x:Name="ScrollLeft"
+										 Grid.Column="0"
+										 Width="20"
+										 MinWidth="20"
+										 MinHeight="24"
+										 Margin="-4,0,-4,0"
+										 Padding="0,-3,0,4"
+										 VerticalAlignment="Top"
+										 HorizontalContentAlignment="Center"
+										 VerticalContentAlignment="Center"
+										 Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
+										 BorderThickness="0"
+										 Visibility="Collapsed">
+							<FontIcon x:Name="ScrollLeftText"
+									  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+									  FontSize="12"
+									  Glyph="&#xE26C;" />
+						</HyperlinkButton>
 
-            <HyperlinkButton x:Name="ScrollRight"
-                     Grid.Column="2"
-                     Width="20"
-                     MinWidth="20"
-                     MinHeight="24"
-                     Margin="-4,0,-4,0"
-                     Padding="0,-3,0,4"
-                     VerticalAlignment="Top"
-                     HorizontalContentAlignment="Center"
-                     VerticalContentAlignment="Center"
-                     Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
-                     BorderThickness="0"
-                     Visibility="Collapsed">
-              <FontIcon x:Name="ScrollRightText"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    FontSize="12"
-                    Glyph="&#xE26B;" />
-            </HyperlinkButton>
-          </Grid>
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
+						<HyperlinkButton x:Name="ScrollRight"
+										 Grid.Column="2"
+										 Width="20"
+										 MinWidth="20"
+										 MinHeight="24"
+										 Margin="-4,0,-4,0"
+										 Padding="0,-3,0,4"
+										 VerticalAlignment="Top"
+										 HorizontalContentAlignment="Center"
+										 VerticalContentAlignment="Center"
+										 Foreground="{ThemeResource SystemControlForegroundAccentBrush}"
+										 BorderThickness="0"
+										 Visibility="Collapsed">
+							<FontIcon x:Name="ScrollRightText"
+									  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+									  FontSize="12"
+									  Glyph="&#xE26B;" />
+						</HyperlinkButton>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
 
 	<Style x:Key="CalculationResultStyleS"
 		   TargetType="Controls:CalculationResult">

src/Calculator.Shared/Views/MainPage.xaml

@@ -1,19 +1,20 @@
 <Page x:Class="CalculatorApp.MainPage"
-			xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-			xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-			xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-			xmlns:automation="using:CalculatorApp.Common.Automation"
-			xmlns:common="using:CalculatorApp.Common"
-			xmlns:controls="using:CalculatorApp.Controls"
-			xmlns:converters="using:CalculatorApp.Converters"
-			xmlns:local="using:CalculatorApp"
-			xmlns:vm="using:WindowsCalculatorShared.ViewModel"
-			xmlns:toolkit="using:Uno.UI.Toolkit"
-			x:Name="pageRoot"
-			Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
-			Loaded="OnPageLoaded"
-			xmlns:android="http://nventive.com/android"
-			mc:Ignorable="android">
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  xmlns:automation="using:CalculatorApp.Common.Automation"
+	  xmlns:common="using:CalculatorApp.Common"
+	  xmlns:controls="using:CalculatorApp.Controls"
+	  xmlns:converters="using:CalculatorApp.Converters"
+	  xmlns:local="using:CalculatorApp"
+	  xmlns:vm="using:WindowsCalculatorShared.ViewModel"
+	  xmlns:toolkit="using:Uno.UI.Toolkit"
+	  x:Name="pageRoot"
+	  Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
+	  Loaded="OnPageLoaded"
+	  xmlns:xamarin="http://uno.ui/xamarin"
+	  xmlns:android="http://nventive.com/android"
+	  mc:Ignorable="android xamarin">
 	<!-- 
 			xmlns:automation="using:WindowsCalculator.Common.Automation"
 	-->
@@ -63,7 +64,7 @@
 	</Page.Resources>
 
 	<Grid toolkit:VisibleBoundsPadding.PaddingMask="All"
-		  android:Background="White">
+		  xamarin:Background="{StaticResource XamarinBackgroundBrush}">
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
 			<!--
@@ -127,13 +128,13 @@
 		<!--
 		-->
 		<local:TitleBar x:Name="CustomTitleBar"
-										Grid.Row="0"
-										Visibility="Collapsed"/>
+						Grid.Row="0"
+						Visibility="Collapsed" />
 
-												 <!--UNO TODO 
+		<!--UNO TODO 
                          -->
 		<NavigationView x:Name="NavView"
-                         CompactModeThresholdWidth="10000"
+						CompactModeThresholdWidth="10000"
 						ExpandedModeThresholdWidth="10000"
 						IsBackButtonVisible="Collapsed"
 						PaneClosed="OnNavPaneClosed"