Optimize and simplify CalculationResult to be able to update the FontSize and the DisplayMargin without fully updating the Style. (#217)

- Merge the 3 CalculationResultStyle(S|M|L) in App.xaml
- Only modify CalculationResult::*FontSize in Calculator.xaml instead of fully updating the style of the control.
- Create a new property MaxFontSize in order to be able to update it without being forced to fully update the Style (because m_startingFontSize was set in OnApplyTemplate)
- Modify how DisplayMargin is managed to prevent the textblock Margin to shift when we update its value (without fully updating the Style).
This commit is contained in:
Rudy Huyn
2019-04-05 13:04:39 -07:00
committed by Daniel Belcher
parent e7eace57f8
commit af41a183a7
7 changed files with 60 additions and 308 deletions

View File

@@ -255,48 +255,17 @@
</Style>
<!-- Calculation Result Styles -->
<Style x:Key="ResultsStyleL"
x:Name="ResultsStyleL"
BasedOn="{StaticResource CalculationResultStyleL}"
<Style x:Key="ResultsStyle"
BasedOn="{StaticResource CalculationResultStyle}"
TargetType="controls:CalculationResult">
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontSize" Value="{StaticResource CalcResultFontSizeL}"/>
<Setter Property="MinFontSize" Value="12"/>
<Setter Property="IsActive" Value="True"/>
<Setter Property="DisplayMargin" Value="0,0,0,0"/>
<Setter Property="MaxExpressionHistoryCharacters" Value="51"/>
</Style>
<Style x:Key="ResultsStyleM"
x:Name="ResultsStyleM"
BasedOn="{StaticResource CalculationResultStyleM}"
TargetType="controls:CalculationResult">
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontSize" Value="{StaticResource CalcResultFontSizeM}"/>
<Setter Property="MinFontSize" Value="12"/>
<Setter Property="IsActive" Value="True"/>
<Setter Property="DisplayMargin" Value="0,0,0,0"/>
<Setter Property="MaxExpressionHistoryCharacters" Value="30"/>
</Style>
<Style x:Key="ResultsStyleS"
x:Name="ResultsStyleS"
BasedOn="{StaticResource CalculationResultStyleS}"
TargetType="controls:CalculationResult">
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontSize" Value="{StaticResource CalcResultFontSizeS}"/>
<Setter Property="MinFontSize" Value="12"/>
<Setter Property="IsActive" Value="True"/>
<Setter Property="DisplayMargin" Value="0,0,0,0"/>
<Setter Property="MaxExpressionHistoryCharacters" Value="30"/>
</Style>
<!-- Button Styles -->
<Style x:Key="ScrollButtonStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0,0,0,0"/>
@@ -585,25 +554,34 @@
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="800"/>
</VisualState.StateTriggers>
<Storyboard Completed="OnResultsLayoutChanged"/>
<VisualState.Setters>
<Setter Target="Results.MaxFontSize" Value="72"/>
<Setter Target="Results.MaxExpressionHistoryCharacters" Value="51"/>
<Setter Target="RowResult.MinHeight" Value="108"/>
<Setter Target="RowResult.Height" Value="72*"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ResultsProgM">
<VisualState x:Name="ResultsM">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="640"/>
<AdaptiveTrigger x:Name="ResultsMVisualStateTrigger" MinWindowHeight="640"/>
</VisualState.StateTriggers>
<Storyboard Completed="OnResultsLayoutChanged"/>
</VisualState>
<VisualState x:Name="ResultsSciM">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="544"/>
</VisualState.StateTriggers>
<Storyboard Completed="OnResultsLayoutChanged"/>
<VisualState.Setters>
<Setter Target="Results.MaxFontSize" Value="46"/>
<Setter Target="Results.MaxExpressionHistoryCharacters" Value="30"/>
<Setter Target="RowResult.MinHeight" Value="72"/>
<Setter Target="RowResult.Height" Value="72*"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ResultsS">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="0"/>
</VisualState.StateTriggers>
<Storyboard Completed="OnResultsLayoutChanged"/>
<VisualState.Setters>
<Setter Target="Results.MaxFontSize" Value="26"/>
<Setter Target="Results.MaxExpressionHistoryCharacters" Value="30"/>
<Setter Target="RowResult.MinHeight" Value="42"/>
<Setter Target="RowResult.Height" Value="42*"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
@@ -630,7 +608,7 @@
x:Uid="CalculatorResults"
Grid.Row="2"
Margin="0,0,0,0"
Style="{ThemeResource ResultsStyleM}"
Style="{ThemeResource ResultsStyle}"
AutomationProperties.AutomationId="CalculatorResults"
AutomationProperties.HeadingLevel="Level1"
AutomationProperties.Name="{x:Bind Model.CalculationResultAutomationName, Mode=OneWay}"

View File

@@ -185,16 +185,19 @@ void Calculator::UpdateViewState()
{
state = L"Programmer";
Model->IsDecimalEnabled = false;
ResultsMVisualStateTrigger->MinWindowHeight = 640;
}
else if (IsScientific)
{
state = L"Scientific";
Model->IsDecimalEnabled = true;
ResultsMVisualStateTrigger->MinWindowHeight = 544;
}
else
{
state = L"Standard";
Model->IsDecimalEnabled = true;
ResultsMVisualStateTrigger->MinWindowHeight = 1;
}
CloseHistoryFlyout();
@@ -203,32 +206,6 @@ void Calculator::UpdateViewState()
VisualStateManager::GoToState(this, ref new String(state.c_str()), true/*useTransitions*/);
}
void Calculator::SetResultStyles()
{
CoreWindow^ window = CoreWindow::GetForCurrentThread();
if (window)
{
float curHeight = window->Bounds.Height;
if (curHeight >= 800)
{
Results->Style = ResultsStyleL;
RowResult->MinHeight = 108;
RowResult->Height = GridLength(72, GridUnitType::Star);
}
else if ((IsProgrammer && curHeight >= 640) || (IsScientific && curHeight >= 544) || IsStandard)
{
Results->Style = ResultsStyleM;
RowResult->MinHeight = 72;
RowResult->Height = GridLength(72, GridUnitType::Star);
}
else
{
Results->Style = ResultsStyleS;
RowResult->MinHeight = 42;
RowResult->Height = GridLength(42, GridUnitType::Star);
}
}
}
void Calculator::AnimateCalculator(bool resultAnimate)
{
@@ -273,7 +250,6 @@ void Calculator::OnContextCanceled(UIElement^ sender, RoutedEventArgs^ e)
void Calculator::OnLayoutStateChanged(_In_ Object^ sender, _In_ Object^ e)
{
UpdateViewState();
UpdatePanelViewState();
}
@@ -357,7 +333,6 @@ void Calculator::OnStoryboardCompleted(_In_ Object^ sender, _In_ Object^ e)
AnimateWithoutResult->Begin();
}
}
SetResultStyles();
}
void Calculator::EnsureScientific()
@@ -492,7 +467,7 @@ void Calculator::OnHistoryItemClicked(_In_ HistoryItemViewModel^ e)
Model->SetExpressionDisplay(e->GetTokens(), e->GetCommands());
Model->SetPrimaryDisplay(e->Result->Data(), false);
Model->IsFToEEnabled = false;
TraceLogger::GetInstance().LogHistoryItemLoadEnd(tokenSize);
CloseHistoryFlyout();
this->Focus(::FocusState::Programmatic);
@@ -658,7 +633,6 @@ void Calculator::EnableMemoryControls(bool enable)
void Calculator::EnableControls(bool enable)
{
OpsPanel->IsEnabled = enable;
EnableMemoryControls(enable);
}
@@ -724,11 +698,6 @@ void Calculator::DockPanelTapped(_In_ TappedRoutedEventArgs^ e)
m_IsLastFlyoutHistory = false;
}
void Calculator::OnResultsLayoutChanged(_In_ Object^ sender, _In_ Object^ e)
{
SetResultStyles();
}
void Calculator::UnregisterEventHandlers()
{
expressionText->UnregisterEventHandlers();

View File

@@ -1,4 +1,4 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
#pragma once
@@ -133,8 +133,6 @@ namespace CalculatorApp
void expressionContainer_LayoutUpdated(_In_ Platform::Object^ sender, _In_ Platform::Object^ e);
bool IsValidRegularExpression(std::wstring str);
void DockPanelTapped(_In_ Windows::UI::Xaml::Input::TappedRoutedEventArgs^ e);
void OnResultsLayoutChanged(_In_ Platform::Object^ sender, _In_ Platform::Object^ e);
void SetResultStyles();
void OnErrorLayoutCompleted(_In_ Platform::Object^ sender, _In_ Platform::Object^ e);
void OnHistoryAccessKeyInvoked(_In_ Windows::UI::Xaml::UIElement^ sender, _In_ Windows::UI::Xaml::Input::AccessKeyInvokedEventArgs^ args);
void OnMemoryAccessKeyInvoked(_In_ Windows::UI::Xaml::UIElement^ sender, _In_ Windows::UI::Xaml::Input::AccessKeyInvokedEventArgs^ args);

View File

@@ -1,4 +1,4 @@
<UserControl x:Class="CalculatorApp.UnitConverter"
<UserControl x:Class="CalculatorApp.UnitConverter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:automation="using:CalculatorApp.Common.Automation"
@@ -180,46 +180,30 @@
</Setter>
</Style>
<Style x:Key="ValueLargeStyle"
BasedOn="{StaticResource CalculationResultStyleL}"
<Style x:Key="ValueBaseStyle"
BasedOn="{StaticResource CalculationResultStyle}"
TargetType="controls:CalculationResult">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="FontSize" Value="46"/>
<Setter Property="MinFontSize" Value="{ThemeResource BodyFontSize}"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="MinFontSize" Value="{ThemeResource BodyFontSize}"/>
</Style>
<Style x:Key="ValueLargeStyle"
BasedOn="{StaticResource ValueBaseStyle}"
TargetType="controls:CalculationResult">
<Setter Property="MaxFontSize" Value="46"/>
<Setter Property="Margin" Value="-2,0,0,0"/>
<Setter Property="DisplayMargin" Value="0,0,0,12"/>
</Style>
<Style x:Key="ValueMediumStyle"
BasedOn="{StaticResource CalculationResultStyleM}"
BasedOn="{StaticResource ValueBaseStyle}"
TargetType="controls:CalculationResult">
<Setter Property="FontSize" Value="34"/>
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="MinFontSize" Value="{ThemeResource BodyFontSize}"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="MaxFontSize" Value="34"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="DisplayMargin" Value="0,0,0,4"/>
</Style>
<Style x:Key="ValueSmallStyle"
BasedOn="{StaticResource CalculationResultStyleS}"
TargetType="controls:CalculationResult">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="MinFontSize" Value="{ThemeResource BodyFontSize}"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="DisplayMargin" Value="0,0,0,4"/>
</Style>
<Style x:Key="CurrencySymbolBaseStyle" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="HorizontalAlignment" Value="Left"/>