[C#/WINUI3/.NET8] ListView 엘리먼트 : ItemContainerStyle 속성을 사용해 항목 컨테이너 속성 설정하기 (ListViewItem 객체)

■ ListView 엘리먼트의 ItemContainerStyle 속성을 사용해 항목 컨테이너 속성을 설정하는 방법을 보여준다. (ListViewItem 객체)

※ ListViewItem의 컨텐츠는 기본적으로 왼쪽에 맞추어진다
※ 즉 HorizontalContentAlignmentProperty가 Left로 설정되어 있다.
※ 가로로 쌓은 요소 또는 동일한 Grid 행에 배치된 요소와 같이 ListViewItem 내에 가로로 인접한 여러 요소가 있는 경우 모두 왼쪽에 맞추어지고 정의된 여백으로만 구분된다.
※ 요소를 분산하여 ListItem의 전체 본문을 채우려면 ListView 내의 Setter를 사용하여 HorizontalContentAlignmentProperty를 Stretch로 설정해야 한다.

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

▶ NamedColor.cs


using Windows.UI;

using Microsoft.UI.Xaml.Media;

namespace TestProject;

/// <summary>
/// 명칭있는 색상
/// </summary>
public class NamedColor
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 브러시
    /// </summary>
    private SolidColorBrush brush;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion
    #region 색상 - Color

    /// <summary>
    /// 색상
    /// </summary>
    public Color Color { get; set; }

    #endregion
    #region 브러시 - Brush

    /// <summary>
    /// 브러시
    /// </summary>
    public SolidColorBrush Brush
    {
        get
        {
            return this.brush;
        }
    }

    #endregion

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

    #region 생성자 - NamedColor(name, color)

    /// <summary>
    /// 생성자
    /// </summary>
    /// <param name="name">명칭</param>
    /// <param name="color">색상</param>
    public NamedColor(string name, Color color)
    {
        Name  = name;
        Color = color;

        this.brush = new SolidColorBrush(color);
    }

    #endregion
}

using Windows.UI;

using Microsoft.UI.Xaml.Media;

namespace TestProject;

/// <summary>

/// 명칭있는 색상

/// </summary>

public class NamedColor

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 브러시

/// </summary>

private SolidColorBrush brush;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 색상 - Color

/// <summary>

/// 색상

/// </summary>

public Color Color { get; set; }

#endregion

#region 브러시 - Brush

/// <summary>

/// 브러시

/// </summary>

public SolidColorBrush Brush

{

get

{

return this.brush;

}

#endregion

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

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

#region 생성자 - NamedColor(name, color)

/// <summary>

/// 생성자

/// </summary>

/// <param name="name">명칭</param>

/// <param name="color">색상</param>

public NamedColor(string name, Color color)

{

Name = name;

Color = color;

this.brush = new SolidColorBrush(color);

}

#endregion

}

▶ 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"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <ListView Name="listView"
        Margin="10"
        BorderThickness="1"
        BorderBrush="DarkGray"
        Padding="10">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:NamedColor">
                <Grid
                    HorizontalAlignment="Center"
                    Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"  />
                        <ColumnDefinition Width="54" />
                        <ColumnDefinition Width="10" />
                        <ColumnDefinition Width="64" />
                        <ColumnDefinition Width="64" />
                        <ColumnDefinition Width="64" />
                        <ColumnDefinition Width="*"  />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
                        Width="44"
                        Height="44"
                        Fill="{x:Bind Brush}" />
                    <TextBlock Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="4"
                        Text="{x:Bind Name}" />
                    <TextBlock  Grid.Row="1" Grid.Column="3"
                        Foreground="Red"
                        Text="{x:Bind Color.R}" />
                    <TextBlock Grid.Row="1" Grid.Column="4"
                        Foreground="Green"
                        Text="{x:Bind Color.G}" />
                    <TextBlock Grid.Row="1" Grid.Column="5"
                        Foreground="Blue"
                        Text="{x:Bind Color.B}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Background"                 Value="HotPink" />
            </Style>
        </ListView.ItemContainerStyle>
    </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"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<ListView Name="listView"

Margin="10"

BorderThickness="1"

BorderBrush="DarkGray"

Padding="10">

<ListView.ItemTemplate>

<Grid

HorizontalAlignment="Center"

Margin="5">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"

Width="44"

Height="44"

Fill="{x:Bind Brush}" />

<TextBlock Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="4"

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

<TextBlock Grid.Row="1" Grid.Column="3"

Foreground="Red"

Text="{x:Bind Color.R}" />

<TextBlock Grid.Row="1" Grid.Column="4"

Foreground="Green"

Text="{x:Bind Color.G}" />

<TextBlock Grid.Row="1" Grid.Column="5"

Foreground="Blue"

Text="{x:Bind Color.B}" />

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

<ListView.ItemContainerStyle>

</Style>

</ListView.ItemContainerStyle>

</ListView>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;
using System.Linq;
using System.Reflection;

using Windows.UI;

using Microsoft.UI;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        List<NamedColor> namedColorList = new List<NamedColor>();

        IEnumerable<PropertyInfo> propertyInfoEnumerable = typeof(Colors).GetRuntimeProperties();

        for(int i = 0; i < propertyInfoEnumerable.Count(); i++)
        {
            PropertyInfo propertyInfo = propertyInfoEnumerable.ElementAt(i);

            if(!propertyInfo.GetMethod.IsStatic)
            {
                continue;
            }

            if(propertyInfo.PropertyType != typeof(Color))
            {
                continue;
            }

            string name  = propertyInfo.Name;
            Color  color = (Color)propertyInfo.GetValue(null);

            NamedColor namedColor = new NamedColor(name, color);

            namedColorList.Add(namedColor);
        }

        this.listView.ItemsSource = namedColorList;
    }

    #endregion
}

using System.Collections.Generic;

using System.Linq;

using System.Reflection;

using Windows.UI;

using Microsoft.UI;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

List<NamedColor> namedColorList = new List<NamedColor>();

IEnumerable<PropertyInfo> propertyInfoEnumerable = typeof(Colors).GetRuntimeProperties();

for(int i = 0; i < propertyInfoEnumerable.Count(); i++)

{

PropertyInfo propertyInfo = propertyInfoEnumerable.ElementAt(i);

if(!propertyInfo.GetMethod.IsStatic)

{

continue;

}

if(propertyInfo.PropertyType != typeof(Color))

{

continue;

}

string name = propertyInfo.Name;

Color color = (Color)propertyInfo.GetValue(null);

NamedColor namedColor = new NamedColor(name, color);

namedColorList.Add(namedColor);

}

this.listView.ItemsSource = namedColorList;

}

#endregion

}

TestProject.zip