[C#/UWP] ItemsRepeater 엘리먼트 : 중첩 레이아웃 사용하기

TestProject.zip

0.02MB

▶ 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 자식 컬렉션 - ChildCollection

        /// <summary>
        /// 자식 컬렉션
        /// </summary>
        public ObservableCollection<string> ChildCollection { get; set; }

        #endregion

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

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

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

        #endregion
    }
}

 

728x90

 

▶ 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="5"
                    Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"
                    TextWrapping="Wrap"
                    Text="{x:Bind}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="CategoryDataTemplateKey" x:DataType="local:Category">
            <StackPanel>
                <TextBlock
                    Style="{StaticResource TitleTextBlockStyle}"
                    Padding="5"
                    Text="{x:Bind CategoryName}" />
                <muxc:ItemsRepeater Name="innerRepeater"
                    ItemTemplate="{StaticResource StringDataTemplateKey}"
                    ItemsSource="{x:Bind ChildCollection}">
                    <muxc:ItemsRepeater.Layout>
                        <muxc:StackLayout Orientation="Horizontal" />
                    </muxc:ItemsRepeater.Layout>
                </muxc:ItemsRepeater>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <ScrollViewer
            Margin="10"
            HorizontalScrollMode="Auto"
            HorizontalScrollBarVisibility="Auto">
            <muxc:ItemsRepeater Name="outerRepeater"
                ItemTemplate ="{StaticResource CategoryDataTemplateKey}">
                <muxc:ItemsRepeater.Layout>
                    <muxc:StackLayout Orientation="Vertical" />
                </muxc:ItemsRepeater.Layout>
            </muxc:ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Page>

 

300x250

 

▶ MainPage.xaml.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;
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 엘리먼트 : 중첩 레이아웃 사용하기";

            #endregion

            List<Category> categoryList = new List<Category>
            {
                new Category("과일"  , GetFruitCollection()    ),
                new Category("채소"  , GetVegetableCollection()),
                new Category("곡물"  , GetGrainCollection()    ),
                new Category("단백질", GetProteinCollection()  )
            };

            this.outerRepeater.ItemsSource = categoryList;
        }

        #endregion

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

        #region 과일 컬렉션 구하기 - GetFruitCollection()

        /// <summary>
        /// 과일 컬렉션 구하기
        /// </summary>
        /// <returns>과일 컬렉션</returns>
        private ObservableCollection<string> GetFruitCollection()
        {
            return new ObservableCollection<string> { "살구", "바나나", "포도", "딸기", "수박", "자두", "블루베리" };
        }

        #endregion
        #region 채소 컬렉션 구하기 - GetVegetableCollection()

        /// <summary>
        /// 채소 컬렉션 구하기
        /// </summary>
        /// <returns>채소 컬렉션</returns>
        private ObservableCollection<string> GetVegetableCollection()
        {
            return new ObservableCollection<string>{ "브로콜리", "시금치", "고구마", "콜리 플라워", "양파", "브뤼셀 콩나물", "당근" };
        }

        #endregion
        #region 곡물 컬렉션 구하기 - GetGrainCollection()

        /// <summary>
        /// 곡물 컬렉션 구하기
        /// </summary>
        /// <returns>곡물 컬렉션</returns>
        private ObservableCollection<string> GetGrainCollection()
        {
            return new ObservableCollection<string>{ "쌀", "퀴노아", "파스타", "빵", "파로", "귀리", "보리" };
        }

        #endregion
        #region 단백질 컬렉션 구하기 - GetProteinCollection()

        /// <summary>
        /// 단백질 컬렉션 구하기
        /// </summary>
        /// <returns>단백질 컬렉션</returns>
        private ObservableCollection<string> GetProteinCollection()
        {
            return new ObservableCollection<string>{ "스테이크", "치킨", "두부", "연어", "돼지", "병아리", "달걀" };
        }

        #endregion
    }
}