LAYOUT Archives - 9 중 2 번째 페이지

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] AdaptiveGridView 엘리먼트 : DesiredWidth/ItemHeight/StretchContentForSingleRow 속성 사용하기

■ AdaptiveGridView 엘리먼트의 DesiredWidth/ItemHeight/StretchContentForSingleRow 속성을 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

[C#/WINUI3/.NET8] VirtualizingLayout 클래스 : 가상화 스택 레이아웃 만들기

■ VirtualizingLayout 클래스를 사용해 가상화 스택 레이아웃을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/.NET8] NonVirtualizingLayout 클래스 : 커스텀 비가상화 레이아웃 만들기

■ NonVirtualizingLayout 클래스를 사용해 커스텀 비가상화 레이아웃을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/.NET8] Panel 클래스 : 커스텀 패널 만들기

■ Panel 클래스를 사용해 커스텀 패널을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/.NET8] SplitView 엘리먼트 : DisplayMode/OpenPaneLength/IsPaneOpen 속성 사용하기

■ SplitView 엘리먼트의 DisplayMode/OpenPaneLength/IsPaneOpen 속성을 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

[C#/WINUI3/.NET8] RelativePanel 엘리먼트 : RightOf/Below/AlignLeftWith/AlignRightWith/AlignRightWithPanel/AlignBottomWithPanel 첨부 속성 사용하기

■ RelativePanel 엘리먼트의 RightOf/Below/AlignLeftWith/AlignRightWith/AlignRightWithPanel/AlignBottomWithPanel 첨부 속성을 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/.NET8] ListView 클래스 : ListViewItem 객체에 조명 효과 사용하기

■ ListView 클래스에서 ListViewItem 객체에 조명 효과를 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] WrapPanel 엘리먼트 : HorizontalSpacing/VerticalSpacing 속성 사용하기

■ WrapPanel 엘리먼트의 HorizontalSpacing/VerticalSpacing 속성을 사용하는 방법을 보여준다. ▶ PhotoItem.cs


namespace TestProject;

/// <summary>
/// 포트 항목
/// </summary>
public class PhotoItem
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 카테고리 - Category

    /// <summary>
    /// 카테고리
    /// </summary>
    public string Category { get; set; }

    #endregion
    #region 썸네일 - Thumbnail

    /// <summary>
    /// 썸네일
    /// </summary>
    public string Thumbnail { get; set; }

    #endregion
    #region 너비 - Width

    /// <summary>
    /// 너비
    /// </summary>
    public double Width { get; set; }

    #endregion
    #region 높이 - Height

    /// <summary>
    /// 높이
    /// </summary>
    public double Height { get; set; }

    #endregion
}

namespace TestProject;

/// <summary>

/// 포트 항목

/// </summary>

public class PhotoItem

{

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

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

#region 카테고리 - Category

/// <summary>

/// 카테고리

/// </summary>

public string Category { get; set; }

#endregion

#region 썸네일 - Thumbnail

/// <summary>

/// 썸네일

/// </summary>

public string Thumbnail { get; set; }

#endregion

#region 너비 - Width

/// <summary>

/// 너비

/// </summary>

public double Width { get; set; }

#endregion

#region 높이 - Height

/// <summary>

/// 높이

/// </summary>

public double Height { get; set; }

#endregion

}

▶ 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:ctwc="using:CommunityToolkit.WinUI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <DataTemplate x:Key="PhotoTemplateKey">
            <Grid
                Margin="0"
                Width="{Binding Width}"
                Height="{Binding Height}">
                <Image
                    HorizontalAlignment="Center"
                    Stretch="UniformToFill">
                    <Image.Source>
                        <BitmapImage
                            DecodePixelHeight="200"
                            UriSource="{Binding Thumbnail}" />
                    </Image.Source>
                </Image>
                <Border VerticalAlignment="Bottom">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0 1">
                            <GradientStop Offset="0" Color="Transparent" />
                            <GradientStop Offset="1" Color="#33000000"   />
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock
                        VerticalAlignment="Bottom"
                        Margin="5 20 5 5"
                        Foreground="White"
                        Text="{Binding Category}" />
                </Border>
            </Grid>
        </DataTemplate>
        <Style TargetType="ListViewItem">
            <Setter Property="Margin"                     Value="0"      />
            <Setter Property="MinWidth"                   Value="0"      />
            <Setter Property="MinHeight"                  Value="0"      />
            <Setter Property="Padding"                    Value="0"      />
            <Setter Property="VerticalContentAlignment"   Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>
    </Page.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0"
            Orientation="Horizontal"
            Spacing="10">
            <Button Name="addItemButton"
                Padding="10"
                Content="Add random sized image" />
            <Button Name="addFixedItemButton"
                Padding="10"
                Content="Add fixed sized image" />
            <Button Name="switchButton"
                Padding="10"
                Content="Switch Orientation" />
        </StackPanel>
        <ListView Name="listView" Grid.Row="1"
            ItemTemplate="{StaticResource PhotoTemplateKey}"
            IsItemClickEnabled="True"
            ItemsSource="{x:Bind PhotoItemCollection, Mode=OneWay}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <ctwc:WrapPanel Name="sampleWrapPanel"
                        Padding="10"
                        HorizontalSpacing="10"
                        VerticalSpacing="10" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ListView>
    </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:ctwc="using:CommunityToolkit.WinUI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<Grid

Margin="0"

Width="{Binding Width}"

Height="{Binding Height}">

<Image

HorizontalAlignment="Center"

Stretch="UniformToFill">

<Image.Source>

<BitmapImage

DecodePixelHeight="200"

UriSource="{Binding Thumbnail}" />

</Image.Source>

</Image>

<Border.Background>

</LinearGradientBrush>

</Border.Background>

<TextBlock

VerticalAlignment="Bottom"

Margin="5 20 5 5"

Foreground="White"

Text="{Binding Category}" />

</Border>

</Grid>

</DataTemplate>

</Style>

</Page.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0"

Orientation="Horizontal"

Spacing="10">

<Button Name="addItemButton"

Padding="10"

Content="Add random sized image" />

<Button Name="addFixedItemButton"

Padding="10"

Content="Add fixed sized image" />

<Button Name="switchButton"

Padding="10"

Content="Switch Orientation" />

</StackPanel>

<ListView Name="listView" Grid.Row="1"

ItemTemplate="{StaticResource PhotoTemplateKey}"

IsItemClickEnabled="True"

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

<ItemsControl.ItemsPanel>

<ctwc:WrapPanel Name="sampleWrapPanel"

Padding="10"

HorizontalSpacing="10"

VerticalSpacing="10" />

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

</ListView>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI;
using CommunityToolkit.WinUI.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 난수기
    /// </summary>
    private static readonly Random _random = new Random();

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 포토 항목 컬렉션
    /// </summary>
    public ObservableCollection<PhotoItem> PhotoItemCollection = [];

    #endregion

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

    #region 생성자 - MainPage()

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

        this.addItemButton.Click      += addItemButton_Click;
        this.addFixedItemButton.Click += addFixedItemButton_Click;
        this.switchButton.Click       += switchButton_Click;
        this.listView.ItemClick       += listView_ItemClick;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Add random sized image 버튼 클릭시 처리하기 - addItemButton_Click(sender, e)

    /// <summary>
    /// Add random sized image 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void addItemButton_Click(object sender, RoutedEventArgs e)
    {
        PhotoItemCollection.Add
        (
            new PhotoItem
            {
                Category  = "Remove",
                Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",
                Width     = _random.Next(60, 180),
                Height    = _random.Next(40, 140)
            }
        );
    }

    #endregion
    #region Add fixed sized image 버튼 클릭시 처리하기 - addFixedItemButton_Click(sender, e)

    /// <summary>
    /// Add fixed sized image 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void addFixedItemButton_Click(object sender, RoutedEventArgs e)
    {
        PhotoItemCollection.Add
        (
            new PhotoItem
            {
                Category  = "Remove",
                Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",
                Width     = 150,
                Height    = 100
            }
        );
    }

    #endregion
    #region Switch Orientation 버튼 클릭시 처리하기 - switchButton_Click(sender, e)

    /// <summary>
    /// Switch Orientation 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void switchButton_Click(object sender, RoutedEventArgs e)
    {
        if(this.listView.FindDescendant<WrapPanel>() is WrapPanel wrapPanel)
        {
            if(wrapPanel.Orientation == Orientation.Horizontal)
            {
                wrapPanel.Orientation = Orientation.Vertical;

                ScrollViewer.SetVerticalScrollMode  (this.listView, ScrollMode.Disabled);
                ScrollViewer.SetHorizontalScrollMode(this.listView, ScrollMode.Auto    );

                ScrollViewer.SetVerticalScrollBarVisibility  (this.listView, ScrollBarVisibility.Disabled);
                ScrollViewer.SetHorizontalScrollBarVisibility(this.listView, ScrollBarVisibility.Auto    );
            }
            else
            {
                wrapPanel.Orientation = Orientation.Horizontal;

                ScrollViewer.SetVerticalScrollMode  (this.listView, ScrollMode.Auto    );
                ScrollViewer.SetHorizontalScrollMode(this.listView, ScrollMode.Disabled);

                ScrollViewer.SetVerticalScrollBarVisibility  (this.listView, ScrollBarVisibility.Auto    );
                ScrollViewer.SetHorizontalScrollBarVisibility(this.listView, ScrollBarVisibility.Disabled);
            }
        }
    }

    #endregion
    #region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

    /// <summary>
    /// 리스트 뷰 항목 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void listView_ItemClick(object sender, ItemClickEventArgs e)
    {
        PhotoItem item = e.ClickedItem as PhotoItem;

        if(item == null)
        {
            return;
        }

        PhotoItemCollection.Remove(item);
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

using System;

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI;

using CommunityToolkit.WinUI.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 난수기

/// </summary>

private static readonly Random _random = new Random();

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

//////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 포토 항목 컬렉션

/// </summary>

public ObservableCollection<PhotoItem> PhotoItemCollection = [];

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.addItemButton.Click += addItemButton_Click;

this.addFixedItemButton.Click += addFixedItemButton_Click;

this.switchButton.Click += switchButton_Click;

this.listView.ItemClick += listView_ItemClick;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Add random sized image 버튼 클릭시 처리하기 - addItemButton_Click(sender, e)

/// <summary>

/// Add random sized image 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void addItemButton_Click(object sender, RoutedEventArgs e)

{

PhotoItemCollection.Add

(

new PhotoItem

{

Category = "Remove",

Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",

Width = _random.Next(60, 180),

Height = _random.Next(40, 140)

}

);

}

#endregion

#region Add fixed sized image 버튼 클릭시 처리하기 - addFixedItemButton_Click(sender, e)

/// <summary>

/// Add fixed sized image 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void addFixedItemButton_Click(object sender, RoutedEventArgs e)

{

PhotoItemCollection.Add

(

new PhotoItem

{

Category = "Remove",

Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",

Width = 150,

Height = 100

}

);

}

#endregion

#region Switch Orientation 버튼 클릭시 처리하기 - switchButton_Click(sender, e)

/// <summary>

/// Switch Orientation 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void switchButton_Click(object sender, RoutedEventArgs e)

{

if(this.listView.FindDescendant<WrapPanel>() is WrapPanel wrapPanel)

{

if(wrapPanel.Orientation == Orientation.Horizontal)

{

wrapPanel.Orientation = Orientation.Vertical;

ScrollViewer.SetVerticalScrollMode (this.listView, ScrollMode.Disabled);

ScrollViewer.SetHorizontalScrollMode(this.listView, ScrollMode.Auto );

ScrollViewer.SetVerticalScrollBarVisibility (this.listView, ScrollBarVisibility.Disabled);

ScrollViewer.SetHorizontalScrollBarVisibility(this.listView, ScrollBarVisibility.Auto );

}

else

{

wrapPanel.Orientation = Orientation.Horizontal;

ScrollViewer.SetVerticalScrollMode (this.listView, ScrollMode.Auto );

ScrollViewer.SetHorizontalScrollMode(this.listView, ScrollMode.Disabled);

ScrollViewer.SetVerticalScrollBarVisibility (this.listView, ScrollBarVisibility.Auto );

ScrollViewer.SetHorizontalScrollBarVisibility(this.listView, ScrollBarVisibility.Disabled);

}

#endregion

#region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

/// <summary>

/// 리스트 뷰 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void listView_ItemClick(object sender, ItemClickEventArgs e)

{

PhotoItem item = e.ClickedItem as PhotoItem;

if(item == null)

{

return;

}

PhotoItemCollection.Remove(item);

}

#endregion

}

TestProject.zip

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] WrapLayout 엘리먼트 : HorizontalSpacing/VerticalSpacing 속성을 사용해 방향 접근 방식 레이아웃 설정하기

■ WrapLayout 엘리먼트의 HorizontalSpacing/VerticalSpacing 속성을 사용해 방향 접근 방식의 레이아웃을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] StaggeredLayout 엘리먼트 : RowSpacing/ColumnSpacing/DesiredColumnWidth 속성을 사용해 컬럼 접근 방식 레이아웃 설정하기

■ StaggeredLayout 엘리먼트의 RowSpacing/ColumnSpacing/DesiredColumnWidth 속성을 사용해 컬럼 접근 방식의 레이아웃을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] GridSplitter 엘리먼트 : 그리드 분리자 만들기

■ GridSplitter 엘리먼트를 사용해 그리드 분리자를 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 GridSplitter 엘리먼트는 CommunityToolkit.WinUI.Controls.Sizers 누겟(버전 : 8.0.240109)을 참조한다. ※

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] DockPanel 엘리먼트 : 도킹 패널 만들기

■ DockPanel 엘리먼트를 사용해 도킹 패널을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/.NET6] Grid 클래스 : BackgroundTransition 속성에서 BrushTransition 객체를 사용해 테마 변경에 대한 애니메이션 만들기

■ Grid 클래스의 BackgroundTransition 속성에서 BrushTransition 객체를 사용해 테마 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid Name="grid" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            MinHeight="200"
            BorderThickness="1"
            BorderBrush="DimGray"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            RequestedTheme="Light">
            <StackPanel
                Margin="10"
                Spacing="10">
                <TextBlock
                    Style="{ThemeResource SubheaderTextBlockStyle}"
                    Text="Lorem Ipsum" />
                <TextBlock
                    Margin="0 10 0 0"
                    TextWrapping="WrapWholeWords"
                    Text="The background of this grid animates when the theme changes." />
                <Button
                    Margin="0 10 0 0"
                    Content="Button" />
                <CheckBox
                    Margin="0 10 0 0"
                    Content="CheckBox" />
            </StackPanel>
        </Grid>
        <Button Name="changeThemeButton" Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="5"
            Content="Change Theme" />
    </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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Name="grid" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

MinHeight="200"

BorderThickness="1"

BorderBrush="DimGray"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

RequestedTheme="Light">

<StackPanel

Margin="10"

Spacing="10">

<TextBlock

Style="{ThemeResource SubheaderTextBlockStyle}"

Text="Lorem Ipsum" />

<TextBlock

Margin="0 10 0 0"

TextWrapping="WrapWholeWords"

Text="The background of this grid animates when the theme changes." />

<Button

Margin="0 10 0 0"

Content="Button" />

<CheckBox

Margin="0 10 0 0"

Content="CheckBox" />

</StackPanel>

</Grid>

<Button Name="changeThemeButton" Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="Change Theme" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

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

        #region 생성자 - MainPage()

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

            this.grid.BackgroundTransition = new BrushTransition();

            this.changeThemeButton.Click += changeThemeButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region Change Theme 버튼 클릭시 처리하기 - changeThemeButton_Click(sender, e)

        /// <summary>
        /// Change Theme 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void changeThemeButton_Click(object sender, RoutedEventArgs e)
        {
            this.grid.RequestedTheme = this.grid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.grid.BackgroundTransition = new BrushTransition();

this.changeThemeButton.Click += changeThemeButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region Change Theme 버튼 클릭시 처리하기 - changeThemeButton_Click(sender, e)

/// <summary>

/// Change Theme 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void changeThemeButton_Click(object sender, RoutedEventArgs e)

{

this.grid.RequestedTheme = this.grid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] VariableSizedWrapGrid 엘리먼트 : Orientation 속성과 RowSpan/ColumnSpan 첨부 속성 사용하기

■ VariableSizedWrapGrid 엘리먼트의 Orientation 속성과 RowSpan/ColumnSpan 첨부 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <VariableSizedWrapGrid Name="variableSizedWrapGrid" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Height="300"
            Background="Beige"
            MaximumRowsOrColumns="3"
            ItemHeight="44"
            ItemWidth="44">
            <Rectangle Fill="Red" />
            <Rectangle VariableSizedWrapGrid.RowSpan="2"
                Height="80"
                Fill="Blue" />
            <Rectangle VariableSizedWrapGrid.ColumnSpan="2"
                Width="80"
                Fill="Green" />
            <Rectangle
                VariableSizedWrapGrid.RowSpan="2"
                VariableSizedWrapGrid.ColumnSpan="2"
                Width="80"
                Height="80"
                Fill="Yellow" />
        </VariableSizedWrapGrid>
        <RadioButtons Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Orientation">
            <RadioButton Name="horizontalRadioButton"
                Tag="Horizontal"
                Content="Horizontal" />
            <RadioButton Name="verticalRadioButton"
                Tag="Vertical"
                Content="Vertical" />
        </RadioButtons>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VariableSizedWrapGrid Name="variableSizedWrapGrid" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="300"

Background="Beige"

MaximumRowsOrColumns="3"

ItemHeight="44"

ItemWidth="44">

<Rectangle VariableSizedWrapGrid.RowSpan="2"

Height="80"

Fill="Blue" />

<Rectangle VariableSizedWrapGrid.ColumnSpan="2"

Width="80"

Fill="Green" />

<Rectangle

VariableSizedWrapGrid.RowSpan="2"

VariableSizedWrapGrid.ColumnSpan="2"

Width="80"

Height="80"

Fill="Yellow" />

</VariableSizedWrapGrid>

<RadioButtons Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Orientation">

<RadioButton Name="horizontalRadioButton"

Tag="Horizontal"

Content="Horizontal" />

<RadioButton Name="verticalRadioButton"

Tag="Vertical"

Content="Vertical" />

</RadioButtons>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.horizontalRadioButton.Checked += radioButton_Checked;
            this.verticalRadioButton.Checked   += radioButton_Checked;

            this.verticalRadioButton.IsChecked = true;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

        /// <summary>
        /// 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.variableSizedWrapGrid != null)
            {
                string orientationName = radioButton.Tag.ToString();

                switch (orientationName)
                {
                    case "Horizontal" : this.variableSizedWrapGrid.Orientation = Orientation.Horizontal; break;
                    case "Vertical"   : this.variableSizedWrapGrid.Orientation = Orientation.Vertical;   break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.horizontalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.IsChecked = true;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

/// <summary>

/// 라디오 버튼 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void radioButton_Checked(object sender, RoutedEventArgs e)

{

if(sender is RadioButton radioButton && this.variableSizedWrapGrid != null)

{

string orientationName = radioButton.Tag.ToString();

switch (orientationName)

{

case "Horizontal" : this.variableSizedWrapGrid.Orientation = Orientation.Horizontal; break;

case "Vertical" : this.variableSizedWrapGrid.Orientation = Orientation.Vertical; break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] StackPanel 클래스 : Orientation 속성 사용하기

■ StackPanel 클래스의 Orientation 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Name="stackPanel" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <StackPanel.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Width"  Value="40" />
                    <Setter Property="Height" Value="40" />
                </Style>
            </StackPanel.Resources>
            <Rectangle Fill="Red"    />
            <Rectangle Fill="Blue"   />
            <Rectangle Fill="Green"  />
            <Rectangle Fill="Yellow" />
        </StackPanel>
        <RadioButtons Name="OrientationGroup" Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Orientation">
            <RadioButton Name="horizontalRadioButton"
                Tag="Horizontal"
                Content="Horizontal" />
            <RadioButton Name="verticalRadioButton"
                Tag="Vertical"
                Content="Vertical" />
        </RadioButtons>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Name="stackPanel" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

</StackPanel>

<RadioButtons Name="OrientationGroup" Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Orientation">

<RadioButton Name="horizontalRadioButton"

Tag="Horizontal"

Content="Horizontal" />

<RadioButton Name="verticalRadioButton"

Tag="Vertical"

Content="Vertical" />

</RadioButtons>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.horizontalRadioButton.Checked += radioButton_Checked;
            this.verticalRadioButton.Checked   += radioButton_Checked;

            this.verticalRadioButton.IsChecked = true;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

        /// <summary>
        /// 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.stackPanel != null)
            {
                string orientationName = radioButton.Tag.ToString();

                switch(orientationName)
                {
                    case "Horizontal" : this.stackPanel.Orientation = Orientation.Horizontal; break;
                    case "Vertical"   : this.stackPanel.Orientation = Orientation.Vertical;   break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.horizontalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.IsChecked = true;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

/// <summary>

/// 라디오 버튼 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void radioButton_Checked(object sender, RoutedEventArgs e)

{

if(sender is RadioButton radioButton && this.stackPanel != null)

{

string orientationName = radioButton.Tag.ToString();

switch(orientationName)

{

case "Horizontal" : this.stackPanel.Orientation = Orientation.Horizontal; break;

case "Vertical" : this.stackPanel.Orientation = Orientation.Vertical; break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] SplitView 엘리먼트 사용하기

■ SplitView 엘리먼트를 사용하는 방법을 보여준다. ▶ NullableBooleanToBooleanConverter.cs


using System;

using Microsoft.UI.Xaml.Data;

namespace TestProject
{
    /// <summary>
    /// NULL 가능한 불린값↔불린값 변환자
    /// </summary>
    public class NullableBooleanToBooleanConverter : IValueConverter
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>변환 값</returns>
        public object Convert(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is bool?)
            {
                return (bool)sourceValue;
            }

            return false;
        }

        #endregion
        #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 역변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>역변환 값</returns>
        public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is bool)
            {
                return (bool)sourceValue;
            }

            return false;
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml.Data;

namespace TestProject

{

/// <summary>

/// NULL 가능한 불린값↔불린값 변환자

/// </summary>

public class NullableBooleanToBooleanConverter : IValueConverter

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is bool?)

{

return (bool)sourceValue;

}

return false;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is bool)

{

return (bool)sourceValue;

}

return false;

}

#endregion

}

▶ MenuItem.cs


using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메뉴 항목
    /// </summary>
    public class MenuItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 기호 - Symbol

        /// <summary>
        /// 기호
        /// </summary>
        public Symbol Symbol { get; set; }

        #endregion
        #region 제목 - Caption

        /// <summary>
        /// 제목
        /// </summary>
        public string Caption { get; set; }

        #endregion
    }
}

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메뉴 항목

/// </summary>

public class MenuItem

{

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

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

#region 기호 - Symbol

/// <summary>

/// 기호

/// </summary>

public Symbol Symbol { get; set; }

#endregion

#region 제목 - Caption

/// <summary>

/// 제목

/// </summary>

public string Caption { get; set; }

#endregion

}

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverterKey" />
        <DataTemplate x:Key="MenuItemDataTemplateKey" x:DataType="local:MenuItem">
            <StackPanel
                Margin="2 0 0 0"
                Orientation="Horizontal">
                <SymbolIcon Symbol="{x:Bind Symbol}" />
                <TextBlock
                    VerticalAlignment="Center"
                    Margin="20 0 0 0"
                    Text="{x:Bind Caption}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="SystemControlBackgroundChromeMediumLowBrush" />
                <VisualState x:Name="Red">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Blue">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Blue" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Green">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <SplitView Name="splitView" Grid.Column="0"
                IsPaneOpen="{x:Bind isPaneOpenToggleButton.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverterKey}}"
                PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"
                CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"
                DisplayMode="CompactOverlay"
                IsTabStop="False">
                <SplitView.Pane>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"    />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0"
                            Style="{StaticResource BaseTextBlockStyle}"
                            Margin="60 10 0 0"
                            Text="창 컨텐트" />
                        <ListView Grid.Row="1"
                            ItemTemplate="{StaticResource MenuItemDataTemplateKey}"
                            Margin="0 10 0 0"
                            VerticalAlignment="Stretch"
                            SelectionMode="None"
                            IsItemClickEnabled="True"
                            ItemsSource="{x:Bind MenuItemCollection}"
                            ItemClick="menuListView_ItemClick" />
                        <StackPanel Grid.Row="2"
                            Margin="15 25 0 25"
                            Orientation="Horizontal">
                            <SymbolIcon Symbol="Setting" />
                            <TextBlock
                                VerticalAlignment="Center"
                                Margin="25 0 0 0"
                                Text="설정" />
                        </StackPanel>
                    </Grid>
                </SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"    />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0"
                        Style="{StaticResource BaseTextBlockStyle}"
                        Margin="10 10 0 0"
                        Text="SplitView 컨텐트" />
                    <TextBlock Name="contentTextBlock" Grid.Row="1"
                        Style="{StaticResource BodyTextBlockStyle}"
                        Margin="10 10 0 0" />
                </Grid>
            </SplitView>
            <StackPanel Grid.Column="2"
                Margin="0 0 10 0"
                Spacing="10">
                <ToggleButton Name="isPaneOpenToggleButton"
                    IsChecked="True"
                    Content="IsPaneOpen" />
                <ToggleSwitch
                    Margin="0 10 0 0"
                    MinWidth="120"
                    OffContent="Left"
                    OnContent="Right"
                    Header="PanePlacement"
                    Toggled="panePlacementToggleSwitch_Toggled" />
                <ComboBox Name="displayModeCombobox"
                    VerticalAlignment="Center"
                    Margin="0 5 0 0"
                    Width="196"
                    Header="DisplayMode"
                    SelectionChanged="displayModeCombobox_SelectionChanged"
                    SelectedIndex="0">
                    <ComboBoxItem>Inline</ComboBoxItem>
                    <ComboBoxItem>CompactInline</ComboBoxItem>
                    <ComboBoxItem>Overlay</ComboBoxItem>
                    <ComboBoxItem>CompactOverlay</ComboBoxItem>
                </ComboBox>
                <ComboBox Name="paneBackgroundCombobox"
                    VerticalAlignment="Center"
                    Margin="0 10 0 0"
                    Width="196"
                    Header="PaneBackground"
                    SelectionChanged="paneBackgroundCombobox_SelectionChanged"
                    SelectedIndex="0">
                    <ComboBoxItem Tag="{}{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem>
                    <ComboBoxItem Tag="Red">Red</ComboBoxItem>
                    <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
                    <ComboBoxItem Tag="Green">Green</ComboBoxItem>
                </ComboBox>
                <Slider Name="openPaneLengthSlider"
                    Margin="0 10 0 0"
                    Width="196"
                    IsFocusEngagementEnabled="False"
                    SnapsTo="StepValues"
                    StepFrequency="8"
                    Minimum="128"
                    Maximum="500"
                    Value="256"
                    Header="OpenPaneLength" />
                <Slider Name="compactPaneLengthSlider"
                    Width="196"
                    IsFocusEngagementEnabled="False"
                    SnapsTo="StepValues"
                    StepFrequency="8"
                    Minimum="24"
                    Maximum="128"
                    Value="48"
                    Header="CompactPaneLength" />
            </StackPanel>
        </Grid>
    </Grid>
</Page>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<Page x:Class="TestProject.MainPage"

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

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

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverterKey" />

<StackPanel

Margin="2 0 0 0"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Margin="20 0 0 0"

Text="{x:Bind Caption}" />

</StackPanel>

</DataTemplate>

</Page.Resources>

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<SplitView Name="splitView" Grid.Column="0"

IsPaneOpen="{x:Bind isPaneOpenToggleButton.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverterKey}}"

PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"

OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"

CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"

DisplayMode="CompactOverlay"

IsTabStop="False">

<SplitView.Pane>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

Style="{StaticResource BaseTextBlockStyle}"

Margin="60 10 0 0"

Text="창 컨텐트" />

<ListView Grid.Row="1"

ItemTemplate="{StaticResource MenuItemDataTemplateKey}"

Margin="0 10 0 0"

VerticalAlignment="Stretch"

SelectionMode="None"

IsItemClickEnabled="True"

ItemsSource="{x:Bind MenuItemCollection}"

ItemClick="menuListView_ItemClick" />

<StackPanel Grid.Row="2"

Margin="15 25 0 25"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Margin="25 0 0 0"

Text="설정" />

</StackPanel>

</Grid>

</SplitView.Pane>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

Style="{StaticResource BaseTextBlockStyle}"

Margin="10 10 0 0"

Text="SplitView 컨텐트" />

<TextBlock Name="contentTextBlock" Grid.Row="1"

Style="{StaticResource BodyTextBlockStyle}"

Margin="10 10 0 0" />

</Grid>

</SplitView>

<StackPanel Grid.Column="2"

Margin="0 0 10 0"

Spacing="10">

<ToggleButton Name="isPaneOpenToggleButton"

IsChecked="True"

Content="IsPaneOpen" />

<ToggleSwitch

Margin="0 10 0 0"

MinWidth="120"

OffContent="Left"

OnContent="Right"

Header="PanePlacement"

Toggled="panePlacementToggleSwitch_Toggled" />

<ComboBox Name="displayModeCombobox"

VerticalAlignment="Center"

Margin="0 5 0 0"

Width="196"

Header="DisplayMode"

SelectionChanged="displayModeCombobox_SelectionChanged"

SelectedIndex="0">

<ComboBoxItem>Inline</ComboBoxItem>

<ComboBoxItem>CompactInline</ComboBoxItem>

<ComboBoxItem>Overlay</ComboBoxItem>

<ComboBoxItem>CompactOverlay</ComboBoxItem>

</ComboBox>

<ComboBox Name="paneBackgroundCombobox"

VerticalAlignment="Center"

Margin="0 10 0 0"

Width="196"

Header="PaneBackground"

SelectionChanged="paneBackgroundCombobox_SelectionChanged"

SelectedIndex="0">

<ComboBoxItem Tag="{}{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem>

<ComboBoxItem Tag="Green">Green</ComboBoxItem>

</ComboBox>

<Slider Name="openPaneLengthSlider"

Margin="0 10 0 0"

Width="196"

IsFocusEngagementEnabled="False"

SnapsTo="StepValues"

StepFrequency="8"

Minimum="128"

Maximum="500"

Value="256"

Header="OpenPaneLength" />

<Slider Name="compactPaneLengthSlider"

Width="196"

IsFocusEngagementEnabled="False"

SnapsTo="StepValues"

StepFrequency="8"

Minimum="24"

Maximum="128"

Value="48"

Header="CompactPaneLength" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 메뉴 항목 컬렉션
        /// </summary>
        private ObservableCollection<MenuItem> menuItemCollection =  new ObservableCollection<MenuItem>()
        {
            new MenuItem() { Caption = "인물"  , Symbol = Symbol.People  },
            new MenuItem() { Caption = "소식"  , Symbol = Symbol.Globe   },
            new MenuItem() { Caption = "메시지", Symbol = Symbol.Message },
            new MenuItem() { Caption = "메일"  , Symbol = Symbol.Mail    }
        };

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 메뉴 항목 컬렉션 - MenuItemCollection

        /// <summary>
        /// 메뉴 항목 컬렉션
        /// </summary>
        public ObservableCollection<MenuItem> MenuItemCollection
        {
            get
            {
                return this.menuItemCollection;
            }
        }

        #endregion

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

        #region 생성자 - MainPage()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 메뉴 리스트 뷰 항목 클릭시 처리하기 - menuListView_ItemClick(sender, e)

        /// <summary>
        /// 메뉴 리스트 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void menuListView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.contentTextBlock.Text = (e.ClickedItem as MenuItem).Caption + " 페이지";
        }

        #endregion
        #region PanePlacement 토글 스위치 토글시 처리하기 - panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)

        /// <summary>
        /// PanePlacement 토글 스위치 토글시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;

            if(toggleSwitch.IsOn)
            {
                this.splitView.PanePlacement = SplitViewPanePlacement.Right;
            }
            else
            {
                this.splitView.PanePlacement = SplitViewPanePlacement.Left;
            }
        }

        #endregion
        #region DisplayMode 콤보 박스 선택 변경시 처리하기 - displayModeCombobox_SelectionChanged(sender, e)

        /// <summary>
        /// DisplayMode 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            this.splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse
            (
                typeof(SplitViewDisplayMode),
                (e.AddedItems[0] as ComboBoxItem).Content.ToString()
            );
        }

        #endregion
        #region 창 배경 콤보 박스 선택 변경시 처리하기 - paneBackgroundCombobox_SelectionChanged(sender, e)

        /// <summary>
        /// 창 배경 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorString = (e.AddedItems[0] as ComboBoxItem).Content.ToString();

            VisualStateManager.GoToState(this, colorString, false);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

using System;

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 메뉴 항목 컬렉션

/// </summary>

private ObservableCollection<MenuItem> menuItemCollection = new ObservableCollection<MenuItem>()

{

new MenuItem() { Caption = "인물" , Symbol = Symbol.People },

new MenuItem() { Caption = "소식" , Symbol = Symbol.Globe },

new MenuItem() { Caption = "메시지", Symbol = Symbol.Message },

new MenuItem() { Caption = "메일" , Symbol = Symbol.Mail }

};

#endregion

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

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

#region 메뉴 항목 컬렉션 - MenuItemCollection

/// <summary>

/// 메뉴 항목 컬렉션

/// </summary>

public ObservableCollection<MenuItem> MenuItemCollection

{

get

{

return this.menuItemCollection;

}

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 메뉴 리스트 뷰 항목 클릭시 처리하기 - menuListView_ItemClick(sender, e)

/// <summary>

/// 메뉴 리스트 뷰 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void menuListView_ItemClick(object sender, ItemClickEventArgs e)

{

this.contentTextBlock.Text = (e.ClickedItem as MenuItem).Caption + " 페이지";

}

#endregion

#region PanePlacement 토글 스위치 토글시 처리하기 - panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)

/// <summary>

/// PanePlacement 토글 스위치 토글시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)

{

ToggleSwitch toggleSwitch = sender as ToggleSwitch;

if(toggleSwitch.IsOn)

{

this.splitView.PanePlacement = SplitViewPanePlacement.Right;

}

else

{

this.splitView.PanePlacement = SplitViewPanePlacement.Left;

}

#endregion

#region DisplayMode 콤보 박스 선택 변경시 처리하기 - displayModeCombobox_SelectionChanged(sender, e)

/// <summary>

/// DisplayMode 콤보 박스 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

this.splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse

(

typeof(SplitViewDisplayMode),

(e.AddedItems[0] as ComboBoxItem).Content.ToString()

);

}

#endregion

#region 창 배경 콤보 박스 선택 변경시 처리하기 - paneBackgroundCombobox_SelectionChanged(sender, e)

/// <summary>

/// 창 배경 콤보 박스 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string colorString = (e.AddedItems[0] as ComboBoxItem).Content.ToString();

VisualStateManager.GoToState(this, colorString, false);

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Frame Name="frame" />
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

</Window>

▶

[C#/WINUI3/.NET6] RelativePanel 엘리먼트 사용하기

■ RelativePanel 엘리먼트를 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <RelativePanel
        Width="300"
        Height="300"
        Background="Beige">
        <Rectangle Name="rectangle1"
            Width="50"
            Height="50"
            Fill="Red" />
        <Rectangle Name="rectangle2"
            RelativePanel.RightOf="rectangle1"
            Margin="10 0 0 0"
            Width="50"
            Height="50"
            Fill="Blue" />
        <Rectangle Name="rectangle3"
            RelativePanel.AlignRightWithPanel="True"
            Fill="Green"
            Height="50"
            Width="50" />
        <Rectangle Name="rectangle4"
            RelativePanel.Below="rectangle3"
            RelativePanel.AlignHorizontalCenterWith="rectangle3"
            Margin="0 10 0 0"
            Fill="Yellow"
            Height="50"
            Width="50" />
    </RelativePanel>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<RelativePanel

Width="300"

Height="300"

Background="Beige">

<Rectangle Name="rectangle1"

Width="50"

Height="50"

Fill="Red" />

<Rectangle Name="rectangle2"

RelativePanel.RightOf="rectangle1"

Margin="10 0 0 0"

Width="50"

Height="50"

Fill="Blue" />

<Rectangle Name="rectangle3"

RelativePanel.AlignRightWithPanel="True"

Fill="Green"

Height="50"

Width="50" />

<Rectangle Name="rectangle4"

RelativePanel.Below="rectangle3"

RelativePanel.AlignHorizontalCenterWith="rectangle3"

Margin="0 10 0 0"

Fill="Yellow"

Height="50"

Width="50" />

</RelativePanel>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] Grid 엘리먼트 : Row/Column 첨부 속성 사용하기

■ Grid 엘리먼트의 Row/Column 첨부 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"  />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="*"  />
        </Grid.ColumnDefinitions>
        <Grid Name="Control1" Grid.Column="0"
            Width="240"
            Height="160"
            RowDefinitions ="50, Auto, *"
            ColumnDefinitions="50, Auto, *"
            Background="Gray">
            <Grid.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Width"  Value="40" />
                    <Setter Property="Height" Value="40" />
                </Style>
            </Grid.Resources>
            <Rectangle Name="Rectangle1"
                Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"
                Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"
                Width="50"
                Height="50"
                Fill="Red" />
            <Rectangle Grid.Row="1" Grid.Column="0"
                Fill="Blue" />
            <Rectangle Grid.Row="0" Grid.Column="1"
                Fill="Green" />
            <Rectangle Grid.Row="1" Grid.Column="1"
                Fill="Yellow" />
        </Grid>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Orientation="Horizontal">
            <Slider Name="rowSlider"
                VerticalAlignment="Top"
                Height="110"
                Minimum="0"
                Maximum="2"
                StepFrequency="1"
                Orientation="Vertical"
                IsDirectionReversed="True"
                TickFrequency="1"
                SnapsTo="Ticks">
                <Slider.Header>
                    <TextBlock
                        Margin="0 0 0 10"
                        Text="Grid.Row" />
                </Slider.Header>
            </Slider>
            <Slider Name="columnSlider"
                Margin="15 0 0 0"
                Width="100"
                Header="Grid.Column"
                Minimum="0"
                Maximum="2"
                StepFrequency="1"
                TickFrequency="1"
                SnapsTo="Ticks" />
        </StackPanel>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Name="Control1" Grid.Column="0"

Width="240"

Height="160"

RowDefinitions ="50, Auto, *"

ColumnDefinitions="50, Auto, *"

Background="Gray">

<Grid.Resources>

</Style>

</Grid.Resources>

<Rectangle Name="Rectangle1"

Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"

Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"

Width="50"

Height="50"

Fill="Red" />

<Rectangle Grid.Row="1" Grid.Column="0"

Fill="Blue" />

<Rectangle Grid.Row="0" Grid.Column="1"

Fill="Green" />

<Rectangle Grid.Row="1" Grid.Column="1"

Fill="Yellow" />

</Grid>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Slider Name="rowSlider"

VerticalAlignment="Top"

Height="110"

Minimum="0"

Maximum="2"

StepFrequency="1"

Orientation="Vertical"

IsDirectionReversed="True"

TickFrequency="1"

SnapsTo="Ticks">

<Slider.Header>

<TextBlock

Margin="0 0 0 10"

Text="Grid.Row" />

</Slider.Header>

</Slider>

<Slider Name="columnSlider"

Margin="15 0 0 0"

Width="100"

Header="Grid.Column"

Minimum="0"

Maximum="2"

StepFrequency="1"

TickFrequency="1"

SnapsTo="Ticks" />

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] ItemsRepeater 엘리먼트 : 필터링/정렬 기능 사용하기

■ ItemsRepeater 엘리먼트에서 필터링/정렬 기능을 사용하는 방법을 보여준다. ▶ Recipe.cs


using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;

namespace TestProject
{
    /// <summary>
    /// 레시피
    /// </summary>
    public class Recipe
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 번호 - Number

        /// <summary>
        /// 번호
        /// </summary>
        public int Number { get; set; }

        #endregion
        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 색상 - Color

        /// <summary>
        /// 색상
        /// </summary>
        public string Color { get; set; }

        #endregion
        #region 재료 리스트 - IngrdientList

        /// <summary>
        /// 재료 리스트
        /// </summary>
        public List<string> IngrdientList { get; set; }

        #endregion
        #region 재료 리스트 - Ingredients

        /// <summary>
        /// 재료 리스트
        /// </summary>
        public string Ingredients { get; set; }

        #endregion
        #region 재료 수 - IngredientCount

        /// <summary>
        /// 재료 수
        /// </summary>
        public int IngredientCount
        {
            get
            {
                return IngrdientList.Count();
            }
        }

        #endregion


        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 재료 임의로 추가하기 - RandomizeIngredients()

        /// <summary>
        /// 재료 임의로 추가하기
        /// </summary>
        public void RandomizeIngredients()
        {
            Random numberRandom     = new Random();
            Random ingredientRandom = new Random();

            ObservableCollection<string> collection = new ObservableCollection<string>
            {
                "Garlic",
                "Lemon",
                "Butter",
                "Lime",
                "Feta Cheese",
                "Parmesan Cheese",
                "Breadcrumbs"
            };

            for(int i = 0; i < numberRandom.Next(0, 4); i++)
            {
                string newIngredient = collection[ingredientRandom.Next(0, 6)];

                if(!IngrdientList.Contains(newIngredient))
                {
                    Ingredients += "\n" + newIngredient;

                    IngrdientList.Add(newIngredient);
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

namespace TestProject

{

/// <summary>

/// 레시피

/// </summary>

public class Recipe

{

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

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

#region 번호 - Number

/// <summary>

/// 번호

/// </summary>

public int Number { get; set; }

#endregion

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 색상 - Color

/// <summary>

/// 색상

/// </summary>

public string Color { get; set; }

#endregion

#region 재료 리스트 - IngrdientList

/// <summary>

/// 재료 리스트

/// </summary>

public List<string> IngrdientList { get; set; }

#endregion

#region 재료 리스트 - Ingredients

/// <summary>

/// 재료 리스트

/// </summary>

public string Ingredients { get; set; }

#endregion

#region 재료 수 - IngredientCount

/// <summary>

/// 재료 수

/// </summary>

public int IngredientCount

{

get

{

return IngrdientList.Count();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region 재료 임의로 추가하기 - RandomizeIngredients()

/// <summary>

/// 재료 임의로 추가하기

/// </summary>

public void RandomizeIngredients()

{

Random numberRandom = new Random();

Random ingredientRandom = new Random();

ObservableCollection<string> collection = new ObservableCollection<string>

{

"Garlic",

"Lemon",

"Butter",

"Lime",

"Feta Cheese",

"Parmesan Cheese",

"Breadcrumbs"

};

for(int i = 0; i < numberRandom.Next(0, 4); i++)

{

string newIngredient = collection[ingredientRandom.Next(0, 6)];

if(!IngrdientList.Contains(newIngredient))

{

Ingredients += "\n" + newIngredient;

IngrdientList.Add(newIngredient);

}

#endregion

}

▶ RecipeList.cs


using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.Specialized;

using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 레시피 리스트
    /// </summary>
    public class RecipeList : IList, IKeyIndexMapping, INotifyCollectionChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 컬렉션 변경시 - CollectionChanged

        /// <summary>
        /// 컬렉션 변경시
        /// </summary>
        public event NotifyCollectionChangedEventHandler CollectionChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 내부 리스트
        /// </summary>
        private List<Recipe> innerList = new List<Recipe>();

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region (IList) 카운트 - Count

        /// <summary>
        /// 카운트
        /// </summary>
        public int Count => this.innerList != null ? this.innerList.Count : 0;

        #endregion
        #region (IList) 인덱서 - this[index]

        /// <summary>
        /// 인덱서
        /// </summary>
        /// <param name="index">인덱스</param>
        /// <returns>레시피</returns>
        public object this[int index]
        {
            get
            {
                return this.innerList[index] as Recipe;
            }

            set
            {
                this.innerList[index] = (Recipe)value;
            }
        }

        #endregion

        #region (IList) 고정 크기 여부 - IsFixedSize

        /// <summary>
        /// 고정 크기 여부
        /// </summary>
        public bool IsFixedSize => throw new NotImplementedException();

        #endregion
        #region (IList) 읽기 전용 여부 - IsReadOnly

        /// <summary>
        /// 읽기 전용 여부
        /// </summary>
        public bool IsReadOnly => throw new NotImplementedException();

        #endregion
        #region (IList) 동기화 여부 - IsSynchronized

        /// <summary>
        /// 동기화 여부
        /// </summary>
        public bool IsSynchronized => throw new NotImplementedException();

        #endregion
        #region (IList) 동기 루트 - SyncRoot

        /// <summary>
        /// 동기 루트
        /// </summary>
        public object SyncRoot => throw new NotImplementedException();

        #endregion

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

        #region 생성자 - RecipeList(recipeEnumerable)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="recipeEnumerable">레시피 열거 가능형</param>
        public RecipeList(IEnumerable<Recipe> recipeEnumerable)
        {
            InitializeCollection(recipeEnumerable);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 컬렉션 초기화하기 - InitializeCollection(recipeEnumerable)

        /// <summary>
        /// 컬렉션 초기화하기
        /// </summary>
        /// <param name="recipeEnumerable">레시피 열거 가능형</param>
        public void InitializeCollection(IEnumerable<Recipe> recipeEnumerable)
        {
            this.innerList.Clear();

            if(recipeEnumerable != null)
            {
                this.innerList.AddRange(recipeEnumerable);
            }

            CollectionChanged?.Invoke(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
        }

        #endregion

        #region (IList) 열거자 구하기 - GetEnumerator()

        /// <summary>
        /// 열거자 구하기
        /// </summary>
        /// <returns>열거자</returns>
        public IEnumerator<Recipe> GetEnumerator() => this.innerList.GetEnumerator();

        #endregion
        #region (IList) 열거자 구하기 - IEnumerable.GetEnumerator()

        /// <summary>
        /// 열거자 구하기
        /// </summary>
        /// <returns>열거자</returns>
        IEnumerator IEnumerable.GetEnumerator()
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 추가하기 - Add(value)

        /// <summary>
        /// 추가하기
        /// </summary>
        /// <param name="value">값</param>
        /// <returns>인덱스</returns>
        public int Add(object value)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 지우기 - Clear()

        /// <summary>
        /// 지우기
        /// </summary>
        public void Clear()
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 포함 여부 구하기 - Contains(value)

        /// <summary>
        /// 포함 여부 구하기
        /// </summary>
        /// <param name="value">값</param>
        /// <returns>포함 여부</returns>
        public bool Contains(object value)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 인덱스 구하기 - IndexOf(value)

        /// <summary>
        /// 인덱스 구하기
        /// </summary>
        /// <param name="value">값</param>
        /// <returns>인덱스</returns>
        public int IndexOf(object value)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 삽입하기 - Insert(index, value)

        /// <summary>
        /// 삽입하기
        /// </summary>
        /// <param name="index">인덱스</param>
        /// <param name="value">값</param>
        public void Insert(int index, object value)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 제거하기 - Remove(value)

        /// <summary>
        /// 제거하기
        /// </summary>
        /// <param name="value">값</param>
        public void Remove(object value)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 제거하기 - RemoveAt(index)

        /// <summary>
        /// 제거하기
        /// </summary>
        /// <param name="index">인덱스</param>
        public void RemoveAt(int index)
        {
            throw new NotImplementedException();
        }

        #endregion
        #region (IList) 복사하기 - CopyTo(array, index)

        /// <summary>
        /// 복사하기
        /// </summary>
        /// <param name="array">배열</param>
        /// <param name="index">인덱스</param>
        public void CopyTo(Array array, int index)
        {
            throw new NotImplementedException();
        }

        #endregion

        #region (IKeyIndexMapping) 인덱스에서 키 구하기 - KeyFromIndex(index)

        /// <summary>
        /// 인덱스에서 키 구하기
        /// </summary>
        /// <param name="index">인덱스</param>
        /// <returns>키</returns>
        public string KeyFromIndex(int index)
        {
            return this.innerList[index].Number.ToString();
        }

        #endregion
        #region (IKeyIndexMapping) 키에서 인덱스 구하기 - IndexFromKey(key)

        /// <summary>
        /// 키에서 인덱스 구하기
        /// </summary>
        /// <param name="key">키</param>
        /// <returns>인덱스</returns>
        public int IndexFromKey(string key)
        {
           foreach(Recipe recipe in this.innerList)
           {
                if(recipe.Number.ToString() == key)
                {
                    return this.innerList.IndexOf(recipe);
                }
           }

           return -1;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

using System;

using System.Collections;

using System.Collections.Generic;

using System.Collections.Specialized;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 레시피 리스트

/// </summary>

public class RecipeList : IList, IKeyIndexMapping, INotifyCollectionChanged

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

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

#region 컬렉션 변경시 - CollectionChanged

/// <summary>

/// 컬렉션 변경시

/// </summary>

public event NotifyCollectionChangedEventHandler CollectionChanged;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 내부 리스트

/// </summary>

private List<Recipe> innerList = new List<Recipe>();

#endregion

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

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

#region (IList) 카운트 - Count

/// <summary>

/// 카운트

/// </summary>

public int Count => this.innerList != null ? this.innerList.Count : 0;

#endregion

#region (IList) 인덱서 - this[index]

/// <summary>

/// 인덱서

/// </summary>

/// <param name="index">인덱스</param>

/// <returns>레시피</returns>

public object this[int index]

{

get

{

return this.innerList[index] as Recipe;

}

set

{

this.innerList[index] = (Recipe)value;

}

#endregion

#region (IList) 고정 크기 여부 - IsFixedSize

/// <summary>

/// 고정 크기 여부

/// </summary>

public bool IsFixedSize => throw new NotImplementedException();

#endregion

#region (IList) 읽기 전용 여부 - IsReadOnly

/// <summary>

/// 읽기 전용 여부

/// </summary>

public bool IsReadOnly => throw new NotImplementedException();

#endregion

#region (IList) 동기화 여부 - IsSynchronized

/// <summary>

/// 동기화 여부

/// </summary>

public bool IsSynchronized => throw new NotImplementedException();

#endregion

#region (IList) 동기 루트 - SyncRoot

/// <summary>

/// 동기 루트

/// </summary>

public object SyncRoot => throw new NotImplementedException();

#endregion

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

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

#region 생성자 - RecipeList(recipeEnumerable)

/// <summary>

/// 생성자

/// </summary>

/// <param name="recipeEnumerable">레시피 열거 가능형</param>

public RecipeList(IEnumerable<Recipe> recipeEnumerable)

{

InitializeCollection(recipeEnumerable);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region 컬렉션 초기화하기 - InitializeCollection(recipeEnumerable)

/// <summary>

/// 컬렉션 초기화하기

/// </summary>

/// <param name="recipeEnumerable">레시피 열거 가능형</param>

public void InitializeCollection(IEnumerable<Recipe> recipeEnumerable)

{

this.innerList.Clear();

if(recipeEnumerable != null)

{

this.innerList.AddRange(recipeEnumerable);

}

CollectionChanged?.Invoke(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));

}

#endregion

#region (IList) 열거자 구하기 - GetEnumerator()

/// <summary>

/// 열거자 구하기

/// </summary>

/// <returns>열거자</returns>

public IEnumerator<Recipe> GetEnumerator() => this.innerList.GetEnumerator();

#endregion

#region (IList) 열거자 구하기 - IEnumerable.GetEnumerator()

/// <summary>

/// 열거자 구하기

/// </summary>

/// <returns>열거자</returns>

IEnumerator IEnumerable.GetEnumerator()

{

throw new NotImplementedException();

}

#endregion

#region (IList) 추가하기 - Add(value)

/// <summary>

/// 추가하기

/// </summary>

/// <param name="value">값</param>

/// <returns>인덱스</returns>

public int Add(object value)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 지우기 - Clear()

/// <summary>

/// 지우기

/// </summary>

public void Clear()

{

throw new NotImplementedException();

}

#endregion

#region (IList) 포함 여부 구하기 - Contains(value)

/// <summary>

/// 포함 여부 구하기

/// </summary>

/// <param name="value">값</param>

/// <returns>포함 여부</returns>

public bool Contains(object value)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 인덱스 구하기 - IndexOf(value)

/// <summary>

/// 인덱스 구하기

/// </summary>

/// <param name="value">값</param>

/// <returns>인덱스</returns>

public int IndexOf(object value)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 삽입하기 - Insert(index, value)

/// <summary>

/// 삽입하기

/// </summary>

/// <param name="index">인덱스</param>

/// <param name="value">값</param>

public void Insert(int index, object value)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 제거하기 - Remove(value)

/// <summary>

/// 제거하기

/// </summary>

/// <param name="value">값</param>

public void Remove(object value)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 제거하기 - RemoveAt(index)

/// <summary>

/// 제거하기

/// </summary>

/// <param name="index">인덱스</param>

public void RemoveAt(int index)

{

throw new NotImplementedException();

}

#endregion

#region (IList) 복사하기 - CopyTo(array, index)

/// <summary>

/// 복사하기

/// </summary>

/// <param name="array">배열</param>

/// <param name="index">인덱스</param>

public void CopyTo(Array array, int index)

{

throw new NotImplementedException();

}

#endregion

#region (IKeyIndexMapping) 인덱스에서 키 구하기 - KeyFromIndex(index)

/// <summary>

/// 인덱스에서 키 구하기

/// </summary>

/// <param name="index">인덱스</param>

/// <returns>키</returns>

public string KeyFromIndex(int index)

{

return this.innerList[index].Number.ToString();

}

#endregion

#region (IKeyIndexMapping) 키에서 인덱스 구하기 - IndexFromKey(key)

/// <summary>

/// 키에서 인덱스 구하기

/// </summary>

/// <param name="key">키</param>

/// <returns>인덱스</returns>

public int IndexFromKey(string key)

{

foreach(Recipe recipe in this.innerList)

{

if(recipe.Number.ToString() == key)

{

return this.innerList.IndexOf(recipe);

}

return -1;

}

#endregion

}

▶ CustomVirtualizingLayout.cs


using System;
using System.Collections.Generic;
using System.Collections.Specialized;

using Windows.Foundation;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 커스텀 가상화 레이아웃
    /// </summary>
    public class CustomVirtualizingLayout : VirtualizingLayout
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 첫번째 인덱스
        /// </summary>
        private int firstIndex = 0;

        /// <summary>
        /// 마지막 인덱스
        /// </summary>
        private int lastIndex = 0;

        /// <summary>
        /// 마지막 이용 가능한 너비
        /// </summary>
        private double lastAvailableWidth = 0.0;

        /// <summary>
        /// 컬럼 오프셋 리스트
        /// </summary>
        private List<double> columnOffsetList = new List<double>();

        /// <summary>
        /// 캐시 테두리 사각형 리스트
        /// </summary>
        private List<Rect> cachedBoundRectangleList = new List<Rect>();

        /// <summary>
        /// 캐시 테두리 사각형 무효화 여부
        /// </summary>
        private bool cachedBoundRectangleInvalid = false;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 너비 - Width

        /// <summary>
        /// 너비
        /// </summary>
        public double Width { get; set; } = 150;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 항목 변경시 처리하기 (코어) - OnItemsChangedCore(context, source, e)

        /// <summary>
        /// 항목 변경시 처리하기 (코어)
        /// </summary>
        /// <param name="context">컨텍스트</param>
        /// <param name="source">소스</param>
        /// <param name="e">이벤트 인자</param>
        protected override void OnItemsChangedCore(VirtualizingLayoutContext context, object source, NotifyCollectionChangedEventArgs e)
        {
            this.cachedBoundRectangleList.Clear();

            this.firstIndex = 0;
            this.lastIndex  = 0;

            this.cachedBoundRectangleInvalid = true;

            InvalidateMeasure();
        }

        #endregion
        #region 측정하기 (오버라이드) - MeasureOverride(context, availableSize)

        /// <summary>
        /// 측정하기 (오버라이드)
        /// </summary>
        /// <param name="context">컨텍스트</param>
        /// <param name="availableSize">이용 가능한 크기</param>
        /// <returns>측정 크기</returns>
        protected override Size MeasureOverride(VirtualizingLayoutContext context, Size availableSize)
        {
            Rect viewportRectangle = context.RealizationRect;

            if(availableSize.Width != this.lastAvailableWidth || this.cachedBoundRectangleInvalid)
            {
                UpdateCachedBoundRectangle(availableSize);

                this.lastAvailableWidth = availableSize.Width;
            }

            int columnCount = Math.Max(1, (int)(availableSize.Width / Width));

            if(this.columnOffsetList.Count == 0)
            {
                for(int i = 0; i < columnCount; i++)
                {
                    this.columnOffsetList.Add(0);
                }
            }

            this.firstIndex = GetStartIndex(viewportRectangle);

            int currentIndex = firstIndex;

            double nextOffset = -1.0;

            while(currentIndex < context.ItemCount && nextOffset < viewportRectangle.Bottom)
            {
                UIElement childElement = context.GetOrCreateElementAt(currentIndex);

                childElement.Measure(new Size(Width, availableSize.Height));

                if(currentIndex >= cachedBoundRectangleList.Count)
                {
                    int columnIndex = GetIndexOfLowestColumn(columnOffsetList, out nextOffset);

                    this.cachedBoundRectangleList.Add
                    (
                        new Rect
                        (
                            columnIndex * Width,
                            nextOffset,
                            Width,
                            childElement.DesiredSize.Height
                        )
                    );

                    this.columnOffsetList[columnIndex] += childElement.DesiredSize.Height;
                }
                else
                {
                    if(currentIndex + 1 == this.cachedBoundRectangleList.Count)
                    {
                        GetIndexOfLowestColumn(this.columnOffsetList, out nextOffset);
                    }
                    else
                    {
                        nextOffset = this.cachedBoundRectangleList[currentIndex + 1].Top;
                    }
                }

                this.lastIndex = currentIndex;

                currentIndex++;
            }

            Size extentSize = GetExtentSize(availableSize);

            return extentSize;
        }

        #endregion
        #region 배열하기 (오버라이드) - ArrangeOverride(context, finalSize)

        /// <summary>
        /// 배열하기 (오버라이드)
        /// </summary>
        /// <param name="context">컨텍스트</param>
        /// <param name="finalSize">최종 크기</param>
        /// <returns>배열 크기</returns>
        protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size finalSize)
        {
            if(this.cachedBoundRectangleList.Count > 0)
            {
                for(int index = firstIndex; index <= lastIndex; index++)
                {
                    UIElement childElement = context.GetOrCreateElementAt(index);

                    childElement.Arrange(this.cachedBoundRectangleList[index]);
                }
            }

            return finalSize;
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 캐시 테두리 사각형 업데이트하기 - UpdateCachedBoundRectangle(availableSize)

        /// <summary>
        /// 캐시 테두리 사각형 업데이트하기
        /// </summary>
        /// <param name="availableSize">이용 가능한 크기</param>
        private void UpdateCachedBoundRectangle(Size availableSize)
        {
            int columnCount = Math.Max(1, (int)(availableSize.Width / Width));

            this.columnOffsetList.Clear();

            for(int i = 0; i < columnCount; i++)
            {
                this.columnOffsetList.Add(0);
            }

            for(int index = 0; index < this.cachedBoundRectangleList.Count; index++)
            {
                int columnIndex = GetIndexOfLowestColumn(this.columnOffsetList, out var nextOffset);

                double previousHeight = this.cachedBoundRectangleList[index].Height;

                this.cachedBoundRectangleList[index] = new Rect(columnIndex * Width, nextOffset, Width, previousHeight);

                this.columnOffsetList[columnIndex] += previousHeight;
            }

            this.cachedBoundRectangleInvalid = false;
        }

        #endregion
        #region 시작 인덱스 구하기 - GetStartIndex(viewportRectangle)

        /// <summary>
        /// 시작 인덱스 구하기
        /// </summary>
        /// <param name="viewportRectangle">뷰포트 사각형</param>
        /// <returns>시작 인덱스</returns>
        private int GetStartIndex(Rect viewportRectangle)
        {
            int startIndex = 0;

            if(this.cachedBoundRectangleList.Count == 0)
            {
                startIndex = 0;
            }
            else
            {
                for(int i = 0; i < this.cachedBoundRectangleList.Count; i++)
                {
                    Rect currentBoundRectangle = this.cachedBoundRectangleList[i];

                    if(currentBoundRectangle.Y < viewportRectangle.Bottom && currentBoundRectangle.Bottom > viewportRectangle.Top)
                    {
                        startIndex = i;

                        break;
                    }
                }
            }

            return startIndex;
        }

        #endregion
        #region 가장 낮은 컬럼 인덱스 구하기 - GetIndexOfLowestColumn(columnOffsetList, lowestOffset)

        /// <summary>
        /// 가장 낮은 컬럼 인덱스 구하기
        /// </summary>
        /// <param name="columnOffsetList">컬럼 오프셋 리스트</param>
        /// <param name="lowestOffset">가장 낮은 오프셋</param>
        /// <returns>가장 낮은 컬럼 인덱스</returns>
        private int GetIndexOfLowestColumn(List<double> columnOffsetList, out double lowestOffset)
        {
            int lowestIndex = 0;

            lowestOffset = columnOffsetList[lowestIndex];

            for(int index = 0; index < columnOffsetList.Count; index++)
            {
                double currentOffset = columnOffsetList[index];

                if(lowestOffset > currentOffset)
                {
                    lowestOffset = currentOffset;

                    lowestIndex = index;
                }
            }

            return lowestIndex;
        }

        #endregion
        #region 범위 크기 구하기 - GetExtentSize(availableSize)

        /// <summary>
        /// 범위 크기 구하기
        /// </summary>
        /// <param name="availableSize">이용 가능한 크기</param>
        /// <returns>범위 크기</returns>
        private Size GetExtentSize(Size availableSize)
        {
            double largestColumnOffset = this.columnOffsetList[0];

            for(int index = 0; index < this.columnOffsetList.Count; index++)
            {
                double currentOffset = this.columnOffsetList[index];

                if(largestColumnOffset < currentOffset)
                {
                    largestColumnOffset = currentOffset;
                }
            }

            return new Size(availableSize.Width, largestColumnOffset);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

using System;

using System.Collections.Generic;

using System.Collections.Specialized;

using Windows.Foundation;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 커스텀 가상화 레이아웃

/// </summary>

public class CustomVirtualizingLayout : VirtualizingLayout

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 첫번째 인덱스

/// </summary>

private int firstIndex = 0;

/// <summary>

/// 마지막 인덱스

/// </summary>

private int lastIndex = 0;

/// <summary>

/// 마지막 이용 가능한 너비

/// </summary>

private double lastAvailableWidth = 0.0;

/// <summary>

/// 컬럼 오프셋 리스트

/// </summary>

private List<double> columnOffsetList = new List<double>();

/// <summary>

/// 캐시 테두리 사각형 리스트

/// </summary>

private List<Rect> cachedBoundRectangleList = new List<Rect>();

/// <summary>

/// 캐시 테두리 사각형 무효화 여부

/// </summary>

private bool cachedBoundRectangleInvalid = false;

#endregion

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

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

#region 너비 - Width

/// <summary>

/// 너비

/// </summary>

public double Width { get; set; } = 150;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 항목 변경시 처리하기 (코어) - OnItemsChangedCore(context, source, e)

/// <summary>

/// 항목 변경시 처리하기 (코어)

/// </summary>

/// <param name="context">컨텍스트</param>

/// <param name="source">소스</param>

/// <param name="e">이벤트 인자</param>

protected override void OnItemsChangedCore(VirtualizingLayoutContext context, object source, NotifyCollectionChangedEventArgs e)

{

this.cachedBoundRectangleList.Clear();

this.firstIndex = 0;

this.lastIndex = 0;

this.cachedBoundRectangleInvalid = true;

InvalidateMeasure();

}

#endregion

#region 측정하기 (오버라이드) - MeasureOverride(context, availableSize)

/// <summary>

/// 측정하기 (오버라이드)

/// </summary>

/// <param name="context">컨텍스트</param>

/// <param name="availableSize">이용 가능한 크기</param>

/// <returns>측정 크기</returns>

protected override Size MeasureOverride(VirtualizingLayoutContext context, Size availableSize)

{

Rect viewportRectangle = context.RealizationRect;

if(availableSize.Width != this.lastAvailableWidth || this.cachedBoundRectangleInvalid)

{

UpdateCachedBoundRectangle(availableSize);

this.lastAvailableWidth = availableSize.Width;

}

int columnCount = Math.Max(1, (int)(availableSize.Width / Width));

if(this.columnOffsetList.Count == 0)

{

for(int i = 0; i < columnCount; i++)

{

this.columnOffsetList.Add(0);

}

this.firstIndex = GetStartIndex(viewportRectangle);

int currentIndex = firstIndex;

double nextOffset = -1.0;

while(currentIndex < context.ItemCount && nextOffset < viewportRectangle.Bottom)

{

UIElement childElement = context.GetOrCreateElementAt(currentIndex);

childElement.Measure(new Size(Width, availableSize.Height));

if(currentIndex >= cachedBoundRectangleList.Count)

{

int columnIndex = GetIndexOfLowestColumn(columnOffsetList, out nextOffset);

this.cachedBoundRectangleList.Add

(

new Rect

(

columnIndex * Width,

nextOffset,

Width,

childElement.DesiredSize.Height

)

);

this.columnOffsetList[columnIndex] += childElement.DesiredSize.Height;

}

else

{

if(currentIndex + 1 == this.cachedBoundRectangleList.Count)

{

GetIndexOfLowestColumn(this.columnOffsetList, out nextOffset);

}

else

{

nextOffset = this.cachedBoundRectangleList[currentIndex + 1].Top;

}

this.lastIndex = currentIndex;

currentIndex++;

}

Size extentSize = GetExtentSize(availableSize);

return extentSize;

}

#endregion

#region 배열하기 (오버라이드) - ArrangeOverride(context, finalSize)

/// <summary>

/// 배열하기 (오버라이드)

/// </summary>

/// <param name="context">컨텍스트</param>

/// <param name="finalSize">최종 크기</param>

/// <returns>배열 크기</returns>

protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size finalSize)

{

if(this.cachedBoundRectangleList.Count > 0)

{

for(int index = firstIndex; index <= lastIndex; index++)

{

UIElement childElement = context.GetOrCreateElementAt(index);

childElement.Arrange(this.cachedBoundRectangleList[index]);

}

return finalSize;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 캐시 테두리 사각형 업데이트하기 - UpdateCachedBoundRectangle(availableSize)

/// <summary>

/// 캐시 테두리 사각형 업데이트하기

/// </summary>

/// <param name="availableSize">이용 가능한 크기</param>

private void UpdateCachedBoundRectangle(Size availableSize)

{

int columnCount = Math.Max(1, (int)(availableSize.Width / Width));

this.columnOffsetList.Clear();

for(int i = 0; i < columnCount; i++)

{

this.columnOffsetList.Add(0);

}

for(int index = 0; index < this.cachedBoundRectangleList.Count; index++)

{

int columnIndex = GetIndexOfLowestColumn(this.columnOffsetList, out var nextOffset);

double previousHeight = this.cachedBoundRectangleList[index].Height;

this.cachedBoundRectangleList[index] = new Rect(columnIndex * Width, nextOffset, Width, previousHeight);

this.columnOffsetList[columnIndex] += previousHeight;

}

this.cachedBoundRectangleInvalid = false;

}

#endregion

#region 시작 인덱스 구하기 - GetStartIndex(viewportRectangle)

/// <summary>

/// 시작 인덱스 구하기

/// </summary>

/// <param name="viewportRectangle">뷰포트 사각형</param>

/// <returns>시작 인덱스</returns>

private int GetStartIndex(Rect viewportRectangle)

{

int startIndex = 0;

if(this.cachedBoundRectangleList.Count == 0)

{

startIndex = 0;

}

else

{

for(int i = 0; i < this.cachedBoundRectangleList.Count; i++)

{

Rect currentBoundRectangle = this.cachedBoundRectangleList[i];

if(currentBoundRectangle.Y < viewportRectangle.Bottom && currentBoundRectangle.Bottom > viewportRectangle.Top)

{

startIndex = i;

break;

}

return startIndex;

}

#endregion

#region 가장 낮은 컬럼 인덱스 구하기 - GetIndexOfLowestColumn(columnOffsetList, lowestOffset)

/// <summary>

/// 가장 낮은 컬럼 인덱스 구하기

/// </summary>

/// <param name="columnOffsetList">컬럼 오프셋 리스트</param>

/// <param name="lowestOffset">가장 낮은 오프셋</param>

/// <returns>가장 낮은 컬럼 인덱스</returns>

private int GetIndexOfLowestColumn(List<double> columnOffsetList, out double lowestOffset)

{

int lowestIndex = 0;

lowestOffset = columnOffsetList[lowestIndex];

for(int index = 0; index < columnOffsetList.Count; index++)

{

double currentOffset = columnOffsetList[index];

if(lowestOffset > currentOffset)

{

lowestOffset = currentOffset;

lowestIndex = index;

}

return lowestIndex;

}

#endregion

#region 범위 크기 구하기 - GetExtentSize(availableSize)

/// <summary>

/// 범위 크기 구하기

/// </summary>

/// <param name="availableSize">이용 가능한 크기</param>

/// <returns>범위 크기</returns>

private Size GetExtentSize(Size availableSize)

{

double largestColumnOffset = this.columnOffsetList[0];

for(int index = 0; index < this.columnOffsetList.Count; index++)

{

double currentOffset = this.columnOffsetList[index];

if(largestColumnOffset < currentOffset)

{

largestColumnOffset = currentOffset;

}

return new Size(availableSize.Width, largestColumnOffset);

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.Resources>
            <DataTemplate x:Key="RecipeDataTemplateKey" x:DataType="local:Recipe">
                <StackPanel
                    Margin="5"
                    BorderThickness="1"
                    Background="{ThemeResource SystemControlBackgroundBaseLowBrush}">
                    <StackPanel
                        Margin="10"
                        Height="75"
                        Background="{x:Bind Color}"
                        Opacity="0.8">
                        <TextBlock
                            Padding="10"
                            Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                            FontSize="35"
                            TextAlignment="Center"
                            Text="{x:Bind Number.ToString()}" />
                    </StackPanel>
                    <TextBlock
                        Style="{StaticResource TitleTextBlockStyle}"
                        Margin="15 0 10 0"
                        TextWrapping="Wrap"
                        Text="{x:Bind Name}" />
                    <TextBlock
                        Style="{StaticResource BodyTextBlockStyle}"
                        Margin="15 0 15 15"
                        Text="{x:Bind Ingredients}" />
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ItemsRepeaterScrollHost Grid.Column="0">
            <ScrollViewer>
                <ItemsRepeater Name="itemsRepeater"
                    ItemTemplate="{StaticResource RecipeDataTemplateKey}">
                    <ItemsRepeater.Layout>
                        <local:CustomVirtualizingLayout Width="200" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </ScrollViewer>
        </ItemsRepeaterScrollHost>
        <StackPanel Grid.Column="2">
            <TextBox Name="filterTextBox"
                HorizontalAlignment="Left"
                Width="200"
                Header="Filter by ingredient..." />
            <TextBlock Margin="0 10 0 0">Enable Animations</TextBlock>
            <CheckBox Name="enableAnimationCheckBox"
                Margin="0 10 0 0"
                Content="Enable animations" />
            <TextBlock
                Margin="0 10 0 0"
                Text="Sort by number of ingredients" />
            <Button Name="sortAscendingButton"
                Margin="0 10 0 0"
                Content="Least to most" />
            <Button Name="sortDescendingButton"
                Margin="0 10 0 0"
                Content="Most to least" />
        </StackPanel>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.Resources>

<StackPanel

Margin="5"

BorderThickness="1"

Background="{ThemeResource SystemControlBackgroundBaseLowBrush}">

<StackPanel

Margin="10"

Height="75"

Background="{x:Bind Color}"

Opacity="0.8">

<TextBlock

Padding="10"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

FontSize="35"

TextAlignment="Center"

Text="{x:Bind Number.ToString()}" />

</StackPanel>

<TextBlock

Style="{StaticResource TitleTextBlockStyle}"

Margin="15 0 10 0"

TextWrapping="Wrap"

Text="{x:Bind Name}" />

<TextBlock

Style="{StaticResource BodyTextBlockStyle}"

Margin="15 0 15 15"

Text="{x:Bind Ingredients}" />

</StackPanel>

</DataTemplate>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ItemsRepeater Name="itemsRepeater"

ItemTemplate="{StaticResource RecipeDataTemplateKey}">

<ItemsRepeater.Layout>

<local:CustomVirtualizingLayout Width="200" />

</ItemsRepeater.Layout>

</ItemsRepeater>

</ScrollViewer>

</ItemsRepeaterScrollHost>

<TextBox Name="filterTextBox"

HorizontalAlignment="Left"

Width="200"

Header="Filter by ingredient..." />

<TextBlock Margin="0 10 0 0">Enable Animations</TextBlock>

<CheckBox Name="enableAnimationCheckBox"

Margin="0 10 0 0"

Content="Enable animations" />

<TextBlock

Margin="0 10 0 0"

Text="Sort by number of ingredients" />

<Button Name="sortAscendingButton"

Margin="0 10 0 0"

Content="Least to most" />

<Button Name="sortDescendingButton"

Margin="0 10 0 0"

Content="Most to least" />

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs

[C#/WINUI3/.NET6] ItemsRepeater 엘리먼트 : ItemTemplate 속성에서 DateTemplate 객체 내에 ItemsRepeater 객체를 사용해 그룹화된 항목 표시하기 1

■ ItemsRepeater 엘리먼트의 ItemTemplate 속성에서 DateTemplate 객체 내에 ItemsRepeater 객체를 사용해 그룹화된 항목을 표시하는 방법을 보여준다. ▶ Category.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 카테고리
    /// </summary>
    public class Category
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 카테고리명 - CategoryName

        /// <summary>
        /// 카테고리명
        /// </summary>
        public string CategoryName { get; set; }

        #endregion
        #region 카테고리 항목 컬렉션 - CategoryItemCollection

        /// <summary>
        /// 카테고리 항목 컬렉션
        /// </summary>
        public ObservableCollection<string> CategoryItemCollection { get; set; }

        #endregion

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

        #region 생성자 - Category(categoryName, categoryItemCollection)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="categoryName">카테고리명</param>
        /// <param name="categoryItemCollection">카테고리 항목 컬렉션</param>
        public Category(string categoryName, ObservableCollection<string> categoryItemCollection)
        {
            CategoryName           = categoryName;
            CategoryItemCollection = categoryItemCollection;
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 카테고리

/// </summary>

public class Category

{

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

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

#region 카테고리명 - CategoryName

/// <summary>

/// 카테고리명

/// </summary>

public string CategoryName { get; set; }

#endregion

#region 카테고리 항목 컬렉션 - CategoryItemCollection

/// <summary>

/// 카테고리 항목 컬렉션

/// </summary>

public ObservableCollection<string> CategoryItemCollection { get; set; }

#endregion

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

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

#region 생성자 - Category(categoryName, categoryItemCollection)

/// <summary>

/// 생성자

/// </summary>

/// <param name="categoryName">카테고리명</param>

/// <param name="categoryItemCollection">카테고리 항목 컬렉션</param>

public Category(string categoryName, ObservableCollection<string> categoryItemCollection)

{

CategoryName = categoryName;

CategoryItemCollection = categoryItemCollection;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.Resources>
            <DataTemplate x:Key="StringDataTemplateKey" x:DataType="x:String">
                <Grid
                    Margin="10"
                    Background="{ThemeResource SystemControlBackgroundAccentBrush}">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Padding="10"
                        Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"
                        TextWrapping="Wrap"
                        Text="{x:Bind}" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="CategoryDataTemplateKey" x:DataType="local:Category">
                <StackPanel>
                    <TextBlock
                        Style="{StaticResource TitleTextBlockStyle}"
                        Padding="10"
                        Text="{x:Bind CategoryName}" />
                    <ItemsRepeater
                        ItemTemplate="{StaticResource StringDataTemplateKey}"
                        ItemsSource="{x:Bind CategoryItemCollection}">
                        <ItemsRepeater.Layout>
                            <StackLayout Orientation="Horizontal" />
                        </ItemsRepeater.Layout>
                    </ItemsRepeater>
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
        <ScrollViewer
            HorizontalScrollMode="Auto"
            HorizontalScrollBarVisibility="Auto">
            <ItemsRepeater Name="repeater"
                VerticalAlignment="Top"
                ItemTemplate ="{StaticResource CategoryDataTemplateKey}">
                <ItemsRepeater.Layout>
                    <StackLayout Orientation="Vertical" />
                </ItemsRepeater.Layout>
            </ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.Resources>

<Grid

Margin="10"

Background="{ThemeResource SystemControlBackgroundAccentBrush}">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"

TextWrapping="Wrap"

Text="{x:Bind}" />

</Grid>

</DataTemplate>

<TextBlock

Style="{StaticResource TitleTextBlockStyle}"

Padding="10"

Text="{x:Bind CategoryName}" />

<ItemsRepeater

ItemTemplate="{StaticResource StringDataTemplateKey}"

ItemsSource="{x:Bind CategoryItemCollection}">

<ItemsRepeater.Layout>

</ItemsRepeater.Layout>

</ItemsRepeater>

</StackPanel>

</DataTemplate>

</Grid.Resources>

<ScrollViewer

HorizontalScrollMode="Auto"

HorizontalScrollBarVisibility="Auto">

<ItemsRepeater Name="repeater"

VerticalAlignment="Top"

ItemTemplate ="{StaticResource CategoryDataTemplateKey}">

<ItemsRepeater.Layout>

</ItemsRepeater.Layout>

</ItemsRepeater>

</ScrollViewer>

</Grid>

</Window>

[C#/WINUI3/.NET6] ItemsRepeater 엘리먼트 : DataTemplateSelector 객체를 사용해 다른 타입 항목 표시하기

■ ItemsRepeater 엘리먼트에서 DataTemplateSelector 객체를 사용해 다른 타입 항목을 표시하는 방법을 보여준다. ▶ StringOrIntegerDataTemplateSelector.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 문자열/정수 데이터 템플리트 선택자
    /// </summary>
    public class StringOrIntegerDataTemplateSelector : DataTemplateSelector
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 템플리트 - StringTemplate

        /// <summary>
        /// 문자열 템플리트
        /// </summary>
        public DataTemplate StringTemplate { get; set; }

        #endregion
        #region 정수 템플리트 - IntegerTemplate

        /// <summary>
        /// 정수 템플리트
        /// </summary>
        public DataTemplate IntegerTemplate { get; set; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 템플리트 선택하기 (코어) - SelectTemplateCore(item)

        /// <summary>
        /// 템플리트 선택하기 (코어)
        /// </summary>
        /// <param name="item">항목</param>
        /// <returns>템플리트</returns>
        protected override DataTemplate SelectTemplateCore(object item)
        {
            if(item.GetType() == typeof(string))
            {
                return StringTemplate;
            }
            else if(item.GetType() == typeof(int))
            {
                return IntegerTemplate;
            }
            else
            {
                return null;
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 문자열/정수 데이터 템플리트 선택자

/// </summary>

public class StringOrIntegerDataTemplateSelector : DataTemplateSelector

{

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

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

#region 문자열 템플리트 - StringTemplate

/// <summary>

/// 문자열 템플리트

/// </summary>

public DataTemplate StringTemplate { get; set; }

#endregion

#region 정수 템플리트 - IntegerTemplate

/// <summary>

/// 정수 템플리트

/// </summary>

public DataTemplate IntegerTemplate { get; set; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 템플리트 선택하기 (코어) - SelectTemplateCore(item)

/// <summary>

/// 템플리트 선택하기 (코어)

/// </summary>

/// <param name="item">항목</param>

/// <returns>템플리트</returns>

protected override DataTemplate SelectTemplateCore(object item)

{

if(item.GetType() == typeof(string))

{

return StringTemplate;

}

else if(item.GetType() == typeof(int))

{

return IntegerTemplate;

}

else

{

return null;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="StringDataTemplateKey" x:DataType="x:String">
                <Grid
                    Margin="10"
                    Background="{ThemeResource SystemControlBackgroundAccentBrush}">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"
                        Padding="10"
                        TextWrapping="Wrap"
                        Text="{x:Bind}" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="IntegerDataTemplateKey" x:DataType="x:Int32">
                <Grid
                    Margin="10"
                    Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
                    <TextBlock
                        Style="{StaticResource HeaderTextBlockStyle}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Padding="10"
                        Text="{x:Bind}" />
                </Grid>
            </DataTemplate>
            <local:StringOrIntegerDataTemplateSelector x:Key="StringOrIntTemplateSelector"
                StringTemplate="{StaticResource StringDataTemplateKey}"
                IntegerTemplate="{StaticResource IntegerDataTemplateKey}" />
        </Grid.Resources>
        <ScrollViewer>
            <ItemsRepeater Name="itemsRepeater"
                ItemTemplate="{StaticResource StringOrIntTemplateSelector}"
                Margin="10">
                <ItemsRepeater.Layout>
                    <UniformGridLayout
                        MinItemWidth="200"
                        MinItemHeight="200" />
                </ItemsRepeater.Layout>
            </ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid>

<Grid.Resources>

<Grid

Margin="10"

Background="{ThemeResource SystemControlBackgroundAccentBrush}">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"

Padding="10"

TextWrapping="Wrap"

Text="{x:Bind}" />

</Grid>

</DataTemplate>

<Grid

Margin="10"

Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">

<TextBlock

Style="{StaticResource HeaderTextBlockStyle}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Text="{x:Bind}" />

</Grid>

</DataTemplate>

<local:StringOrIntegerDataTemplateSelector x:Key="StringOrIntTemplateSelector"

StringTemplate="{StaticResource StringDataTemplateKey}"

IntegerTemplate="{StaticResource IntegerDataTemplateKey}" />

</Grid.Resources>

<ItemsRepeater Name="itemsRepeater"

ItemTemplate="{StaticResource StringOrIntTemplateSelector}"

Margin="10">

<ItemsRepeater.Layout>

<UniformGridLayout

MinItemWidth="200"

MinItemHeight="200" />

</ItemsRepeater.Layout>

</ItemsRepeater>

</ScrollViewer>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;

using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            List<object> sourceList = new List<object>
            {
                64,
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                128,
                "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                256,
                "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                512,
                "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                1024
            };

            this.itemsRepeater.ItemsSource = sourceList;
        }

        #endregion
    }
}

using System.Collections.Generic;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

List<object> sourceList = new List<object>

{

64,

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

128,

"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",

256,

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",

512,

"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",

1024

};

this.itemsRepeater.ItemsSource = sourceList;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ItemsRepeater 엘리먼트 : Layout 속성에서 VirtualizingLayout 상속 객체를 만들어 가상화/스크롤 가능한 커스텀 레이아웃 사용하기

■ ItemsRepeater 엘리먼트의 Layout 속성에서 VirtualizingLayout 상속 객체를 만들어 가상화/스크롤 가능한 커스텀 레이아웃을 사용하는 방법을 보여준다. ▶ ActivityFeedLayoutState.cs


using System.Collections.Generic;

using Windows.Foundation;

namespace TestProject
{
    /// <summary>
    /// 활동 피드 레이아웃 상태
    /// </summary>
    public class ActivityFeedLayoutState
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 레이아웃 사각형 리스트
        /// </summary>
        private List<Rect> layoutRectList;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Publoc

        #region 첫번째 실현 인덱스 - FirstRealizedIndex

        /// <summary>
        /// 첫번째 실현 인덱스
        /// </summary>
        public int FirstRealizedIndex { get; set; }

        #endregion
        #region 레이아웃 사각형 리스트 - LayoutRectList

        /// <summary>
        /// 레이아웃 사각형 리스트
        /// </summary>
        public List<Rect> LayoutRectList
        {
            get
            {
                if(this.layoutRectList == null)
                {
                    this.layoutRectList = new List<Rect>();
                }

                return this.layoutRectList;
            }
        }

        #endregion
    }
}

using System.Collections.Generic;

using Windows.Foundation;

namespace TestProject

{

/// <summary>

/// 활동 피드 레이아웃 상태

/// </summary>

public class ActivityFeedLayoutState

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 레이아웃 사각형 리스트

/// </summary>

private List<Rect> layoutRectList;

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Publoc

#region 첫번째 실현 인덱스 - FirstRealizedIndex

/// <summary>

/// 첫번째 실현 인덱스

/// </summary>

public int FirstRealizedIndex { get; set; }

#endregion

#region 레이아웃 사각형 리스트 - LayoutRectList

/// <summary>

/// 레이아웃 사각형 리스트

/// </summary>

public List<Rect> LayoutRectList

{

get

{

if(this.layoutRectList == null)

{

this.layoutRectList = new List<Rect>();

}

return this.layoutRectList;

}

#endregion

}

▶ ActivityFeedLayout.cs


using System;

using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 활동 피드 레이아웃
    /// </summary>
    public class ActivityFeedLayout : VirtualizingLayout
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 행 간격 속성 - RowSpacingProperty

        /// <summary>
        /// 행 간격 속성
        /// </summary>
        public static readonly DependencyProperty RowSpacingProperty = DependencyProperty.Register
        (
            "RowSpacing",
            typeof(double),
            typeof(ActivityFeedLayout),
            new PropertyMetadata(0, PropertyChangedCallback)
        );

        #endregion
        #region 열 간격 속성 - ColumnSpacingProperty

        /// <summary>
        /// 열 간격 속성
        /// </summary>
        public static readonly DependencyProperty ColumnSpacingProperty = DependencyProperty.Register
        (
            "ColumnSpacing",
            typeof(double),
            typeof(ActivityFeedLayout),
            new PropertyMetadata(0, PropertyChangedCallback)
        );

        #endregion
        #region 최소 항목 크기 속성 - MinimumItemSizeProperty

        /// <summary>
        /// 최소 항목 크기 속성
        /// </summary>
        public static readonly DependencyProperty MinimumItemSizeProperty = DependencyProperty.Register
        (
            "MinimumItemSize",
            typeof(Size),
            typeof(ActivityFeedLayout),
            new PropertyMetadata(Size.Empty, PropertyChangedCallback)
        );

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 행 간격
        /// </summary>
        private double rowSpacing;

        /// <summary>
        /// 열 간격
        /// </summary>
        private double columnSpacing;

        /// <summary>
        /// 최소 항목 크기
        /// </summary>
        private Size minimumItemSize = Size.Empty;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 행 간격 - RowSpacing

        /// <summary>
        /// 행 간격
        /// </summary>
        public double RowSpacing
        {
            get
            {
                return this.rowSpacing;
            }
            set
            {
                SetValue(RowSpacingProperty, value);
            }
        }

        #endregion
        #region 열 간격 - ColumnSpacing

        /// <summary>
        /// 열 간격
        /// </summary>
        public double ColumnSpacing
        {
            get
            {
                return this.columnSpacing;
            }
            set
            {
                SetValue(ColumnSpacingProperty, value);
            }
        }

        #endregion
        #region 최소 항목 크기 - MinimumItemSize

        /// <summary>
        /// 최소 항목 크기
        /// </summary>
        public Size MinimumItemSize
        {
            get
            {
                return this.minimumItemSize;
            }
            set
            {
                SetValue(MinimumItemSizeProperty, value);
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region 속성 변경시 콜백 처리하기 - PropertyChangedCallback(d, e)

        /// <summary>
        /// 속성 변경시 콜백 처리하기
        /// </summary>
        /// <param name="d">의존 객체</param>
        /// <param name="e">이벤트 인자</param>
        private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ActivityFeedLayout layout = d as ActivityFeedLayout;

            if(e.Property == RowSpacingProperty)
            {
                layout.rowSpacing = (double)e.NewValue;
            }
            else if(e.Property == ColumnSpacingProperty)
            {
                layout.columnSpacing = (double)e.NewValue;
            }
            else if(e.Property == MinimumItemSizeProperty)
            {
                layout.minimumItemSize = (Size)e.NewValue;
            }
            else
            {
                throw new InvalidOperationException("Don't know what you are talking about!");
            }

            layout.InvalidateMeasure();
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Instance
        //////////////////////////////////////////////////////////////////////////////// Protected

        #region 컨텍스트용 초기화하기 (코어) - InitializeForContextCore(context)

        /// <summary>
        /// 컨텍스트용 초기화하기 (코어)
        /// </summary>
        /// <param name="context">가상화 레이아웃 컨텍스트</param>
        protected override void InitializeForContextCore(VirtualizingLayoutContext context)
        {
            base.InitializeForContextCore(context);

            if(!(context.LayoutState is ActivityFeedLayoutState))
            {
                context.LayoutState = new ActivityFeedLayoutState();
            }
        }

        #endregion
        #region 컨텍스트용 초기화 취소하기 (코어) - UninitializeForContextCore(context)

        /// <summary>
        /// 컨텍스트용 초기화 취소하기 (코어)
        /// </summary>
        /// <param name="context">가상화 레이아웃 컨텍스트</param>
        protected override void UninitializeForContextCore(VirtualizingLayoutContext context)
        {
            base.UninitializeForContextCore(context);

            context.LayoutState = null;
        }

        #endregion

        #region 측정하기 (오버라이드) - MeasureOverride(context, availableSize)

        /// <summary>
        /// 측정하기 (오버라이드)
        /// </summary>
        /// <param name="context">가상화 레이아웃 컨텍스트</param>
        /// <param name="availableSize">이용 가능한 크기</param>
        /// <returns>측정 크기</returns>
        protected override Size MeasureOverride(VirtualizingLayoutContext context, Size availableSize)
        {
            if(MinimumItemSize == Size.Empty)
            {
                UIElement firstElement = context.GetOrCreateElementAt(0);

                firstElement.Measure(new Size(float.PositiveInfinity, float.PositiveInfinity));

                this.minimumItemSize = firstElement.DesiredSize;
            }

            int firstRowIndex = Math.Max
            (
                (int)(context.RealizationRect.Y / (MinimumItemSize.Height + RowSpacing)) - 1,
                0
            );

            int lastRowIndex = Math.Min
            (
                (int)(context.RealizationRect.Bottom / (this.MinimumItemSize.Height + this.RowSpacing)) + 1,
                (int)(context.ItemCount / 3)
            );

            ActivityFeedLayoutState state = context.LayoutState as ActivityFeedLayoutState;

            state.LayoutRectList.Clear();

            state.FirstRealizedIndex = firstRowIndex * 3;

            double desiredItemWidth = Math.Max
            (
                this.MinimumItemSize.Width,
                (availableSize.Width - ColumnSpacing * 3) / 4
            );

            for(int rowIndex = firstRowIndex; rowIndex < lastRowIndex; rowIndex++)
            {
                int firstItemIndex = rowIndex * 3;

                Rect[] boundRectangleArrayForCurrentRow = CalculateLayoutBoundRectangleArrayForRow(rowIndex, desiredItemWidth);

                for(int columnIndex = 0; columnIndex < 3; columnIndex++)
                {
                    int index = firstItemIndex + columnIndex;

                    UIElement containerElement = context.GetOrCreateElementAt(index);

                    containerElement.Measure
                    (
                        new Size
                        (
                            boundRectangleArrayForCurrentRow[columnIndex].Width,
                            boundRectangleArrayForCurrentRow[columnIndex].Height
                        )
                    );

                    state.LayoutRectList.Add(boundRectangleArrayForCurrentRow[columnIndex]);
                }
            }

            double extentHeight;

            if(context.ItemCount == 0)
            {
                extentHeight = 0;
            }
            else
            {
                extentHeight = ((int)(context.ItemCount / 3) - 1) * (MinimumItemSize.Height + RowSpacing) + MinimumItemSize.Height;
            }

            return new Size(desiredItemWidth * 4 + this.ColumnSpacing * 2, extentHeight);
        }

        #endregion
        #region 배치하기 (오버라이드) - ArrangeOverride(context, finalSize)

        /// <summary>
        /// 배치하기 (오버라이드)
        /// </summary>
        /// <param name="context">가상화 레이아웃 컨텍스트</param>
        /// <param name="finalSize">최종 크기</param>
        /// <returns>배치 크기</returns>
        protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size finalSize)
        {
            ActivityFeedLayoutState state = context.LayoutState as ActivityFeedLayoutState;

            VirtualizingLayoutContext virtualContext = context as VirtualizingLayoutContext;

            int currentIndex = state.FirstRealizedIndex;

            foreach(Rect arrangeRect in state.LayoutRectList)
            {
                UIElement containerElement = virtualContext.GetOrCreateElementAt(currentIndex);

                containerElement.Arrange(arrangeRect);

                currentIndex++;
            }

            return finalSize;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Private

        #region 행을 위한 레이아웃 경계 사각형 배열 계산하기 - CalculateLayoutBoundRectangleArrayForRow(rowIndex, desiredItemWidth)

        /// <summary>
        /// 행을 위한 레이아웃 경계 사각형 배열 계산하기
        /// </summary>
        /// <param name="rowIndex">행 인덱스</param>
        /// <param name="desiredItemWidth">희망 항목 너비</param>
        /// <returns>레이아웃 경계 사각형 배열</returns>
        private Rect[] CalculateLayoutBoundRectangleArrayForRow(int rowIndex, double desiredItemWidth)
        {
            Rect[] boundRectangeArrayForRow = new Rect[3];

            double yoffset = rowIndex * (MinimumItemSize.Height + RowSpacing);

            boundRectangeArrayForRow[0].Y = boundRectangeArrayForRow[1].Y = boundRectangeArrayForRow[2].Y = yoffset;

            boundRectangeArrayForRow[0].Height = boundRectangeArrayForRow[1].Height = boundRectangeArrayForRow[2].Height = MinimumItemSize.Height;

            if(rowIndex % 2 == 0)
            {
                boundRectangeArrayForRow[0].X     = 0;
                boundRectangeArrayForRow[0].Width = desiredItemWidth;

                boundRectangeArrayForRow[1].X     = boundRectangeArrayForRow[0].Right + ColumnSpacing;
                boundRectangeArrayForRow[1].Width = desiredItemWidth;

                boundRectangeArrayForRow[2].X     = boundRectangeArrayForRow[1].Right + ColumnSpacing;
                boundRectangeArrayForRow[2].Width = desiredItemWidth * 2 + ColumnSpacing;
            }
            else
            {
                boundRectangeArrayForRow[0].X     = 0;
                boundRectangeArrayForRow[0].Width = (desiredItemWidth * 2 + ColumnSpacing);

                boundRectangeArrayForRow[1].X     = boundRectangeArrayForRow[0].Right + ColumnSpacing;
                boundRectangeArrayForRow[1].Width = desiredItemWidth;

                boundRectangeArrayForRow[2].X     = boundRectangeArrayForRow[1].Right + ColumnSpacing;
                boundRectangeArrayForRow[2].Width = desiredItemWidth;
            }

            return boundRectangeArrayForRow;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

using System;

using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 활동 피드 레이아웃

/// </summary>

public class ActivityFeedLayout : VirtualizingLayout

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 행 간격 속성 - RowSpacingProperty

/// <summary>

/// 행 간격 속성

/// </summary>

public static readonly DependencyProperty RowSpacingProperty = DependencyProperty.Register

(

"RowSpacing",

typeof(double),

typeof(ActivityFeedLayout),

new PropertyMetadata(0, PropertyChangedCallback)

);

#endregion

#region 열 간격 속성 - ColumnSpacingProperty

/// <summary>

/// 열 간격 속성

/// </summary>

public static readonly DependencyProperty ColumnSpacingProperty = DependencyProperty.Register

(

"ColumnSpacing",

typeof(double),

typeof(ActivityFeedLayout),

new PropertyMetadata(0, PropertyChangedCallback)

);

#endregion

#region 최소 항목 크기 속성 - MinimumItemSizeProperty

/// <summary>

/// 최소 항목 크기 속성

/// </summary>

public static readonly DependencyProperty MinimumItemSizeProperty = DependencyProperty.Register

(

"MinimumItemSize",

typeof(Size),

typeof(ActivityFeedLayout),

new PropertyMetadata(Size.Empty, PropertyChangedCallback)

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 행 간격

/// </summary>

private double rowSpacing;

/// <summary>

/// 열 간격

/// </summary>

private double columnSpacing;

/// <summary>

/// 최소 항목 크기

/// </summary>

private Size minimumItemSize = Size.Empty;

#endregion

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

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

#region 행 간격 - RowSpacing

/// <summary>

/// 행 간격

/// </summary>

public double RowSpacing

{

get

{

return this.rowSpacing;

}

set

{

SetValue(RowSpacingProperty, value);

}

#endregion

#region 열 간격 - ColumnSpacing

/// <summary>

/// 열 간격

/// </summary>

public double ColumnSpacing

{

get

{

return this.columnSpacing;

}

set

{

SetValue(ColumnSpacingProperty, value);

}

#endregion

#region 최소 항목 크기 - MinimumItemSize

/// <summary>

/// 최소 항목 크기

/// </summary>

public Size MinimumItemSize

{

get

{

return this.minimumItemSize;

}

set

{

SetValue(MinimumItemSizeProperty, value);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Private

#region 속성 변경시 콜백 처리하기 - PropertyChangedCallback(d, e)

/// <summary>

/// 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">의존 객체</param>

/// <param name="e">이벤트 인자</param>

private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

ActivityFeedLayout layout = d as ActivityFeedLayout;

if(e.Property == RowSpacingProperty)

{

layout.rowSpacing = (double)e.NewValue;

}

else if(e.Property == ColumnSpacingProperty)

{

layout.columnSpacing = (double)e.NewValue;

}

else if(e.Property == MinimumItemSizeProperty)

{

layout.minimumItemSize = (Size)e.NewValue;

}

else

{

throw new InvalidOperationException("Don't know what you are talking about!");

}

layout.InvalidateMeasure();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

//////////////////////////////////////////////////////////////////////////////// Protected

#region 컨텍스트용 초기화하기 (코어) - InitializeForContextCore(context)

/// <summary>

/// 컨텍스트용 초기화하기 (코어)

/// </summary>

/// <param name="context">가상화 레이아웃 컨텍스트</param>

protected override void InitializeForContextCore(VirtualizingLayoutContext context)

{

base.InitializeForContextCore(context);

if(!(context.LayoutState is ActivityFeedLayoutState))

{

context.LayoutState = new ActivityFeedLayoutState();

}

#endregion

#region 컨텍스트용 초기화 취소하기 (코어) - UninitializeForContextCore(context)

/// <summary>

/// 컨텍스트용 초기화 취소하기 (코어)

/// </summary>

/// <param name="context">가상화 레이아웃 컨텍스트</param>

protected override void UninitializeForContextCore(VirtualizingLayoutContext context)

{

base.UninitializeForContextCore(context);

context.LayoutState = null;

}

#endregion

#region 측정하기 (오버라이드) - MeasureOverride(context, availableSize)

/// <summary>

/// 측정하기 (오버라이드)

/// </summary>

/// <param name="context">가상화 레이아웃 컨텍스트</param>

/// <param name="availableSize">이용 가능한 크기</param>

/// <returns>측정 크기</returns>

protected override Size MeasureOverride(VirtualizingLayoutContext context, Size availableSize)

{

if(MinimumItemSize == Size.Empty)

{

UIElement firstElement = context.GetOrCreateElementAt(0);

firstElement.Measure(new Size(float.PositiveInfinity, float.PositiveInfinity));

this.minimumItemSize = firstElement.DesiredSize;

}

int firstRowIndex = Math.Max

(

(int)(context.RealizationRect.Y / (MinimumItemSize.Height + RowSpacing)) - 1,

);

int lastRowIndex = Math.Min

(

(int)(context.RealizationRect.Bottom / (this.MinimumItemSize.Height + this.RowSpacing)) + 1,

(int)(context.ItemCount / 3)

);

ActivityFeedLayoutState state = context.LayoutState as ActivityFeedLayoutState;

state.LayoutRectList.Clear();

state.FirstRealizedIndex = firstRowIndex * 3;

double desiredItemWidth = Math.Max

(

this.MinimumItemSize.Width,

(availableSize.Width - ColumnSpacing * 3) / 4

);

for(int rowIndex = firstRowIndex; rowIndex < lastRowIndex; rowIndex++)

{

int firstItemIndex = rowIndex * 3;

Rect[] boundRectangleArrayForCurrentRow = CalculateLayoutBoundRectangleArrayForRow(rowIndex, desiredItemWidth);

for(int columnIndex = 0; columnIndex < 3; columnIndex++)

{

int index = firstItemIndex + columnIndex;

UIElement containerElement = context.GetOrCreateElementAt(index);

containerElement.Measure

(

new Size

(

boundRectangleArrayForCurrentRow[columnIndex].Width,

boundRectangleArrayForCurrentRow[columnIndex].Height

)

);

state.LayoutRectList.Add(boundRectangleArrayForCurrentRow[columnIndex]);

}

double extentHeight;

if(context.ItemCount == 0)

{

extentHeight = 0;

}

else

{

extentHeight = ((int)(context.ItemCount / 3) - 1) * (MinimumItemSize.Height + RowSpacing) + MinimumItemSize.Height;

}

return new Size(desiredItemWidth * 4 + this.ColumnSpacing * 2, extentHeight);

}

#endregion

#region 배치하기 (오버라이드) - ArrangeOverride(context, finalSize)

/// <summary>

/// 배치하기 (오버라이드)

/// </summary>

/// <param name="context">가상화 레이아웃 컨텍스트</param>

/// <param name="finalSize">최종 크기</param>

/// <returns>배치 크기</returns>

protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size finalSize)

{

ActivityFeedLayoutState state = context.LayoutState as ActivityFeedLayoutState;

VirtualizingLayoutContext virtualContext = context as VirtualizingLayoutContext;

int currentIndex = state.FirstRealizedIndex;

foreach(Rect arrangeRect in state.LayoutRectList)

{

UIElement containerElement = virtualContext.GetOrCreateElementAt(currentIndex);

containerElement.Arrange(arrangeRect);

currentIndex++;

}

return finalSize;

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Private

#region 행을 위한 레이아웃 경계 사각형 배열 계산하기 - CalculateLayoutBoundRectangleArrayForRow(rowIndex, desiredItemWidth)

/// <summary>

/// 행을 위한 레이아웃 경계 사각형 배열 계산하기

/// </summary>

/// <param name="rowIndex">행 인덱스</param>

/// <param name="desiredItemWidth">희망 항목 너비</param>

/// <returns>레이아웃 경계 사각형 배열</returns>

private Rect[] CalculateLayoutBoundRectangleArrayForRow(int rowIndex, double desiredItemWidth)

{

Rect[] boundRectangeArrayForRow = new Rect[3];

double yoffset = rowIndex * (MinimumItemSize.Height + RowSpacing);

boundRectangeArrayForRow[0].Y = boundRectangeArrayForRow[1].Y = boundRectangeArrayForRow[2].Y = yoffset;

boundRectangeArrayForRow[0].Height = boundRectangeArrayForRow[1].Height = boundRectangeArrayForRow[2].Height = MinimumItemSize.Height;

if(rowIndex % 2 == 0)

{

boundRectangeArrayForRow[0].X = 0;

boundRectangeArrayForRow[0].Width = desiredItemWidth;

boundRectangeArrayForRow[1].X = boundRectangeArrayForRow[0].Right + ColumnSpacing;

boundRectangeArrayForRow[1].Width = desiredItemWidth;

boundRectangeArrayForRow[2].X = boundRectangeArrayForRow[1].Right + ColumnSpacing;

boundRectangeArrayForRow[2].Width = desiredItemWidth * 2 + ColumnSpacing;

}

else

{

boundRectangeArrayForRow[0].X = 0;

boundRectangeArrayForRow[0].Width = (desiredItemWidth * 2 + ColumnSpacing);

boundRectangeArrayForRow[1].X = boundRectangeArrayForRow[0].Right + ColumnSpacing;

boundRectangeArrayForRow[1].Width = desiredItemWidth;

boundRectangeArrayForRow[2].X = boundRectangeArrayForRow[1].Right + ColumnSpacing;

boundRectangeArrayForRow[2].Width = desiredItemWidth;

}

return boundRectangeArrayForRow;

}

#endregion

}

[C#/WINUI3/.NET6] ItemsRepeater 엘리먼트 : ItemTemplate/Layout 속성 사용하기 (StackLayout, UniformGridLayout 객체 사용)

■ ItemsRepeater 엘리먼트의 ItemTemplate/Layout 속성을 사용하는 방법을 보여준다. (StackLayout, UniformGridLayout 객체 사용) ▶ Bar.cs


namespace TestProject
{
    /// <summary>
    /// 바
    /// </summary>
    public class Bar
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 너비 - Width

        /// <summary>
        /// 너비
        /// </summary>
        public double Width { get; set; }

        #endregion
        #region 최대 너비 - MaximumWidth

        /// <summary>
        /// 최대 너비
        /// </summary>
        public int MaximumWidth { get; set; }

        #endregion
        #region 높이 - Height

        /// <summary>
        /// 높이
        /// </summary>
        public double Height { get; set; }

        #endregion
        #region 최대 높이 - MaximumHeight

        /// <summary>
        /// 최대 높이
        /// </summary>
        public double MaximumHeight { get; set; }

        #endregion
        #region 반경 - Diameter

        /// <summary>
        /// 반경
        /// </summary>
        public double Diameter { get; set; }

        #endregion
        #region 최대 반경 - MaximumDiameter

        /// <summary>
        /// 최대 반경
        /// </summary>
        public double MaximumDiameter { get; set; }

        #endregion

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

        #region 생성자 - Bar(length, maximumLength)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="length">길이</param>
        /// <param name="maximumLength">최대 길이</param>
        public Bar(double length, int maximumLength)
        {
            Width        = length;
            MaximumWidth = maximumLength;

            Height        = length / 4;
            MaximumHeight = maximumLength / 4;

            Diameter        = length / 6;
            MaximumDiameter = maximumLength / 6;
        }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 바

/// </summary>

public class Bar

{

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

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

#region 너비 - Width

/// <summary>

/// 너비

/// </summary>

public double Width { get; set; }

#endregion

#region 최대 너비 - MaximumWidth

/// <summary>

/// 최대 너비

/// </summary>

public int MaximumWidth { get; set; }

#endregion

#region 높이 - Height

/// <summary>

/// 높이

/// </summary>

public double Height { get; set; }

#endregion

#region 최대 높이 - MaximumHeight

/// <summary>

/// 최대 높이

/// </summary>

public double MaximumHeight { get; set; }

#endregion

#region 반경 - Diameter

/// <summary>

/// 반경

/// </summary>

public double Diameter { get; set; }

#endregion

#region 최대 반경 - MaximumDiameter

/// <summary>

/// 최대 반경

/// </summary>

public double MaximumDiameter { get; set; }

#endregion

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

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

#region 생성자 - Bar(length, maximumLength)

/// <summary>

/// 생성자

/// </summary>

/// <param name="length">길이</param>

/// <param name="maximumLength">최대 길이</param>

public Bar(double length, int maximumLength)

{

Width = length;

MaximumWidth = maximumLength;

Height = length / 4;

MaximumHeight = maximumLength / 4;

Diameter = length / 6;

MaximumDiameter = maximumLength / 6;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Name="grid"
        Margin="10">
        <Grid.Resources>
            <DataTemplate x:Key="HorizontalBarDataTemplateKey" x:DataType="local:Bar">
                <Border
                    Width="{x:Bind MaximumWidth}"
                    Background="{ThemeResource SystemChromeLowColor}">
                    <Rectangle
                        HorizontalAlignment="Left"
                        Width="{x:Bind Width}"
                        Height="24"
                        Fill="{ThemeResource SystemAccentColor}" />
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="VerticalBarDataTemplateKey" x:DataType="local:Bar">
                <Border
                    Height="{x:Bind MaximumHeight}"
                    Background="{ThemeResource SystemChromeLowColor}">
                    <Rectangle
                        VerticalAlignment="Top"
                        Width="48"
                        Height="{x:Bind Height}"
                        Fill="{ThemeResource SystemAccentColor}" />
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="CircularDataTemplateKey" x:DataType="local:Bar">
                <Grid>
                    <Ellipse
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Width="{x:Bind MaximumDiameter}"
                        Height="{x:Bind MaximumDiameter}"
                        Fill="{ThemeResource SystemChromeLowColor}" />
                    <Ellipse
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Width="{x:Bind Diameter}"
                        Height="{x:Bind Diameter}"
                        Fill="{ThemeResource SystemAccentColor}" />
                </Grid>
            </DataTemplate>
            <StackLayout x:Name="horizontalStackLayout"
                Orientation="Horizontal"
                Spacing="10" />
            <StackLayout x:Name="verticalStackLayout"
                Orientation="Vertical"
                Spacing="10" />
            <UniformGridLayout x:Name="uniformGridLayout"
                MinRowSpacing="10"
                MinColumnSpacing="10" />
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"
            BorderThickness="1"
            BorderBrush="Black">
            <ScrollViewer
                Margin="10"
                HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto"
                HorizontalScrollMode="Auto"
                IsVerticalScrollChainingEnabled="False">
                <ItemsRepeater Name="repeater"
                    ItemTemplate="{StaticResource HorizontalBarDataTemplateKey}"
                    Layout="{StaticResource verticalStackLayout}"
                    ItemsSource="{x:Bind BarCollection}" />
            </ScrollViewer>
        </Border>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Spacing="10">
            <Button Name="addItemButton"
                Padding="5"
                Content="Add Item" />
            <Button Name="removeItemButton"
                Padding="5"
                Content="Remove Item" />
            <RadioButtons Name="layoutRadioButtons"
                Header="Layout">
                <RadioButton
                    Tag="verticalStackLayout"
                    IsChecked="True"
                    Content="StackLayout - Vertical" />
                <RadioButton
                    Tag="horizontalStackLayout"
                    Content="StackLayout - Horizontal" />
                <RadioButton
                    Tag="uniformGridLayout"
                    Content="UniformGridLayout" />
            </RadioButtons>
        </StackPanel>
    </Grid>
</Window>

100

101

102

103

104

105

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid Name="grid"

Margin="10">

<Grid.Resources>

<Border

Width="{x:Bind MaximumWidth}"

Background="{ThemeResource SystemChromeLowColor}">

<Rectangle

HorizontalAlignment="Left"

Width="{x:Bind Width}"

Height="24"

Fill="{ThemeResource SystemAccentColor}" />

</Border>

</DataTemplate>

<Border

Height="{x:Bind MaximumHeight}"

Background="{ThemeResource SystemChromeLowColor}">

<Rectangle

VerticalAlignment="Top"

Width="48"

Height="{x:Bind Height}"

Fill="{ThemeResource SystemAccentColor}" />

</Border>

</DataTemplate>

<Grid>

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{x:Bind MaximumDiameter}"

Height="{x:Bind MaximumDiameter}"

Fill="{ThemeResource SystemChromeLowColor}" />

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{x:Bind Diameter}"

Height="{x:Bind Diameter}"

Fill="{ThemeResource SystemAccentColor}" />

</Grid>

</DataTemplate>

<StackLayout x:Name="horizontalStackLayout"

Orientation="Horizontal"

Spacing="10" />

<StackLayout x:Name="verticalStackLayout"

Orientation="Vertical"

Spacing="10" />

<UniformGridLayout x:Name="uniformGridLayout"

MinRowSpacing="10"

MinColumnSpacing="10" />

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Grid.Column="0"

BorderThickness="1"

BorderBrush="Black">

<ScrollViewer

Margin="10"

HorizontalScrollBarVisibility="Auto"

VerticalScrollBarVisibility="Auto"

HorizontalScrollMode="Auto"

IsVerticalScrollChainingEnabled="False">

<ItemsRepeater Name="repeater"

ItemTemplate="{StaticResource HorizontalBarDataTemplateKey}"

Layout="{StaticResource verticalStackLayout}"

ItemsSource="{x:Bind BarCollection}" />

</ScrollViewer>

</Border>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="10">

<Button Name="addItemButton"

Padding="5"

Content="Add Item" />

<Button Name="removeItemButton"

Padding="5"

Content="Remove Item" />

<RadioButtons Name="layoutRadioButtons"

Header="Layout">

<RadioButton

Tag="verticalStackLayout"

IsChecked="True"

Content="StackLayout - Vertical" />

<RadioButton

Tag="horizontalStackLayout"

Content="StackLayout - Horizontal" />

<RadioButton

Tag="uniformGridLayout"

Content="UniformGridLayout" />

</RadioButtons>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region Field

        /// <summary>
        /// 바 컬렉션
        /// </summary>
        public ObservableCollection<Bar> BarCollection;

        /// <summary>
        /// 최대 길이
        /// </summary>
        public int MaximumLength = 425;

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 난수기
        /// </summary>
        private Random random = new Random();

        #endregion

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

        #region 생성자 - MainWindow()

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

            BarCollection = new ObservableCollection<Bar>();

            BarCollection.Add(new Bar(300, MaximumLength));
            BarCollection.Add(new Bar(25 , MaximumLength));
            BarCollection.Add(new Bar(175, MaximumLength));

            this.addItemButton.Click                 += addItemButton_Click;
            this.removeItemButton.Click              += removeItemButton_Click;
            this.layoutRadioButtons.SelectionChanged += layoutRadioButtons_SelectionChanged;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Add Item 버튼 클릭시 처리하기 - addItemButton_Click(sender, e)

        /// <summary>
        /// Add Item 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addItemButton_Click(object sender, RoutedEventArgs e)
        {
            BarCollection.Add(new Bar(this.random.Next(MaximumLength), MaximumLength));

            this.removeItemButton.IsEnabled = true;
        }

        #endregion
        #region Remove Item 버튼 클릭시 처리하기 - removeItemButton_Click(sender, e)

        /// <summary>
        /// Remove Item 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void removeItemButton_Click(object sender, RoutedEventArgs e)
        {
            if(BarCollection.Count > 0)
            {
                BarCollection.RemoveAt(0);

                if(BarCollection.Count == 0)
                {
                    this.removeItemButton.IsEnabled = false;
                }
            }
        }

        #endregion
        #region 레이아웃 버튼 리스트 선택 변경시 처리하기 - layoutRadioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 레이아웃 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void layoutRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string itemTemplateKey = string.Empty;

            object itemSelected = (sender as RadioButtons).SelectedItem;

            if(itemSelected == null)
            {
                return;
            }

            string layoutKey = ((FrameworkElement)itemSelected).Tag as string;

            if(layoutKey.Equals(nameof(this.verticalStackLayout)))
            {
                itemTemplateKey = "HorizontalBarDataTemplateKey";

                this.repeater.MaxWidth = MaximumLength + 12;
            }
            else if(layoutKey.Equals(nameof(this.horizontalStackLayout)))
            {
                itemTemplateKey = "VerticalBarDataTemplateKey";

                this.repeater.MaxWidth = 6000;
            }
            else if(layoutKey.Equals(nameof(this.uniformGridLayout)))
            {
                itemTemplateKey = "CircularDataTemplateKey";

                this.repeater.MaxWidth = 540;
            }

            this.repeater.Layout       = this.grid.Resources[layoutKey] as VirtualizingLayout;
            this.repeater.ItemTemplate = this.grid.Resources[itemTemplateKey] as DataTemplate;
            this.repeater.ItemsSource  = BarCollection;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

using System;

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 바 컬렉션

/// </summary>

public ObservableCollection<Bar> BarCollection;

/// <summary>

/// 최대 길이

/// </summary>

public int MaximumLength = 425;

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 난수기

/// </summary>

private Random random = new Random();

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

BarCollection = new ObservableCollection<Bar>();

BarCollection.Add(new Bar(300, MaximumLength));

BarCollection.Add(new Bar(25 , MaximumLength));

BarCollection.Add(new Bar(175, MaximumLength));

this.addItemButton.Click += addItemButton_Click;

this.removeItemButton.Click += removeItemButton_Click;

this.layoutRadioButtons.SelectionChanged += layoutRadioButtons_SelectionChanged;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Add Item 버튼 클릭시 처리하기 - addItemButton_Click(sender, e)

/// <summary>

/// Add Item 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void addItemButton_Click(object sender, RoutedEventArgs e)

{

BarCollection.Add(new Bar(this.random.Next(MaximumLength), MaximumLength));

this.removeItemButton.IsEnabled = true;

}

#endregion

#region Remove Item 버튼 클릭시 처리하기 - removeItemButton_Click(sender, e)

/// <summary>

/// Remove Item 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void removeItemButton_Click(object sender, RoutedEventArgs e)

{

if(BarCollection.Count > 0)

{

BarCollection.RemoveAt(0);

if(BarCollection.Count == 0)

{

this.removeItemButton.IsEnabled = false;

}

#endregion

#region 레이아웃 버튼 리스트 선택 변경시 처리하기 - layoutRadioButtons_SelectionChanged(sender, e)

/// <summary>

/// 레이아웃 버튼 리스트 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void layoutRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string itemTemplateKey = string.Empty;

object itemSelected = (sender as RadioButtons).SelectedItem;

if(itemSelected == null)

{

return;

}

string layoutKey = ((FrameworkElement)itemSelected).Tag as string;

if(layoutKey.Equals(nameof(this.verticalStackLayout)))

{

itemTemplateKey = "HorizontalBarDataTemplateKey";

this.repeater.MaxWidth = MaximumLength + 12;

}

else if(layoutKey.Equals(nameof(this.horizontalStackLayout)))

{

itemTemplateKey = "VerticalBarDataTemplateKey";

this.repeater.MaxWidth = 6000;

}

else if(layoutKey.Equals(nameof(this.uniformGridLayout)))

{

itemTemplateKey = "CircularDataTemplateKey";

this.repeater.MaxWidth = 540;

}

this.repeater.Layout = this.grid.Resources[layoutKey] as VirtualizingLayout;

this.repeater.ItemTemplate = this.grid.Resources[itemTemplateKey] as DataTemplate;

this.repeater.ItemsSource = BarCollection;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ListView 엘리먼트 : ItemTemplate 속성을 사용해 이미지 표시하기

■ ListView 엘리먼트의 ItemTemplate 속성을 사용해 이미지를 표시하는 방법을 보여준다. ▶ CustomDataObject.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 데이터 객체
    /// </summary>
    public class CustomDataObject
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 위치 - ImageLocation

        /// <summary>
        /// 이미지 위치
        /// </summary>
        public string ImageLocation { get; set; }

        #endregion
        #region 조회수 - Views

        /// <summary>
        /// 조회수
        /// </summary>
        public string Views { get; set; }

        #endregion
        #region 좋아요 - Likes

        /// <summary>
        /// 좋아요
        /// </summary>
        public string Likes { get; set; }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description { get; set; }

        #endregion

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

        #region 생성자 - CustomDataObject()

        /// <summary>
        /// 생성자
        /// </summary>
        public CustomDataObject()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

        /// <summary>
        /// 커스텀 데이터 객체 리스트 구하기
        /// </summary>
        /// <param name="includeAllItems">모든 항목 포함 여부</param>
        /// <returns>커스텀 데이터 객체 리스트</returns>
        public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)
        {
            string[] dummyTextArray = new string[]
            {
                @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",
                @"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",
                @"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",
                @"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",
                @"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",
                @"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",
                @"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",
                @"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",
            };

            Random random = new Random();

            int count = includeAllItems ? 13 : 8;

            List<CustomDataObject> targetList = new List<CustomDataObject>();

            for(int i = 0; i < count; i++)
            {
                targetList.Add
                (
                    new CustomDataObject()
                    {
                        Title         = $"Item {i + 1}",
                        ImageLocation = $"/IMAGE/LandscapeImage{i + 1:d2}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = dummyTextArray[i % dummyTextArray.Length],
                    }
                );
            }

            return targetList;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

using System;

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

public class CustomDataObject

{

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

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 위치 - ImageLocation

/// <summary>

/// 이미지 위치

/// </summary>

public string ImageLocation { get; set; }

#endregion

#region 조회수 - Views

/// <summary>

/// 조회수

/// </summary>

public string Views { get; set; }

#endregion

#region 좋아요 - Likes

/// <summary>

/// 좋아요

/// </summary>

public string Likes { get; set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; set; }

#endregion

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

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

#region 생성자 - CustomDataObject()

/// <summary>

/// 생성자

/// </summary>

public CustomDataObject()

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

/// <summary>

/// 커스텀 데이터 객체 리스트 구하기

/// </summary>

/// <param name="includeAllItems">모든 항목 포함 여부</param>

/// <returns>커스텀 데이터 객체 리스트</returns>

public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)

{

string[] dummyTextArray = new string[]

{

@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",

@"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",

@"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",

@"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",

@"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",

@"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",

};

Random random = new Random();

int count = includeAllItems ? 13 : 8;

List<CustomDataObject> targetList = new List<CustomDataObject>();

for(int i = 0; i < count; i++)

{

targetList.Add

(

new CustomDataObject()

{

Title = $"Item {i + 1}",

ImageLocation = $"/IMAGE/LandscapeImage{i + 1:d2}.jpg",

Views = random.Next(100, 999).ToString(),

Likes = random.Next(10, 99).ToString(),

Description = dummyTextArray[i % dummyTextArray.Length],

}

);

}

return targetList;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.Resources>
            <Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
                <Setter Property="LineStackingStrategy" Value="MaxHeight"          />
                <Setter Property="TextTrimming"         Value="CharacterEllipsis"  />
                <Setter Property="TextWrapping"         Value="Wrap"               />
                <Setter Property="TextLineBounds"       Value="Full"               />
                <Setter Property="FontFamily"           Value="XamlAutoFontFamily" />
                <Setter Property="FontSize"             Value="14"                 />
                <Setter Property="FontWeight"           Value="SemiBold"           />
            </Style>
        </Grid.Resources>
        <ListView Name="listView"
            BorderThickness="1"
            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
            CanDrag="True"
            CanDragItems="True"
            CanReorderItems="True"
            AllowDrop="True">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:CustomDataObject">
                    <Grid Margin="0 10 0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="150" />
                            <ColumnDefinition Width="*"                   />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0"
                            MaxHeight="100"
                            Stretch="Fill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel Grid.Column="1"
                            Margin="10 0 0 0">
                            <TextBlock
                                Style="{ThemeResource BaseTextBlockStyle}"
                                HorizontalAlignment="Left"
                                Margin="0 0 0 5"
                                LineHeight="20"
                                FontSize="14"
                                FontWeight="SemiBold"
                                Text="{x:Bind Title}" />
                            <TextBlock Name="descriptionTextBlock"
                                Style="{ThemeResource BodyTextBlockStyle}"
                                Margin="0 0 0 10"
                                Width="350"
                                MaxHeight="60"
                                TextTrimming="CharacterEllipsis"
                                TextWrapping="Wrap"
                                FontFamily="Segoe UI"
                                FontWeight="Normal"
                                Text="{x:Bind Description}"
                                IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="0"
                                    Text="{x:Bind Views}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Text=" Views " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Text=" &#x22C5; " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Likes}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Text=" Likes" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.Resources>

</Style>

</Grid.Resources>

<ListView Name="listView"

BorderThickness="1"

BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"

CanDrag="True"

CanDragItems="True"

CanReorderItems="True"

AllowDrop="True">

<ListView.ItemTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Grid.Column="0"

MaxHeight="100"

Stretch="Fill"

Source="{x:Bind ImageLocation}" />

<StackPanel Grid.Column="1"

Margin="10 0 0 0">

<TextBlock

Style="{ThemeResource BaseTextBlockStyle}"

HorizontalAlignment="Left"

Margin="0 0 0 5"

LineHeight="20"

FontSize="14"

FontWeight="SemiBold"

Text="{x:Bind Title}" />

<TextBlock Name="descriptionTextBlock"

Style="{ThemeResource BodyTextBlockStyle}"

Margin="0 0 0 10"

Width="350"

MaxHeight="60"

TextTrimming="CharacterEllipsis"

TextWrapping="Wrap"

FontFamily="Segoe UI"

FontWeight="Normal"

Text="{x:Bind Description}"

IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="0"

Text="{x:Bind Views}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Text=" Views " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Text=" ⋅ " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind Likes}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Text=" Likes" />

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 메시지 번호
        /// </summary>
        private int messageNumber;

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 설명 텍스트 블럭 텍스트 트리밍 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

        /// <summary>
        /// 설명 텍스트 블럭 텍스트 트리밍 트리밍 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;

            string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

            ToolTipService.SetToolTip(textBlock, text);
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 메시지 번호

/// </summary>

private int messageNumber;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 설명 텍스트 블럭 텍스트 트리밍 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

/// <summary>

/// 설명 텍스트 블럭 텍스트 트리밍 트리밍 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)

{

TextBlock textBlock = sender as TextBlock;

string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

ToolTipService.SetToolTip(textBlock, text);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ListView 엘리먼트 : 최근 항목을 맨 아래 추가하기

■ ListView 엘리먼트에서 최근 항목을 맨 아래 추가하는 방법을 보여준다. ▶ Message.cs


using System;

using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메시지
    /// </summary>
    public class Message
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 메시지 텍스트 - MessageText

        /// <summary>
        /// 메시지 텍스트
        /// </summary>
        public string MessageText { get; private set; }

        #endregion
        #region 메시지 시간 - MessageTime

        /// <summary>
        /// 메시지 시간
        /// </summary>
        public DateTime MessageTime { get; private set; }

        #endregion
        #region 메시지 정렬 - MessageAlignment

        /// <summary>
        /// 메시지 정렬
        /// </summary>
        public HorizontalAlignment MessageAlignment { get; set; }

        #endregion

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

        #region 생성자 - Message(messageText, messageTime, messageAlignment)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="messageText">메시지 텍스트</param>
        /// <param name="messageTime">메시지 시간</param>
        /// <param name="messageAlignment">메시지 정렬</param>
        public Message(string messageText, DateTime messageTime, HorizontalAlignment messageAlignment)
        {
            MessageText      = messageText;
            MessageTime      = messageTime;
            MessageAlignment = messageAlignment;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return $"{MessageTime} {MessageText}";
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메시지

/// </summary>

public class Message

{

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

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

#region 메시지 텍스트 - MessageText

/// <summary>

/// 메시지 텍스트

/// </summary>

public string MessageText { get; private set; }

#endregion

#region 메시지 시간 - MessageTime

/// <summary>

/// 메시지 시간

/// </summary>

public DateTime MessageTime { get; private set; }

#endregion

#region 메시지 정렬 - MessageAlignment

/// <summary>

/// 메시지 정렬

/// </summary>

public HorizontalAlignment MessageAlignment { get; set; }

#endregion

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

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

#region 생성자 - Message(messageText, messageTime, messageAlignment)

/// <summary>

/// 생성자

/// </summary>

/// <param name="messageText">메시지 텍스트</param>

/// <param name="messageTime">메시지 시간</param>

/// <param name="messageAlignment">메시지 정렬</param>

public Message(string messageText, DateTime messageTime, HorizontalAlignment messageAlignment)

{

MessageText = messageText;

MessageTime = messageTime;

MessageAlignment = messageAlignment;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString()

{

return $"{MessageTime} {MessageText}";

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Name="grid"
        Margin="10">
        <Grid.Resources>
            <DataTemplate x:Key="MessageDataTemplateKey" x:DataType="local:Message">
                <Grid
                    HorizontalAlignment="{x:Bind MessageAlignment}"
                    Margin="5"
                    Height="Auto">
                    <StackPanel
                        Width="350"
                        MinHeight="75"
                        Padding="10 0 0 10"
                        Background="{ThemeResource SystemColorHighlightColor}"
                        CornerRadius="{StaticResource ControlCornerRadius}">
                        <TextBlock
                            Padding="0 10 0 0"
                            Foreground="{ThemeResource SystemColorHighlightTextColor}"
                            FontSize="20"
                            Text="{x:Bind MessageText}" />
                        <TextBlock
                            Padding="0 0 0 10"
                            Foreground="{ThemeResource SystemColorHighlightTextColor}"
                            FontSize="15"
                            Text="{x:Bind MessageTime}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"   />
            <ColumnDefinition Width="10"  />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <ListView Name="listView" Grid.Column="0"
            ItemTemplate="{StaticResource MessageDataTemplateKey}"
            BorderThickness="1"
            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
            SelectionMode="None">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel
                        VerticalAlignment="Bottom"
                        ItemsUpdatingScrollMode="KeepLastItemInView" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
        <StackPanel Grid.Column="2">
            <Button Name="sendMessageButton">
                Send Message
            </Button>
            <Button Name="receiveMessageButton">
                Receive Message
            </Button>
        </StackPanel>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid Name="grid"

Margin="10">

<Grid.Resources>

<Grid

HorizontalAlignment="{x:Bind MessageAlignment}"

Margin="5"

Height="Auto">

<StackPanel

Width="350"

MinHeight="75"

Padding="10 0 0 10"

Background="{ThemeResource SystemColorHighlightColor}"

CornerRadius="{StaticResource ControlCornerRadius}">

<TextBlock

Padding="0 10 0 0"

Foreground="{ThemeResource SystemColorHighlightTextColor}"

FontSize="20"

Text="{x:Bind MessageText}" />

<TextBlock

Padding="0 0 0 10"

Foreground="{ThemeResource SystemColorHighlightTextColor}"

FontSize="15"

Text="{x:Bind MessageTime}" />

</StackPanel>

</Grid>

</DataTemplate>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ListView Name="listView" Grid.Column="0"

ItemTemplate="{StaticResource MessageDataTemplateKey}"

BorderThickness="1"

BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"

SelectionMode="None">

<ListView.ItemsPanel>

<ItemsStackPanel

VerticalAlignment="Bottom"

ItemsUpdatingScrollMode="KeepLastItemInView" />

</ItemsPanelTemplate>

</ListView.ItemsPanel>

<ListView.ItemContainerStyle>

</Style>

</ListView.ItemContainerStyle>

</ListView>

Send Message

</Button>

Receive Message

</Button>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;

using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 메시지 번호
        /// </summary>
        private int messageNumber;

        #endregion

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

        #region 생성자 - MainWindow()

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

            AddSendMessageItem();

            this.sendMessageButton.Click    += sendMessageButton_Click;
            this.receiveMessageButton.Click += receiveMessageButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region Send Message 버튼 클릭시 처리하기 - sendMessageButton_Click(sender, e)

        /// <summary>
        /// Send Message 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void sendMessageButton_Click(object sender, RoutedEventArgs e)
        {
            AddSendMessageItem();
        }

        #endregion
        #region Receive Message 버튼 클릭시 처리하기 - receiveMessageButton_Click(sender, e)

        /// <summary>
        /// Receive Message 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void receiveMessageButton_Click(object sender, RoutedEventArgs e)
        {
            this.listView.Items.Add
            (
                new Message
                (
                    $"Message {++this.messageNumber}",
                    DateTime.Now,
                    HorizontalAlignment.Left
                )
            );
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region Send Message 항목 추가하기 - AddSendMessageItem()

        /// <summary>
        /// Send Message 항목 추가하기
        /// </summary>
        private void AddSendMessageItem()
        {
            this.listView.Items.Add
            (
                new Message
                (
                    $"Message {++this.messageNumber}",
                    DateTime.Now,
                    HorizontalAlignment.Right
                )
            );
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

using System;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 메시지 번호

/// </summary>

private int messageNumber;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

AddSendMessageItem();

this.sendMessageButton.Click += sendMessageButton_Click;

this.receiveMessageButton.Click += receiveMessageButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region Send Message 버튼 클릭시 처리하기 - sendMessageButton_Click(sender, e)

/// <summary>

/// Send Message 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void sendMessageButton_Click(object sender, RoutedEventArgs e)

{

AddSendMessageItem();

}

#endregion

#region Receive Message 버튼 클릭시 처리하기 - receiveMessageButton_Click(sender, e)

/// <summary>

/// Receive Message 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void receiveMessageButton_Click(object sender, RoutedEventArgs e)

{

this.listView.Items.Add

(

new Message

(

$"Message {++this.messageNumber}",

DateTime.Now,

HorizontalAlignment.Left

)

);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region Send Message 항목 추가하기 - AddSendMessageItem()

/// <summary>

/// Send Message 항목 추가하기

/// </summary>

private void AddSendMessageItem()

{

this.listView.Items.Add

(

new Message

(

$"Message {++this.messageNumber}",

DateTime.Now,

HorizontalAlignment.Right

)

);

}

#endregion

}

TestProject.zip