Minor design tweaks header behaviors samples

components/Behaviors/samples/AutoSelectBehaviorSample.xaml

@@ -1,10 +1,10 @@
-<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
+<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
 
-    <StackPanel Padding="8"
+    <StackPanel MaxWidth="480"
                 Spacing="8">
         <TextBox Text="My content is not selected when loaded" />
         <TextBox Text="My content is selected when loaded">

components/Behaviors/samples/FocusBehaviorButtonSample.xaml

@@ -1,4 +1,4 @@
-<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
+<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
@@ -14,11 +14,11 @@
     <StackPanel Spacing="12">
         <Button x:Name="ButtonOne"
                 x:Load="{x:Bind ControlLoaded, Mode=OneWay}"
-                Content="Button One"
+                Content="Button 1"
                 IsEnabled="{x:Bind IsButtonEnabled, Mode=OneWay}" />
 
         <Button x:Name="ButtonTwo"
-                Content="Button Two" />
+                Content="Button 2" />
     </StackPanel>
 
 </Page>

components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml

@@ -5,26 +5,26 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       mc:Ignorable="d">
 
     <!--  We need to set height here to force scrolling in the sample  -->
-    <ListView Height="300">
+    <ListView Height="300"
+              VerticalAlignment="Top">
         <ListView.Header>
             <Grid MinHeight="100"
-                  Background="#FF0078D7">
+                  Background="{ThemeResource AccentFillColorDefaultBrush}">
                 <interactivity:Interaction.Behaviors>
                     <behaviors:FadeHeaderBehavior />
                 </interactivity:Interaction.Behaviors>
                 <TextBlock HorizontalAlignment="Center"
                            VerticalAlignment="Center"
-                           Text="Sample Text" />
+                           Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                           Text="Header" />
             </Grid>
         </ListView.Header>
         <ListView.ItemTemplate>
             <DataTemplate x:DataType="x:String">
-                <Grid MinHeight="25"
-                      Margin="10">
+                <Grid MinHeight="25">
                     <TextBlock VerticalAlignment="Center"
                                Text="{Binding}" />
                 </Grid>

components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml

@@ -5,27 +5,27 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       mc:Ignorable="d">
 
     <!--  We need to set height here to force scrolling in the sample  -->
-    <GridView Height="300">
+    <GridView Height="300"
+              VerticalAlignment="Top">
         <GridView.Header>
             <Grid MinHeight="100"
-                  Background="#FF0078D7">
+                  Background="{ThemeResource AccentFillColorDefaultBrush}">
                 <interactivity:Interaction.Behaviors>
                     <behaviors:QuickReturnHeaderBehavior />
                 </interactivity:Interaction.Behaviors>
                 <TextBlock HorizontalAlignment="Center"
                            VerticalAlignment="Center"
-                           Text="Sample Text" />
+                           Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                           Text="Header" />
             </Grid>
         </GridView.Header>
         <GridView.ItemTemplate>
             <DataTemplate x:DataType="x:String">
                 <Border Width="200"
-                        Height="200"
-                        Margin="10">
+                        Height="200">
                     <TextBlock HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding}" />

components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml

@@ -5,20 +5,20 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       mc:Ignorable="d">
 
     <!--  We need to set height here to force scrolling in the sample  -->
-    <ScrollViewer Height="300">
+    <ScrollViewer Height="300"
+                  VerticalAlignment="Top">
         <StackPanel MaxWidth="480">
-            <Image Width="100"
-                   Height="100"
-                   HorizontalAlignment="Center"
-                   Source="ms-appx:///Assets/ToolkitIcon.png">
+            <Grid Height="100"
+                  Padding="12"
+                  Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}">
+                <Image Source="ms-appx:///Assets/ToolkitIcon.png" />
                 <interactivity:Interaction.Behaviors>
                     <behaviors:QuickReturnHeaderBehavior />
                 </interactivity:Interaction.Behaviors>
-            </Image>
+            </Grid>
             <TextBlock HorizontalAlignment="Center"
                        Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Quis vel eros donec ac odio. Nisi porta lorem mollis aliquam ut. At varius vel pharetra vel turpis nunc. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Est pellentesque elit ullamcorper dignissim cras tincidunt. Amet consectetur adipiscing elit pellentesque habitant. Purus sit amet luctus venenatis lectus magna. Amet consectetur adipiscing elit ut aliquam purus. Felis eget nunc lobortis mattis aliquam faucibus purus in. Mattis rhoncus urna neque viverra justo nec ultrices. Ipsum nunc aliquet bibendum enim facilisis gravida. Nisi est sit amet facilisis magna. Suspendisse interdum consectetur libero id faucibus nisl. Malesuada bibendum arcu vitae elementum curabitur. Molestie ac feugiat sed lectus vestibulum mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Quis enim lobortis scelerisque fermentum dui faucibus in. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi.  Leo duis ut diam quam nulla porttitor massa. Metus aliquam eleifend mi in. Fringilla urna porttitor rhoncus dolor. Sapien eget mi proin sed. A cras semper auctor neque. Id faucibus nisl tincidunt eget nullam non nisi. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Urna id volutpat lacus laoreet non. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Arcu non odio euismod lacinia at quis risus sed. In massa tempor nec feugiat. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Iaculis nunc sed augue lacus viverra vitae. Rhoncus est pellentesque elit ullamcorper dignissim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Tempor nec feugiat nisl pretium fusce id velit ut.  Eget arcu dictum varius duis at consectetur lorem donec massa. A lacus vestibulum sed arcu non odio. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Rhoncus dolor purus non enim praesent elementum facilisis leo. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Augue interdum velit euismod in pellentesque massa. Ullamcorper a lacus vestibulum sed. Penatibus et magnis dis parturient montes nascetur ridiculus. At risus viverra adipiscing at. Felis eget velit aliquet sagittis id. Venenatis tellus in metus vulputate eu. In hac habitasse platea dictumst vestibulum rhoncus. Luctus accumsan tortor posuere ac. Ullamcorper morbi tincidunt ornare massa. Tellus orci ac auctor augue mauris augue neque.  Venenatis lectus magna fringilla urna porttitor. Pretium vulputate sapien nec sagittis aliquam malesuada. Aliquet nec ullamcorper sit amet. Consequat id porta nibh venenatis cras. Elementum nisi quis eleifend quam adipiscing. Netus et malesuada fames ac turpis egestas maecenas. Pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed viverra tellus in. Fusce ut placerat orci nulla pellentesque. Maecenas sed enim ut sem. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Proin fermentum leo vel orci porta non pulvinar neque. Eu non diam phasellus vestibulum lorem sed risus. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nibh tortor id aliquet lectus proin nibh nisl condimentum id.  Arcu cursus vitae congue mauris. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Faucibus turpis in eu mi bibendum. Faucibus nisl tincidunt eget nullam non nisi est sit. Turpis tincidunt id aliquet risus feugiat. Nulla at volutpat diam ut venenatis tellus in metus. Ultrices neque ornare aenean euismod. Suspendisse faucibus interdum posuere lorem ipsum dolor. Nisl rhoncus mattis rhoncus urna. Vitae semper quis lectus nulla at volutpat diam. Eu lobortis elementum nibh tellus molestie nunc. Nulla facilisi morbi tempus iaculis urna. Tortor at risus viverra adipiscing at in tellus integer. Nibh tortor id aliquet lectus proin nibh nisl. Feugiat vivamus at augue eget arcu dictum. Lectus proin nibh nisl condimentum. Tristique senectus et netus et malesuada fames. Elementum nibh tellus molestie nunc non blandit massa enim. Risus ultricies tristique nulla aliquet enim. Vel pretium lectus quam id leo in vitae turpis."
                        TextWrapping="WrapWholeWords" />

components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml

@@ -1,4 +1,4 @@
-<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderBehaviorSample"
+<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderBehaviorSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
@@ -8,21 +8,22 @@
       xmlns:local="using:BehaviorsExperiment.Samples"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       mc:Ignorable="d">
 
     <!--  We need to set height here to force scrolling in the sample  -->
     <controls:HeaderedTreeView Height="300"
+                               VerticalAlignment="Top"
                                ItemsSource="{x:Bind Items, Mode=OneWay}">
         <controls:HeaderedTreeView.Header>
             <Grid MinHeight="100"
-                  Background="#FF0078D7">
+                  Background="{ThemeResource AccentFillColorDefaultBrush}">
                 <interactivity:Interaction.Behaviors>
                     <behaviors:StickyHeaderBehavior />
                 </interactivity:Interaction.Behaviors>
                 <TextBlock HorizontalAlignment="Center"
                            VerticalAlignment="Center"
-                           Text="Sample Text" />
+                           Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                           Text="Header" />
             </Grid>
         </controls:HeaderedTreeView.Header>
         <controls:HeaderedTreeView.ItemTemplate>

components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs

@@ -20,7 +20,6 @@ public StickyHeaderBehaviorSample()
         Items = GetData();
     }
 
-
     private ObservableCollection<ExplorerItem> GetData()
     {
         var list = new ObservableCollection<ExplorerItem>();

components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml

@@ -8,21 +8,22 @@
       xmlns:local="using:BehaviorsExperiment.Samples"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       mc:Ignorable="d">
 
     <!--  We need to set height here to force scrolling in the sample  -->
-    <ScrollViewer Height="300">
+    <ScrollViewer Height="300"
+                  VerticalAlignment="Top">
         <controls:HeaderedItemsControl>
             <controls:HeaderedItemsControl.Header>
                 <Grid MinHeight="100"
-                      Background="#FF0078D7">
+                      Background="{ThemeResource AccentFillColorDefaultBrush}">
                     <interactivity:Interaction.Behaviors>
                         <behaviors:StickyHeaderBehavior />
                     </interactivity:Interaction.Behaviors>
                     <TextBlock HorizontalAlignment="Center"
                                VerticalAlignment="Center"
-                               Text="Sample Text" />
+                               Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                               Text="Header" />
                 </Grid>
             </controls:HeaderedItemsControl.Header>
             <controls:HeaderedItemsControl.ItemTemplate>

components/Behaviors/samples/InvokeActionsSample.xaml

@@ -11,8 +11,8 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
-    <Button Width="200"
-            Height="200"
+    <Button Width="140"
+            Height="140"
             HorizontalAlignment="Center"
             VerticalAlignment="Center">
         <ani:Explicit.Animations>

components/Behaviors/samples/KeyDownTriggerBehaviorSample.xaml

@@ -5,7 +5,7 @@
       xmlns:core="using:Microsoft.Xaml.Interactions.Core"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
 
-    <StackPanel Padding="12"
+    <StackPanel MaxWidth="480"
                 Spacing="8">
         <TextBox PlaceholderText="Set the focus to this TextBox and press enter">
             <interactivity:Interaction.Behaviors>
@@ -18,7 +18,8 @@
 
         <TextBlock>
             <Run Text="Enter pressed" />
-            <Run Text="{x:Bind Count, Mode=OneWay}" />
+            <Run FontWeight="SemiBold"
+                 Text="{x:Bind Count, Mode=OneWay}" />
             <Run Text="times." />
         </TextBlock>
     </StackPanel>

components/Behaviors/samples/StartAnimationActivitySample.xaml

@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <Page x:Class="BehaviorsExperiment.Samples.StartAnimationActivitySample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -11,8 +11,8 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
-    <Button Width="200"
-            Height="200"
+    <Button Width="140"
+            Height="140"
             HorizontalAlignment="Center"
             VerticalAlignment="Center">
         <ani:Explicit.Animations>
@@ -31,8 +31,8 @@
             </ani:AnimationSet>
         </ani:Explicit.Animations>
 
-        <Image Width="100"
-               Height="100"
+        <Image Width="68"
+               Height="68"
                Source="ms-appx:///Assets/ToolkitIcon.png">
             <ani:Explicit.Animations>
                 <ani:AnimationSet x:Name="FadeOutAnimation">