[C#/WINUI3/.NET6] GridView 엘리먼트 : ItemTemplate/ItemsPanel 속성을 사용해 레이아웃 커스텀마이징하기

■ GridView 엘리먼트의 ItemTemplate/ItemsPanel 속성을 사용해 레이아웃을 커스텀마이징하는 방법을 보여준다.

▶ 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">
    <Border
        Margin="10"
        BorderThickness="1"
        BorderBrush="Black">
        <Border.Resources>
            <DataTemplate x:Key="ImageOverlayTemplate" x:DataType="local:CustomDataObject">
                <Grid Width="150">
                    <Image
                        Stretch="UniformToFill"
                        Source="{x:Bind ImageLocation}" />
                    <StackPanel
                        VerticalAlignment="Bottom"
                        Height="40"
                        Padding="5 1 5 1"
                        Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                        Orientation="Vertical"
                        Opacity="0.75">
                        <TextBlock
                            Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                            Text="{x:Bind Title}" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                Text="{x:Bind Likes}" />
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                Text=" Likes" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Border.Resources>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"   />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <GridView Name="gridView" Grid.Column="0"
                Margin="10"
                ItemTemplate="{StaticResource ImageOverlayTemplate}">
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                        <Setter Property="Margin" Value="5" />
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Name="itemsWrapGrid"
                            Orientation="Horizontal"
                            MaximumRowsOrColumns="3"
                            Loaded="itemsWrapGrid_InitWrapGrid" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
            <StackPanel Grid.Column="1"
                Margin="0 10 10 0">
                <StackPanel.Resources>
                    <Style x:Key="DefaultNumberBoxStyleKey" TargetType="NumberBox">
                        <Setter Property="SpinButtonPlacementMode"    Value="Inline"   />
                        <Setter Property="SmallChange"                Value="1"        />
                        <Setter Property="HorizontalAlignment"        Value="Stretch"  />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"  />
                        <Setter Property="MaxWidth"                   Value="250"      />
                    </Style>
                </StackPanel.Resources>
                <NumberBox Name="columnSpaceNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    Header="Space between columns"
                    Minimum="0"
                    Maximum="100"
                    Value="5" />
                <NumberBox Name="rowSpaceNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    Margin="0 10 0 0"
                    Header="Space between rows"
                    Minimum="0"
                    Maximum="100"
                    Value="5" />
                <NumberBox Name="wrapItemCountNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    Margin="0 10 0 0"
                    Header="Maximum number of items before wrapping"
                    Minimum="1"
                    Maximum="8"
                    Value="3" />
            </StackPanel>
        </Grid>
    </Border>
</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">

<Border

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<Border.Resources>

<Image

Stretch="UniformToFill"

Source="{x:Bind ImageLocation}" />

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"

Orientation="Vertical"

Opacity="0.75">

<TextBlock

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text=" Likes" />

</StackPanel>

</Grid>

</DataTemplate>

</Border.Resources>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<GridView Name="gridView" Grid.Column="0"

Margin="10"

ItemTemplate="{StaticResource ImageOverlayTemplate}">

<GridView.ItemContainerStyle>

</Style>

</GridView.ItemContainerStyle>

<GridView.ItemsPanel>

<ItemsWrapGrid Name="itemsWrapGrid"

Orientation="Horizontal"

MaximumRowsOrColumns="3"

Loaded="itemsWrapGrid_InitWrapGrid" />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

</GridView>

<StackPanel Grid.Column="1"

Margin="0 10 10 0">

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<NumberBox Name="columnSpaceNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

Header="Space between columns"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="rowSpaceNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

Margin="0 10 0 0"

Header="Space between rows"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="wrapItemCountNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

Margin="0 10 0 0"

Header="Maximum number of items before wrapping"

Minimum="1"

Maximum="8"

Value="3" />

</StackPanel>

</Grid>

</Border>

</Window>

▶ MainWindow.xaml.cs


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

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 ItemsWrapGrid itemsWrapGrid;

        #endregion

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

        #region 생성자 - MainWindow()

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

            List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList();

            ObservableCollection<CustomDataObject> sourceCollection = new ObservableCollection<CustomDataObject>(sourceList);

            this.gridView.ItemsSource = sourceCollection;

            this.columnSpaceNumberBox.ValueChanged   += numberBox_ValueChanged;
            this.rowSpaceNumberBox.ValueChanged      += numberBox_ValueChanged;
            this.wrapItemCountNumberBox.ValueChanged += numberBox_ValueChanged;
        }

        #endregion

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

        #region 항목 랩 그리드 초기화시 처리하기 - itemsWrapGrid_InitWrapGrid(sender, e)

        /// <summary>
        /// 항목 랩 그리드 초기화시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsWrapGrid_InitWrapGrid(object sender, RoutedEventArgs e)
        {
            this.itemsWrapGrid = sender as ItemsWrapGrid;

            this.itemsWrapGrid.MaximumRowsOrColumns = 3;
        }

        #endregion
        #region 넘버 박스 값 변경시 처리하기 - numberBox_ValueChanged(sender, e)

        /// <summary>
        /// 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.itemsWrapGrid == null)
            {
                return;
            }

            if(sender == this.wrapItemCountNumberBox)
            {
                this.itemsWrapGrid.MaximumRowsOrColumns = (int)this.wrapItemCountNumberBox.Value;

                return;
            }

            int rowSpace    = (int)this.rowSpaceNumberBox.Value;
            int columnSpace = (int)this.columnSpaceNumberBox.Value;

            for(int i = 0; i < this.gridView.Items.Count; i++)
            {
                GridViewItem item = this.gridView.ContainerFromIndex(i) as GridViewItem;

                Thickness thickness = item.Margin;

                thickness.Left   = columnSpace;
                thickness.Top    = rowSpace;
                thickness.Right  = columnSpace;
                thickness.Bottom = rowSpace;

                item.Margin = thickness;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

using System.Collections.Generic;

using System.Collections.ObjectModel;

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 ItemsWrapGrid itemsWrapGrid;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList();

ObservableCollection<CustomDataObject> sourceCollection = new ObservableCollection<CustomDataObject>(sourceList);

this.gridView.ItemsSource = sourceCollection;

this.columnSpaceNumberBox.ValueChanged += numberBox_ValueChanged;

this.rowSpaceNumberBox.ValueChanged += numberBox_ValueChanged;

this.wrapItemCountNumberBox.ValueChanged += numberBox_ValueChanged;

}

#endregion

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

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

#region 항목 랩 그리드 초기화시 처리하기 - itemsWrapGrid_InitWrapGrid(sender, e)

/// <summary>

/// 항목 랩 그리드 초기화시 처리하기

/// </summary>

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

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

private void itemsWrapGrid_InitWrapGrid(object sender, RoutedEventArgs e)

{

this.itemsWrapGrid = sender as ItemsWrapGrid;

this.itemsWrapGrid.MaximumRowsOrColumns = 3;

}

#endregion

#region 넘버 박스 값 변경시 처리하기 - numberBox_ValueChanged(sender, e)

/// <summary>

/// 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void numberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.itemsWrapGrid == null)

{

return;

}

if(sender == this.wrapItemCountNumberBox)

{

this.itemsWrapGrid.MaximumRowsOrColumns = (int)this.wrapItemCountNumberBox.Value;

return;

}

int rowSpace = (int)this.rowSpaceNumberBox.Value;

int columnSpace = (int)this.columnSpaceNumberBox.Value;

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

{

GridViewItem item = this.gridView.ContainerFromIndex(i) as GridViewItem;

Thickness thickness = item.Margin;

thickness.Left = columnSpace;

thickness.Top = rowSpace;

thickness.Right = columnSpace;

thickness.Bottom = rowSpace;

item.Margin = thickness;

}

#endregion

}

TestProject.zip