HeaderedControls

components/HeaderedControls/samples/HeaderedContentControl.md

@@ -0,0 +1,37 @@
+---
+title: HeaderedContentControl
+author: skendrot
+description: The HeaderedContentControl allows content to be displayed with a specified header.
+keywords: HeaderedContentControl, Control, headered
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+icon: Assets/HeaderedContentControl.png
+---
+
+The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Content for the HeaderedContentControl will align to the top left. This is to maintain the same functionality as the ContentControl.
+
+> [!NOTE]
+> Setting the `Background`, `BorderBrush` and `BorderThickness` properties will not have any effect on the HeaderedContentControl. This is to maintain the same functionality as the ContentControl.
+
+> [!Sample HeaderedContentControlSample]
+
+> [!Sample HeaderedContentControlTextSample]
+
+> [!Sample HeaderedContentControlImageSample]
+
+> [!Sample HeaderedContentControlComplexSample]
+
+## Syntax
+
+```xaml
+<Page ...
+     xmlns:controls="using:CommunityToolkit.WinUI.Controls"/>
+
+<controls:HeaderedContentControl>
+    <!-- Header content or HeaderTemplate content -->
+</controls:HeaderedContentControl>
+```

components/HeaderedContentControl/samples/HeaderedContentControlComplexSample.xaml → components/HeaderedControls/samples/HeaderedContentControlComplexSample.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="HeaderedContentControlExperiment.Samples.HeaderedContentControlComplexSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

components/HeaderedContentControl/samples/HeaderedContentControlImageSample.xaml → components/HeaderedControls/samples/HeaderedContentControlImageSample.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="HeaderedContentControlExperiment.Samples.HeaderedContentControlImageSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

components/HeaderedContentControl/samples/HeaderedContentControl.Samples.csproj → components/HeaderedControls/samples/HeaderedControls.Samples.csproj

@@ -1,6 +1,6 @@
 <Project Sdk="MSBuild.Sdk.Extras/3.0.23">
   <PropertyGroup>
-    <ToolkitComponentName>HeaderedContentControl</ToolkitComponentName>
+    <ToolkitComponentName>HeaderedControls</ToolkitComponentName>
   </PropertyGroup>
 
   <!-- Sets this up as a toolkit component's sample project -->

components/HeaderedControls/samples/HeaderedItemsControl.md

@@ -0,0 +1,30 @@
+---
+title: HeaderedItemsControl
+author: skendrot
+description: The HeaderedItemsControl allows items to be displayed with a specified header.
+keywords: HeaderedItemsControl, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+icon: Assets/HeaderedItemsControl.png
+---
+The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similiar objects can be set for the `Footer` and `FooterTemplate`.
+
+> [!NOTE]
+> Setting the `Background`, `BorderBrush` and `BorderThickness` properties will not have any effect on the HeaderedItemsControl. This is to maintain the same functionality as the ItemsControl.
+
+> [!Sample HeaderedItemsControlSample]
+
+## Syntax
+
+```xaml
+<Page ...
+     xmlns:controls="using:CommunityToolkit.WinUI.Controls"/>
+
+<controls:HeaderedItemsControl>
+    <!-- Header content or HeaderTemplate content -->
+</controls:HeaderedItemsControl>
+```

components/HeaderedItemsControl/samples/HeaderedItemsControlSample.xaml → components/HeaderedControls/samples/HeaderedItemsControlSample.xaml

@@ -13,10 +13,12 @@
             <ColumnDefinition />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
-        <controls:HeaderedItemsControl Header="Header 1"
+        <controls:HeaderedItemsControl Footer="Footer 1"
+                                       Header="Header 1"
                                        ItemsSource="{x:Bind Items, Mode=OneWay}" />
 
         <controls:HeaderedItemsControl Grid.Column="1"
+                                       Footer="Footer 2"
                                        Header="Header 2"
                                        ItemsSource="{x:Bind Items, Mode=OneWay}">
             <controls:HeaderedItemsControl.HeaderTemplate>
@@ -25,6 +27,12 @@
                                Text="{Binding}" />
                 </DataTemplate>
             </controls:HeaderedItemsControl.HeaderTemplate>
+            <controls:HeaderedItemsControl.FooterTemplate>
+                <DataTemplate>
+                    <TextBlock FontWeight="SemiBold"
+                               Text="{Binding}" />
+                </DataTemplate>
+            </controls:HeaderedItemsControl.FooterTemplate>
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
                     <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"

components/HeaderedControls/samples/HeaderedTreeView.md

@@ -0,0 +1,28 @@
+---
+title: HeaderedTreeView
+author: michaelhawker
+description: The HeaderedTreeView allows a treeview to be displayed with a specified header.
+keywords: HeaderedTreeView, Control, Layout, treeview
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+icon: Assets/HeaderedTreeView.png
+---
+The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similiar objects can be set for the `Footer` and `FooterTemplate`.
+
+
+> [!Sample HeaderedTreeViewSample]
+
+## Syntax
+
+```xaml
+<Page ...
+     xmlns:controls="using:CommunityToolkit.WinUI.Controls"/>
+
+<controls:HeaderedTreeView>
+    <!-- Header content or HeaderTemplate content -->
+</controls:HeaderedTreeView>
+```

components/HeaderedControls/samples/HeaderedTreeViewSample.xaml

@@ -0,0 +1,37 @@
+<!--  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="HeaderedItemsControlExperiment.Samples.HeaderedTreeViewSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:HeaderedItemsControlExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      mc:Ignorable="d">
+
+    <Grid>
+        <controls:HeaderedTreeView Footer="Footer"
+                                   Header="Header"
+                                   ItemsSource="{x:Bind Items, Mode=OneWay}">
+            <controls:HeaderedTreeView.HeaderTemplate>
+                <DataTemplate>
+                    <TextBlock FontWeight="SemiBold"
+                               Text="{Binding}" />
+                </DataTemplate>
+            </controls:HeaderedTreeView.HeaderTemplate>
+            <controls:HeaderedTreeView.FooterTemplate>
+                <DataTemplate>
+                    <TextBlock FontWeight="SemiBold"
+                               Text="{Binding}" />
+                </DataTemplate>
+            </controls:HeaderedTreeView.FooterTemplate>
+            <controls:HeaderedTreeView.ItemTemplate>
+                <DataTemplate x:DataType="local:ExplorerItem">
+                    <muxc:TreeViewItem Content="{x:Bind Name}"
+                                       IsExpanded="True"
+                                       ItemsSource="{x:Bind Children}" />
+                </DataTemplate>
+            </controls:HeaderedTreeView.ItemTemplate>
+        </controls:HeaderedTreeView>
+    </Grid>
+</Page>