Add Header content control template for Fluent and Simple themes (#13028)

* Add Fluent HeaderContentControl theme

* Fix file name, add content template

* Add simple theme for HeaderedContentControl

* Add sample page for HeaderedContentControl in the catalog

* Change the HeaderedContentControl to use a Grid instead of a stack panel for its layout

* Fix template part names

* Fix HeaderedContentControl typename

* Fix the template part type again

* Fix control template names

samples/ControlCatalog/MainView.xaml

@@ -16,7 +16,7 @@
     </Grid.Styles>
     <controls:HamburgerMenu Name="Sidebar">
       <TabItem Header="Composition">
-        <pages:CompositionPage/>
+        <pages:CompositionPage />
       </TabItem>
       <TabItem Header="Acrylic">
         <pages:AcrylicPage />
@@ -67,7 +67,7 @@
         <pages:CursorPage />
       </TabItem>
       <TabItem Header="Custom Drawing" ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CustomDrawing/>
+        <pages:CustomDrawing />
       </TabItem>
       <TabItem Header="DataGrid"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
@@ -189,6 +189,9 @@
       <TabItem Header="Window Customizations">
         <pages:WindowCustomizationsPage />
       </TabItem>
+      <TabItem Header="HeaderedContentControl">
+        <pages:HeaderedContentPage />
+      </TabItem>
       <FlyoutBase.AttachedFlyout>
         <Flyout>
           <StackPanel Width="152" Spacing="8">

samples/ControlCatalog/Pages/HeaderedContentPage.axaml

@@ -0,0 +1,27 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="ControlCatalog.Pages.HeaderedContentPage">
+  <WrapPanel ItemWidth="400">
+          <HeaderedContentControl Header="This is the text header!"
+                                  FontSize="16"
+                                  FontWeight="Bold"
+                                  BorderBrush="Gray"
+                                  BorderThickness="3"
+                                  CornerRadius="3">
+            <TextBlock Text="Some content"/>
+          </HeaderedContentControl>
+          <HeaderedContentControl Header="This is the image header!">
+            <Image Source="/Assets/delicate-arch-896885_640.jpg"/>
+          </HeaderedContentControl>
+          <HeaderedContentControl>
+           <HeaderedContentControl.Header>
+             <Image Source="/Assets/delicate-arch-896885_640.jpg"/>
+           </HeaderedContentControl.Header>
+            <TextBlock Text="This is the content. But the header can also be non textual"/>
+          </HeaderedContentControl>
+        </WrapPanel>
+</UserControl>
+

samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs

@@ -0,0 +1,14 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace ControlCatalog.Pages;
+
+public partial class HeaderedContentPage : UserControl
+{
+    public HeaderedContentPage()
+    {
+        InitializeComponent();
+    }
+}
+

src/Avalonia.Controls/Primitives/HeaderedContentControl.cs

@@ -1,3 +1,4 @@
+using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
 using Avalonia.LogicalTree;
@@ -7,6 +8,7 @@ namespace Avalonia.Controls.Primitives
     /// <summary>
     /// A <see cref="ContentControl"/> with a header.
     /// </summary>
+    [TemplatePart("PART_HeaderPresenter", typeof(ContentPresenter))]
     public class HeaderedContentControl : ContentControl, IHeadered
     {
         /// <summary>

src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml

@@ -72,6 +72,7 @@
                 <MergeResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/RefreshContainer.xaml" />
                 <MergeResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/RefreshVisualizer.xaml" />
                 <MergeResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ThemeVariantScope.xaml" />
+                <MergeResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/HeaderedContentControl.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>

src/Avalonia.Themes.Fluent/Controls/HeaderedContentControl.xaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type HeaderedContentControl}"
+                TargetType="HeaderedContentControl">
+
+    <Setter Property="Padding" Value="3" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Background="{TemplateBinding Background}"
+                Padding="{TemplateBinding Padding}">
+          <Grid RowDefinitions="auto *">
+            <ContentPresenter Name="PART_HeaderPresenter"
+                              Content="{TemplateBinding Header}"
+                              RecognizesAccessKey="True"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              FontSize="{TemplateBinding FontSize}"
+                              FontWeight="{TemplateBinding FontWeight}"
+                              FontFamily="{TemplateBinding FontFamily}"
+                              FontStyle="{TemplateBinding FontStyle}"
+                              Grid.Row="0" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              RecognizesAccessKey="True"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              FontSize="{TemplateBinding FontSize}"
+                              FontWeight="{TemplateBinding FontWeight}"
+                              FontFamily="{TemplateBinding FontFamily}"
+                              FontStyle="{TemplateBinding FontStyle}"
+                              Grid.Row="1" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Simple/Controls/HeaderedContentControl.xaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type HeaderedContentControl}"
+                TargetType="HeaderedContentControl">
+
+    <Setter Property="Padding" Value="3" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Background="{TemplateBinding Background}"
+                Padding="{TemplateBinding Padding}">
+          <Grid RowDefinitions="auto *">
+            <ContentPresenter Name="PART_HeaderPresenter"
+                              Content="{TemplateBinding Header}"
+                              RecognizesAccessKey="True"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              FontSize="{TemplateBinding FontSize}"
+                              FontWeight="{TemplateBinding FontWeight}"
+                              FontFamily="{TemplateBinding FontFamily}"
+                              FontStyle="{TemplateBinding FontStyle}"
+                              Grid.Row="0" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              RecognizesAccessKey="True"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              FontSize="{TemplateBinding FontSize}"
+                              FontWeight="{TemplateBinding FontWeight}"
+                              FontFamily="{TemplateBinding FontFamily}"
+                              FontStyle="{TemplateBinding FontStyle}"
+                              Grid.Row="1" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Simple/Controls/SimpleControls.xaml

@@ -70,6 +70,7 @@
         <MergeResourceInclude Source="avares://Avalonia.Themes.Simple/Controls/RefreshContainer.xaml" />
         <MergeResourceInclude Source="avares://Avalonia.Themes.Simple/Controls/RefreshVisualizer.xaml" />
         <MergeResourceInclude Source="avares://Avalonia.Themes.Simple/Controls/ThemeVariantScope.xaml" />
+        <MergeResourceInclude Source="avares://Avalonia.Themes.Simple/Controls/HeaderedContentControl.xaml"/>
       </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
   </Styles.Resources>