Adds zoom buttons to graph controls (#637)

This commit is contained in:
Wei (Waley) Zhang 2019-08-16 16:11:43 -07:00 committed by Pepe Rivera
parent c1efa3d3e3
commit 1c9755d38a
6 changed files with 223 additions and 2 deletions

View File

@ -3435,6 +3435,42 @@
<value>^</value>
<comment>{Locked}This is the character that should trigger this button. Note that it is a character and not a key, so it does not come from the Windows::System::VirtualKey enum.</comment>
</data>
<data name="zoomResetButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
<value>Home</value>
<comment>{Locked}This is the shortcut for the zoom reset button.</comment>
</data>
<data name="zoomResetButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Reset View</value>
<comment>This is the tool tip automation name for the Calculator zoom reset button.</comment>
</data>
<data name="zoomResetButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Reset View</value>
<comment>Screen reader prompt for the reset zoom button.</comment>
</data>
<data name="zoomInButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
<value>Add</value>
<comment>{Locked}This is the shortcut for the zoom in button.</comment>
</data>
<data name="zoomInButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Zoom In</value>
<comment>This is the tool tip automation name for the Calculator zoom in button.</comment>
</data>
<data name="zoomInButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Zoom In</value>
<comment>Screen reader prompt for the zoom in button.</comment>
</data>
<data name="zoomOutButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
<value>Subtract</value>
<comment>{Locked}This is the shortcut for the zoom out button.</comment>
</data>
<data name="zoomOutButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Zoom Out</value>
<comment>This is the tool tip automation name for the Calculator zoom out button.</comment>
</data>
<data name="zoomOutButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Zoom Out</value>
<comment>Screen reader prompt for the zoom out button.</comment>
</data>
<data name="EquationInputButtonPlaceholderText" xml:space="preserve">
<value>Add Equation</value>
<comment>Placeholder text for the equation input button</comment>

View File

@ -12,6 +12,22 @@
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="ZoomRepeatButtonStyle" TargetType="RepeatButton">
<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"/>
<Setter Property="Delay" Value="500"/>
<Setter Property="Interval" Value="40"/>
</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:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
</UserControl.Resources>
@ -30,8 +46,7 @@
<Grid x:Name="LeftGrid"
Grid.Row="1"
Grid.Column="0">
<graphControl:Grapher Name="GraphingControl" Grid.Row="0"
<graphControl:Grapher Name="GraphingControl"
Margin="4,7,4,4"
EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}"
ForceProportionalAxes="True"
@ -215,6 +230,130 @@
</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>
<!-- Right portion of the screen -->

View File

@ -242,3 +242,18 @@ void GraphingCalculator::TextBoxGotFocus(TextBox^ sender, RoutedEventArgs^ e)
{
sender->SelectAll();
}
void GraphingCalculator::OnZoomInCommand(Object ^ /* parameter */)
{
GraphingControl->ZoomFromCenter(zoomInScale);
}
void GraphingCalculator::OnZoomOutCommand(Object ^ /* parameter */)
{
GraphingControl->ZoomFromCenter(zoomOutScale);
}
void GraphingCalculator::OnZoomResetCommand(Object ^ /* parameter */)
{
GraphingControl->ResetGrid();
}

View File

@ -6,12 +6,18 @@
namespace CalculatorApp
{
constexpr double zoomInScale = 1 / 1.0625;
constexpr double zoomOutScale = 1.0625;
public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INotifyPropertyChanged
{
public:
GraphingCalculator();
OBSERVABLE_OBJECT();
COMMAND_FOR_METHOD(ZoomOutButtonPressed, GraphingCalculator::OnZoomOutCommand);
COMMAND_FOR_METHOD(ZoomInButtonPressed, GraphingCalculator::OnZoomInCommand);
COMMAND_FOR_METHOD(ZoomResetButtonPressed, GraphingCalculator::OnZoomResetCommand);
property CalculatorApp::ViewModel::GraphingCalculatorViewModel^ ViewModel
{
@ -29,6 +35,10 @@ namespace CalculatorApp
void TextBoxKeyDown(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);
void SubmitTextbox(Windows::UI::Xaml::Controls::TextBox^ textbox);
void OnZoomInCommand(Object ^ parameter);
void OnZoomOutCommand(Object ^ parameter);
void OnZoomResetCommand(Object ^ parameter);
double validateDouble(Platform::String^ value, double defaultValue);
CalculatorApp::ViewModel::GraphingCalculatorViewModel^ m_viewModel;

View File

@ -92,6 +92,11 @@ namespace GraphControl
}
}
void Grapher::ZoomFromCenter(double scale)
{
ScaleRange(0, 0, scale);
}
void Grapher::ScaleRange(double centerX, double centerY, double scale)
{
if (m_graph != nullptr && m_renderMain != nullptr)
@ -106,6 +111,20 @@ namespace GraphControl
}
}
void Grapher::ResetGrid()
{
if (m_graph != nullptr && m_renderMain != nullptr)
{
if (auto renderer = m_graph->GetRenderer())
{
if (SUCCEEDED(renderer->ResetRange()))
{
m_renderMain->RunRenderPass();
}
}
}
}
void Grapher::OnApplyTemplate()
{
auto swapChainPanel = dynamic_cast<SwapChainPanel^>(GetTemplateChild(StringReference(s_templateKey_SwapChainPanel)));

View File

@ -127,6 +127,8 @@ namespace GraphControl
event Windows::Foundation::EventHandler<Windows::Foundation::Collections::IMap<Platform::String^, double>^>^ VariablesUpdated;
void SetVariable(Platform::String^ variableName, double newValue);
void ZoomFromCenter(double scale);
void ResetGrid();
protected:
#pragma region Control Overrides