DevWiki/calculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update styles for buttons on Graph and ListView (#793)

Browse Source 
* Fix listview

* extra merge with KGF

* Few tweaks

* Fix scrolling

* PR feedback and other tweaks

* Update src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

Co-Authored-By: Stephanie Anderl <46726333+sanderl@users.noreply.github.com>
This commit is contained in:
Pepe Rivera 2019-11-20 11:41:21 -08:00 committed by GitHub
parent b55659f236
commit 9ee2f8a293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 479 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Calculator/App.xaml
View File

@ -28,6 +28,7 @@
<RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush" Color="#30FFFFFF"/> <RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush" Color="#30FFFFFF"/>
<SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="{ThemeResource SystemAccentColor}"/> <SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{StaticResource SystemBaseHighColor}"/> <SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{StaticResource SystemBaseHighColor}"/>
<SolidColorBrush x:Key="AppControlForegroundAccentBrush" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="Red"/> <SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="Red"/>
<RevealBorderBrush x:Key="AppControlForegroundTransparentRevealBorderBrush" <RevealBorderBrush x:Key="AppControlForegroundTransparentRevealBorderBrush"
FallbackColor="Transparent" FallbackColor="Transparent"
@ -85,6 +86,7 @@
<RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush" Color="#30000000"/> <RevealBackgroundBrush x:Key="AppControlPressedButtonFaceBrush" Color="#30000000"/>
<SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="{ThemeResource SystemAccentColor}"/> <SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{StaticResource SystemBaseHighColor}"/> <SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{StaticResource SystemBaseHighColor}"/>
<SolidColorBrush x:Key="AppControlForegroundAccentBrush" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="Red"/> <SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="Red"/>
<RevealBorderBrush x:Key="AppControlForegroundTransparentRevealBorderBrush" <RevealBorderBrush x:Key="AppControlForegroundTransparentRevealBorderBrush"
FallbackColor="Transparent" FallbackColor="Transparent"
@ -139,6 +141,7 @@
<SolidColorBrush x:Key="AppControlPressedButtonFaceBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/> <SolidColorBrush x:Key="AppControlPressedButtonFaceBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="Transparent"/> <SolidColorBrush x:Key="AppControlTransparentAccentColorBrush" Color="Transparent"/>
<SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{ThemeResource SystemColorWindowTextColor}"/> <SolidColorBrush x:Key="AppControlPageTextBaseHighColorBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="AppControlForegroundAccentBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
<SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="{ThemeResource SystemColorWindowTextColor}"/> <SolidColorBrush x:Key="AppControlPageTextRedColorBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="AppControlForegroundTransparentRevealBorderBrush" Color="{ThemeResource SystemColorButtonTextColor}"/> <SolidColorBrush x:Key="AppControlForegroundTransparentRevealBorderBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
<SolidColorBrush x:Key="AppControlHighlightAccentRevealBackgroundBrush" Color="{ThemeResource SystemColorHighlightColor}"/> <SolidColorBrush x:Key="AppControlHighlightAccentRevealBackgroundBrush" Color="{ThemeResource SystemColorHighlightColor}"/>
@ -522,6 +525,7 @@
<Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/> <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="Button"> <ControlTemplate TargetType="Button">
@ -561,7 +565,7 @@
BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}" BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
FontSize="{TemplateBinding FontSize}" FontSize="{TemplateBinding FontSize}"
FontWeight="SemiBold" FontWeight="{TemplateBinding FontWeight}"
AutomationProperties.AccessibilityView="Raw" AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"

2
src/Calculator/Resources/en-US/Resources.resw
View File

@ -3491,7 +3491,7 @@
<value>Zoom Out</value> <value>Zoom Out</value>
<comment>Screen reader prompt for the zoom out button.</comment> <comment>Screen reader prompt for the zoom out button.</comment>
</data> </data>
<data name="EquationInputButtonPlaceholderText" xml:space="preserve"> <data name="EquationInputButtonPlaceholder.Text" xml:space="preserve">
<value>Add Equation</value> <value>Add Equation</value>
<comment>Placeholder text for the equation input button</comment> <comment>Placeholder text for the equation input button</comment>
</data> </data>

86
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
View File

@ -9,48 +9,92 @@
d:DesignHeight="300" d:DesignHeight="300"
d:DesignWidth="400" d:DesignWidth="400"
mc:Ignorable="d"> mc:Ignorable="d">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView x:Name="EquationInputList" <ListView x:Name="EquationInputList"
VerticalContentAlignment="Top" IsItemClickEnabled="False"
IsItemClickEnabled="False" ItemsSource="{x:Bind Equations}"
ItemsSource="{x:Bind Equations}" SelectionMode="None">
SelectionMode="None">
<!-- Removes animations from the ListView Style. -->
<ListView.Style>
<Style TargetType="ListView">
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</ListView.Style>
<ListView.ItemContainerStyle> <ListView.ItemContainerStyle>
<Style TargetType="ListViewItem"> <Style TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False"/> <Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/> <Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0,0,0,2"/> <Setter Property="Margin" Value="1,0,1,0"/>
</Style> </Style>
</ListView.ItemContainerStyle> </ListView.ItemContainerStyle>
<ListView.ItemTemplate> <ListView.ItemTemplate>
<DataTemplate x:DataType="vm:EquationViewModel"> <DataTemplate x:DataType="vm:EquationViewModel">
<controls:EquationTextBox x:Uid="EquationInputButton" <controls:EquationTextBox x:Uid="EquationInputButton"
Margin="0,0,3,0" Margin="1,0,1,0"
Style="{StaticResource EquationTextBoxStyle}" Style="{StaticResource EquationTextBoxStyle}"
EquationColor="{x:Bind LineColor, Mode=OneWay}" EquationColor="{x:Bind LineColor, Mode=OneWay}"
EquationSubmitted="InputTextBox_Submitted" EquationSubmitted="InputTextBox_Submitted"
GotFocus="InputTextBox_GotFocus" GotFocus="InputTextBox_GotFocus"
Loaded="EquationTextBoxLoaded" Loaded="EquationTextBoxLoaded"
LostFocus="InputTextBox_LostFocus" LostFocus="InputTextBox_LostFocus"
RemoveButtonClicked="EquationTextBox_RemoveButtonClicked" RemoveButtonClicked="EquationTextBox_RemoveButtonClicked"
KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked"> KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked">
<controls:EquationTextBox.ColorChooserFlyout> <controls:EquationTextBox.ColorChooserFlyout>
<Flyout x:Name="ColorChooserFlyout" <Flyout x:Name="ColorChooserFlyout"
x:Uid="ColorChooserFlyout" x:Uid="ColorChooserFlyout"
Placement="Bottom"> Placement="Bottom">
<local:EquationStylePanelControl SelectedColor="{x:Bind LineColor, Mode=TwoWay}"/> <local:EquationStylePanelControl SelectedColor="{x:Bind LineColor, Mode=TwoWay}"/>
</Flyout> </Flyout>
</controls:EquationTextBox.ColorChooserFlyout> </controls:EquationTextBox.ColorChooserFlyout>
</controls:EquationTextBox> </controls:EquationTextBox>
</DataTemplate> </DataTemplate>
</ListView.ItemTemplate> </ListView.ItemTemplate>
<ListView.Footer>
<Button Margin="4"
Click="AddEquationButton_Click"
Content="+"/>
</ListView.Footer>
</ListView> </ListView>
<Button Grid.Row="1"
MinHeight="44"
Margin="2,0,2,1"
Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Style="{ThemeResource CaptionButtonStyle}"
FontSize="14"
FontWeight="Normal"
Click="AddEquationButton_Click">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<FontIcon MinWidth="44"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Glyph="&#xE710;"/>
<TextBlock x:Uid="EquationInputButtonPlaceholder"
Grid.Column="1"
Margin="8,0,0,0"
VerticalAlignment="Center"/>
</Grid>
</Button.Content>
</Button>
</Grid>
</UserControl> </UserControl>

1
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
View File

@ -70,6 +70,7 @@ void EquationInputArea::AddNewEquation()
eq->LineColor = AvailableColors->GetAt(m_lastLineColorIndex); eq->LineColor = AvailableColors->GetAt(m_lastLineColorIndex);
Equations->Append(eq); Equations->Append(eq);
EquationInputList->ScrollIntoView(eq);
} }
void EquationInputArea::InputTextBox_GotFocus(Object ^ sender, RoutedEventArgs ^ e) void EquationInputArea::InputTextBox_GotFocus(Object ^ sender, RoutedEventArgs ^ e)

733
src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
View File

@ -12,22 +12,156 @@
mc:Ignorable="d"> mc:Ignorable="d">
<UserControl.Resources> <UserControl.Resources>
<Style x:Key="ZoomRepeatButtonStyle" TargetType="RepeatButton"> <Style x:Key="GraphButtonStyle" TargetType="Button">
<Setter Property="Width" Value="36"/> <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="Height" Value="36"/> <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
<Setter Property="CornerRadius" Value="18"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontSize" Value="12"/> <Setter Property="Margin" 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="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
FontSize="{TemplateBinding FontSize}"
FontWeight="SemiBold"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</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="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Delay" Value="500"/> <Setter Property="Delay" Value="500"/>
<Setter Property="Interval" Value="40"/> <Setter Property="Interval" Value="40"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CornerRadius="{TemplateBinding CornerRadius}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonBorderBrushDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> </Style>
<Style x:Key="ZoomButtonStyle" TargetType="Button">
<Setter Property="Width" Value="36"/>
<Setter Property="Height" Value="36"/>
<Setter Property="CornerRadius" Value="18"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontSize" Value="12"/>
</Style>
<converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/> <converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
<converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/> <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
</UserControl.Resources> </UserControl.Resources>
@ -46,7 +180,7 @@
<Grid x:Name="LeftGrid" <Grid x:Name="LeftGrid"
Grid.Row="1" Grid.Row="1"
Grid.Column="0"> Grid.Column="0">
<Grid Grid.Row="0" Margin="4,7,4,4"> <Grid Grid.Row="0" Margin="0,4,0,0">
<graphControl:Grapher Name="GraphingControl" <graphControl:Grapher Name="GraphingControl"
EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}" EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}"
ForceProportionalAxes="True" ForceProportionalAxes="True"
@ -84,25 +218,269 @@
</graphControl:Grapher> </graphControl:Grapher>
<StackPanel Grid.Row="0" <StackPanel Grid.Row="0"
Margin="0,0,10,10" Margin="0,12,12,0"
HorizontalAlignment="Right" HorizontalAlignment="Right"
VerticalAlignment="Top" VerticalAlignment="Top"
Orientation="Horizontal"> Orientation="Horizontal">
<!-- Temporary button until the final UI is created -->
<Button x:Name="VariableEditing"
Margin="0,0,4,0"
MinHeight="44"
MinWidth="44"
Style="{StaticResource GraphButtonStyle}"
RequestedTheme="Light">
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70F;"/>
<Button.Flyout>
<Flyout Placement="BottomEdgeAlignedLeft">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="RequestedTheme" Value="Default"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<ListView x:Name="VariableListView"
MinWidth="300"
ItemsSource="{x:Bind ViewModel.Variables}"
SelectionMode="None">
<ListView.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{ThemeResource SystemColorButtonTextColor}"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</ListView.Resources>
<ListView.Header>
<TextBlock x:Uid="VaiablesHeader" Margin="0,0,0,12"/>
</ListView.Header>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,0,0,12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:VariableViewModel">
<StackPanel>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Padding="0,0,0,8"
VerticalAlignment="Bottom"
Text="{x:Bind Name}"/>
<TextBox x:Name="ValueTextBox"
Grid.Column="1"
HorizontalAlignment="Left"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Value, Mode=OneWay}"/>
<ToggleButton Grid.Column="2"
HorizontalAlignment="Right"
Background="Transparent"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Content="&#xE713;"
IsChecked="{x:Bind SliderSettingsVisible, Mode=TwoWay}">
<ToggleButton.Resources>
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
</ToggleButton.Resources>
</ToggleButton>
</Grid>
<Slider MinHeight="38"
Maximum="{x:Bind Max, Mode=TwoWay}"
Minimum="{x:Bind Min, Mode=TwoWay}"
StepFrequency="{x:Bind Step, Mode=TwoWay}"
Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
Value="{x:Bind Value, Mode=TwoWay}"/>
<Grid Grid.Row="1"
MinHeight="38"
HorizontalAlignment="Stretch"
Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="MinTextBlock"
Padding="0,0,0,8"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="MinTextBox"
MaxWidth="96"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Min, Mode=OneWay}"/>
</StackPanel>
<StackPanel Grid.Column="1"
HorizontalAlignment="Center"
Orientation="Horizontal">
<TextBlock x:Uid="StepTextBlock"
Padding="0,0,0,8"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="StepTextBox"
MaxWidth="96"
HorizontalAlignment="Center"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Step, Mode=OneWay}"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal">
<TextBlock x:Uid="MaxTextBlock"
Padding="0,0,0,8"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="MaxTextBox"
MaxWidth="96"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Max, Mode=OneWay}"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
<Button x:Name="ActiveTracing" <Button x:Name="ActiveTracing"
MinWidth="40" Margin="0,0,4,0"
MinHeight="40" MinHeight="44"
Margin="0,0,10,0" MinWidth="44"
Click="OnActiveTracingClick"> Style="{StaticResource GraphButtonStyle}"
Click="OnActiveTracingClick"
RequestedTheme="Light">
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE73F;"/> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE73F;"/>
</Button> </Button>
<Button x:Name="Share" <Button x:Name="Share"
MinWidth="40" Margin="0"
MinHeight="40" MinHeight="44"
Click="OnShareClick"> MinWidth="44"
Style="{StaticResource GraphButtonStyle}"
Click="OnShareClick"
RequestedTheme="Light">
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE72D;"/> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE72D;"/>
</Button> </Button>
</StackPanel> </StackPanel>
<StackPanel Grid.Row="0"
Margin="0,0,12,12"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Vertical">
<RepeatButton x:Uid="zoomInButton"
Margin="0,0,0,4"
MinHeight="44"
MinWidth="44"
Style="{ThemeResource GraphRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomInButton"
Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}"
RequestedTheme="Light">
<Grid>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE710;"/>
</Grid>
</RepeatButton>
<RepeatButton x:Uid="zoomOutButton"
Margin="0,0,0,4"
MinHeight="44"
MinWidth="44"
Style="{ThemeResource GraphRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomOutButton"
Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}"
RequestedTheme="Light">
<Grid>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE738;"/>
</Grid>
</RepeatButton>
<Button x:Uid="zoomResetButton"
Margin="0,0,0,0"
MinHeight="44"
MinWidth="44"
Style="{ThemeResource GraphButtonStyle}"
AutomationProperties.AutomationId="zoomResetButton"
Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}"
RequestedTheme="Light">
<Grid>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE895;"/>
</Grid>
</Button>
</StackPanel>
<Popup x:Name="TraceValuePopup" <Popup x:Name="TraceValuePopup"
Grid.Row="0" Grid.Row="0"
RenderTransformOrigin="0,1"> RenderTransformOrigin="0,1">
@ -121,299 +499,6 @@
</Grid> </Grid>
<!-- Temporary button until the final UI is created -->
<Button Margin="12,0,0,12"
VerticalAlignment="Bottom"
FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="18"
Content="&#xE70F;"
RequestedTheme="Light">
<Button.Flyout>
<Flyout Placement="TopEdgeAlignedRight">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="RequestedTheme" Value="Default"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Margin" Value="12,0,0,0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<ListView x:Name="VariableListView"
MinWidth="300"
ItemsSource="{x:Bind ViewModel.Variables}"
SelectionMode="None">
<ListView.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{ThemeResource SystemColorButtonTextColor}"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">16</x:Double>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</ListView.Resources>
<ListView.Header>
<TextBlock x:Uid="VaiablesHeader" Margin="0,0,0,12"/>
</ListView.Header>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,0,0,12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:VariableViewModel">
<StackPanel>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Padding="0,0,0,8"
VerticalAlignment="Bottom"
Text="{x:Bind Name}"/>
<TextBox x:Name="ValueTextBox"
Grid.Column="1"
HorizontalAlignment="Left"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Value, Mode=OneWay}"/>
<ToggleButton Grid.Column="2"
HorizontalAlignment="Right"
Background="Transparent"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Content="&#xE713;"
IsChecked="{x:Bind SliderSettingsVisible, Mode=TwoWay}">
<ToggleButton.Resources>
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
</ToggleButton.Resources>
</ToggleButton>
</Grid>
<Slider MinHeight="38"
Maximum="{x:Bind Max, Mode=TwoWay}"
Minimum="{x:Bind Min, Mode=TwoWay}"
StepFrequency="{x:Bind Step, Mode=TwoWay}"
Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
Value="{x:Bind Value, Mode=TwoWay}"/>
<Grid Grid.Row="1"
MinHeight="38"
HorizontalAlignment="Stretch"
Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="MinTextBlock"
Padding="0,0,0,8"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="MinTextBox"
MaxWidth="96"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Min, Mode=OneWay}"/>
</StackPanel>
<StackPanel Grid.Column="1"
HorizontalAlignment="Center"
Orientation="Horizontal">
<TextBlock x:Uid="StepTextBlock"
Padding="0,0,0,8"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="StepTextBox"
MaxWidth="96"
HorizontalAlignment="Center"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Step, Mode=OneWay}"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal">
<TextBlock x:Uid="MaxTextBlock"
Padding="0,0,0,8"
VerticalAlignment="Bottom"
FontWeight="SemiBold"/>
<TextBox x:Name="MaxTextBox"
MaxWidth="96"
Style="{StaticResource VariableTextBoxStyle}"
GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Max, Mode=OneWay}"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
<Grid>
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="RepeatButtonBackground" Color="White"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="White"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="White"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="White"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrush"
Opacity="0.6"
Color="Black"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver"
Opacity="0.8"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushPressed"
Opacity="1.0"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled"
Opacity="0.2"
Color="Black"/>
<SolidColorBrush x:Key="RepeatButtonForeground"
Opacity="0.6"
Color="Black"/>
<SolidColorBrush x:Key="RepeatButtonForegroundPointerOver"
Opacity="0.8"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="RepeatButtonForegroundPressed"
Opacity="1.0"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="RepeatButtonForegroundDisabled"
Opacity="0.2"
Color="Black"/>
<SolidColorBrush x:Key="ButtonBackground" Color="White"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="White"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="White"/>
<SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="White"/>
<SolidColorBrush x:Key="ButtonBorderBrush"
Opacity="0.6"
Color="Black"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Opacity="0.8"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrushPressed"
Opacity="1.0"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrushDisabled"
Opacity="0.2"
Color="Black"/>
<SolidColorBrush x:Key="ButtonForeground"
Opacity="0.6"
Color="Black"/>
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Opacity="0.8"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonForegroundPressed"
Opacity="1.0"
Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonForegroundDisabled"
Opacity="0.2"
Color="Black"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="RepeatButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
<SolidColorBrush x:Key="RepeatButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="RepeatButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="RepeatButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="RepeatButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
<SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
<SolidColorBrush x:Key="ButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Grid.Resources>
<RepeatButton x:Uid="zoomInButton"
Margin="0,0,12,108"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Style="{ThemeResource ZoomRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomInButton"
Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}"
Content="&#xE710;"/>
<RepeatButton x:Uid="zoomOutButton"
Margin="0,0,12,60"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Style="{ThemeResource ZoomRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomOutButton"
Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}"
Content="&#xE738;"/>
<Button x:Uid="zoomResetButton"
Margin="0,0,12,12"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Style="{ThemeResource ZoomButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomResetButton"
Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}"
Content="&#xE895;"/>
</Grid>
</Grid> </Grid>
<!-- Right portion of the screen --> <!-- Right portion of the screen -->
@ -434,21 +519,17 @@
KeyGraphFeaturesClosed="OnKeyGraphFeaturesClosed" KeyGraphFeaturesClosed="OnKeyGraphFeaturesClosed"
ViewModel="{x:Bind EquationInputAreaControl.EquationVM, Mode=OneWay}" ViewModel="{x:Bind EquationInputAreaControl.EquationVM, Mode=OneWay}"
Visibility="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"/> Visibility="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"/>
<Grid x:Name="EquationInputAreaGrid" Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
<Grid.RowDefinitions> <!-- This control should be within a grid that limits the hight to keep the sticky footer functionality from breaking -->
<RowDefinition Height="Auto"/> <local:EquationInputArea x:Name="EquationInputAreaControl"
<RowDefinition Height="1*"/> Margin="0,4,0,0"
</Grid.RowDefinitions> Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
<local:EquationInputArea x:Name="EquationInputAreaControl" Equations="{x:Bind ViewModel.Equations}"
Grid.Row="1" KeyGraphFeaturesVisibilityChanged="OnEquationKeyGraphFeaturesVisibilityChanged"/>
Margin="0,8,0,0"
Equations="{x:Bind ViewModel.Equations}"
KeyGraphFeaturesVisibilityChanged="OnEquationKeyGraphFeaturesVisibilityChanged"/>
</Grid>
<Grid x:Name="ButtonContainerGrid" <Grid x:Name="ButtonContainerGrid"
Grid.Row="1" Grid.Row="1"
Margin="3,0,3,3" Margin="2,0,2,2"
UseLayoutRounding="False" UseLayoutRounding="False"
Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"> Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
<Grid.RowDefinitions> <Grid.RowDefinitions>