Delay loading some unused UI elements (#1042)

* unload

* pr fixes

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -393,8 +393,7 @@
                                               MinHeight="44"
                                               VerticalAlignment="Stretch">
                                     <ToggleButton.Content>
-                                        <StackPanel x:Name="FunctionNumberLabel"
+                                        <StackPanel HorizontalAlignment="Center"
-                                                    HorizontalAlignment="Center"
                                                     VerticalAlignment="Center"
                                                     Background="Transparent"
                                                     FlowDirection="LeftToRight"
@@ -803,9 +802,7 @@
                                                       MathEquation="{x:Bind Expression, Mode=TwoWay}"
                                                       RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
                                 <controls:EquationTextBox.ColorChooserFlyout>
-                                    <Flyout x:Name="ColorChooserFlyout"
+                                    <Flyout x:Uid="ColorChooserFlyout" Placement="Bottom">
-                                            x:Uid="ColorChooserFlyout"
-                                            Placement="Bottom">
                                         <local:EquationStylePanelControl SelectedColor="{x:Bind LineColor, Mode=TwoWay}"/>
                                     </Flyout>
                                 </controls:EquationTextBox.ColorChooserFlyout>
@@ -813,12 +810,11 @@
                         </DataTemplate>
                     </mux:ItemsRepeater.ItemTemplate>
                 </mux:ItemsRepeater>
-                <StackPanel Visibility="{x:Bind local:EquationInputArea.ManageEditVariablesButtonVisibility(Variables.Size), Mode=OneWay}">
+                <StackPanel x:Name="VariableStackPanel" x:Load="{x:Bind local:EquationInputArea.ManageEditVariablesButtonLoaded(Variables.Size), Mode=OneWay}">
                     <Rectangle Height="1"
                                Margin="12"
                                Fill="#33000000"/>
-                    <mux:ItemsRepeater x:Name="VariableListView"
+                    <mux:ItemsRepeater ItemTemplate="{StaticResource VariableDataTemplate}"
-                                       ItemTemplate="{StaticResource VariableDataTemplate}"
                                        ItemsSource="{x:Bind Variables, Mode=OneWay}"
                                        TabFocusNavigation="Local">
                         <mux:ItemsRepeater.Transitions>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp

@@ -386,6 +386,11 @@ double EquationInputArea::validateDouble(String ^ value, double defaultValue)
     return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible;
 }
 
+bool EquationInputArea::ManageEditVariablesButtonLoaded(unsigned int numberOfVariables)
+{
+    return numberOfVariables != 0;
+}
+
 String ^ EquationInputArea::GetChevronIcon(bool isCollapsed)
 {
     return isCollapsed ? L"\uE70E" : L"\uE70D";

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h

@@ -29,6 +29,7 @@ namespace CalculatorApp
 
     public:
         static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables);
+        static bool EquationInputArea::ManageEditVariablesButtonLoaded(unsigned int numberOfVariables);
 
         static Platform::String ^ GetChevronIcon(bool isCollapsed);
 

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -378,9 +378,9 @@
         </ResourceDictionary>
     </UserControl.Resources>
 
-    <Grid x:Name="RootGrid">
+    <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition x:Name="RowHamburger" Height="{StaticResource HamburgerHeightGridLength}"/>
+            <RowDefinition Height="{StaticResource HamburgerHeightGridLength}"/>
             <RowDefinition/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
@@ -428,7 +428,6 @@
         <Grid x:Name="LeftGrid"
               Grid.Row="1"
               Padding="0,4,0,0"
-              SizeChanged="LeftGrid_SizeChanged"
               Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsOn, x:True), Mode=OneWay}">
             <Grid.Resources>
                 <ResourceDictionary>
@@ -501,8 +500,7 @@
                                   Glyph="&#xE3B3;"/>
                     </ToggleButton>
 
-                    <Button x:Name="Share"
+                    <Button x:Uid="shareButton"
-                            x:Uid="shareButton"
                             MinWidth="40"
                             Style="{ThemeResource ThemedGraphButtonStyle}"
                             Click="OnShareClick">
@@ -523,7 +521,9 @@
                     </Button>
                 </StackPanel>
             </Border>
-            <Canvas>
+            <Canvas x:Name="TraceCanvas"
+                    SizeChanged="Canvas_SizeChanged"
+                    x:Load="False">
                 <Grid x:Name="TracePointer" Visibility="Collapsed">
                     <Border x:Name="CursorShadow"/>
                     <Path x:Name="CursorPath"

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp

@@ -84,13 +84,6 @@ GraphingCalculator::GraphingCalculator()
     virtualKey->Key = (VirtualKey)187; // OemAdd key
     virtualKey->Modifiers = VirtualKeyModifiers::Control;
     ZoomInButton->KeyboardAccelerators->Append(virtualKey);
-
-    // add shadow to the trace pointer
-    AddTracePointerShadow();
-    // hide the shadow in high contrast mode
-    CursorShadow->Visibility = m_accessibilitySettings->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
-    m_accessibilitySettings->HighContrastChanged +=
-        ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
 }
 
 void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
@@ -193,9 +186,12 @@ void GraphingCalculator::OnTracePointChanged(Point newPoint)
 
 void CalculatorApp::GraphingCalculator::OnPointerPointChanged(Windows::Foundation::Point newPoint)
 {
-    // Move the pointer glyph to where it is supposed to be.
+    if (TracePointer != nullptr)
-    Canvas::SetLeft(TracePointer, newPoint.X);
+    {
-    Canvas::SetTop(TracePointer, newPoint.Y);
+        // Move the pointer glyph to where it is supposed to be.
+        Canvas::SetLeft(TracePointer, newPoint.X);
+        Canvas::SetTop(TracePointer, newPoint.Y);
+    }
 }
 
 GraphingCalculatorViewModel ^ GraphingCalculator::ViewModel::get()
@@ -494,6 +490,25 @@ void GraphingCalculator::TraceValuePopup_SizeChanged(Object ^ sender, SizeChange
 
 void CalculatorApp::GraphingCalculator::ActiveTracing_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e)
 {
+    if (!m_cursorShadowInitialized)
+    {
+        this->FindName(L"TraceCanvas");
+
+        // add shadow to the trace pointer
+        AddTracePointerShadow();
+
+        // hide the shadow in high contrast mode
+        CursorShadow->Visibility = m_accessibilitySettings->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
+
+        m_accessibilitySettings->HighContrastChanged +=
+            ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
+
+        Canvas::SetLeft(TracePointer, TraceCanvas->ActualWidth / 2 + 40);
+        Canvas::SetTop(TracePointer, TraceCanvas->ActualHeight / 2 - 40);
+
+        m_cursorShadowInitialized = true;
+    }
+
     FocusManager::TryFocusAsync(GraphingControl, ::FocusState::Programmatic);
 
     m_activeTracingKeyUpToken = Window::Current->CoreWindow->KeyUp +=
@@ -569,11 +584,14 @@ void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBas
     args->Cancel = graphingSetting->CanBeClose();
 }
 
-void GraphingCalculator::LeftGrid_SizeChanged(Object ^ /*sender*/, SizeChangedEventArgs ^ e)
+void GraphingCalculator::Canvas_SizeChanged(Object ^ /*sender*/, SizeChangedEventArgs ^ e)
 {
     // Initialize the pointer to the correct location to match initial value in GraphControl\DirectX\RenderMain.cpp
-    Canvas::SetLeft(TracePointer, e->NewSize.Width / 2 + 40);
+    if (TracePointer != nullptr)
-    Canvas::SetTop(TracePointer, e->NewSize.Height / 2 - 40);
+    {
+        Canvas::SetLeft(TracePointer, e->NewSize.Width / 2 + 40);
+        Canvas::SetTop(TracePointer, e->NewSize.Height / 2 - 40);
+    }
 }
 
 void GraphingCalculator::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ /*args*/)

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h

@@ -86,9 +86,9 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         Windows::Foundation::EventRegistrationToken m_ActiveTracingPointerCaptureLost;
         CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
         Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
-        void
+        bool m_cursorShadowInitialized;
-            OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
+        void OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
-        void LeftGrid_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
+        void Canvas_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
         void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);
         void OnEquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
     };