[C#/WINUI3/.NET8] ItemsStackPanel 엘리먼트 : Orientation 속성을 사용해 ListView 엘리먼트 항목 수평 표시하기

■ ItemsStackPanel 엘리먼트의 Oientation 속성을 사용해 ListView 엘리먼트의 항목을 수평으로 표시하는 방법을 보여준다.

※ 비주얼 스튜디오에서 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"
        BorderThickness="1"
        BorderBrush="DarkGray"
        Height="60"
        ScrollViewer.HorizontalScrollMode="Enabled"
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        ScrollViewer.VerticalScrollMode="Disabled"
        ScrollViewer.VerticalScrollBarVisibility="Hidden">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <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"

BorderThickness="1"

BorderBrush="DarkGray"

Height="60"

ScrollViewer.HorizontalScrollMode="Enabled"

ScrollViewer.HorizontalScrollBarVisibility="Auto"

ScrollViewer.VerticalScrollMode="Disabled"

ScrollViewer.VerticalScrollBarVisibility="Hidden">

<ListView.ItemsPanel>

</ItemsPanelTemplate>

</ListView.ItemsPanel>

<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