From dbdde5e0fdc39c089e4b679b38e8819fa0758f00 Mon Sep 17 00:00:00 2001
From: thevortexcloud <110272833+thevortexcloud@users.noreply.github.com>
Date: Fri, 29 Sep 2023 01:16:20 +0000
Subject: [PATCH] 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          |  7 ++-
 .../Pages/HeaderedContentPage.axaml           | 27 ++++++++++++
 .../Pages/HeaderedContentPage.axaml.cs        | 14 ++++++
 .../Primitives/HeaderedContentControl.cs      |  2 +
 .../Controls/FluentControls.xaml              |  1 +
 .../Controls/HeaderedContentControl.xaml      | 43 +++++++++++++++++++
 .../Controls/HeaderedContentControl.xaml      | 43 +++++++++++++++++++
 .../Controls/SimpleControls.xaml              |  1 +
 8 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 samples/ControlCatalog/Pages/HeaderedContentPage.axaml
 create mode 100644 samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs
 create mode 100644 src/Avalonia.Themes.Fluent/Controls/HeaderedContentControl.xaml
 create mode 100644 src/Avalonia.Themes.Simple/Controls/HeaderedContentControl.xaml

diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index 7ed2d67379..2120b03b20 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/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">
diff --git a/samples/ControlCatalog/Pages/HeaderedContentPage.axaml b/samples/ControlCatalog/Pages/HeaderedContentPage.axaml
new file mode 100644
index 0000000000..ff44c2206d
--- /dev/null
+++ b/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>
+
diff --git a/samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs b/samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs
new file mode 100644
index 0000000000..ab967c4214
--- /dev/null
+++ b/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();
+    }
+}
+
diff --git a/src/Avalonia.Controls/Primitives/HeaderedContentControl.cs b/src/Avalonia.Controls/Primitives/HeaderedContentControl.cs
index d989550222..a6ebdade86 100644
--- a/src/Avalonia.Controls/Primitives/HeaderedContentControl.cs
+++ b/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>
diff --git a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
index deb7d39a89..bcb5efe80a 100644
--- a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
+++ b/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>
diff --git a/src/Avalonia.Themes.Fluent/Controls/HeaderedContentControl.xaml b/src/Avalonia.Themes.Fluent/Controls/HeaderedContentControl.xaml
new file mode 100644
index 0000000000..5b306a831d
--- /dev/null
+++ b/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>
diff --git a/src/Avalonia.Themes.Simple/Controls/HeaderedContentControl.xaml b/src/Avalonia.Themes.Simple/Controls/HeaderedContentControl.xaml
new file mode 100644
index 0000000000..5b306a831d
--- /dev/null
+++ b/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>
diff --git a/src/Avalonia.Themes.Simple/Controls/SimpleControls.xaml b/src/Avalonia.Themes.Simple/Controls/SimpleControls.xaml
index 3b4a1d8104..c5fc3f3cce 100644
--- a/src/Avalonia.Themes.Simple/Controls/SimpleControls.xaml
+++ b/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>