[C#/WINUI3/.NET8] ListView 엘리먼트 : ItemTemplate 속성을 사용해 Items 속성 설정 데이터 표시하기

■ ListView 엘리먼트의 ItemTemplate 속성을 사용해 Items 속성 설정 데이터를 표시하는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ 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">
    <ListView
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="400"
        Height="400"
        BorderThickness="1"
        BorderBrush="DarkGray">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="x:String">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*"    />
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Width="32"
                        Height="32"
                        Source="Assets/placeholder.png" />
                    <TextBlock Grid.Column="1"
                        VerticalAlignment="Center"
                        Margin="10 0 0 0"
                        Foreground="Teal"
                        FontSize="14"
                        Text="{x:Bind}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</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">

<ListView

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="400"

BorderThickness="1"

BorderBrush="DarkGray">

<ListView.ItemTemplate>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="32"

Height="32"

Source="Assets/placeholder.png" />

<TextBlock Grid.Column="1"

VerticalAlignment="Center"

Margin="10 0 0 0"

Foreground="Teal"

FontSize="14"

Text="{x:Bind}" />

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

<x:String>Apricot</x:String>

<x:String>Banana</x:String>

<x:String>Cherry</x:String>

<x:String>Orange</x:String>

<x:String>Strawberry</x:String>

</ListView>

</Page>

TestProject.zip