HeaderedControls

components/HeaderedContentControl/samples/HeaderedContentControl.md → components/HeaderedControls/samples/HeaderedContentControl.md

@@ -29,7 +29,7 @@ The `Header` property can be any object and you can use the `HeaderTemplate` to
 
 ```xaml
 <Page ...
-     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>
+     xmlns:controls="using:CommunityToolkit.WinUI.Controls"/>
 
 <controls:HeaderedContentControl>
     <!-- Header content or HeaderTemplate content -->
@@ -43,33 +43,3 @@ The `Header` property can be any object and you can use the `HeaderTemplate` to
 | Header | object | Gets or sets the data used for the header of each control |
 | HeaderTemplate | DataTemplate | Gets or sets the template used to display the content of the control's header |
 | Orientation | Orientation | Gets or sets the Orientation to use for layout of the header. If set to Vertical the Header will be above the content. If set to Horizontal the Header will be to the left of the content. |
-
-### Examples
-
-- The `Header` property can be set to a string, or any xaml elements. If binding the `Header` to an object that is not a string, use the `HeaderTemplate` to control how the content is rendered.
-
-    *Sample Code*
-
-    ```xaml
-    <controls:HeaderedContentControl Header="This is the header!"/>
-
-    <controls:HeaderedContentControl>
-        <controls:HeaderedContentControl.Header>
-            <Border Background="Gray">
-                <TextBlock Text="This is the header!" FontSize="16" />
-            </Border>
-        </controls:HeaderedContentControl.Header>
-    </controls:HeaderedContentControl>
-    ```
-
-- Used to control the look of the header. The default value for the `HeaderTemplate` will display the string representation of the `Header`. Set this property if you need to bind the `Header` to an object.
-
-    ```xaml
-    <controls:HeaderedContentControl Header="{Binding CustomObject}">
-        <controls:HeaderedContentControl.HeaderTemplate>
-            <DataTemplate>
-                <TextBlock Text="{Binding Title}" />
-            </DataTemplate>
-        </controls:HeaderedContentControl.HeaderTemplate>
-    </controls:HeaderedContentControl>
-    ```

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,41 @@
+---
+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>
+```
+
+
+## Properties
+
+| Property | Type | Gets or sets the data used for the header of each control |
+| -- | -- | -- |
+| Header | object | Gets or sets the data used for the header of each control |
+| HeaderTemplate | DataTemplate | Gets or sets the template used to display the content of the control's footer |
+| Footer | object | Gets or sets the data used for the header of each control |
+| FooterTemplate | DataTemplate | Gets or sets the template used to display the content of the control's footer |
+| Orientation | Orientation | Gets or sets the Orientation to use for layout of the header. If set to Vertical the Header will be above the items. If set to Horizontal the Header will be to the left of the items. |

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,38 @@
+---
+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>
+```
+
+
+## Properties
+
+| Property | Type | Gets or sets the data used for the header of each control |
+| -- | -- | -- |
+| Header | object | Gets or sets the data used for the header of each control |
+| HeaderTemplate | DataTemplate | Gets or sets the template used to display the content of the control's footer |
+| Footer | object | Gets or sets the data used for the header of each control |
+| FooterTemplate | DataTemplate | Gets or sets the template used to display the content of the control's footer |

components/HeaderedControls/samples/HeaderedTreeViewSample.xaml

@@ -0,0 +1,36 @@
+<!--  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"
+      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">
+                    <TreeViewItem Content="{x:Bind Name}"
+                                  IsExpanded="True"
+                                  ItemsSource="{x:Bind Children}" />
+                </DataTemplate>
+            </controls:HeaderedTreeView.ItemTemplate>
+        </controls:HeaderedTreeView>
+    </Grid>
+</Page>

components/HeaderedControls/samples/HeaderedTreeViewSample.xaml.cs

@@ -0,0 +1,108 @@
+// 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.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace HeaderedItemsControlExperiment.Samples;
+
+[ToolkitSample(id: nameof(HeaderedTreeViewSample), "HeaderedTreeView", description: $"A sample for showing how to create and use a {nameof(HeaderedTreeView)} control.")]
+public sealed partial class HeaderedTreeViewSample : Page
+{
+    public HeaderedTreeViewSample()
+    {
+        this.InitializeComponent();
+        Items = GetData();
+    }
+    public ObservableCollection<ExplorerItem> Items { get; }
+
+    private ObservableCollection<ExplorerItem> GetData()
+    {
+        var list = new ObservableCollection<ExplorerItem>();
+        ExplorerItem folder1 = new ExplorerItem()
+        {
+            Name = "Work Documents",
+            Children =
+                {
+                    new ExplorerItem()
+                    {
+                        Name = "Functional Specifications",
+                        Children =
+                        {
+                            new ExplorerItem()
+                            {
+                                Name = "TreeView spec",
+                              }
+                        }
+                    },
+                    new ExplorerItem()
+                    {
+                        Name = "Feature Schedule",
+                    },
+                    new ExplorerItem()
+                    {
+                        Name = "Overall Project Plan",
+                    },
+                    new ExplorerItem()
+                    {
+                        Name = "Feature Resources Allocation",
+                    }
+                }
+        };
+        ExplorerItem folder2 = new ExplorerItem()
+        {
+            Name = "Personal Folder",
+            Children =
+                        {
+                            new ExplorerItem()
+                            {
+                                Name = "Home Remodel Folder",
+                                Children =
+                                {
+                                    new ExplorerItem()
+                                    {
+                                        Name = "Contractor Contact Info",
+                                    },
+                                    new ExplorerItem()
+                                    {
+                                        Name = "Paint Color Scheme",
+                                    },
+                                    new ExplorerItem()
+                                    {
+                                        Name = "Flooring Woodgrain type",
+                                    },
+                                    new ExplorerItem()
+                                    {
+                                        Name = "Kitchen Cabinet Style",
+                                    }
+                                }
+                            }
+                        }
+        };
+
+        list.Add(folder1);
+        list.Add(folder2);
+        return list;
+    }
+}
+    public class ExplorerItem
+    {
+        public string? Name { get; set; }
+    private ObservableCollection<ExplorerItem>? m_children;
+    public ObservableCollection<ExplorerItem> Children
+    {
+        get
+        {
+            if (m_children == null)
+            {
+                m_children = new ObservableCollection<ExplorerItem>();
+            }
+            return m_children;
+        }
+        set
+        {
+            m_children = value;
+        }
+    }
+
+}

components/HeaderedItemsControl/src/AdditionalAssemblyInfo.cs → components/HeaderedControls/src/AdditionalAssemblyInfo.cs

@@ -7,7 +7,7 @@
 // These `InternalsVisibleTo` calls are intended to make it easier for
 // for any internal code to be testable in all the different test projects
 // used with the Labs infrastructure.
-[assembly: InternalsVisibleTo("HeaderedItemsControl.Tests.Uwp")]
-[assembly: InternalsVisibleTo("HeaderedItemsControl.Tests.WinAppSdk")]
+[assembly: InternalsVisibleTo("HeaderedControls.Tests.Uwp")]
+[assembly: InternalsVisibleTo("HeaderedControls.Tests.WinAppSdk")]
 [assembly: InternalsVisibleTo("CommunityToolkit.Tests.Uwp")]
 [assembly: InternalsVisibleTo("CommunityToolkit.Tests.WinAppSdk")]