calculator/src/Calculator/Views/CalculatorStandardOperators.xaml

<UserControl x:Class="CalculatorApp.CalculatorStandardOperators"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:common="using:CalculatorApp.Common"
             xmlns:controls="using:CalculatorApp.Controls"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:CalculatorApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:triggers="using:CalculatorApp.Views.StateTriggers"
             x:Name="ControlRoot"
             XYFocusKeyboardNavigation="Enabled"
             mc:Ignorable="d">

    <Grid x:Name="Root">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="R0" Height="1*"/>
            <RowDefinition x:Name="R1" Height="1*"/>
            <RowDefinition x:Name="R2" Height="1*"/>
            <RowDefinition x:Name="R3" Height="1*"/>
            <RowDefinition x:Name="R4" Height="1*"/>
            <RowDefinition x:Name="R5" Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="GutterLeft" Width="0"/>
            <ColumnDefinition x:Name="C0" Width="0"/>
            <ColumnDefinition x:Name="C1" Width="1*"/>
            <ColumnDefinition x:Name="C2" Width="1*"/>
            <ColumnDefinition x:Name="C3" Width="1*"/>
            <ColumnDefinition x:Name="C4" Width="1*"/>
            <ColumnDefinition x:Name="GutterRight" Width="0"/>
        </Grid.ColumnDefinitions>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ErrorVisualStates">
                <VisualState x:Name="NoErrorLayout"/>
                <VisualState x:Name="ErrorLayout">
                    <VisualState.Setters>
                        <Setter Target="PercentButton.IsEnabled" Value="False"/>
                        <Setter Target="SquareRootButton.IsEnabled" Value="False"/>
                        <Setter Target="XPower2Button.IsEnabled" Value="False"/>
                        <Setter Target="InvertButton.IsEnabled" Value="False"/>
                        <Setter Target="DivideButton.IsEnabled" Value="False"/>
                        <Setter Target="MultiplyButton.IsEnabled" Value="False"/>
                        <Setter Target="MinusButton.IsEnabled" Value="False"/>
                        <Setter Target="PlusButton.IsEnabled" Value="False"/>
                        <Setter Target="NegateButton.IsEnabled" Value="False"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="Large">
                    <VisualState.StateTriggers>
                        <triggers:ControlSizeTrigger MinWidth="780"
                                                     MinHeight="814"
                                                     Source="{x:Bind Root}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PercentButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="SquareRootButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="XPower2Button.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="InvertButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="NegateButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="ClearEntryButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="ClearButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="BackSpaceButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="DivideButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="MultiplyButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="MinusButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="PlusButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>
                        <Setter Target="EqualButton.FontSize" Value="{StaticResource CalcButtonCaptionSize}"/>

                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle38}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Medium">
                    <VisualState.StateTriggers>
                        <triggers:ControlSizeTrigger MinWidth="468"
                                                     MinHeight="500"
                                                     Source="{x:Bind Root}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PercentButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="SquareRootButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="XPower2Button.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="InvertButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="NegateButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeLarge}"/>
                        <Setter Target="ClearEntryButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="ClearButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="BackSpaceButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="DivideButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="MultiplyButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="MinusButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="PlusButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>
                        <Setter Target="EqualButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSize}"/>

                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle24}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Small">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="260" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PercentButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="SquareRootButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="XPower2Button.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="InvertButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="NegateButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="ClearEntryButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="ClearButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="BackSpaceButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="DivideButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="MultiplyButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="MinusButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="PlusButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>
                        <Setter Target="EqualButton.FontSize" Value="{StaticResource CalcOperatorCaptionSize}"/>

                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle18}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Tiny">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PercentButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="SquareRootButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="XPower2Button.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="InvertButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="NegateButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="ClearEntryButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="ClearButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="BackSpaceButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="DivideButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="MultiplyButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="MinusButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="PlusButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>
                        <Setter Target="EqualButton.FontSize" Value="{StaticResource CalcStandardOperatorCaptionSizeTiny}"/>

                        <Setter Target="NumberPad.ButtonStyle" Value="{StaticResource NumericButtonStyle12}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="ShowStandardFunctions">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="394" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="R1.Height" Value="1*"/>
                        <Setter Target="StandardFunctions.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="HideStandardFunctions">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="R1.Height" Value="0*"/>
                        <Setter Target="StandardFunctions.Visibility" Value="Collapsed"/>
                        <Setter Target="PercentButton.Visibility" Value="Collapsed"/>
                        <Setter Target="PercentColumn.Width" Value="0"/>
                        <Setter Target="DisplayControls.Column" Value="1"/>
                        <Setter Target="DisplayControls.ColumnSpan" Value="4"/>
                        <Setter Target="StandardOperators.Row" Value="0"/>
                        <Setter Target="StandardOperators.RowSpan" Value="6"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid x:Name="DisplayControls"
              x:Uid="DisplayControls"
              Grid.Row="0"
              Grid.Column="2"
              Grid.ColumnSpan="4"
              AutomationProperties.HeadingLevel="Level1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="PercentColumn"/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <controls:CalculatorButton x:Name="PercentButton"
                                       x:Uid="percentButton"
                                       Grid.Column="0"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="percentButton"
                                       ButtonId="Percent"
                                       Content="&#xE94C;"/>
            <controls:CalculatorButton x:Name="ClearEntryButton"
                                       x:Uid="clearEntryButton"
                                       Grid.Column="1"
                                       Style="{StaticResource OperatorButtonStyle}"
                                       FontSize="16"
                                       AutomationProperties.AutomationId="clearEntryButton"
                                       ButtonId="ClearEntry"
                                       Content="CE"/>
            <controls:CalculatorButton x:Name="ClearButton"
                                       x:Uid="clearButton"
                                       Grid.Column="2"
                                       Style="{StaticResource OperatorButtonStyle}"
                                       FontSize="16"
                                       AutomationProperties.AutomationId="clearButton"
                                       ButtonId="Clear"
                                       Content="C"/>
            <controls:CalculatorButton x:Name="BackSpaceButton"
                                       x:Uid="backSpaceButton"
                                       Grid.Column="3"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       FontSize="16"
                                       AutomationProperties.AutomationId="backSpaceButton"
                                       ButtonId="Backspace"
                                       Content="&#xE94F;"/>
        </Grid>

        <Grid x:Name="StandardFunctions"
              x:Uid="StandardFunctions"
              Grid.Row="1"
              Grid.Column="2"
              Grid.ColumnSpan="4"
              AutomationProperties.HeadingLevel="Level1">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition x:Name="FnR1" Height="0"/>
                <RowDefinition x:Name="FnR2" Height="0"/>
                <RowDefinition x:Name="FnR3" Height="0"/>
                <RowDefinition x:Name="FnR4" Height="0"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition x:Name="FnC1" Width="1*"/>
                <ColumnDefinition x:Name="FnC2" Width="1*"/>
                <ColumnDefinition x:Name="FnC3" Width="1*"/>
            </Grid.ColumnDefinitions>
            <controls:CalculatorButton x:Name="InvertButton"
                                       x:Uid="invertButton"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       FontSize="18"
                                       AutomationProperties.AutomationId="invertButton"
                                       ButtonId="Invert"
                                       Content="&#xf7c9;"/>
            <controls:CalculatorButton x:Name="XPower2Button"
                                       x:Uid="xpower2Button"
                                       Grid.Column="1"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       FontSize="18"
                                       AutomationProperties.AutomationId="xpower2Button"
                                       ButtonId="XPower2"
                                       Content="&#xf7c8;"/>
            <controls:CalculatorButton x:Name="SquareRootButton"
                                       x:Uid="squareRootButton"
                                       Grid.Column="2"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="squareRootButton"
                                       ButtonId="Sqrt"
                                       Content="&#xF899;"/>
        </Grid>

        <Grid x:Name="StandardOperators"
              x:Uid="StandardOperators"
              Grid.Row="1"
              Grid.RowSpan="5"
              Grid.Column="5"
              AutomationProperties.HeadingLevel="Level1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <controls:CalculatorButton x:Name="DivideButton"
                                       x:Uid="divideButton"
                                       Grid.Row="0"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="divideButton"
                                       ButtonId="Divide"
                                       Content="&#xE94A;"/>
            <controls:CalculatorButton x:Name="MultiplyButton"
                                       x:Uid="multiplyButton"
                                       Grid.Row="1"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="multiplyButton"
                                       ButtonId="Multiply"
                                       Content="&#xE947;"/>
            <controls:CalculatorButton x:Name="MinusButton"
                                       x:Uid="minusButton"
                                       Grid.Row="2"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="minusButton"
                                       ButtonId="Subtract"
                                       Content="&#xE949;"/>
            <controls:CalculatorButton x:Name="PlusButton"
                                       x:Uid="plusButton"
                                       Grid.Row="3"
                                       Style="{StaticResource SymbolOperatorButtonStyle}"
                                       AutomationProperties.AutomationId="plusButton"
                                       ButtonId="Add"
                                       Content="&#xE948;"/>
            <controls:CalculatorButton x:Name="EqualButton"
                                       x:Uid="equalButton"
                                       Grid.Row="4"
                                       Style="{StaticResource AccentEmphasizedCalcButtonStyle}"
                                       AutomationProperties.AutomationId="equalButton"
                                       ButtonId="Equals"
                                       Content="&#xE94E;"/>
        </Grid>

        <local:NumberPad x:Name="NumberPad"
                         x:Uid="NumberPad"
                         Grid.Row="2"
                         Grid.RowSpan="4"
                         Grid.Column="2"
                         Grid.ColumnSpan="3"
                         AutomationProperties.HeadingLevel="Level1"
                         ButtonStyle="{StaticResource NumericButtonStyle24}"/>

        <controls:CalculatorButton x:Name="NegateButton"
                                   x:Uid="negateButton"
                                   Grid.Row="5"
                                   Grid.Column="2"
                                   Style="{StaticResource SymbolOperatorKeypadButtonStyle}"
                                   FontWeight="Normal"
                                   AutomationProperties.AutomationId="negateButton"
                                   ButtonId="Negate"
                                   Content="&#xF898;"/>
    </Grid>
</UserControl>