[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] StickyHeaderBehavior 엘리먼트 : HeaderedItemsControl 엘리먼트에서 헤더 고정하기

■ StickyHeaderBehavior 엘리먼트를 사용해 HeaderedItemsControl 엘리먼트에서 헤더를 고정하는 방법을 보여준다.

※ 비주얼 스튜디오에서 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:mxi="using:Microsoft.Xaml.Interactivity"
    xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"
    xmlns:ctwc="using:CommunityToolkit.WinUI.Controls"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="400"
        Height="300"
        BorderThickness="1"
        BorderBrush="Black"
        CornerRadius="5">
        <ScrollViewer>
            <ctwc:HeaderedItemsControl>
                <ctwc:HeaderedItemsControl.Header>
                    <Grid
                        MinHeight="50"
                        Background="{ThemeResource AccentFillColorDefaultBrush}">
                        <mxi:Interaction.Behaviors>
                            <ctwb:StickyHeaderBehavior />
                        </mxi:Interaction.Behaviors>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
                            Text="Header" />
                    </Grid>
                </ctwc:HeaderedItemsControl.Header>
                <ctwc:HeaderedItemsControl.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid
                            Margin="10"
                            MinHeight="25">
                            <TextBlock
                                VerticalAlignment="Center"
                                Text="{Binding}" />
                        </Grid>
                    </DataTemplate>
                </ctwc:HeaderedItemsControl.ItemTemplate>
                <ctwc:HeaderedItemsControl.Items>
                    <x:String>One</x:String>
                    <x:String>Two</x:String>
                    <x:String>Three</x:String>
                    <x:String>Four</x:String>
                    <x:String>Five</x:String>
                    <x:String>Six</x:String>
                    <x:String>Seven</x:String>
                    <x:String>Eight</x:String>
                    <x:String>Nine</x:String>
                    <x:String>Ten</x:String>
                    <x:String>Eleven</x:String>
                    <x:String>Twelve</x:String>
                    <x:String>Thirteen</x:String>
                    <x:String>Fourteen</x:String>
                    <x:String>Fifteen</x:String>
                    <x:String>Sixteen</x:String>
                    <x:String>Seventeen</x:String>
                    <x:String>Eighteen</x:String>
                    <x:String>Nineteen</x:String>
                    <x:String>Twenty</x:String>
                </ctwc:HeaderedItemsControl.Items>
            </ctwc:HeaderedItemsControl>
        </ScrollViewer>
    </Border>
</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:mxi="using:Microsoft.Xaml.Interactivity"

xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

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

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="300"

BorderThickness="1"

BorderBrush="Black"

CornerRadius="5">

<ctwc:HeaderedItemsControl>

<ctwc:HeaderedItemsControl.Header>

<Grid

MinHeight="50"

Background="{ThemeResource AccentFillColorDefaultBrush}">

<mxi:Interaction.Behaviors>

<ctwb:StickyHeaderBehavior />

</mxi:Interaction.Behaviors>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"

Text="Header" />

</Grid>

</ctwc:HeaderedItemsControl.Header>

<ctwc:HeaderedItemsControl.ItemTemplate>

<Grid

Margin="10"

MinHeight="25">

<TextBlock

VerticalAlignment="Center"

Text="{Binding}" />

</Grid>

</DataTemplate>

</ctwc:HeaderedItemsControl.ItemTemplate>

<ctwc:HeaderedItemsControl.Items>

<x:String>One</x:String>

<x:String>Two</x:String>

<x:String>Three</x:String>

<x:String>Four</x:String>

<x:String>Five</x:String>

<x:String>Six</x:String>

<x:String>Seven</x:String>

<x:String>Eight</x:String>

<x:String>Nine</x:String>

<x:String>Ten</x:String>

<x:String>Eleven</x:String>

<x:String>Twelve</x:String>

<x:String>Thirteen</x:String>

<x:String>Fourteen</x:String>

<x:String>Fifteen</x:String>

<x:String>Sixteen</x:String>

<x:String>Seventeen</x:String>

<x:String>Eighteen</x:String>

<x:String>Nineteen</x:String>

<x:String>Twenty</x:String>

</ctwc:HeaderedItemsControl.Items>

</ctwc:HeaderedItemsControl>

</ScrollViewer>

</Border>

</Page>

TestProject.zip