[C#/WINUI2.5] ItemsRepeater 엘리먼트 : ItemsSource 속성에서 혼합 타입 컬렉션 사용하기

■ ItemsRepeater 엘리먼트의 ItemsSource 속성에서 혼합 타입 컬렉션을 사용하는 방법을 보여준다.

▶ CustomDataTemplateSelector.cs


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 커스텀 데이터 템플리트 선택자
    /// </summary>
    public class CustomDataTemplateSelector : 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 Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 커스텀 데이터 템플리트 선택자

/// </summary>

public class CustomDataTemplateSelector : 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

}

▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.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="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:CustomDataTemplateSelector x:Key="CustomDataTemplateSelectorKey"
            StringTemplate="{StaticResource StringDataTemplateKey}"
            IntegerTemplate="{StaticResource IntegerDataTemplateKey}" />
    </Page.Resources>
    <Grid>
        <muxc:ItemsRepeater Name="itemsRepeater" Grid.Column="0"
            Margin="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            ItemTemplate="{StaticResource CustomDataTemplateSelectorKey}">
            <muxc:ItemsRepeater.Layout>
                <muxc:UniformGridLayout
                    MaximumRowsOrColumns="3"
                    MinItemWidth="200"
                    MinItemHeight="200" />
            </muxc:ItemsRepeater.Layout>
        </muxc:ItemsRepeater>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

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

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

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<Grid

Margin="10"

Background="{ThemeResource SystemControlBackgroundAccentBrush}">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"

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:CustomDataTemplateSelector x:Key="CustomDataTemplateSelectorKey"

StringTemplate="{StaticResource StringDataTemplateKey}"

IntegerTemplate="{StaticResource IntegerDataTemplateKey}" />

</Page.Resources>

<Grid>

<muxc:ItemsRepeater Name="itemsRepeater" Grid.Column="0"

Margin="10"

HorizontalAlignment="Center"

VerticalAlignment="Center"

ItemTemplate="{StaticResource CustomDataTemplateSelectorKey}">

<muxc:ItemsRepeater.Layout>

<muxc:UniformGridLayout

MaximumRowsOrColumns="3"

MinItemWidth="200"

MinItemHeight="200" />

</muxc:ItemsRepeater.Layout>

</muxc:ItemsRepeater>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "ItemsRepeater 엘리먼트 : ItemsSource 속성을 사용해 혼합 타입 컬렉션 사용하기";

            #endregion

            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 Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

#region 윈도우 크기를 설정한다.

double width = 800d;

double height = 600d;

double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

ApplicationView.PreferredLaunchViewSize = windowSize;

Window.Current.Activate();

ApplicationView.GetForCurrentView().TryResizeView(windowSize);

#endregion

#region 윈도우 제목을 설정한다.

ApplicationView.GetForCurrentView().Title = "ItemsRepeater 엘리먼트 : ItemsSource 속성을 사용해 혼합 타입 컬렉션 사용하기";

#endregion

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