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

Redesign graph buttons + replace ActiveTracing button by a ToggleButton (#864)

Browse Source 
* redesign graph buttons

* fix high-contrast and focus
This commit is contained in:
Rudy Huyn 2019-12-12 09:38:10 -08:00 committed by Pepe Rivera
parent f593c621aa
commit f282605bc6
4 changed files with 269 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(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" xmlns:converters="using:CalculatorApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:graphControl="using:GraphControl" xmlns:graphControl="using:GraphControl"
@ -15,64 +14,36 @@
<UserControl.Resources> <UserControl.Resources>
<ResourceDictionary> <ResourceDictionary>
<converters:ItemSizeToVisibilityConverter x:Key="ItemSizeToVisibilityConverter"/> <converters:ItemSizeToVisibilityConverter x:Key="ItemSizeToVisibilityConverter"/>
<Style x:Key="GraphButtonStyle" TargetType="Button"> <Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/> <Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="0"/> <Setter Property="Margin" Value="-1"/>
<Setter Property="Padding" Value="8"/> <Setter Property="Padding" Value="8"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="VerticalAlignment" Value="Stretch"/>
<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="Template"> <Setter Property="FontWeight" Value="Normal"/>
<Setter.Value> </Style>
<ControlTemplate TargetType="Button">
<ContentPresenter x:Name="ContentPresenter" <Style x:Key="GraphButtonStyle" TargetType="Button">
Padding="{TemplateBinding Padding}" <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" <Setter Property="Background" Value="Transparent"/>
VerticalAlignment="{TemplateBinding VerticalAlignment}" <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" <Setter Property="BorderThickness" Value="1"/>
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" <Setter Property="Margin" Value="-1"/>
Background="{TemplateBinding Background}" <Setter Property="Padding" Value="8"/>
BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}" <Setter Property="HorizontalAlignment" Value="Stretch"/>
BorderThickness="{TemplateBinding BorderThickness}" <Setter Property="VerticalAlignment" Value="Stretch"/>
FontSize="{TemplateBinding FontSize}" <Setter Property="HorizontalContentAlignment" Value="Center"/>
FontWeight="SemiBold" <Setter Property="VerticalContentAlignment" Value="Center"/>
AutomationProperties.AccessibilityView="Raw" <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
Content="{TemplateBinding Content}" <Setter Property="FontWeight" Value="Normal"/>
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>
<Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton"> <Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton">
@ -80,7 +51,7 @@
<Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/> <Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/> <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="0"/> <Setter Property="Margin" Value="-1"/>
<Setter Property="Padding" Value="0"/> <Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="VerticalAlignment" Value="Stretch"/>
@ -93,78 +64,6 @@
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/> <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/> <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="SwitchModeToggleButtonStyle" TargetType="ToggleButton"> <Style x:Key="SwitchModeToggleButtonStyle" TargetType="ToggleButton">
@ -321,14 +220,52 @@
<Style x:Key="ThemedSwitchModeToggleButtonStyle" <Style x:Key="ThemedSwitchModeToggleButtonStyle"
BasedOn="{StaticResource SwitchModeToggleButtonStyle}" BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
TargetType="ToggleButton"/> TargetType="ToggleButton"/>
<Style x:Key="GraphControlCommandPanel" TargetType="Border">
<Setter Property="Background" Value="#80000000"/>
<Setter Property="CornerRadius" Value="4"/>
</Style>
<Style x:Key="ThemedGraphRepeatButtonStyle"
BasedOn="{StaticResource GraphRepeatButtonStyle}"
TargetType="RepeatButton"/>
<Style x:Key="ThemedGraphButtonStyle"
BasedOn="{StaticResource GraphButtonStyle}"
TargetType="Button"/>
<Style x:Key="ThemedGraphToggleButtonStyle"
BasedOn="{StaticResource GraphToggleButtonStyle}"
TargetType="ToggleButton"/>
</ResourceDictionary> </ResourceDictionary>
<ResourceDictionary x:Key="Dark"> <ResourceDictionary x:Key="Light">
<Style x:Key="ThemedSwitchModeToggleButtonStyle" <Style x:Key="ThemedSwitchModeToggleButtonStyle"
BasedOn="{StaticResource SwitchModeToggleButtonStyle}" BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
TargetType="ToggleButton"/> TargetType="ToggleButton"/>
<Style x:Key="GraphControlCommandPanel" TargetType="Border">
<Setter Property="Background" Value="{StaticResource SystemControlAcrylicElementBrush}"/>
<Setter Property="BorderBrush" Value="#e0e0e0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="4"/>
</Style>
<Style x:Key="ThemedGraphRepeatButtonStyle"
BasedOn="{StaticResource GraphRepeatButtonStyle}"
TargetType="RepeatButton"/>
<Style x:Key="ThemedGraphButtonStyle"
BasedOn="{StaticResource GraphButtonStyle}"
TargetType="Button"/>
<Style x:Key="ThemedGraphToggleButtonStyle"
BasedOn="{StaticResource GraphToggleButtonStyle}"
TargetType="ToggleButton"/>
</ResourceDictionary> </ResourceDictionary>
<ResourceDictionary x:Key="HighContrast"> <ResourceDictionary x:Key="HighContrast">
<Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/> <Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/>
<Style x:Key="GraphControlCommandPanel" TargetType="Border"/>
<Style x:Key="ThemedGraphRepeatButtonStyle" TargetType="RepeatButton">
<Setter Property="Margin" Value="1"/>
</Style>
<Style x:Key="ThemedGraphButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="1"/>
</Style>
<Style x:Key="ThemedGraphToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Margin" Value="1"/>
</Style>
</ResourceDictionary> </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries> </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary> </ResourceDictionary>
@ -384,33 +321,63 @@
<!-- Left portion of the screen --> <!-- Left portion of the screen -->
<Grid x:Name="LeftGrid" <Grid x:Name="LeftGrid"
Grid.Row="1" Grid.Row="1"
Padding="0,4,0,0"
Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:True), Mode=OneWay}"> Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:True), Mode=OneWay}">
<Grid Grid.Row="0" Margin="0,4,0,0"> <Grid.Resources>
<graphControl:Grapher Name="GraphingControl" <ResourceDictionary>
ForceProportionalAxes="True" <ResourceDictionary.ThemeDictionaries>
LosingFocus="GraphingControl_LosingFocus" <ResourceDictionary x:Key="Light">
LostFocus="GraphingControl_LostFocus" <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#10000000"/>
UseSystemFocusVisuals="True" <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#20000000"/>
VariablesUpdated="GraphingControl_VariablesUpdated"> <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="#10000000"/>
<graphControl:Grapher.Background> <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="#20000000"/>
<SolidColorBrush Color="White"/> <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
</graphControl:Grapher.Background> <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
</graphControl:Grapher> <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.ThemeDictionaries>
</ResourceDictionary>
</Grid.Resources>
<graphControl:Grapher Name="GraphingControl"
ForceProportionalAxes="True"
LosingFocus="GraphingControl_LosingFocus"
LostFocus="GraphingControl_LostFocus"
UseSystemFocusVisuals="True"
VariablesUpdated="GraphingControl_VariablesUpdated">
<graphControl:Grapher.Background>
<SolidColorBrush Color="White"/>
</graphControl:Grapher.Background>
</graphControl:Grapher>
<StackPanel Margin="0,12,12,0" <Border MinHeight="36"
HorizontalAlignment="Right" Margin="0,12,12,0"
VerticalAlignment="Top" HorizontalAlignment="Right"
Orientation="Horizontal"> VerticalAlignment="Top"
Style="{ThemeResource GraphControlCommandPanel}"
RequestedTheme="Light">
<StackPanel Orientation="Horizontal">
<!-- Temporary button until the final UI is created --> <!-- Temporary button until the final UI is created -->
<Button x:Name="VariableEditing" <Button x:Name="VariableEditing"
x:Uid="variablesButton" x:Uid="variablesButton"
MinWidth="44" MinWidth="40"
MinHeight="44" Style="{ThemeResource ThemedGraphButtonStyle}"
Margin="0,0,4,0"
Style="{StaticResource GraphButtonStyle}"
RequestedTheme="Light"
Visibility="{x:Bind local:GraphingCalculator.ManageEditVariablesButtonVisibility(ViewModel.Variables.Size), Mode=OneWay}"> Visibility="{x:Bind local:GraphingCalculator.ManageEditVariablesButtonVisibility(ViewModel.Variables.Size), Mode=OneWay}">
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70F;"/> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="18"
Glyph="&#xE70F;"/>
<Button.Flyout> <Button.Flyout>
<Flyout Placement="BottomEdgeAlignedLeft"> <Flyout Placement="BottomEdgeAlignedLeft">
<Flyout.FlyoutPresenterStyle> <Flyout.FlyoutPresenterStyle>
@ -574,116 +541,99 @@
</Button.Flyout> </Button.Flyout>
</Button> </Button>
<Button x:Name="ActiveTracing" <ToggleButton x:Name="ActiveTracing"
MinWidth="44" MinWidth="40"
MinHeight="44" Margin="0,-1"
Margin="0,0,4,0" Style="{ThemeResource ThemedGraphToggleButtonStyle}"
Style="{StaticResource GraphButtonStyle}" contract7Present:CornerRadius="{ThemeResource LeftButtonCornerRadius}"
Click="OnActiveTracingClick" AutomationProperties.Name="{x:Bind local:GraphingCalculator.GetTracingLegend(GraphingControl.ActiveTracing), Mode=OneWay}"
RequestedTheme="Light"> Checked="ActiveTracing_Checked"
<FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xE3B3;"/> IsChecked="{x:Bind GraphingControl.ActiveTracing, Mode=TwoWay}"
</Button> Unchecked="ActiveTracing_Unchecked">
<ToolTipService.ToolTip>
<ToolTip Content="{x:Bind ActiveTracing.(AutomationProperties.Name), Mode=OneWay}"/>
</ToolTipService.ToolTip>
<FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
FontSize="18"
Glyph="&#xE3B3;"/>
</ToggleButton>
<Button x:Name="Share" <Button x:Name="Share"
x:Uid="shareButton" x:Uid="shareButton"
MinWidth="44" MinWidth="40"
MinHeight="44" Style="{ThemeResource ThemedGraphButtonStyle}"
Margin="0" contract7Present:CornerRadius="{ThemeResource RightButtonCornerRadius}"
Style="{StaticResource GraphButtonStyle}" Click="OnShareClick">
Click="OnShareClick" <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
RequestedTheme="Light"> FontSize="18"
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE72D;"/> Glyph="&#xE72D;"/>
</Button> </Button>
</StackPanel> </StackPanel>
</Border>
<StackPanel Grid.Row="0" <Border MinWidth="36"
Margin="0,0,12,12" Margin="0,0,12,12"
HorizontalAlignment="Right" HorizontalAlignment="Right"
VerticalAlignment="Bottom" VerticalAlignment="Bottom"
Orientation="Vertical"> Style="{ThemeResource GraphControlCommandPanel}"
RequestedTheme="Light">
<StackPanel Orientation="Vertical">
<RepeatButton x:Uid="zoomInButton" <RepeatButton x:Uid="zoomInButton"
MinWidth="44" MinHeight="40"
MinHeight="44" HorizontalAlignment="Stretch"
Margin="0,0,0,4" Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
Style="{ThemeResource GraphRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}" FontFamily="{StaticResource SymbolThemeFontFamily}"
contract7Present:CornerRadius="{ThemeResource TopButtonCornerRadius}"
AutomationProperties.AutomationId="zoomInButton" AutomationProperties.AutomationId="zoomInButton"
Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}" Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}">
RequestedTheme="Light"> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
<Grid> FontSize="14"
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE710;"/>
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE710;"/>
</Grid>
</RepeatButton> </RepeatButton>
<RepeatButton x:Uid="zoomOutButton" <RepeatButton x:Uid="zoomOutButton"
MinWidth="44" MinHeight="40"
MinHeight="44" HorizontalAlignment="Stretch"
Margin="0,0,0,4" Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
Style="{ThemeResource GraphRepeatButtonStyle}"
FontFamily="{StaticResource SymbolThemeFontFamily}" FontFamily="{StaticResource SymbolThemeFontFamily}"
AutomationProperties.AutomationId="zoomOutButton" AutomationProperties.AutomationId="zoomOutButton"
Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}" Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}">
RequestedTheme="Light"> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
<Grid> FontSize="14"
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE738;"/>
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE738;"/>
</Grid>
</RepeatButton> </RepeatButton>
<Button x:Uid="zoomResetButton" <Button x:Uid="zoomResetButton"
MinWidth="44" MinHeight="40"
MinHeight="44" Style="{ThemeResource ThemedGraphButtonStyle}"
Margin="0,0,0,0" contract7Present:CornerRadius="{ThemeResource BottomButtonCornerRadius}"
Style="{ThemeResource GraphButtonStyle}"
AutomationProperties.AutomationId="zoomResetButton" AutomationProperties.AutomationId="zoomResetButton"
Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}" Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}">
RequestedTheme="Light"> <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
<Grid> FontSize="14"
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE895;"/>
FontSize="26"
FontWeight="ExtraLight"
Glyph="&#xEA3A;"/>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE895;"/>
</Grid>
</Button> </Button>
</StackPanel> </StackPanel>
</Border>
<Border x:Name="TraceValuePopup" <Border x:Name="TraceValuePopup"
Padding="{ThemeResource ToolTipBorderThemePadding}" Padding="{ThemeResource ToolTipBorderThemePadding}"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Top" VerticalAlignment="Top"
Background="{ThemeResource ToolTipBackground}" Background="{ThemeResource ToolTipBackground}"
BorderBrush="{ThemeResource ToolTipBorderBrush}" BorderBrush="{ThemeResource ToolTipBorderBrush}"
BorderThickness="{ThemeResource ToolTipBorderThemeThickness}" BorderThickness="{ThemeResource ToolTipBorderThemeThickness}"
contract7Present:BackgroundSizing="OuterBorderEdge" contract7Present:BackgroundSizing="OuterBorderEdge"
IsHitTestVisible="False" IsHitTestVisible="False"
SizeChanged="TraceValuePopup_SizeChanged" SizeChanged="TraceValuePopup_SizeChanged"
Visibility="Collapsed"> Visibility="Collapsed">
<Border.RenderTransform> <Border.RenderTransform>
<TranslateTransform x:Name="TraceValuePopupTransform"/> <TranslateTransform x:Name="TraceValuePopupTransform"/>
</Border.RenderTransform> </Border.RenderTransform>
<TextBlock x:Name="TraceValue" <TextBlock x:Name="TraceValue"
Foreground="{ThemeResource ToolTipForeground}" Foreground="{ThemeResource ToolTipForeground}"
AutomationProperties.LiveSetting="Polite" AutomationProperties.LiveSetting="Polite"
Text="x=0,y=0"/> Text="x=0,y=0"/>
</Border> </Border>
</Grid>
</Grid> </Grid>
<!-- Right portion of the screen --> <!-- Right portion of the screen -->

83
src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
View File

@ -51,20 +51,12 @@ constexpr auto sc_ViewModelPropertyName = L"ViewModel";
DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState); DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState);
GraphingCalculator::GraphingCalculator() GraphingCalculator::GraphingCalculator()
: ActiveTracingOn(false)
{ {
Equation::RegisterDependencyProperties(); Equation::RegisterDependencyProperties();
Grapher::RegisterDependencyProperties(); Grapher::RegisterDependencyProperties();
InitializeComponent(); InitializeComponent();
auto toolTip = ref new ToolTip();
auto resProvider = AppResourceProvider::GetInstance();
auto tracingMessage = ActiveTracingOn ? resProvider->GetResourceString(L"disableTracingButtonToolTip") : resProvider->GetResourceString(L"enableTracingButtonToolTip");
toolTip->Content = tracingMessage;
ToolTipService::SetToolTip(ActiveTracing, toolTip);
AutomationProperties::SetName(ActiveTracing, tracingMessage);
DataTransferManager ^ dataTransferManager = DataTransferManager::GetForCurrentView(); DataTransferManager ^ dataTransferManager = DataTransferManager::GetForCurrentView();
// Register the current control as a share source. // Register the current control as a share source.
@ -383,23 +375,39 @@ void GraphingCalculator::OnZoomResetCommand(Object ^ /* parameter */)
GraphingControl->ResetGrid(); GraphingControl->ResetGrid();
} }
void GraphingCalculator::OnActiveTracingClick(Object ^ sender, RoutedEventArgs ^ e) String ^ GraphingCalculator::GetTracingLegend(Platform::IBox<bool> ^ isTracing)
{ {
// The focus change to this button will have turned off the tracing if it was on
ActiveTracingOn = !ActiveTracingOn;
GraphingControl->ActiveTracing = ActiveTracingOn;
auto toolTip = ref new ToolTip();
auto resProvider = AppResourceProvider::GetInstance(); auto resProvider = AppResourceProvider::GetInstance();
auto tracingMessage = ActiveTracingOn ? resProvider->GetResourceString(L"disableTracingButtonToolTip") : resProvider->GetResourceString(L"enableTracingButtonToolTip"); return isTracing != nullptr && isTracing->Value ? resProvider->GetResourceString(L"disableTracingButtonToolTip")
toolTip->Content = tracingMessage; : resProvider->GetResourceString(L"enableTracingButtonToolTip");
ToolTipService::SetToolTip(ActiveTracing, toolTip);
AutomationProperties::SetName(ActiveTracing, tracingMessage);
} }
void GraphingCalculator::GraphingControl_LostFocus(Object ^ sender, RoutedEventArgs ^ e) void GraphingCalculator::GraphingControl_LostFocus(Object ^ sender, RoutedEventArgs ^ e)
{ {
// If the graph is losing focus while we are in active tracing we need to turn it off so we don't try to eat keys in other controls. // If the graph is losing focus while we are in active tracing we need to turn it off so we don't try to eat keys in other controls.
if (GraphingControl->ActiveTracing)
{
if (ActiveTracing->Equals(FocusManager::GetFocusedElement()) && ActiveTracing->IsPressed)
{
m_ActiveTracingPointerCaptureLost = ActiveTracing->PointerCaptureLost +=
ref new Windows::UI::Xaml::Input::PointerEventHandler(this, &CalculatorApp::GraphingCalculator::ActiveTracing_PointerCaptureLost);
}
else
{
GraphingControl->ActiveTracing = false;
OnShowTracePopupChanged(false);
}
}
}
void CalculatorApp::GraphingCalculator::ActiveTracing_PointerCaptureLost(Platform::Object ^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs ^ e)
{
if (m_ActiveTracingPointerCaptureLost.Value != 0)
{
ActiveTracing->PointerCaptureLost -= m_ActiveTracingPointerCaptureLost;
m_ActiveTracingPointerCaptureLost.Value = 0;
}
if (GraphingControl->ActiveTracing) if (GraphingControl->ActiveTracing)
{ {
GraphingControl->ActiveTracing = false; GraphingControl->ActiveTracing = false;
@ -487,11 +495,46 @@ void GraphingCalculator::PositionGraphPopup()
} }
} }
void GraphingCalculator::TraceValuePopup_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e) void GraphingCalculator::TraceValuePopup_SizeChanged(Object ^ sender, SizeChangedEventArgs ^ e)
{ {
PositionGraphPopup(); PositionGraphPopup();
} }
::Visibility GraphingCalculator::ManageEditVariablesButtonVisibility(unsigned int numberOfVariables) ::Visibility GraphingCalculator::ManageEditVariablesButtonVisibility(unsigned int numberOfVariables)
{ {
return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible; return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible;
} }
void CalculatorApp::GraphingCalculator::ActiveTracing_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e)
{
m_activeTracingKeyUpToken = Window::Current->CoreWindow->KeyUp +=
ref new Windows::Foundation::TypedEventHandler<Windows::UI::Core::CoreWindow ^, Windows::UI::Core::KeyEventArgs ^>(
this, &CalculatorApp::GraphingCalculator::ActiveTracing_KeyUp);
KeyboardShortcutManager::IgnoreEscape(false);
}
void CalculatorApp::GraphingCalculator::ActiveTracing_Unchecked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e)
{
if (m_ActiveTracingPointerCaptureLost.Value != 0)
{
ActiveTracing->PointerCaptureLost -= m_ActiveTracingPointerCaptureLost;
m_ActiveTracingPointerCaptureLost.Value = 0;
}
if (m_activeTracingKeyUpToken.Value != 0)
{
Window::Current->CoreWindow->KeyUp -= m_activeTracingKeyUpToken;
m_activeTracingKeyUpToken.Value = 0;
}
KeyboardShortcutManager::HonorEscape();
}
void CalculatorApp::GraphingCalculator::ActiveTracing_KeyUp(Windows::UI::Core::CoreWindow ^ sender, Windows::UI::Core::KeyEventArgs ^ args)
{
if (args->VirtualKey == VirtualKey::Escape)
{
GraphingControl->ActiveTracing = false;
args->Handled = true;
}
}

19
src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
View File

@ -36,6 +36,7 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
static Windows::UI::Xaml::Visibility ShouldDisplayPanel(bool isSmallState, bool isEquationModeActivated, bool isGraphPanel); static Windows::UI::Xaml::Visibility ShouldDisplayPanel(bool isSmallState, bool isEquationModeActivated, bool isGraphPanel);
static Platform::String ^ GetInfoForSwitchModeToggleButton(bool isChecked); static Platform::String ^ GetInfoForSwitchModeToggleButton(bool isChecked);
static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables); static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables);
static Platform::String ^ GetTracingLegend(Platform::IBox<bool> ^ isTracing);
private: private:
void GraphingCalculator_DataContextChanged(Windows::UI::Xaml::FrameworkElement ^ sender, Windows::UI::Xaml::DataContextChangedEventArgs ^ args); void GraphingCalculator_DataContextChanged(Windows::UI::Xaml::FrameworkElement ^ sender, Windows::UI::Xaml::DataContextChangedEventArgs ^ args);
@ -54,31 +55,35 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
double validateDouble(Platform::String ^ value, double defaultValue); double validateDouble(Platform::String ^ value, double defaultValue);
CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
void OnShareClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void OnShareClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void OnShowTracePopupChanged(bool newValue); void OnShowTracePopupChanged(bool newValue);
void OnTracePointChanged(Windows::Foundation::Point newPoint); void OnTracePointChanged(Windows::Foundation::Point newPoint);
private: private:
Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
Windows::Foundation::EventRegistrationToken m_vectorChangedToken;
Windows::Foundation::EventRegistrationToken m_variableUpdatedToken;
void OnDataRequested( void OnDataRequested(
Windows::ApplicationModel::DataTransfer::DataTransferManager ^ sender, Windows::ApplicationModel::DataTransfer::DataTransferManager ^ sender,
Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs ^ e); Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs ^ e);
void TextBoxGotFocus(Windows::UI::Xaml::Controls::TextBox ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void TextBoxGotFocus(Windows::UI::Xaml::Controls::TextBox ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void OnActiveTracingClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void GraphingControl_LostFocus(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void GraphingControl_LostFocus(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void GraphingControl_LosingFocus(Windows::UI::Xaml::UIElement ^ sender, Windows::UI::Xaml::Input::LosingFocusEventArgs ^ args); void GraphingControl_LosingFocus(Windows::UI::Xaml::UIElement ^ sender, Windows::UI::Xaml::Input::LosingFocusEventArgs ^ args);
void GraphingControl_VariablesUpdated(Platform::Object ^ sender, Object ^ args); void GraphingControl_VariablesUpdated(Platform::Object ^ sender, Object ^ args);
void OnEquationKeyGraphFeaturesRequested(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void OnEquationKeyGraphFeaturesRequested(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void OnKeyGraphFeaturesClosed(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void OnKeyGraphFeaturesClosed(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
bool ActiveTracingOn;
void SwitchModeToggleButton_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e); void SwitchModeToggleButton_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void TraceValuePopup_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e); void TraceValuePopup_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
void PositionGraphPopup(); void PositionGraphPopup();
void ActiveTracing_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void ActiveTracing_Unchecked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void ActiveTracing_KeyUp(Windows::UI::Core::CoreWindow ^ sender, Windows::UI::Core::KeyEventArgs ^ args);
void ActiveTracing_PointerCaptureLost(Platform::Object ^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs ^ e);
private:
Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
Windows::Foundation::EventRegistrationToken m_vectorChangedToken;
Windows::Foundation::EventRegistrationToken m_variableUpdatedToken;
Windows::Foundation::EventRegistrationToken m_activeTracingKeyUpToken;
Windows::Foundation::EventRegistrationToken m_ActiveTracingPointerCaptureLost;
CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
}; };
} }

14
src/GraphControl/Control/Grapher.h
View File

@ -18,11 +18,12 @@ public
public public
delegate void TracingValueChangedEventHandler(Windows::Foundation::Point value); delegate void TracingValueChangedEventHandler(Windows::Foundation::Point value);
[Windows::UI::Xaml::Markup::ContentPropertyAttribute(Name = L"Equations")] public ref class Grapher sealed : public Windows::UI::Xaml::Controls::Control [Windows::UI::Xaml::Markup::ContentPropertyAttribute(Name = L"Equations")] public ref class Grapher sealed : public Windows::UI::Xaml::Controls::Control, public Windows::UI::Xaml::Data::INotifyPropertyChanged
{ {
public: public:
event TracingValueChangedEventHandler ^ TracingValueChangedEvent; event TracingValueChangedEventHandler ^ TracingValueChangedEvent;
event TracingChangedEventHandler ^ TracingChangedEvent; event TracingChangedEventHandler ^ TracingChangedEvent;
virtual event Windows::UI::Xaml::Data::PropertyChangedEventHandler ^ PropertyChanged;
public: public:
Grapher(); Grapher();
@ -93,17 +94,22 @@ public
#pragma endregion #pragma endregion
// Pass active tracing turned on or off down to the renderer // Pass active tracing turned on or off down to the renderer
property bool ActiveTracing property bool ActiveTracing
{ {
bool get() bool get()
{ {
return m_renderMain->ActiveTracing; return m_renderMain != nullptr && m_renderMain->ActiveTracing;
} }
void set(bool value) void set(bool value)
{ {
m_renderMain->ActiveTracing = value; if (m_renderMain != nullptr && m_renderMain->ActiveTracing != value)
UpdateTracingChanged(); {
m_renderMain->ActiveTracing = value;
UpdateTracingChanged();
PropertyChanged(this, ref new Windows::UI::Xaml::Data::PropertyChangedEventArgs(L"ActiveTracing"));
}
} }
} }