Add variable editing (#581)

This commit is contained in:
Pepe Rivera
2019-07-24 11:23:33 -07:00
committed by GitHub
parent a418777f02
commit 46f11c7c72
12 changed files with 519 additions and 6 deletions

View File

@@ -1725,6 +1725,16 @@
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="12,4,4,4"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="AcceptsReturn" Value="False"/>
<Setter Property="InputScope" Value="Number"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

View File

@@ -3439,4 +3439,20 @@
<value>Add Equation</value>
<comment>Placeholder text for the equation input button</comment>
</data>
<data name="VaiablesHeader.Text" xml:space="preserve">
<value>Variables</value>
<comment>Header text for variables area</comment>
</data>
<data name="StepTextBlock.Text" xml:space="preserve">
<value>Step</value>
<comment>Label text for the step text box</comment>
</data>
<data name="MinTextBlock.Text" xml:space="preserve">
<value>Min</value>
<comment>Label text for the min text box</comment>
</data>
<data name="MaxTextBlock.Text" xml:space="preserve">
<value>Max</value>
<comment>Label text for the max text box</comment>
</data>
</root>

View File

@@ -2,6 +2,7 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CalculatorApp.Controls"
xmlns:converters="using:CalculatorApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:graphControl="using:GraphControl"
xmlns:local="using:CalculatorApp"
@@ -10,6 +11,11 @@
DataContextChanged="GraphingCalculator_DataContextChanged"
mc:Ignorable="d">
<UserControl.Resources>
<converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
<converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
</UserControl.Resources>
<Grid x:Name="RootGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="RowHamburger" Height="{StaticResource HamburgerHeightGridLength}"/>
@@ -25,11 +31,12 @@
Grid.Row="1"
Grid.Column="0">
<graphControl:Grapher Grid.Row="0"
<graphControl:Grapher Name="GraphingControl"
Margin="4,7,4,4"
EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}"
ForceProportionalAxes="True"
UseSystemFocusVisuals="True">
UseSystemFocusVisuals="True"
VariablesUpdated="GraphVariablesUpdated">
<graphControl:Grapher.Background>
<SolidColorBrush Color="White"/>
</graphControl:Grapher.Background>
@@ -39,6 +46,175 @@
</DataTemplate>
</graphControl:Grapher.EquationTemplate>
</graphControl:Grapher>
<!-- 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>
<!-- Right portion of the screen -->
@@ -50,12 +226,13 @@
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<local:EquationInputArea Grid.Row="0" Equations="{x:Bind ViewModel.Equations}"/>
<Grid x:Name="ButtonContainerGrid"
Grid.Row="1"
Grid.Row="2"
Margin="3,0,3,3"
UseLayoutRounding="False">
<Grid.RowDefinitions>

View File

@@ -11,13 +11,16 @@ using namespace CalculatorApp::ViewModel;
using namespace concurrency;
using namespace GraphControl;
using namespace Platform;
using namespace std;
using namespace std::chrono;
using namespace Utils;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Storage::Streams;
using namespace Windows::System;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Media::Imaging;
@@ -34,6 +37,8 @@ GraphingCalculator::GraphingCalculator()
void GraphingCalculator::GraphingCalculator_DataContextChanged(FrameworkElement^ sender, DataContextChangedEventArgs^ args)
{
ViewModel = dynamic_cast<GraphingCalculatorViewModel^>(args->NewValue);
ViewModel->VariableUpdated += ref new EventHandler<VariableChangedEventArgs>(this, &CalculatorApp::GraphingCalculator::OnVariableChanged);
}
GraphingCalculatorViewModel^ GraphingCalculator::ViewModel::get()
@@ -49,3 +54,67 @@ void GraphingCalculator::ViewModel::set(GraphingCalculatorViewModel^ vm)
RaisePropertyChanged(StringReference(sc_ViewModelPropertyName));
}
}
void GraphingCalculator::GraphVariablesUpdated(Object^, Object^)
{
m_viewModel->UpdateVariables(GraphingControl->Variables);
}
void GraphingCalculator::OnVariableChanged(Platform::Object^ sender, VariableChangedEventArgs args)
{
GraphingControl->SetVariable(args.variableName, args.newValue);
}
void GraphingCalculator::SubmitTextbox(TextBox^ sender)
{
auto variableViewModel = static_cast<VariableViewModel^>(sender->DataContext);
if (sender->Name == "ValueTextBox")
{
variableViewModel->SetValue(validateDouble(sender->Text, variableViewModel->Value));
}
else if (sender->Name == "MinTextBox")
{
variableViewModel->Min = validateDouble(sender->Text, variableViewModel->Min);
}
else if (sender->Name == "MaxTextBox")
{
variableViewModel->Step = validateDouble(sender->Text, variableViewModel->Step);
}
else if (sender->Name == "StepTextBox")
{
variableViewModel->Max = validateDouble(sender->Text, variableViewModel->Max);
}
}
void GraphingCalculator::TextBoxLosingFocus(TextBox^ sender, LosingFocusEventArgs^)
{
SubmitTextbox(sender);
}
void GraphingCalculator::TextBoxKeyDown(TextBox^ sender, KeyRoutedEventArgs^ e)
{
if (e->Key == ::VirtualKey::Enter)
{
SubmitTextbox(sender);
}
}
double GraphingCalculator::validateDouble(String^ value, double defaultValue)
{
try
{
return stod(value->Data());
}
catch (...)
{
return defaultValue;
}
}
void GraphingCalculator::TextBoxGotFocus(TextBox^ sender, RoutedEventArgs^ e)
{
sender->SelectAll();
}

View File

@@ -1,7 +1,7 @@
#pragma once
#include "Views\GraphingCalculator\GraphingCalculator.g.h"
#include "CalcViewModel/GraphingCalculator/GraphingCalculatorViewModel.h"
#include "CalcViewModel\GraphingCalculator\GraphingCalculatorViewModel.h"
#include "Views\NumberPad.xaml.h"
namespace CalculatorApp
@@ -22,7 +22,17 @@ namespace CalculatorApp
private:
void GraphingCalculator_DataContextChanged(Windows::UI::Xaml::FrameworkElement^ sender, Windows::UI::Xaml::DataContextChangedEventArgs^ args);
private:
void GraphVariablesUpdated(Platform::Object^ sender, Object^ args);
void OnVariableChanged(Platform::Object^ sender, CalculatorApp::ViewModel::VariableChangedEventArgs args);
void TextBoxLosingFocus(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::LosingFocusEventArgs^ args);
void TextBoxKeyDown(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);
void SubmitTextbox(Windows::UI::Xaml::Controls::TextBox^ textbox);
double validateDouble(Platform::String^ value, double defaultValue);
CalculatorApp::ViewModel::GraphingCalculatorViewModel^ m_viewModel;
void TextBoxGotFocus(Windows::UI::Xaml::Controls::TextBox^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
};
}