WinUi 3 GridView 사용법

이름 설정

 

MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Grid.Resources>
            <CollectionViewSource x:Name="MyGridViewData" IsSourceGrouped="True" 
                                ItemsPath="Connection"/>
        </Grid.Resources>
        <GridView ItemsSource="{Binding Source={StaticResource MyGridViewData}}">
            <GridView.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1" Height="30">
                        <TextBlock Text="제목1" TextAlignment="Center" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1" Height="30">
                        <TextBlock Text="제목2" TextAlignment="Center" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1" Height="30">
                        <TextBlock Text="제목3" TextAlignment="Center" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </Grid>
            </GridView.Header>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel BorderBrush="Black" BorderThickness="1" Width="100" Height="100">
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="{Binding Country}" />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Window>

 

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace App1
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            DataBInd();
        }

        private void DataBInd()
        {
            List<Item> items = new List<Item>();

            Person person01 = new Person { Name = "홍길동", Country = "미국" };
            Item item01 = new Item();
            item01.Connection.Add(person01);
            items.Add(item01);
            Person person02 = new Person { Name = "김길동", Country = "대만" };
            Item item02 = new Item();
            item02.Connection.Add(person02);
            items.Add(item02);
            Person person03 = new Person { Name = "김철수", Country = "일본" };
            Item item03 = new Item();
            item03.Connection.Add(person03);
            items.Add(item03);
            Person person04 = new Person { Name = "박문수", Country = "중국" };
            Item item04 = new Item();
            item04.Connection.Add(person04);
            items.Add(item04);
            Person person05 = new Person { Name = "이순신", Country = "한국" };
            Item item05 = new Item();
            item05.Connection.Add(person05);
            items.Add(item05);
            Person person06 = new Person { Name = "박절수", Country = "러시아" };
            Item item06 = new Item();
            item06.Connection.Add(person06);
            items.Add(item06);

            MyGridViewData.Source = items;
        }

    }

    public class Item
    {
        public Item()
        {
            Connection = new ObservableCollection<Person>();
        }
        public ObservableCollection<Person> Connection { get; private set; }
    }

    public class Person
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

 

결과

 

참고 사이트

GridView Class (Microsoft.UI.Xaml.Controls) - Windows App SDK