Fix regressions with NumberBox HeaderPresenter behavior

dev/NumberBox/InteractionTests/NumberBoxTests.cs

@@ -538,9 +538,15 @@ public void VerifyNumberBoxHeaderBehavior()
         {
             using (var setup = new TestSetupHelper("NumberBox Tests"))
             {
+                var headerBeforeApplyTemplate = FindElement.ByName<TextBlock>("HeaderBeforeApplyTemplateTest");
+                Verify.IsNotNull(headerBeforeApplyTemplate); 
+
+                var headerTemplateBeforeApplyTemplate = FindElement.ByName<TextBlock>("HeaderTemplatePropertyTest");
+                Verify.IsNotNull(headerBeforeApplyTemplate);
+
                 var toggleHeaderButton = FindElement.ByName<Button>("ToggleHeaderValueButton");
                 var header = FindElement.ByName<TextBlock>("NumberBoxHeaderClippingDemoHeader");
-
+                
                 Log.Comment("Check header is null");
                 Verify.IsNull(header);
 

dev/NumberBox/NumberBox.cpp

@@ -136,10 +136,14 @@ void NumberBox::OnApplyTemplate()
         }
     }
 
-    if (const auto headerPresenter = GetTemplateChildT<winrt::ContentPresenter>(c_numberBoxHeaderName, controlProtected))
+    if(const auto header = Header())
     {
-        // Set presenter to enable lightweight styling of the headers margin
-        m_headerPresenter.set(headerPresenter);
+        // We have the header specified, so lets render it!
+        UpdateHeaderPresenterState(header);
+    }
+    else if (const auto headerTemplate = HeaderTemplate())
+    {
+        UpdateHeaderPresenterState(nullptr);
     }
 
     m_textBox.set([this, controlProtected]() {
@@ -307,36 +311,7 @@ void NumberBox::UpdateValueToText()
 
 void NumberBox::OnHeaderPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
 {
-    // To enable lightweight styling, collapse header presenter if there is no header specified
-    if (const auto headerPresenter = m_headerPresenter.get())
-    {
-        if (const auto header = Header())
-        {
-            // Check if header is string or not
-            if (const auto headerAsString = Header().try_as<winrt::IReference<winrt::hstring>>())
-            {
-                if (headerAsString.Value().empty())
-                {
-                    // String is the empty string, hide presenter
-                    headerPresenter.Visibility(winrt::Visibility::Collapsed);
-                }
-                else
-                {
-                    // String is not an empty string
-                    headerPresenter.Visibility(winrt::Visibility::Visible);
-                }
-            }
-            else
-            {
-                // Header is not a string, so let's show header presenter
-                headerPresenter.Visibility(winrt::Visibility::Visible);
-            }
-        }
-        else
-        {
-            headerPresenter.Visibility(winrt::Visibility::Collapsed);
-        }
-    }
+    UpdateHeaderPresenterState(Header());
 }
 
 void NumberBox::OnValidationModePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
@@ -642,3 +617,50 @@ bool NumberBox::IsInBounds(double value)
     return (value >= Minimum() && value <= Maximum());
 }
 
+void NumberBox::UpdateHeaderPresenterState(winrt::IInspectable const& header)
+{
+    // Load header presenter as late as possible
+    if(m_headerPresenter == nullptr)
+    {
+        if (const auto headerPresenter = GetTemplateChildT<winrt::ContentPresenter>(c_numberBoxHeaderName, (winrt::IControlProtected)*this))
+        {
+            // Set presenter to enable lightweight styling of the headers margin
+            m_headerPresenter.set(headerPresenter);
+        }
+    }
+
+    // To enable lightweight styling, collapse header presenter if there is no header specified
+    if (const auto headerPresenter = m_headerPresenter.get())
+    {
+        if (header != nullptr)
+        {
+            // Check if header is string or not
+            if (const auto headerAsString = Header().try_as<winrt::IReference<winrt::hstring>>())
+            {
+                if (headerAsString.Value().empty())
+                {
+                    // String is the empty string, hide presenter
+                    headerPresenter.Visibility(winrt::Visibility::Collapsed);
+                }
+                else
+                {
+                    // String is not an empty string
+                    headerPresenter.Visibility(winrt::Visibility::Visible);
+                }
+            }
+            else
+            {
+                // Header is not a string, so let's show header presenter
+                headerPresenter.Visibility(winrt::Visibility::Visible);
+            }
+        }
+        else if(const auto headerTemplate = HeaderTemplate())
+        {
+            headerPresenter.Visibility(winrt::Visibility::Visible);
+        }
+        else
+        {
+            headerPresenter.Visibility(winrt::Visibility::Collapsed);
+        }
+    }
+}

dev/NumberBox/NumberBox.h

@@ -80,6 +80,8 @@ class NumberBox :
     void UpdateSpinButtonEnabled();
     void StepValue(double change);
 
+    void UpdateHeaderPresenterState(winrt::IInspectable const& header);
+
     bool IsInBounds(double value);
 
     bool m_valueUpdating{ false };

dev/NumberBox/TestUI/NumberBoxPage.xaml

@@ -74,15 +74,19 @@
                     <controls:NumberBox
                         MinWidth="150"
                         x:Name="TestNumberBox"
-                        Header="TestNumberBox"
                         Description="Description text"
                         PlaceholderText="Text"
                         ValueChanged="NumberBoxValueChanged"
                         SmallChange="{x:Bind SmallChangeNumberBox.Value, Mode=OneWay}"
                         LargeChange="{x:Bind LargeChangeNumberBox.Value, Mode=OneWay}"
                         AcceptsExpression="{x:Bind ExpressionCheckBox.IsChecked.Value, Mode=OneWay}"
                         IsWrapEnabled="{x:Bind WrapCheckBox.IsChecked.Value, Mode=OneWay}"
-                        IsEnabled="{x:Bind EnabledCheckBox.IsChecked.Value, Mode=OneWay}"/>
+                        IsEnabled="{x:Bind EnabledCheckBox.IsChecked.Value, Mode=OneWay}">
+                        <controls:NumberBox.Header>
+                            <TextBlock AutomationProperties.Name="HeaderBeforeApplyTemplateTest" Text="TestNumberBox"/>
+                        </controls:NumberBox.Header>
+
+                    </controls:NumberBox>
 
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Value:" Margin="0,0,5,0" />
@@ -129,6 +133,14 @@
                 <StackPanel Orientation="Horizontal">
                     <TextBox MaxHeight="30" VerticalAlignment="Top"/>
                     <controls:NumberBox x:Name="HeaderTestingNumberBox" MaxHeight="32" VerticalAlignment="Top" PlaceholderText="I should not be clipped without header"/>
+                    <controls:NumberBox x:Name="HeaderTestingNumberBoxTwo" MaxHeight="32" VerticalAlignment="Top">
+                        <controls:NumberBox.HeaderTemplate>
+                            <DataTemplate>
+                                <TextBlock AutomationProperties.Name="HeaderTemplatePropertyTest"  Text="MyText"/>
+                            </DataTemplate>
+                        </controls:NumberBox.HeaderTemplate>
+                    </controls:NumberBox>
+
                 </StackPanel>
             </StackPanel>
         </Grid>