Skip to content

Commit

Permalink
Adds zoom buttons to graph controls (microsoft#637)
Browse files Browse the repository at this point in the history
  • Loading branch information
@greedyAI @joseartrivera
greedyAI authored and joseartrivera committed Aug 16, 2019
1 parent c1efa3d commit 1c9755d
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 2 deletions.
36 changes: 36 additions & 0 deletions src/Calculator/Resources/en-US/Resources.resw
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
143 changes: 141 additions & 2 deletions src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand Down Expand Up @@ -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 -->
Expand Down
15 changes: 15 additions & 0 deletions src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
10 changes: 10 additions & 0 deletions src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand All @@ -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;
Expand Down
19 changes: 19 additions & 0 deletions src/GraphControl/Control/Grapher.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)));
Expand Down
2 changes: 2 additions & 0 deletions src/GraphControl/Control/Grapher.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 1c9755d

Please sign in to comment.