Merge pull request #4101 from chingucoding/dev/tokenizingtextbox-header-fix

Fix TokenizingTextBox header to behave like normal text control headers

Author: michael-hawker

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBox.xaml

@@ -65,18 +65,35 @@
     <ControlTemplate x:Key="TokenizingTextBoxTemplate"
                      TargetType="controls:TokenizingTextBox">
         <Grid Name="RootPanel">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+
+            <ContentPresenter Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              Transitions="{TemplateBinding HeaderTransitions}"
+                              FontWeight="Normal"
+                              Foreground="{ThemeResource TextControlHeaderForeground}"
+                              Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                              TextWrapping="Wrap"
+                              VerticalAlignment="Top" />
             <Border x:Name="BackgroundVisual"
+                    Grid.Row="1"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}" />
 
             <Border x:Name="FocusVisual"
+                    Grid.Row="1"
                     Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
                     BorderBrush="{ThemeResource TextControlBorderBrushFocused}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Opacity="0" /> <!-- Background in WinUI is TextControlBackgroundFocused, but that uses a different resource in WinUI than system -->
 
             <ScrollViewer x:Name="ScrollViewer"
+                          Grid.Row="1"
                           AutomationProperties.AccessibilityView="Raw"
                           BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                           HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
@@ -92,15 +109,17 @@
                           ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
 
                 <ItemsPresenter Padding="{TemplateBinding Padding}"
-                                Margin="{StaticResource TokenizingTextBoxPresenterMargin}"
-                                Footer="{TemplateBinding Footer}"
-                                FooterTemplate="{TemplateBinding FooterTemplate}"
-                                FooterTransitions="{TemplateBinding FooterTransitions}"
-                                Header="{TemplateBinding Header}"
-                                HeaderTemplate="{TemplateBinding HeaderTemplate}"
-                                HeaderTransitions="{TemplateBinding HeaderTransitions}" />
+                                Margin="{StaticResource TokenizingTextBoxPresenterMargin}"/>
             </ScrollViewer>
 
+            <ContentPresenter Grid.Row="2"
+                              Content="{TemplateBinding Footer}"
+                              ContentTemplate="{TemplateBinding FooterTemplate}"
+                              Transitions="{TemplateBinding FooterTransitions}"
+                              FontWeight="Normal"
+                              TextWrapping="Wrap"
+                              VerticalAlignment="Top" />
+            
             <VisualStateManager.VisualStateGroups>
                 <VisualStateGroup x:Name="CommonStates">
                     <VisualState x:Name="Disabled">