[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] HeaderedItemsControl 엘리먼트 : 헤더 항목 컨트롤 만들기 2

■ HeaderedItemsControl 엘리먼트를 사용해 헤더 항목 컨트롤을 만드는 방법을 보여준다.

※ 이 예제 코드에서 사용된 HeaderedItemsControl 엘리먼트는 CommunityToolkit.WinUI.Controls.HeaderedControls 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:control="using:CommunityToolkit.WinUI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <control:HeaderedItemsControl Grid.Row="0" Grid.Column="0"
            Header="Header 1"
            Footer="Footer 1"
            ItemsSource="{x:Bind ItemEnumerable, Mode=OneWay}" />
        <control:HeaderedItemsControl Grid.Row="0" Grid.Column="2"
            Header="Header 2"
            Footer="Footer 2"
            ItemsSource="{x:Bind ItemEnumerable, Mode=OneWay}">
            <control:HeaderedItemsControl.HeaderTemplate>
                <DataTemplate>
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="{Binding}" />
                </DataTemplate>
            </control:HeaderedItemsControl.HeaderTemplate>
            <control:HeaderedItemsControl.FooterTemplate>
                <DataTemplate>
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="{Binding}" />
                </DataTemplate>
            </control:HeaderedItemsControl.FooterTemplate>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </control:HeaderedItemsControl>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:control="using:CommunityToolkit.WinUI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<control:HeaderedItemsControl Grid.Row="0" Grid.Column="0"

Header="Header 1"

Footer="Footer 1"

ItemsSource="{x:Bind ItemEnumerable, Mode=OneWay}" />

<control:HeaderedItemsControl Grid.Row="0" Grid.Column="2"

Header="Header 2"

Footer="Footer 2"

ItemsSource="{x:Bind ItemEnumerable, Mode=OneWay}">

<control:HeaderedItemsControl.HeaderTemplate>

<TextBlock

FontWeight="SemiBold"

Text="{Binding}" />

</DataTemplate>

</control:HeaderedItemsControl.HeaderTemplate>

<control:HeaderedItemsControl.FooterTemplate>

<TextBlock

FontWeight="SemiBold"

Text="{Binding}" />

</DataTemplate>

</control:HeaderedItemsControl.FooterTemplate>

<ItemsControl.ItemTemplate>

<TextBlock

Foreground="{ThemeResource TextFillColorSecondaryBrush}"

Text="{Binding}" />

</DataTemplate>

</ItemsControl.ItemTemplate>

</control:HeaderedItemsControl>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 항목 열거 가능형 - ItemEnumerable

    /// <summary>
    /// 항목 열거 가능형
    /// </summary>
    public IEnumerable<string> ItemEnumerable { get; }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        ItemEnumerable = "The quick brown fox jumped over the lazy river".Split(' ');
    }

    #endregion
}

using System.Collections.Generic;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 항목 열거 가능형 - ItemEnumerable

/// <summary>

/// 항목 열거 가능형

/// </summary>

public IEnumerable<string> ItemEnumerable { get; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

ItemEnumerable = "The quick brown fox jumped over the lazy river".Split(' ');

}

#endregion

}

TestProject.zip