WINUI3 Archives - 28 중 27 번째 페이지

[C#/WINUI3/.NET6] ListView 클래스 : SelectionMode 속성 사용하기

■ ListView 클래스의 SelectionMode 속성을 사용하는 방법을 보여준다. ▶ NativeHelper.cs


using System.Runtime.InteropServices;

namespace TestProject
{
    /// <summary>
    /// 네이티브 헬퍼
    /// </summary>
    public class NativeHelper
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Import
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

        /// <summary>
        /// 현재 패키지 ID 구하기
        /// </summary>
        /// <param name="bufferLength">버퍼 길이</param>
        /// <param name="buffer">버퍼</param>
        /// <returns>처리 결과</returns>
        [DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]
        [return : MarshalAs(UnmanagedType.U4)]
        private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region Field

        /// <summary>
        /// ERROR_SUCCESS
        /// </summary>
        public const int ERROR_SUCCESS = 0;

        /// <summary>
        /// ERROR_INSUFFICIENT_BUFFER
        /// </summary>
        public const int ERROR_INSUFFICIENT_BUFFER = 122;

        /// <summary>
        /// APPMODEL_ERROR_NO_PACKAGE
        /// </summary>
        public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 애플리케이션 패키지 여부 - IsAppPackaged

        /// <summary>
        /// 애플리케이션 패키지 여부
        /// </summary>
        public static bool IsAppPackaged
        {
            get
            {
                int  bufferSize = 0;
                uint lastError  = GetCurrentPackageId(ref bufferSize, out _);
                bool isPackaged = true;

                if(lastError == APPMODEL_ERROR_NO_PACKAGE)
                {
                    isPackaged = false;
                }

                return isPackaged;
            }
        }

        #endregion
    }
}

using System.Runtime.InteropServices;

namespace TestProject

{

/// <summary>

/// 네이티브 헬퍼

/// </summary>

public class NativeHelper

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Import

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

/// <summary>

/// 현재 패키지 ID 구하기

/// </summary>

/// <param name="bufferLength">버퍼 길이</param>

/// <param name="buffer">버퍼</param>

/// <returns>처리 결과</returns>

[DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]

[return : MarshalAs(UnmanagedType.U4)]

private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

#endregion

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

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

#region Field

/// <summary>

/// ERROR_SUCCESS

/// </summary>

public const int ERROR_SUCCESS = 0;

/// <summary>

/// ERROR_INSUFFICIENT_BUFFER

/// </summary>

public const int ERROR_INSUFFICIENT_BUFFER = 122;

/// <summary>

/// APPMODEL_ERROR_NO_PACKAGE

/// </summary>

public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 애플리케이션 패키지 여부 - IsAppPackaged

/// <summary>

/// 애플리케이션 패키지 여부

/// </summary>

public static bool IsAppPackaged

{

get

{

int bufferSize = 0;

uint lastError = GetCurrentPackageId(ref bufferSize, out _);

bool isPackaged = true;

if(lastError == APPMODEL_ERROR_NO_PACKAGE)

{

isPackaged = false;

}

return isPackaged;

}

#endregion

}

▶ FileLoader.cs


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Threading.Tasks;

using Windows.Storage;

namespace TestProject
{
    /// <summary>
    /// 파일 로더
    /// </summary>
    public class FileLoader
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 텍스트 로드하기 - LoadText(relativeFilePath)

        /// <summary>
        /// 텍스트 로드하기
        /// </summary>
        /// <param name="relativeFilePath">상대적인 파일 경로</param>
        /// <returns>텍스트</returns>
        public static async Task<string> LoadText(string relativeFilePath)
        {
            StorageFile storageFile = null;

            if(!NativeHelper.IsAppPackaged)
            {
                string entryAssemblyFilePath     = Assembly.GetEntryAssembly().Location;
                string entryAssemblyDirectorPath = Path.GetDirectoryName(entryAssemblyFilePath);
                string filePath                  = Path.Combine(entryAssemblyDirectorPath, relativeFilePath);
                string finalFilePath             = Path.GetFullPath(filePath);

                storageFile = await StorageFile.GetFileFromPathAsync(finalFilePath);
            }
            else
            {
                Uri sourceURI = new Uri($"ms-appx:///{relativeFilePath}");

                storageFile = await StorageFile.GetFileFromApplicationUriAsync(sourceURI);
            }

            return await FileIO.ReadTextAsync(storageFile);
        }

        #endregion
        #region 라인 리스트 로드하기 - LoadLineList(relativeFilePath)

        /// <summary>
        /// 라인 리스트 로드하기
        /// </summary>
        /// <param name="relativeFilePath">상대적인 파일 경로</param>
        /// <returns>라인 리스트</returns>
        public static async Task<IList<string>> LoadLineList(string relativeFilePath)
        {
            string text = await LoadText(relativeFilePath);

            return text.Split(Environment.NewLine).ToList();
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Reflection;

using System.Threading.Tasks;

using Windows.Storage;

namespace TestProject

{

/// <summary>

/// 파일 로더

/// </summary>

public class FileLoader

{

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 텍스트 로드하기 - LoadText(relativeFilePath)

/// <summary>

/// 텍스트 로드하기

/// </summary>

/// <param name="relativeFilePath">상대적인 파일 경로</param>

/// <returns>텍스트</returns>

public static async Task<string> LoadText(string relativeFilePath)

{

StorageFile storageFile = null;

if(!NativeHelper.IsAppPackaged)

{

string entryAssemblyFilePath = Assembly.GetEntryAssembly().Location;

string entryAssemblyDirectorPath = Path.GetDirectoryName(entryAssemblyFilePath);

string filePath = Path.Combine(entryAssemblyDirectorPath, relativeFilePath);

string finalFilePath = Path.GetFullPath(filePath);

storageFile = await StorageFile.GetFileFromPathAsync(finalFilePath);

}

else

{

Uri sourceURI = new Uri($"ms-appx:///{relativeFilePath}");

storageFile = await StorageFile.GetFileFromApplicationUriAsync(sourceURI);

}

return await FileIO.ReadTextAsync(storageFile);

}

#endregion

#region 라인 리스트 로드하기 - LoadLineList(relativeFilePath)

/// <summary>

/// 라인 리스트 로드하기

/// </summary>

/// <param name="relativeFilePath">상대적인 파일 경로</param>

/// <returns>라인 리스트</returns>

public static async Task<IList<string>> LoadLineList(string relativeFilePath)

{

string text = await LoadText(relativeFilePath);

return text.Split(Environment.NewLine).ToList();

}

#endregion

}

▶ GroupInfoList.cs


using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 그룹 정보 리스트
    /// </summary>
    public class GroupInfoList : List<object>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 키 - Key

        /// <summary>
        /// 키
        /// </summary>
        public object Key { get; set; }

        #endregion

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

        #region 생성자 - GroupInfoList(itemEnumerable)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="itemEnumerable">항목 열거 가능형</param>
        public GroupInfoList(IEnumerable<object> itemEnumerable) : base(itemEnumerable)
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return $"Group {Key}";
        }

        #endregion
    }
}

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 그룹 정보 리스트

/// </summary>

public class GroupInfoList : List<object>

{

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

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

#region 키 - Key

/// <summary>

/// 키

/// </summary>

public object Key { get; set; }

#endregion

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

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

#region 생성자 - GroupInfoList(itemEnumerable)

/// <summary>

/// 생성자

/// </summary>

/// <param name="itemEnumerable">항목 열거 가능형</param>

public GroupInfoList(IEnumerable<object> itemEnumerable) : base(itemEnumerable)

{

}

#endregion

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

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

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns></returns>

public override string ToString()

{

return $"Group {Key}";

}

#endregion

}

▶ Contact.cs


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;

namespace TestProject
{
    /// <summary>
    /// 연락처
    /// </summary>
    public class Contact
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - FirstName

        /// <summary>
        /// 이름
        /// </summary>
        public string FirstName { get; private set; }

        #endregion
        #region 성 - LastName

        /// <summary>
        /// 성
        /// </summary>
        public string LastName { get; private set; }

        #endregion
        #region 회사 - Company

        /// <summary>
        /// 회사
        /// </summary>
        public string Company { get; private set; }

        #endregion
        #region 성명 - Name

        /// <summary>
        /// 성명
        /// </summary>
        public string Name => $"{FirstName} {LastName}";

        #endregion

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

        #region 생성자 - Contact(firstName, lastName, company)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="firstName">이름</param>
        /// <param name="lastName">성</param>
        /// <param name="company">회사</param>
        public Contact(string firstName, string lastName, string company)
        {
            FirstName = firstName;
            LastName  = lastName;
            Company   = company;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 연락처 컬렉션 구하기 (비동기) - GetContactCollectionAsync()

        /// <summary>
        /// 연락처 컬렉션 구하기 (비동기)
        /// </summary>
        /// <returns>연락처 컬렉션 태스크</returns>
        public async static Task<ObservableCollection<Contact>> GetContactCollectionAsync()
        {
            IList<string> lineList = await FileLoader.LoadLineList("DATA/Contacts.txt");

            ObservableCollection<Contact> contactCollection = new ObservableCollection<Contact>();

            for(int i = 0; i < lineList.Count - 2; i += 3)
            {
                contactCollection.Add(new Contact(lineList[i], lineList[i + 1], lineList[i + 2]));
            }

            return contactCollection;
        }

        #endregion
        #region 그룹 연락처 컬렉션 구하기 (비동기) - GetGroupedContactCollectionAsync()

        /// <summary>
        /// 그룹 연락처 컬렉션 구하기 (비동기)
        /// </summary>
        /// <returns>그룹 연락처 컬렉션 태스크</returns>
        public static async Task<ObservableCollection<GroupInfoList>> GetGroupedContactCollectionAsync()
        {
            var query = from item in await GetContactCollectionAsync()
                        group item by item.LastName.Substring(0, 1).ToUpper() into g
                        orderby g.Key
                        select new GroupInfoList(g) { Key = g.Key };

            return new ObservableCollection<GroupInfoList>(query);
        }

        #endregion
        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return Name;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Threading.Tasks;

namespace TestProject

{

/// <summary>

/// 연락처

/// </summary>

public class Contact

{

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

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

#region 이름 - FirstName

/// <summary>

/// 이름

/// </summary>

public string FirstName { get; private set; }

#endregion

#region 성 - LastName

/// <summary>

/// 성

/// </summary>

public string LastName { get; private set; }

#endregion

#region 회사 - Company

/// <summary>

/// 회사

/// </summary>

public string Company { get; private set; }

#endregion

#region 성명 - Name

/// <summary>

/// 성명

/// </summary>

public string Name => $"{FirstName} {LastName}";

#endregion

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

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

#region 생성자 - Contact(firstName, lastName, company)

/// <summary>

/// 생성자

/// </summary>

/// <param name="firstName">이름</param>

/// <param name="lastName">성</param>

/// <param name="company">회사</param>

public Contact(string firstName, string lastName, string company)

{

FirstName = firstName;

LastName = lastName;

Company = company;

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 연락처 컬렉션 구하기 (비동기) - GetContactCollectionAsync()

/// <summary>

/// 연락처 컬렉션 구하기 (비동기)

/// </summary>

/// <returns>연락처 컬렉션 태스크</returns>

public async static Task<ObservableCollection<Contact>> GetContactCollectionAsync()

{

IList<string> lineList = await FileLoader.LoadLineList("DATA/Contacts.txt");

ObservableCollection<Contact> contactCollection = new ObservableCollection<Contact>();

for(int i = 0; i < lineList.Count - 2; i += 3)

{

contactCollection.Add(new Contact(lineList[i], lineList[i + 1], lineList[i + 2]));

}

return contactCollection;

}

#endregion

#region 그룹 연락처 컬렉션 구하기 (비동기) - GetGroupedContactCollectionAsync()

/// <summary>

/// 그룹 연락처 컬렉션 구하기 (비동기)

/// </summary>

/// <returns>그룹 연락처 컬렉션 태스크</returns>

public static async Task<ObservableCollection<GroupInfoList>> GetGroupedContactCollectionAsync()

{

var query = from item in await GetContactCollectionAsync()

group item by item.LastName.Substring(0, 1).ToUpper() into g

orderby g.Key

select new GroupInfoList(g) { Key = g.Key };

return new ObservableCollection<GroupInfoList>(query);

}

#endregion

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString()

{

return Name;

}

#endregion

}

▶ MainWindow.xaml

[C#/WINUI3/.NET6] ListView 클래스 : ItemsSource 속성 사용하기

■ ListView 클래스의 ItemsSource 속성을 사용하는 방법을 보여준다. ▶ NativeHelper.cs


using System.Runtime.InteropServices;

namespace TestProject
{
    /// <summary>
    /// 네이티브 헬퍼
    /// </summary>
    public class NativeHelper
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Import
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

        /// <summary>
        /// 현재 패키지 ID 구하기
        /// </summary>
        /// <param name="bufferLength">버퍼 길이</param>
        /// <param name="buffer">버퍼</param>
        /// <returns>처리 결과</returns>
        [DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]
        [return : MarshalAs(UnmanagedType.U4)]
        private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region Field

        /// <summary>
        /// ERROR_SUCCESS
        /// </summary>
        public const int ERROR_SUCCESS = 0;

        /// <summary>
        /// ERROR_INSUFFICIENT_BUFFER
        /// </summary>
        public const int ERROR_INSUFFICIENT_BUFFER = 122;

        /// <summary>
        /// APPMODEL_ERROR_NO_PACKAGE
        /// </summary>
        public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 애플리케이션 패키지 여부 - IsAppPackaged

        /// <summary>
        /// 애플리케이션 패키지 여부
        /// </summary>
        public static bool IsAppPackaged
        {
            get
            {
                int  bufferSize = 0;
                uint lastError  = GetCurrentPackageId(ref bufferSize, out _);
                bool isPackaged = true;

                if(lastError == APPMODEL_ERROR_NO_PACKAGE)
                {
                    isPackaged = false;
                }

                return isPackaged;
            }
        }

        #endregion
    }
}

using System.Runtime.InteropServices;

namespace TestProject

{

/// <summary>

/// 네이티브 헬퍼

/// </summary>

public class NativeHelper

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Import

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

/// <summary>

/// 현재 패키지 ID 구하기

/// </summary>

/// <param name="bufferLength">버퍼 길이</param>

/// <param name="buffer">버퍼</param>

/// <returns>처리 결과</returns>

[DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]

[return : MarshalAs(UnmanagedType.U4)]

private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

#endregion

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

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

#region Field

/// <summary>

/// ERROR_SUCCESS

/// </summary>

public const int ERROR_SUCCESS = 0;

/// <summary>

/// ERROR_INSUFFICIENT_BUFFER

/// </summary>

public const int ERROR_INSUFFICIENT_BUFFER = 122;

/// <summary>

/// APPMODEL_ERROR_NO_PACKAGE

/// </summary>

public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 애플리케이션 패키지 여부 - IsAppPackaged

/// <summary>

/// 애플리케이션 패키지 여부

/// </summary>

public static bool IsAppPackaged

{

get

{

int bufferSize = 0;

uint lastError = GetCurrentPackageId(ref bufferSize, out _);

bool isPackaged = true;

if(lastError == APPMODEL_ERROR_NO_PACKAGE)

{

isPackaged = false;

}

return isPackaged;

}

#endregion

}

▶ FileLoader.cs


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Threading.Tasks;

using Windows.Storage;

namespace TestProject
{
    /// <summary>
    /// 파일 로더
    /// </summary>
    public class FileLoader
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 텍스트 로드하기 - LoadText(relativeFilePath)

        /// <summary>
        /// 텍스트 로드하기
        /// </summary>
        /// <param name="relativeFilePath">상대적인 파일 경로</param>
        /// <returns>텍스트</returns>
        public static async Task<string> LoadText(string relativeFilePath)
        {
            StorageFile storageFile = null;

            if(!NativeHelper.IsAppPackaged)
            {
                string entryAssemblyFilePath     = Assembly.GetEntryAssembly().Location;
                string entryAssemblyDirectorPath = Path.GetDirectoryName(entryAssemblyFilePath);
                string filePath                  = Path.Combine(entryAssemblyDirectorPath, relativeFilePath);
                string finalFilePath             = Path.GetFullPath(filePath);

                storageFile = await StorageFile.GetFileFromPathAsync(finalFilePath);
            }
            else
            {
                Uri sourceURI = new Uri($"ms-appx:///{relativeFilePath}");

                storageFile = await StorageFile.GetFileFromApplicationUriAsync(sourceURI);
            }

            return await FileIO.ReadTextAsync(storageFile);
        }

        #endregion
        #region 라인 리스트 로드하기 - LoadLineList(relativeFilePath)

        /// <summary>
        /// 라인 리스트 로드하기
        /// </summary>
        /// <param name="relativeFilePath">상대적인 파일 경로</param>
        /// <returns>라인 리스트</returns>
        public static async Task<IList<string>> LoadLineList(string relativeFilePath)
        {
            string text = await LoadText(relativeFilePath);

            return text.Split(Environment.NewLine).ToList();
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Reflection;

using System.Threading.Tasks;

using Windows.Storage;

namespace TestProject

{

/// <summary>

/// 파일 로더

/// </summary>

public class FileLoader

{

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 텍스트 로드하기 - LoadText(relativeFilePath)

/// <summary>

/// 텍스트 로드하기

/// </summary>

/// <param name="relativeFilePath">상대적인 파일 경로</param>

/// <returns>텍스트</returns>

public static async Task<string> LoadText(string relativeFilePath)

{

StorageFile storageFile = null;

if(!NativeHelper.IsAppPackaged)

{

string entryAssemblyFilePath = Assembly.GetEntryAssembly().Location;

string entryAssemblyDirectorPath = Path.GetDirectoryName(entryAssemblyFilePath);

string filePath = Path.Combine(entryAssemblyDirectorPath, relativeFilePath);

string finalFilePath = Path.GetFullPath(filePath);

storageFile = await StorageFile.GetFileFromPathAsync(finalFilePath);

}

else

{

Uri sourceURI = new Uri($"ms-appx:///{relativeFilePath}");

storageFile = await StorageFile.GetFileFromApplicationUriAsync(sourceURI);

}

return await FileIO.ReadTextAsync(storageFile);

}

#endregion

#region 라인 리스트 로드하기 - LoadLineList(relativeFilePath)

/// <summary>

/// 라인 리스트 로드하기

/// </summary>

/// <param name="relativeFilePath">상대적인 파일 경로</param>

/// <returns>라인 리스트</returns>

public static async Task<IList<string>> LoadLineList(string relativeFilePath)

{

string text = await LoadText(relativeFilePath);

return text.Split(Environment.NewLine).ToList();

}

#endregion

}

▶ GroupInfoList.cs


using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 그룹 정보 리스트
    /// </summary>
    public class GroupInfoList : List<object>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 키 - Key

        /// <summary>
        /// 키
        /// </summary>
        public object Key { get; set; }

        #endregion

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

        #region 생성자 - GroupInfoList(itemEnumerable)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="itemEnumerable">항목 열거 가능형</param>
        public GroupInfoList(IEnumerable<object> itemEnumerable) : base(itemEnumerable)
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return $"Group {Key}";
        }

        #endregion
    }
}

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 그룹 정보 리스트

/// </summary>

public class GroupInfoList : List<object>

{

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

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

#region 키 - Key

/// <summary>

/// 키

/// </summary>

public object Key { get; set; }

#endregion

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

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

#region 생성자 - GroupInfoList(itemEnumerable)

/// <summary>

/// 생성자

/// </summary>

/// <param name="itemEnumerable">항목 열거 가능형</param>

public GroupInfoList(IEnumerable<object> itemEnumerable) : base(itemEnumerable)

{

}

#endregion

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

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

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns></returns>

public override string ToString()

{

return $"Group {Key}";

}

#endregion

}

▶ Contact.cs


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;

namespace TestProject
{
    /// <summary>
    /// 연락처
    /// </summary>
    public class Contact
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - FirstName

        /// <summary>
        /// 이름
        /// </summary>
        public string FirstName { get; private set; }

        #endregion
        #region 성 - LastName

        /// <summary>
        /// 성
        /// </summary>
        public string LastName { get; private set; }

        #endregion
        #region 회사 - Company

        /// <summary>
        /// 회사
        /// </summary>
        public string Company { get; private set; }

        #endregion
        #region 성명 - Name

        /// <summary>
        /// 성명
        /// </summary>
        public string Name => $"{FirstName} {LastName}";

        #endregion

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

        #region 생성자 - Contact(firstName, lastName, company)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="firstName">이름</param>
        /// <param name="lastName">성</param>
        /// <param name="company">회사</param>
        public Contact(string firstName, string lastName, string company)
        {
            FirstName = firstName;
            LastName  = lastName;
            Company   = company;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 연락처 컬렉션 구하기 (비동기) - GetContactCollectionAsync()

        /// <summary>
        /// 연락처 컬렉션 구하기 (비동기)
        /// </summary>
        /// <returns>연락처 컬렉션 태스크</returns>
        public async static Task<ObservableCollection<Contact>> GetContactCollectionAsync()
        {
            IList<string> lineList = await FileLoader.LoadLineList("DATA/Contacts.txt");

            ObservableCollection<Contact> contactCollection = new ObservableCollection<Contact>();

            for(int i = 0; i < lineList.Count - 2; i += 3)
            {
                contactCollection.Add(new Contact(lineList[i], lineList[i + 1], lineList[i + 2]));
            }

            return contactCollection;
        }

        #endregion
        #region 그룹 연락처 컬렉션 구하기 (비동기) - GetGroupedContactCollectionAsync()

        /// <summary>
        /// 그룹 연락처 컬렉션 구하기 (비동기)
        /// </summary>
        /// <returns>그룹 연락처 컬렉션 태스크</returns>
        public static async Task<ObservableCollection<GroupInfoList>> GetGroupedContactCollectionAsync()
        {
            var query = from item in await GetContactCollectionAsync()
                        group item by item.LastName.Substring(0, 1).ToUpper() into g
                        orderby g.Key
                        select new GroupInfoList(g) { Key = g.Key };

            return new ObservableCollection<GroupInfoList>(query);
        }

        #endregion
        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return Name;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Threading.Tasks;

namespace TestProject

{

/// <summary>

/// 연락처

/// </summary>

public class Contact

{

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

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

#region 이름 - FirstName

/// <summary>

/// 이름

/// </summary>

public string FirstName { get; private set; }

#endregion

#region 성 - LastName

/// <summary>

/// 성

/// </summary>

public string LastName { get; private set; }

#endregion

#region 회사 - Company

/// <summary>

/// 회사

/// </summary>

public string Company { get; private set; }

#endregion

#region 성명 - Name

/// <summary>

/// 성명

/// </summary>

public string Name => $"{FirstName} {LastName}";

#endregion

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

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

#region 생성자 - Contact(firstName, lastName, company)

/// <summary>

/// 생성자

/// </summary>

/// <param name="firstName">이름</param>

/// <param name="lastName">성</param>

/// <param name="company">회사</param>

public Contact(string firstName, string lastName, string company)

{

FirstName = firstName;

LastName = lastName;

Company = company;

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 연락처 컬렉션 구하기 (비동기) - GetContactCollectionAsync()

/// <summary>

/// 연락처 컬렉션 구하기 (비동기)

/// </summary>

/// <returns>연락처 컬렉션 태스크</returns>

public async static Task<ObservableCollection<Contact>> GetContactCollectionAsync()

{

IList<string> lineList = await FileLoader.LoadLineList("DATA/Contacts.txt");

ObservableCollection<Contact> contactCollection = new ObservableCollection<Contact>();

for(int i = 0; i < lineList.Count - 2; i += 3)

{

contactCollection.Add(new Contact(lineList[i], lineList[i + 1], lineList[i + 2]));

}

return contactCollection;

}

#endregion

#region 그룹 연락처 컬렉션 구하기 (비동기) - GetGroupedContactCollectionAsync()

/// <summary>

/// 그룹 연락처 컬렉션 구하기 (비동기)

/// </summary>

/// <returns>그룹 연락처 컬렉션 태스크</returns>

public static async Task<ObservableCollection<GroupInfoList>> GetGroupedContactCollectionAsync()

{

var query = from item in await GetContactCollectionAsync()

group item by item.LastName.Substring(0, 1).ToUpper() into g

orderby g.Key

select new GroupInfoList(g) { Key = g.Key };

return new ObservableCollection<GroupInfoList>(query);

}

#endregion

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString()

{

return Name;

}

#endregion

}

▶ MainWindow.xaml

[C#/WINUI3/.NET6] 애플리케이션 패키지 여부 구하기

■ 애플리케이션 패키지 여부를 구하는 방법을 보여준다. ▶ 애플리케이션 패키지 여부 구하기 예제 (C#)


bool isAppPackaged = NativeHelper.IsAppPackaged;

bool isAppPackaged = NativeHelper.IsAppPackaged;

▶ 애플리케이션 패키지 여부 구하기 (C#)


using System.Runtime.InteropServices;

/// <summary>
/// 네이티브 헬퍼
/// </summary>
public class NativeHelper
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Import
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

    /// <summary>
    /// 현재 패키지 ID 구하기
    /// </summary>
    /// <param name="bufferLength">버퍼 길이</param>
    /// <param name="buffer">버퍼</param>
    /// <returns>처리 결과</returns>
    [DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]
    [return : MarshalAs(UnmanagedType.U4)]
    private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region Field

    /// <summary>
    /// ERROR_SUCCESS
    /// </summary>
    public const int ERROR_SUCCESS = 0;

    /// <summary>
    /// ERROR_INSUFFICIENT_BUFFER
    /// </summary>
    public const int ERROR_INSUFFICIENT_BUFFER = 122;

    /// <summary>
    /// APPMODEL_ERROR_NO_PACKAGE
    /// </summary>
    public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 애플리케이션 패키지 여부 - IsAppPackaged

    /// <summary>
    /// 애플리케이션 패키지 여부
    /// </summary>
    public static bool IsAppPackaged
    {
        get
        {
            int  bufferSize = 0;
            uint lastError  = GetCurrentPackageId(ref bufferSize, out _);
            bool isPackaged = true;

            if(lastError == APPMODEL_ERROR_NO_PACKAGE)
            {
                isPackaged = false;
            }

            return isPackaged;
        }
    }

    #endregion
}

using System.Runtime.InteropServices;

/// <summary>

/// 네이티브 헬퍼

/// </summary>

public class NativeHelper

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Import

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 현재 패키지 ID 구하기 - GetCurrentPackageId(bufferLength, buffer)

/// <summary>

/// 현재 패키지 ID 구하기

/// </summary>

/// <param name="bufferLength">버퍼 길이</param>

/// <param name="buffer">버퍼</param>

/// <returns>처리 결과</returns>

[DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]

[return : MarshalAs(UnmanagedType.U4)]

private static extern uint GetCurrentPackageId(ref int bufferLength, out byte buffer);

#endregion

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

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

#region Field

/// <summary>

/// ERROR_SUCCESS

/// </summary>

public const int ERROR_SUCCESS = 0;

/// <summary>

/// ERROR_INSUFFICIENT_BUFFER

/// </summary>

public const int ERROR_INSUFFICIENT_BUFFER = 122;

/// <summary>

/// APPMODEL_ERROR_NO_PACKAGE

/// </summary>

public const int APPMODEL_ERROR_NO_PACKAGE = 15700;

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 애플리케이션 패키지 여부 - IsAppPackaged

/// <summary>

/// 애플리케이션 패키지 여부

/// </summary>

public static bool IsAppPackaged

{

get

{

int bufferSize = 0;

uint lastError = GetCurrentPackageId(ref bufferSize, out _);

bool isPackaged = true;

if(lastError == APPMODEL_ERROR_NO_PACKAGE)

{

isPackaged = false;

}

return isPackaged;

}

#endregion

}

[C#/WINUI3/.NET6] 저장소 텍스트 파일 읽기

■ 저장소 텍스트 파일을 읽는 방법을 보여준다. ▶ 저장소 텍스트 파일 읽기 예제 (C#)


string text = await LoadTextFileAsync("Assets/Contacts.txt");

string text = await LoadTextFileAsync("Assets/Contacts.txt");

※ Assets/Contacts.txt 파일은 [빌드 작업] 항목이 [내용]으로

[C#/WINUI3/.NET6] ListBox 엘리먼트 : DisplayMemberPath/SelectedValuePath/ItemsSource 속성 사용하기

■ ListBox 엘리먼트의 DisplayMemberPath/SelectedValuePath/ItemsSource 속성을 사용하는 방법을 보여준다. ▶ 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">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ListBox Name="listBox"
            HorizontalAlignment="Center"
            Width="200"
            Height="200"
            HighContrastAdjustment="Auto"
            DisplayMemberPath="Item1"
            SelectedValuePath="Item2"
            ItemsSource="{x:Bind FontList}" />
        <TextBlock Name="Control2Output"
            HorizontalAlignment="Center"
            Margin="0 20 0 0"
            Text="You can set the font used for this text."
            FontFamily="{x:Bind (FontFamily)listBox.SelectedValue, Mode=OneWay}" />
    </StackPanel>
</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">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListBox Name="listBox"

HorizontalAlignment="Center"

Width="200"

Height="200"

HighContrastAdjustment="Auto"

DisplayMemberPath="Item1"

SelectedValuePath="Item2"

ItemsSource="{x:Bind FontList}" />

<TextBlock Name="Control2Output"

HorizontalAlignment="Center"

Margin="0 20 0 0"

Text="You can set the font used for this text."

FontFamily="{x:Bind (FontFamily)listBox.SelectedValue, Mode=OneWay}" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Collections.Generic;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 폰트 리스트
        /// </summary>
        private List<Tuple<string, FontFamily>> fontList = new List<Tuple<string, FontFamily>>()
        {
            new Tuple<string, FontFamily>("Arial"          , new FontFamily("Arial"          )),
            new Tuple<string, FontFamily>("Comic Sans MS"  , new FontFamily("Comic Sans MS"  )),
            new Tuple<string, FontFamily>("Courier New"    , new FontFamily("Courier New"    )),
            new Tuple<string, FontFamily>("Segoe UI"       , new FontFamily("Segoe UI"       )),
            new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))
        };

        #endregion

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

        #region 폰트 리스트 - FontList

        /// <summary>
        /// 폰트 리스트
        /// </summary>
        public List<Tuple<string, FontFamily>> FontList
        {
            get
            {
                return this.fontList;
            }
        }

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.listBox.Loaded += listBox_Loaded;
        }

        #endregion

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

        #region 리스트 박스 로드시 처리하기 - listBox_Loaded(sender, e)

        /// <summary>
        /// 리스트 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.listBox.SelectedIndex = 2;
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 폰트 리스트

/// </summary>

private List<Tuple<string, FontFamily>> fontList = new List<Tuple<string, FontFamily>>()

{

new Tuple<string, FontFamily>("Arial" , new FontFamily("Arial" )),

new Tuple<string, FontFamily>("Comic Sans MS" , new FontFamily("Comic Sans MS" )),

new Tuple<string, FontFamily>("Courier New" , new FontFamily("Courier New" )),

new Tuple<string, FontFamily>("Segoe UI" , new FontFamily("Segoe UI" )),

new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))

};

#endregion

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

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

#region 폰트 리스트 - FontList

/// <summary>

/// 폰트 리스트

/// </summary>

public List<Tuple<string, FontFamily>> FontList

{

get

{

return this.fontList;

}

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.listBox.Loaded += listBox_Loaded;

}

#endregion

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

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

#region 리스트 박스 로드시 처리하기 - listBox_Loaded(sender, e)

/// <summary>

/// 리스트 박스 로드시 처리하기

/// </summary>

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

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

private void listBox_Loaded(object sender, RoutedEventArgs e)

{

this.listBox.SelectedIndex = 2;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ListBox 클래스 : SelectionChanged 이벤트 사용하기

■ ListBox 클래스의 SelectionChanged 이벤트를 사용하는 방법을 보여준다. ▶ 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">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ListBox Name="listBox"
            HorizontalAlignment="Center"
            Width="200"
            HighContrastAdjustment="Auto">
            <x:String>Blue</x:String>
            <x:String>Green</x:String>
            <x:String>Red</x:String>
            <x:String>Yellow</x:String>
        </ListBox>
        <Rectangle Name="textBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="100"
            Height="100" />
    </StackPanel>
</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">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListBox Name="listBox"

HorizontalAlignment="Center"

Width="200"

HighContrastAdjustment="Auto">

<x:String>Blue</x:String>

<x:String>Green</x:String>

<x:String>Red</x:String>

<x:String>Yellow</x:String>

</ListBox>

<Rectangle Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="100"

Height="100" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.listBox.SelectionChanged += listBox_SelectionChanged;
        }

        #endregion

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

        #region 리스트 박스 선택 변경시 처리하기 - listBox_SelectionChanged(sender, e)

        /// <summary>
        /// 리스트 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorName = e.AddedItems[0].ToString();

            switch(colorName)
            {
                case "Yellow" :

                    this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Yellow);

                    break;

                case "Green" :

                    this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Green);

                    break;

                case "Blue" :

                    this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Blue);

                    break;

                case "Red" :

                    this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Red);

                    break;
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.listBox.SelectionChanged += listBox_SelectionChanged;

}

#endregion

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

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

#region 리스트 박스 선택 변경시 처리하기 - listBox_SelectionChanged(sender, e)

/// <summary>

/// 리스트 박스 선택 변경시 처리하기

/// </summary>

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

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

private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string colorName = e.AddedItems[0].ToString();

switch(colorName)

{

case "Yellow" :

this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Yellow);

break;

case "Green" :

this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Green);

break;

case "Blue" :

this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Blue);

break;

case "Red" :

this.textBlock.Fill = new SolidColorBrush(Microsoft.UI.Colors.Red);

break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ItemsView 엘리먼트 : SelectionMode/IsItemInvokedEnabled 속성 사용하기

■ ItemsView 엘리먼트의 SelectionMode/IsItemInvokedEnabled 속성을 사용하는 방법을 보여준다. ▶ 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 Name="border"
        Margin="10"
        BorderThickness="1"
        BorderBrush="Black">
        <Border.Resources>
            <DataTemplate x:Key="UniformGridLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <Grid Width="150">
                        <Image
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel
                            VerticalAlignment="Bottom"
                            Height="40"
                            Padding="5 1 5 1"
                            Orientation="Vertical"
                            Opacity="0.75"
                            Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                            <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>
                </ItemContainer>
            </DataTemplate>
        </Border.Resources>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"    />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ItemsView Name="itemsView" Grid.Row="0"
                    ItemTemplate="{StaticResource UniformGridLayoutDataTemplateKey}"
                    HorizontalAlignment="Left"
                    Width="500"
                    Height="400"
                    SelectionMode="Multiple"
                    IsItemInvokedEnabled="False">
                    <ItemsView.Layout>
                        <UniformGridLayout
                            MinRowSpacing="5"
                            MinColumnSpacing="5"
                            MaximumRowsOrColumns="3" />
                    </ItemsView.Layout>
                </ItemsView>
                <StackPanel Grid.Row="1">
                    <TextBlock Name="invokerItemTextBlock" />
                    <TextBlock Name="countSelectedTextBlock"
                        Margin="0 5 0 0" />
                </StackPanel>
            </Grid>
            <Grid Grid.Column="1"
                MinWidth="200"
                RowDefinitions="Auto, Auto"
                ColumnDefinitions="Auto, *">
                <TextBlock Grid.Row="0" Grid.Column="0"
                    VerticalAlignment="Center"
                    Margin="0 0 10 0"
                    Text="SelectionMode" />
                <ComboBox Name="slectionModeComboBox" Grid.Row="0" Grid.Column="1"
                    HorizontalAlignment="Stretch">
                    <ComboBoxItem>None</ComboBoxItem>
                    <ComboBoxItem>Single</ComboBoxItem>
                    <ComboBoxItem>Multiple</ComboBoxItem>
                    <ComboBoxItem>Extended</ComboBoxItem>
                </ComboBox>
                <TextBlock Grid.Row="1" Grid.Column="0"
                    VerticalAlignment="Center"
                    Margin="0 0 10 0"
                    Text="IsItemInvokedEnabled" />
                <CheckBox Name="isItemInvokedEnabledCheckBox" Grid.Row="1" Grid.Column="1" />
            </Grid>
        </Grid>
    </Border>
</Window>

100

<?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 Name="border"

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<Border.Resources>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

Stretch="UniformToFill"

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

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Orientation="Vertical"

Opacity="0.75"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">

<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>

</ItemContainer>

</DataTemplate>

</Border.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ItemsView Name="itemsView" Grid.Row="0"

ItemTemplate="{StaticResource UniformGridLayoutDataTemplateKey}"

HorizontalAlignment="Left"

Width="500"

Height="400"

SelectionMode="Multiple"

IsItemInvokedEnabled="False">

<ItemsView.Layout>

<UniformGridLayout

MinRowSpacing="5"

MinColumnSpacing="5"

MaximumRowsOrColumns="3" />

</ItemsView.Layout>

</ItemsView>

<TextBlock Name="countSelectedTextBlock"

Margin="0 5 0 0" />

</StackPanel>

</Grid>

<Grid Grid.Column="1"

MinWidth="200"

RowDefinitions="Auto, Auto"

ColumnDefinitions="Auto, *">

<TextBlock Grid.Row="0" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 0 10 0"

Text="SelectionMode" />

<ComboBox Name="slectionModeComboBox" Grid.Row="0" Grid.Column="1"

HorizontalAlignment="Stretch">

<ComboBoxItem>Single</ComboBoxItem>

<ComboBoxItem>Multiple</ComboBoxItem>

<ComboBoxItem>Extended</ComboBoxItem>

</ComboBox>

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

VerticalAlignment="Center"

Margin="0 0 10 0"

Text="IsItemInvokedEnabled" />

</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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems : true);

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

            this.itemsView.ItemsSource = sourceCollection;

            this.itemsView.ItemInvoked                  += itemsView_ItemInvoked;
            this.itemsView.SelectionChanged             += itemsView_SelectionChanged;
            this.slectionModeComboBox.SelectionChanged  += slectionModeComboBox_SelectionChanged;
            this.isItemInvokedEnabledCheckBox.Checked   += isItemInvokedEnabledCheckBox_Checked;
            this.isItemInvokedEnabledCheckBox.Unchecked += isItemInvokedEnabledCheckBox_Checked;

            this.slectionModeComboBox.SelectedIndex = 2;
        }

        #endregion

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

        #region 아이템 뷰 항목 호출시 처리하기 - itemsView_ItemInvoked(sender, e)

        /// <summary>
        /// 아이템 뷰 항목 호출시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)
        {
            this.invokerItemTextBlock.Text = $"You invoked {(e.InvokedItem as CustomDataObject).Title}.";
        }

        #endregion
        #region 아이템 뷰 선택 변경시 처리하기 - itemsView_SelectionChanged(sender, e)

        /// <summary>
        /// 아이템 뷰 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsView_SelectionChanged(ItemsView sender, ItemsViewSelectionChangedEventArgs e)
        {
            if(this.itemsView != null)
            {
                this.countSelectedTextBlock.Text = $"You have selected {this.itemsView.SelectedItems.Count} item(s).";
            }
        }

        #endregion
        #region 선택 모드 콤보 박스 선택 변경시 처리하기 - slectionModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 선택 모드 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void slectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.itemsView != null && sender is ComboBox comboBox)
            {
                this.itemsView.SelectionMode = (ItemsViewSelectionMode)comboBox.SelectedIndex;
            }
        }

        #endregion
        #region 항목 호출 가능 여부 체크 박스 체크시 처리하기 - isItemInvokedEnabledCheckBox_Checked(sender, e)

        /// <summary>
        /// 항목 호출 가능 여부 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void isItemInvokedEnabledCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.invokerItemTextBlock.Text = string.Empty;

            if(this.itemsView != null && this.isItemInvokedEnabledCheckBox != null)
            {
                this.itemsView.IsItemInvokedEnabled = (bool)this.isItemInvokedEnabledCheckBox.IsChecked;
            }
        }

        #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

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems : true);

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

this.itemsView.ItemsSource = sourceCollection;

this.itemsView.ItemInvoked += itemsView_ItemInvoked;

this.itemsView.SelectionChanged += itemsView_SelectionChanged;

this.slectionModeComboBox.SelectionChanged += slectionModeComboBox_SelectionChanged;

this.isItemInvokedEnabledCheckBox.Checked += isItemInvokedEnabledCheckBox_Checked;

this.isItemInvokedEnabledCheckBox.Unchecked += isItemInvokedEnabledCheckBox_Checked;

this.slectionModeComboBox.SelectedIndex = 2;

}

#endregion

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

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

#region 아이템 뷰 항목 호출시 처리하기 - itemsView_ItemInvoked(sender, e)

/// <summary>

/// 아이템 뷰 항목 호출시 처리하기

/// </summary>

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

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

private void itemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)

{

this.invokerItemTextBlock.Text = $"You invoked {(e.InvokedItem as CustomDataObject).Title}.";

}

#endregion

#region 아이템 뷰 선택 변경시 처리하기 - itemsView_SelectionChanged(sender, e)

/// <summary>

/// 아이템 뷰 선택 변경시 처리하기

/// </summary>

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

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

private void itemsView_SelectionChanged(ItemsView sender, ItemsViewSelectionChangedEventArgs e)

{

if(this.itemsView != null)

{

this.countSelectedTextBlock.Text = $"You have selected {this.itemsView.SelectedItems.Count} item(s).";

}

#endregion

#region 선택 모드 콤보 박스 선택 변경시 처리하기 - slectionModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// 선택 모드 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void slectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.itemsView != null && sender is ComboBox comboBox)

{

this.itemsView.SelectionMode = (ItemsViewSelectionMode)comboBox.SelectedIndex;

}

#endregion

#region 항목 호출 가능 여부 체크 박스 체크시 처리하기 - isItemInvokedEnabledCheckBox_Checked(sender, e)

/// <summary>

/// 항목 호출 가능 여부 체크 박스 체크시 처리하기

/// </summary>

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

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

private void isItemInvokedEnabledCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.invokerItemTextBlock.Text = string.Empty;

if(this.itemsView != null && this.isItemInvokedEnabledCheckBox != null)

{

this.itemsView.IsItemInvokedEnabled = (bool)this.isItemInvokedEnabledCheckBox.IsChecked;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ItemsView 엘리먼트 : Layout/ItemTemplate 속성을 사용해 레이아웃 LinedFlowLayout/StackLayout/UniformGridLayout 객체 교체하기

■ ItemsView 엘리먼트의 Layout/ItemTemplate 속성을 사용해 레이아웃 LinedFlowLayout/StackLayout/UniformGridLayout 객체를 교체하는 방법을 보여준다. ▶ 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[]

{

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"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.",

};

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 Name="border"
        Margin="10"
        BorderThickness="1"
        BorderBrush="Black">
        <Border.Resources>
            <DataTemplate x:Key="LinedFlowLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <Grid>
                        <Image
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            MinWidth="70"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel
                            VerticalAlignment="Bottom"
                            Height="40"
                            Padding="5 1 5 1"
                            Orientation="Vertical"
                            Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                            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>
                </ItemContainer>
            </DataTemplate>
            <DataTemplate x:Key="StackLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <RelativePanel
                        Width="480"
                        MinHeight="80"
                        MaxHeight="100">
                        <Image Name="image"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Margin="0 5 0 0"
                            Width="24"
                            Height="16"
                            RelativePanel.AlignLeftWithPanel="True"
                            RelativePanel.AlignTopWithPanel="True"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <TextBlock Name="titleTextBlock"
                            Style="{StaticResource BaseTextBlockStyle}"
                            Margin="10 0 0 0"
                            RelativePanel.RightOf="image"
                            RelativePanel.AlignTopWithPanel="True"
                            Text="{x:Bind Title}" />
                        <TextBlock
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Margin="0 5 10 5"
                            RelativePanel.Below="titleTextBlock"
                            TextWrapping="Wrap"
                            TextTrimming="WordEllipsis"
                            Text="{x:Bind Description}" />
                    </RelativePanel>
                </ItemContainer>
            </DataTemplate>
            <DataTemplate x:Key="UniformGridLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <Grid Width="150">
                        <Image
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel
                            VerticalAlignment="Bottom"
                            Height="40"
                            Padding="5 1 5 1"
                            Orientation="Vertical"
                            Opacity="0.75"
                            Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                            <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>
                </ItemContainer>
            </DataTemplate>
        </Border.Resources>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0">
                <ItemsView Name="itemsView"
                    ItemTemplate="{StaticResource LinedFlowLayoutDataTemplateKey}"
                    HorizontalAlignment="Left"
                    Width="500"
                    Height="500">
                    <ItemsView.Layout>
                        <LinedFlowLayout
                            LineHeight="160"
                            LineSpacing="5"
                            MinItemSpacing="5"
                            ItemsStretch="Fill" />
                    </ItemsView.Layout>
                </ItemsView>
            </StackPanel>
            <StackPanel Grid.Column="1"
                Width="200">
                <StackPanel.Resources>
                    <Style x:Key="DefaultNumberBoxStyle" 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>
                <RadioButtons
                    Header="Layout"
                    FontWeight="SemiBold">
                    <RadioButton Name="linedFlowLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="LinedFlowLayout"
                        IsChecked="True" />
                    <RadioButton Name="uniformGridLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="UniformGridLayout" />
                    <RadioButton Name="stackLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="StackLayout" />
                </RadioButtons>
                <StackPanel Name="linedFlowLayoutSettingStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="LinedFlowLayout settings" />
                    <NumberBox Name="lineSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Space between lines"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="minItemSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between items on a line"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <RadioButtons
                        Margin="0 10 0 0"
                        Header="Line height">
                        <RadioButton Name="smallLineHeightRadioButton"
                            GroupName="LinedFlowLayoutLineHeights"
                            Content="Small" />
                        <RadioButton Name="largeLineHeightRadioButton"
                            GroupName="LinedFlowLayoutLineHeights"
                            Content="Large"
                            IsChecked="True" />
                    </RadioButtons>
                </StackPanel>
                <StackPanel Name="stackLayoutSettingsStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300"
                    Visibility="Collapsed">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="StackLayout settings" />
                    <NumberBox Name="spacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Space between rows"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                </StackPanel>
                <StackPanel Name="uniformGridLayoutSettingsStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300"
                    Visibility="Collapsed">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="UniformGridLayout settings" />
                    <NumberBox Name="minColumnSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between columns"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="minRowSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between rows"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="mximumRowsOrColumnsNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Header="Maximum number of items per row before wrapping"
                        Minimum="1"
                        Maximum="8"
                        Value="3" />
                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<?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 Name="border"

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<Border.Resources>

<Grid>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

MinWidth="70"

Stretch="UniformToFill"

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

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Orientation="Vertical"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"

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>

</ItemContainer>

</DataTemplate>

<RelativePanel

Width="480"

MinHeight="80"

MaxHeight="100">

<Image Name="image"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 5 0 0"

Width="24"

Height="16"

RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignTopWithPanel="True"

Stretch="UniformToFill"

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

<TextBlock Name="titleTextBlock"

Style="{StaticResource BaseTextBlockStyle}"

Margin="10 0 0 0"

RelativePanel.RightOf="image"

RelativePanel.AlignTopWithPanel="True"

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

<TextBlock

Style="{StaticResource CaptionTextBlockStyle}"

Margin="0 5 10 5"

RelativePanel.Below="titleTextBlock"

TextWrapping="Wrap"

TextTrimming="WordEllipsis"

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

</RelativePanel>

</ItemContainer>

</DataTemplate>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

Stretch="UniformToFill"

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

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Orientation="Vertical"

Opacity="0.75"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">

<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>

</ItemContainer>

</DataTemplate>

</Border.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ItemsView Name="itemsView"

ItemTemplate="{StaticResource LinedFlowLayoutDataTemplateKey}"

HorizontalAlignment="Left"

Width="500"

Height="500">

<ItemsView.Layout>

<LinedFlowLayout

LineHeight="160"

LineSpacing="5"

MinItemSpacing="5"

ItemsStretch="Fill" />

</ItemsView.Layout>

</ItemsView>

</StackPanel>

<StackPanel Grid.Column="1"

Width="200">

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<RadioButtons

Header="Layout"

FontWeight="SemiBold">

<RadioButton Name="linedFlowLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="LinedFlowLayout"

IsChecked="True" />

<RadioButton Name="uniformGridLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="UniformGridLayout" />

<RadioButton Name="stackLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="StackLayout" />

</RadioButtons>

<StackPanel Name="linedFlowLayoutSettingStackPanel"

Margin="0 10 0 0"

MinHeight="300">

<TextBlock

FontWeight="SemiBold"

Text="LinedFlowLayout settings" />

<NumberBox Name="lineSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Space between lines"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="minItemSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between items on a line"

Minimum="0"

Maximum="100"

Value="5" />

<RadioButtons

Margin="0 10 0 0"

Header="Line height">

<RadioButton Name="smallLineHeightRadioButton"

GroupName="LinedFlowLayoutLineHeights"

Content="Small" />

<RadioButton Name="largeLineHeightRadioButton"

GroupName="LinedFlowLayoutLineHeights"

Content="Large"

IsChecked="True" />

</RadioButtons>

</StackPanel>

<StackPanel Name="stackLayoutSettingsStackPanel"

Margin="0 10 0 0"

MinHeight="300"

Visibility="Collapsed">

<TextBlock

FontWeight="SemiBold"

Text="StackLayout settings" />

<NumberBox Name="spacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Space between rows"

Minimum="0"

Maximum="100"

Value="5" />

</StackPanel>

<StackPanel Name="uniformGridLayoutSettingsStackPanel"

Margin="0 10 0 0"

MinHeight="300"

Visibility="Collapsed">

<TextBlock

FontWeight="SemiBold"

Text="UniformGridLayout settings" />

<NumberBox Name="minColumnSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between columns"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="minRowSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between rows"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="mximumRowsOrColumnsNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Header="Maximum number of items per row before wrapping"

Minimum="1"

Maximum="8"

Value="3" />

</StackPanel>

</Grid>

</Border>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

using Microsoft.UI.Dispatching;
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 LinedFlowLayout linedFlowLayout = null;

        /// <summary>
        /// 선형 플로우 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate linedFlowLayoutDataTemplate = null;

        /// <summary>
        /// 스택 레이아웃
        /// </summary>
        private StackLayout stackLayout = null;

        /// <summary>
        /// 스택 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate stackLayoutDataTemplate = null;

        /// <summary>
        /// 유니폼 그리드 레이아웃
        /// </summary>
        private UniformGridLayout uniformGridLayout = null;

        /// <summary>
        /// 유니폼 그리드 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate uniformGridLayoutDataTemplate = null;

        /// <summary>
        /// 선형 플로우 레이아웃 라인 높이 비동기 적용 여부
        /// </summary>
        private bool applyLinedFlowLayoutLineHeightAsync = false;

        /// <summary>
        /// 선형 플로우 레이아웃 옵션 비동기 적용 여부
        /// </summary>
        private bool applyLinedFlowLayoutOptionsAsync = false;

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.border.Loaded                              += border_Loaded;
            this.linedFlowLayoutRadioButton.Checked         += layoutRadioButton_Checked;
            this.uniformGridLayoutRadioButton.Checked       += layoutRadioButton_Checked;
            this.stackLayoutRadioButton.Checked             += layoutRadioButton_Checked;
            this.lineSpacingNumberBox.ValueChanged          += linedFlowLayoutSettingsNumberBox_ValueChanged;
            this.minItemSpacingNumberBox.ValueChanged       += linedFlowLayoutSettingsNumberBox_ValueChanged;
            this.smallLineHeightRadioButton.Checked         += lineHeightRadioButton_Checked;
            this.largeLineHeightRadioButton.Checked         += lineHeightRadioButton_Checked;
            this.spacingNumberBox.ValueChanged              += stackLayoutSettingsNumberBox_ValueChanged;
            this.minColumnSpacingNumberBox.ValueChanged     += uniformGridLayoutSettingsNumberBox_ValueChanged;
            this.minRowSpacingNumberBox.ValueChanged        += uniformGridLayoutSettingsNumberBox_ValueChanged;
            this.mximumRowsOrColumnsNumberBox.ValueChanged  += uniformGridLayoutSettingsNumberBox_ValueChanged;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 테두리 로드시 처리하기 - border_Loaded(sender, e)

        /// <summary>
        /// 테두리 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void border_Loaded(object sender, RoutedEventArgs e)
        {
            if(this.itemsView != null)
            {
                this.itemsView.ScrollView.ViewChanged += itemsViewScrollView_ViewChanged;

                this.linedFlowLayout             = this.itemsView.Layout as LinedFlowLayout;
                this.linedFlowLayoutDataTemplate = this.itemsView.ItemTemplate as DataTemplate;
            }

            List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems: true);

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

            Task.Run
            (
                delegate ()
                {
                    _ = DispatcherQueue.TryEnqueue
                    (
                        DispatcherQueuePriority.Low,
                        () =>
                        {
                            if(this.itemsView != null)
                            {
                                this.itemsView.ItemsSource = sourceCollection;
                            }
                        }
                    );
                }
            );
        }

        #endregion
        #region 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기 - itemsViewScrollView_ViewChanged(sender, e)

        /// <summary>
        /// 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsViewScrollView_ViewChanged(ScrollView sender, object e)
        {
            if(sender.VerticalOffset == 0 && (this.applyLinedFlowLayoutOptionsAsync || this.applyLinedFlowLayoutLineHeightAsync))
            {
                if(this.applyLinedFlowLayoutOptionsAsync)
                {
                    this.applyLinedFlowLayoutOptionsAsync = false;

                    ApplyLinedFlowLayoutSettings();
                }

                if(this.applyLinedFlowLayoutLineHeightAsync)
                {
                    this.applyLinedFlowLayoutLineHeightAsync = false;

                    ApplyLinedFlowLayoutLineHeight();
                }
            }
        }

        #endregion
        #region 레이아웃 라디오 버튼 체크시 처리하기 - layoutRadioButton_Checked(sender, e)

        /// <summary>
        /// 레이아웃 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void layoutRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.itemsView != null)
            {
                switch(radioButton.Content.ToString())
                {
                    case "LinedFlowLayout" :

                        if(this.linedFlowLayout != null && this.linedFlowLayoutDataTemplate != null)
                        {
                            this.itemsView.Layout       = this.linedFlowLayout;
                            this.itemsView.ItemTemplate = this.linedFlowLayoutDataTemplate;

                            this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Visible;
                            this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Collapsed;
                            this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;
                        }

                        break;

                    case "StackLayout" :

                        if(this.stackLayout == null)
                        {
                            this.stackLayout = new StackLayout() { Spacing = 5 };
                        }

                        if(this.stackLayoutDataTemplate == null)
                        {
                            this.stackLayoutDataTemplate = this.border.Resources["StackLayoutDataTemplateKey"] as DataTemplate;
                        }

                        this.itemsView.Layout       = this.stackLayout;
                        this.itemsView.ItemTemplate = this.stackLayoutDataTemplate;

                        this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Collapsed;
                        this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Visible;
                        this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

                        break;

                    case "UniformGridLayout" :

                        if(this.uniformGridLayout == null)
                        {
                            this.uniformGridLayout = new UniformGridLayout()
                            {
                                MinRowSpacing        = 5,
                                MinColumnSpacing     = 5,
                                MaximumRowsOrColumns = 3
                            };
                        }

                        if(this.uniformGridLayoutDataTemplate == null)
                        {
                            this.uniformGridLayoutDataTemplate = this.border.Resources["UniformGridLayoutDataTemplateKey"] as DataTemplate;
                        }

                        this.itemsView.Layout       = this.uniformGridLayout;
                        this.itemsView.ItemTemplate = this.uniformGridLayoutDataTemplate;

                        this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Collapsed;
                        this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Collapsed;
                        this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Visible;

                        break;
                }
            }
        }

        #endregion
        #region 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기 - linedFlowLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void linedFlowLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)
            {
                this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

                this.applyLinedFlowLayoutOptionsAsync = true;
            }
            else
            {
                ApplyLinedFlowLayoutSettings();
            }
        }

        #endregion
        #region 라인 높이 라디오 버튼 체크시 처리하기 - lineHeightRadioButton_Checked(sender, e)

        /// <summary>
        /// 라인 높이 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void lineHeightRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)
            {
                this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

                this.applyLinedFlowLayoutLineHeightAsync = true;
            }
            else
            {
                ApplyLinedFlowLayoutLineHeight();
            }
        }

        #endregion
        #region 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기 - stackLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stackLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.stackLayout != null)
            {
                this.stackLayout.Spacing = this.spacingNumberBox.Value;
            }
        }

        #endregion
        #region 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기 - uniformGridLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void uniformGridLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.uniformGridLayout != null)
            {
                this.uniformGridLayout.MinColumnSpacing     = this.minColumnSpacingNumberBox.Value;
                this.uniformGridLayout.MinRowSpacing        = this.minRowSpacingNumberBox.Value;
                this.uniformGridLayout.MaximumRowsOrColumns = (int)this.mximumRowsOrColumnsNumberBox.Value;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 선형 플로우 레이아웃 설정 적용하기 - ApplyLinedFlowLayoutSettings()

        /// <summary>
        /// 선형 플로우 레이아웃 설정 적용하기
        /// </summary>
        private void ApplyLinedFlowLayoutSettings()
        {
            if(this.linedFlowLayout != null && this.lineSpacingNumberBox != null && this.minItemSpacingNumberBox != null)
            {
                this.linedFlowLayout.LineSpacing    = this.lineSpacingNumberBox.Value;
                this.linedFlowLayout.MinItemSpacing = this.minItemSpacingNumberBox.Value;
            }
        }

        #endregion
        #region 선형 플로우 레이아웃 라인 높이 적용하기 - ApplyLinedFlowLayoutLineHeight()

        /// <summary>
        /// 선형 플로우 레이아웃 라인 높이 적용하기
        /// </summary>
        private void ApplyLinedFlowLayoutLineHeight()
        {
            if(this.linedFlowLayout != null && this.smallLineHeightRadioButton != null)
            {
                this.linedFlowLayout.LineHeight = (bool)this.smallLineHeightRadioButton.IsChecked ? 80 : 160;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Threading.Tasks;

using Microsoft.UI.Dispatching;

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 LinedFlowLayout linedFlowLayout = null;

/// <summary>

/// 선형 플로우 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate linedFlowLayoutDataTemplate = null;

/// <summary>

/// 스택 레이아웃

/// </summary>

private StackLayout stackLayout = null;

/// <summary>

/// 스택 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate stackLayoutDataTemplate = null;

/// <summary>

/// 유니폼 그리드 레이아웃

/// </summary>

private UniformGridLayout uniformGridLayout = null;

/// <summary>

/// 유니폼 그리드 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate uniformGridLayoutDataTemplate = null;

/// <summary>

/// 선형 플로우 레이아웃 라인 높이 비동기 적용 여부

/// </summary>

private bool applyLinedFlowLayoutLineHeightAsync = false;

/// <summary>

/// 선형 플로우 레이아웃 옵션 비동기 적용 여부

/// </summary>

private bool applyLinedFlowLayoutOptionsAsync = false;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.border.Loaded += border_Loaded;

this.linedFlowLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.uniformGridLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.stackLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.lineSpacingNumberBox.ValueChanged += linedFlowLayoutSettingsNumberBox_ValueChanged;

this.minItemSpacingNumberBox.ValueChanged += linedFlowLayoutSettingsNumberBox_ValueChanged;

this.smallLineHeightRadioButton.Checked += lineHeightRadioButton_Checked;

this.largeLineHeightRadioButton.Checked += lineHeightRadioButton_Checked;

this.spacingNumberBox.ValueChanged += stackLayoutSettingsNumberBox_ValueChanged;

this.minColumnSpacingNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

this.minRowSpacingNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

this.mximumRowsOrColumnsNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 테두리 로드시 처리하기 - border_Loaded(sender, e)

/// <summary>

/// 테두리 로드시 처리하기

/// </summary>

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

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

private void border_Loaded(object sender, RoutedEventArgs e)

{

if(this.itemsView != null)

{

this.itemsView.ScrollView.ViewChanged += itemsViewScrollView_ViewChanged;

this.linedFlowLayout = this.itemsView.Layout as LinedFlowLayout;

this.linedFlowLayoutDataTemplate = this.itemsView.ItemTemplate as DataTemplate;

}

List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems: true);

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

Task.Run

(

delegate ()

{

_ = DispatcherQueue.TryEnqueue

(

DispatcherQueuePriority.Low,

() =>

{

if(this.itemsView != null)

{

this.itemsView.ItemsSource = sourceCollection;

}

);

}

);

}

#endregion

#region 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기 - itemsViewScrollView_ViewChanged(sender, e)

/// <summary>

/// 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기

/// </summary>

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

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

private void itemsViewScrollView_ViewChanged(ScrollView sender, object e)

{

if(sender.VerticalOffset == 0 && (this.applyLinedFlowLayoutOptionsAsync || this.applyLinedFlowLayoutLineHeightAsync))

{

if(this.applyLinedFlowLayoutOptionsAsync)

{

this.applyLinedFlowLayoutOptionsAsync = false;

ApplyLinedFlowLayoutSettings();

}

if(this.applyLinedFlowLayoutLineHeightAsync)

{

this.applyLinedFlowLayoutLineHeightAsync = false;

ApplyLinedFlowLayoutLineHeight();

}

#endregion

#region 레이아웃 라디오 버튼 체크시 처리하기 - layoutRadioButton_Checked(sender, e)

/// <summary>

/// 레이아웃 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void layoutRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(sender is RadioButton radioButton && this.itemsView != null)

{

switch(radioButton.Content.ToString())

{

case "LinedFlowLayout" :

if(this.linedFlowLayout != null && this.linedFlowLayoutDataTemplate != null)

{

this.itemsView.Layout = this.linedFlowLayout;

this.itemsView.ItemTemplate = this.linedFlowLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Visible;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

}

break;

case "StackLayout" :

if(this.stackLayout == null)

{

this.stackLayout = new StackLayout() { Spacing = 5 };

}

if(this.stackLayoutDataTemplate == null)

{

this.stackLayoutDataTemplate = this.border.Resources["StackLayoutDataTemplateKey"] as DataTemplate;

}

this.itemsView.Layout = this.stackLayout;

this.itemsView.ItemTemplate = this.stackLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Collapsed;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Visible;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

break;

case "UniformGridLayout" :

if(this.uniformGridLayout == null)

{

this.uniformGridLayout = new UniformGridLayout()

{

MinRowSpacing = 5,

MinColumnSpacing = 5,

MaximumRowsOrColumns = 3

};

}

if(this.uniformGridLayoutDataTemplate == null)

{

this.uniformGridLayoutDataTemplate = this.border.Resources["UniformGridLayoutDataTemplateKey"] as DataTemplate;

}

this.itemsView.Layout = this.uniformGridLayout;

this.itemsView.ItemTemplate = this.uniformGridLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Collapsed;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Visible;

break;

}

#endregion

#region 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기 - linedFlowLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void linedFlowLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)

{

this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

this.applyLinedFlowLayoutOptionsAsync = true;

}

else

{

ApplyLinedFlowLayoutSettings();

}

#endregion

#region 라인 높이 라디오 버튼 체크시 처리하기 - lineHeightRadioButton_Checked(sender, e)

/// <summary>

/// 라인 높이 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void lineHeightRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)

{

this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

this.applyLinedFlowLayoutLineHeightAsync = true;

}

else

{

ApplyLinedFlowLayoutLineHeight();

}

#endregion

#region 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기 - stackLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void stackLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.stackLayout != null)

{

this.stackLayout.Spacing = this.spacingNumberBox.Value;

}

#endregion

#region 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기 - uniformGridLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void uniformGridLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.uniformGridLayout != null)

{

this.uniformGridLayout.MinColumnSpacing = this.minColumnSpacingNumberBox.Value;

this.uniformGridLayout.MinRowSpacing = this.minRowSpacingNumberBox.Value;

this.uniformGridLayout.MaximumRowsOrColumns = (int)this.mximumRowsOrColumnsNumberBox.Value;

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 선형 플로우 레이아웃 설정 적용하기 - ApplyLinedFlowLayoutSettings()

/// <summary>

/// 선형 플로우 레이아웃 설정 적용하기

/// </summary>

private void ApplyLinedFlowLayoutSettings()

{

if(this.linedFlowLayout != null && this.lineSpacingNumberBox != null && this.minItemSpacingNumberBox != null)

{

this.linedFlowLayout.LineSpacing = this.lineSpacingNumberBox.Value;

this.linedFlowLayout.MinItemSpacing = this.minItemSpacingNumberBox.Value;

}

#endregion

#region 선형 플로우 레이아웃 라인 높이 적용하기 - ApplyLinedFlowLayoutLineHeight()

/// <summary>

/// 선형 플로우 레이아웃 라인 높이 적용하기

/// </summary>

private void ApplyLinedFlowLayoutLineHeight()

{

if(this.linedFlowLayout != null && this.smallLineHeightRadioButton != null)

{

this.linedFlowLayout.LineHeight = (bool)this.smallLineHeightRadioButton.IsChecked ? 80 : 160;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ItemsView 엘리먼트 : ItemTemplate 속성/ItemInvoked 이벤트 사용하기

■ ItemsView 엘리먼트의 ItemTemplate 속성과 ItemInvoked 이벤트를 사용하는 방법을 보여준다. ▶ 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[]

{

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"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.",

};

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">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer
                    HorizontalAlignment="Left"
                    Width="200"
                    Height="140">
                    <Image
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Margin="5"
                        Stretch="UniformToFill"
                        Source="{x:Bind ImageLocation}" />
                </ItemContainer>
            </DataTemplate>
        </StackPanel.Resources>
        <ItemsView Name="itemsView"
            ItemTemplate="{StaticResource ImageDataTemplateKey}"
            HorizontalAlignment="Left"
            Width="220"
            Height="450"
            IsItemInvokedEnabled="True" />
        <TextBlock Name="textBlock"
            Margin="0 10 0 0" />
    </StackPanel>
</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">

<StackPanel.Resources>

<ItemContainer

HorizontalAlignment="Left"

Width="200"

Height="140">

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="5"

Stretch="UniformToFill"

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

</ItemContainer>

</DataTemplate>

</StackPanel.Resources>

<ItemsView Name="itemsView"

ItemTemplate="{StaticResource ImageDataTemplateKey}"

HorizontalAlignment="Left"

Width="220"

Height="450"

IsItemInvokedEnabled="True" />

<TextBlock Name="textBlock"

Margin="0 10 0 0" />

</StackPanel>

</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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

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

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

            this.itemsView.ItemsSource = sourceCollection;

            this.itemsView.ItemInvoked += itemsView_ItemInvoked;
        }

        #endregion

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

        #region 아이템 뷰 항목 호출시 처리하기 - itemsView_ItemInvoked(sender, e)

        /// <summary>
        /// 아이템 뷰 항목 호출시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)
        {
            this.textBlock.Text = $"You invoked {(e.InvokedItem as CustomDataObject).Title}.";
        }

        #endregion
    }
}

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

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

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

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

this.itemsView.ItemsSource = sourceCollection;

this.itemsView.ItemInvoked += itemsView_ItemInvoked;

}

#endregion

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

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

#region 아이템 뷰 항목 호출시 처리하기 - itemsView_ItemInvoked(sender, e)

/// <summary>

/// 아이템 뷰 항목 호출시 처리하기

/// </summary>

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

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

private void itemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)

{

this.textBlock.Text = $"You invoked {(e.InvokedItem as CustomDataObject).Title}.";

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] GridView 엘리먼트 : ItemTemplate/AllowDrop/CanDragItems/CanReorderItems/IsItemClickEnabled/FlowDirection/SelectionMode 속성 사용하기

■ GridView 엘리먼트의 ItemTemplate/AllowDrop/CanDragItems/CanReorderItems/IsItemClickEnabled/FlowDirection/SelectionMode 속성을 사용하는 방법을 보여준다. ▶ 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[]

{

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"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.",

};

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 Name="border"
        Margin="10"
        BorderThickness="1"
        BorderBrush="Black">
        <Border.Resources>
            <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomDataObject">
                <Image
                    Width="190"
                    Height="130"
                    Stretch="UniformToFill"
                    Source="{x:Bind ImageLocation}" />
            </DataTemplate>
            <DataTemplate x:Key="IconTextDataTemplateKey" x:DataType="local:CustomDataObject">
                <RelativePanel
                    Width="280"
                    MinHeight="160">
                    <Image Name="image"
                        Width="18"
                        Margin="0 5 0 0"
                        RelativePanel.AlignLeftWithPanel="True"
                        RelativePanel.AlignTopWithPanel="True"
                        Stretch="Uniform"
                        Source="{x:Bind ImageLocation}" />
                    <TextBlock Name="titleTextBlock"
                        Style="{StaticResource BaseTextBlockStyle}"
                        Margin="10 0 0 0"
                        RelativePanel.RightOf="image"
                        RelativePanel.AlignTopWithPanel="True"
                        Text="{x:Bind Title}" />
                    <TextBlock
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Margin="0 5 10 0"
                        RelativePanel.Below="titleTextBlock"
                        TextWrapping="Wrap"
                        TextTrimming="WordEllipsis"
                        Text="{x:Bind Description}" />
                </RelativePanel>
            </DataTemplate>
            <DataTemplate x:Key="ImageTextDataTemplateKey" x:DataType="local:CustomDataObject">
                <Grid Width="280">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"   />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0"
                        VerticalAlignment="Top"
                        Height="100"
                        Stretch="Fill"
                        Source="{x:Bind ImageLocation}" />
                    <StackPanel Grid.Column="1"
                        Margin="10 0 0 10">
                        <TextBlock
                            Style="{ThemeResource SubtitleTextBlockStyle}"
                            Margin="0 0 0 10"
                            Text="{x:Bind Title}" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Text="{x:Bind Views}" />
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Text=" Views" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Text="{x:Bind Likes}" />
                            <TextBlock
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Text=" Likes" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="TextDataTemplateKey" x:DataType="local:CustomDataObject">
                <StackPanel
                    Width="240"
                    Orientation="Horizontal">
                    <TextBlock
                        Style="{StaticResource TitleTextBlockStyle}"
                        Margin="10 0 0 0"
                        Text="{x:Bind Title}" />
                </StackPanel>
            </DataTemplate>
        </Border.Resources>
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"    />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <GridView Name="gridView" Grid.Row="0" Grid.Column="0"
                ItemTemplate="{StaticResource ImageDataTemplateKey}"
                AllowDrop="{x:Bind allowDropCheckBox.IsChecked.Value, Mode=OneWay}"
                CanDragItems="{x:Bind canDragItemsCheckBox.IsChecked.Value, Mode=OneWay}"
                CanReorderItems="{x:Bind canReorderItemsCheckBox.IsChecked.Value, Mode=OneWay}"
                IsItemClickEnabled="{x:Bind isItemClickEnabledCheckBox.IsChecked.Value, Mode=OneWay}"
                FlowDirection="LeftToRight" />
            <StackPanel Grid.Row="1" Grid.Column="0">
                <TextBlock Name="countClickedTextBlock"  />
                <TextBlock Name="countSelectedTextBlock" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
                Margin="10 0 0 0">
                <RadioButtons Header="ItemTemplate">
                    <RadioButton
                        GroupName="Template"
                        Tag="ImageDataTemplateKey"
                        IsChecked="True"
                        Content="Image"
                        Checked="templateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="IconTextDataTemplateKey"
                        Content="Icon/Text"
                        Checked="templateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="ImageTextDataTemplateKey"
                        Content="Image/Text"
                        Checked="templateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="TextDataTemplateKey"
                        Content="Text"
                        Checked="templateRadioButton_Checked" />
                </RadioButtons>
                <StackPanel>
                    <ToggleButton Name="reverseFlowDirectionToggleButton"
                        Margin="0 10 0 0"
                        Content="Reverse FlowDirection" />
                    <TextBlock
                        Margin="0 10 0 0"
                        Text="GridView Properties" />
                    <CheckBox Name="isItemClickEnabledCheckBox"
                        Margin="0 5 0 0"
                        Content="IsItemClickEnabled" />
                    <CheckBox Name="canDragItemsCheckBox"
                        Margin="0 5 0 0"
                        Content="CanDragItems" />
                    <CheckBox Name="canReorderItemsCheckBox"
                        Margin="0 5 0 0"
                        Content="CanReorderItems" />
                    <CheckBox Name="allowDropCheckBox"
                        Margin="0 5 0 0"
                        Content="AllowDrop" />
                    <ComboBox Name="selectionModeComboBox"
                        Margin="0 5 0 0"
                        Header="SelectionMode"
                        SelectedIndex="1">
                        <x:String>None</x:String>
                        <x:String>Single</x:String>
                        <x:String>Multiple</x:String>
                        <x:String>Extended</x:String>
                    </ComboBox>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

<?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 Name="border"

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<Border.Resources>

<Image

Width="190"

Height="130"

Stretch="UniformToFill"

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

</DataTemplate>

<RelativePanel

Width="280"

MinHeight="160">

<Image Name="image"

Width="18"

Margin="0 5 0 0"

RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignTopWithPanel="True"

Stretch="Uniform"

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

<TextBlock Name="titleTextBlock"

Style="{StaticResource BaseTextBlockStyle}"

Margin="10 0 0 0"

RelativePanel.RightOf="image"

RelativePanel.AlignTopWithPanel="True"

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

<TextBlock

Style="{StaticResource CaptionTextBlockStyle}"

Margin="0 5 10 0"

RelativePanel.Below="titleTextBlock"

TextWrapping="Wrap"

TextTrimming="WordEllipsis"

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

</RelativePanel>

</DataTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Grid.Column="0"

VerticalAlignment="Top"

Height="100"

Stretch="Fill"

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

<StackPanel Grid.Column="1"

Margin="10 0 0 10">

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Margin="0 0 0 10"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Text=" Views" />

</StackPanel>

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Text=" Likes" />

</StackPanel>

</Grid>

</DataTemplate>

<StackPanel

Width="240"

Orientation="Horizontal">

<TextBlock

Style="{StaticResource TitleTextBlockStyle}"

Margin="10 0 0 0"

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

</StackPanel>

</DataTemplate>

</Border.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

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

ItemTemplate="{StaticResource ImageDataTemplateKey}"

AllowDrop="{x:Bind allowDropCheckBox.IsChecked.Value, Mode=OneWay}"

CanDragItems="{x:Bind canDragItemsCheckBox.IsChecked.Value, Mode=OneWay}"

CanReorderItems="{x:Bind canReorderItemsCheckBox.IsChecked.Value, Mode=OneWay}"

IsItemClickEnabled="{x:Bind isItemClickEnabledCheckBox.IsChecked.Value, Mode=OneWay}"

FlowDirection="LeftToRight" />

</StackPanel>

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

Margin="10 0 0 0">

<RadioButton

GroupName="Template"

Tag="ImageDataTemplateKey"

IsChecked="True"

Content="Image"

Checked="templateRadioButton_Checked" />

<RadioButton

GroupName="Template"

Tag="IconTextDataTemplateKey"

Content="Icon/Text"

Checked="templateRadioButton_Checked" />

<RadioButton

GroupName="Template"

Tag="ImageTextDataTemplateKey"

Content="Image/Text"

Checked="templateRadioButton_Checked" />

<RadioButton

GroupName="Template"

Tag="TextDataTemplateKey"

Content="Text"

Checked="templateRadioButton_Checked" />

</RadioButtons>

<ToggleButton Name="reverseFlowDirectionToggleButton"

Margin="0 10 0 0"

Content="Reverse FlowDirection" />

<TextBlock

Margin="0 10 0 0"

Text="GridView Properties" />

<CheckBox Name="isItemClickEnabledCheckBox"

Margin="0 5 0 0"

Content="IsItemClickEnabled" />

<CheckBox Name="canDragItemsCheckBox"

Margin="0 5 0 0"

Content="CanDragItems" />

<CheckBox Name="canReorderItemsCheckBox"

Margin="0 5 0 0"

Content="CanReorderItems" />

<CheckBox Name="allowDropCheckBox"

Margin="0 5 0 0"

Content="AllowDrop" />

<ComboBox Name="selectionModeComboBox"

Margin="0 5 0 0"

Header="SelectionMode"

SelectedIndex="1">

<x:String>None</x:String>

<x:String>Single</x:String>

<x:String>Multiple</x:String>

<x:String>Extended</x:String>

</ComboBox>

</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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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.gridView.ItemClick                     += gridView_ItemClick;
            this.gridView.SelectionChanged              += gridView_SelectionChanged;
            this.reverseFlowDirectionToggleButton.Click += reverseFlowDirectionToggleButton_Click;
            this.isItemClickEnabledCheckBox.Click       += isItemClickEnabledCheckBox_Click;
            this.selectionModeComboBox.SelectionChanged += selectionModeComboBox_SelectionChanged;
        }

        #endregion

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

        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.countClickedTextBlock.Text = $"You clicked {(e.ClickedItem as CustomDataObject).Title}.";
        }

        #endregion
        #region 그리드 뷰 선택 변경시 처리하기 - gridView_SelectionChanged(sender, e)

        /// <summary>
        /// 그리드 뷰 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(sender is GridView gridView)
            {
                this.countSelectedTextBlock.Text = $"You have selected {this.gridView.SelectedItems.Count} item(s).";
            }
        }

        #endregion
        #region 템플리트 라디오 버튼 체크시 처리하기 - templateRadioButton_Checked(sender, e)

        /// <summary>
        /// 템플리트 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void templateRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            object tag = (sender as FrameworkElement).Tag;

            if(tag != null)
            {
                string templateName = tag.ToString();

                this.gridView.ItemTemplate = (DataTemplate)this.border.Resources[templateName];
            }
        }

        #endregion
        #region Reverse FlowDirection 토글 버튼 클릭시 처리하기 - reverseFlowDirectionToggleButton_Click(sender, e)

        /// <summary>
        /// Reverse FlowDirection 토글 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void reverseFlowDirectionToggleButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.gridView.FlowDirection == FlowDirection.LeftToRight)
            {
                this.gridView.FlowDirection = FlowDirection.RightToLeft;
            }
            else
            {
                this.gridView.FlowDirection = FlowDirection.LeftToRight;
            }
        }

        #endregion
        #region IsItemClickEnabled 체크 박스 클릭시 처리하기 - isItemClickEnabledCheckBox_Click(sender, e)

        /// <summary>
        /// IsItemClickEnabled 체크 박스 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void isItemClickEnabledCheckBox_Click(object sender, RoutedEventArgs e)
        {
            this.countClickedTextBlock.Text = string.Empty;
        }

        #endregion
        #region 선택 모드 콤보 박스 선택 변경시 처리하기 - selectionModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 선택 모드 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void selectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.gridView != null)
            {
                string colorName = e.AddedItems[0].ToString();

                switch(colorName)
                {
                    case "None" :

                        this.gridView.SelectionMode = ListViewSelectionMode.None;

                        this.countSelectedTextBlock.Text = string.Empty;

                        break;

                    case "Single" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Single;

                        break;

                    case "Multiple" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Multiple;

                        break;

                    case "Extended" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Extended;

                        break;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

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

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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.gridView.ItemClick += gridView_ItemClick;

this.gridView.SelectionChanged += gridView_SelectionChanged;

this.reverseFlowDirectionToggleButton.Click += reverseFlowDirectionToggleButton_Click;

this.isItemClickEnabledCheckBox.Click += isItemClickEnabledCheckBox_Click;

this.selectionModeComboBox.SelectionChanged += selectionModeComboBox_SelectionChanged;

}

#endregion

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

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

#region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

this.countClickedTextBlock.Text = $"You clicked {(e.ClickedItem as CustomDataObject).Title}.";

}

#endregion

#region 그리드 뷰 선택 변경시 처리하기 - gridView_SelectionChanged(sender, e)

/// <summary>

/// 그리드 뷰 선택 변경시 처리하기

/// </summary>

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

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

private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(sender is GridView gridView)

{

this.countSelectedTextBlock.Text = $"You have selected {this.gridView.SelectedItems.Count} item(s).";

}

#endregion

#region 템플리트 라디오 버튼 체크시 처리하기 - templateRadioButton_Checked(sender, e)

/// <summary>

/// 템플리트 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void templateRadioButton_Checked(object sender, RoutedEventArgs e)

{

object tag = (sender as FrameworkElement).Tag;

if(tag != null)

{

string templateName = tag.ToString();

this.gridView.ItemTemplate = (DataTemplate)this.border.Resources[templateName];

}

#endregion

#region Reverse FlowDirection 토글 버튼 클릭시 처리하기 - reverseFlowDirectionToggleButton_Click(sender, e)

/// <summary>

/// Reverse FlowDirection 토글 버튼 클릭시 처리하기

/// </summary>

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

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

private void reverseFlowDirectionToggleButton_Click(object sender, RoutedEventArgs e)

{

if(this.gridView.FlowDirection == FlowDirection.LeftToRight)

{

this.gridView.FlowDirection = FlowDirection.RightToLeft;

}

else

{

this.gridView.FlowDirection = FlowDirection.LeftToRight;

}

#endregion

#region IsItemClickEnabled 체크 박스 클릭시 처리하기 - isItemClickEnabledCheckBox_Click(sender, e)

/// <summary>

/// IsItemClickEnabled 체크 박스 클릭시 처리하기

/// </summary>

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

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

private void isItemClickEnabledCheckBox_Click(object sender, RoutedEventArgs e)

{

this.countClickedTextBlock.Text = string.Empty;

}

#endregion

#region 선택 모드 콤보 박스 선택 변경시 처리하기 - selectionModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// 선택 모드 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void selectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.gridView != null)

{

string colorName = e.AddedItems[0].ToString();

switch(colorName)

{

case "None" :

this.gridView.SelectionMode = ListViewSelectionMode.None;

this.countSelectedTextBlock.Text = string.Empty;

break;

case "Single" :

this.gridView.SelectionMode = ListViewSelectionMode.Single;

break;

case "Multiple" :

this.gridView.SelectionMode = ListViewSelectionMode.Multiple;

break;

case "Extended" :

this.gridView.SelectionMode = ListViewSelectionMode.Extended;

break;

}

#endregion

}

TestProject.zip

[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[]

{

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"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.",

};

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

[C#/WINUI3/.NET6] GridView 클래스 : ItemClick 이벤트를 사용해 항목 클릭하기

■ GridView 클래스의 ItemClick 이벤트를 사용해 항목을 클릭하는 방법을 보여준다. ▶ 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[]

{

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"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.",

};

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">
        <Grid>
            <Grid.Resources>
                <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomDataObject">
                    <Image
                        Width="190"
                        Height="130"
                        Stretch="UniformToFill"
                        Source="{x:Bind ImageLocation}" />
                </DataTemplate>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"    />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <GridView Name="gridView" Grid.Row="0"
                ItemTemplate="{StaticResource ImageDataTemplateKey}"
                Margin="10"
                SelectionMode="Single"
                IsItemClickEnabled="True">
            </GridView>
            <TextBlock x:Name="textBlock" Grid.Row="1"
                Margin="10 0 10 10" />
        </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">

<Grid>

<Grid.Resources>

<Image

Width="190"

Height="130"

Stretch="UniformToFill"

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

</DataTemplate>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

ItemTemplate="{StaticResource ImageDataTemplateKey}"

Margin="10"

SelectionMode="Single"

IsItemClickEnabled="True">

</GridView>

<TextBlock x:Name="textBlock" Grid.Row="1"

Margin="10 0 10 10" />

</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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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.gridView.ItemClick += gridView_ItemClick;
        }

        #endregion

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

        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.textBlock.Text = $"You clicked {(e.ClickedItem as CustomDataObject).Title}.";
        }

        #endregion
    }
}

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

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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.gridView.ItemClick += gridView_ItemClick;

}

#endregion

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

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

#region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

this.textBlock.Text = $"You clicked {(e.ClickedItem as CustomDataObject).Title}.";

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] FlipView 엘리먼트 : ItemsPanel 속성을 사용해 수직 플립 뷰 만들기

■ FlipView 엘리먼트의 ItemsPanel 속성을 사용해 수직 플립 뷰를 만드는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <FlipView
        HorizontalAlignment="Center"
        Width="400"
        Height="270">
        <Image Source="ms-appx:///IMAGE/cliff.jpg"   />
        <Image Source="ms-appx:///IMAGE/grapes.jpg"  />
        <Image Source="ms-appx:///IMAGE/rainier.jpg" />
        <Image Source="ms-appx:///IMAGE/sunset.jpg"  />
        <Image Source="ms-appx:///IMAGE/valley.jpg"  />
        <FlipView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </FlipView.ItemsPanel>
    </FlipView>
</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"

Title="TestProject">

<FlipView

HorizontalAlignment="Center"

Width="400"

Height="270">

<FlipView.ItemsPanel>

</ItemsPanelTemplate>

</FlipView.ItemsPanel>

</FlipView>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] FlipView 엘리먼트 : ItemTemplate 속성을 사용해 데이터 바인딩하기

■ FlipView 엘리먼트의 ItemTemplate 속성을 사용해 데이터를 바인딩하는 방법을 보여준다. ▶ ImageItem.cs


namespace TestProject
{
    /// <summary>
    /// 이미지 항목
    /// </summary>
    public class ImageItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 경로 - ImagePath

        /// <summary>
        /// 이미지 경로
        /// </summary>
        public string ImagePath { get; set; }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 이미지 항목

/// </summary>

public class ImageItem

{

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

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 경로 - ImagePath

/// <summary>

/// 이미지 경로

/// </summary>

public string ImagePath { get; set; }

#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">
    <FlipView
        Width="400"
        Height="400"
        BorderThickness="1"
        BorderBrush="Black"
        ItemsSource="{x:Bind ImageItemList, Mode=OneWay}">
        <FlipView.ItemTemplate>
            <DataTemplate x:DataType="local:ImageItem">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"    />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0"
                        VerticalAlignment="Center"
                        Margin="10"
                        Stretch="Uniform"
                        Source="{x:Bind ImagePath}" />
                    <Border Grid.Row="1"
                        Height="60"
                        Background="#a5ffffff">
                        <TextBlock Name="Control2Text"
                            Style="{StaticResource TitleTextBlockStyle}"
                            HorizontalAlignment="Center"
                            Padding="10 10"
                            Foreground="Black"
                            Text="{x:Bind Title}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</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">

<FlipView

Width="400"

Height="400"

BorderThickness="1"

BorderBrush="Black"

ItemsSource="{x:Bind ImageItemList, Mode=OneWay}">

<FlipView.ItemTemplate>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Image Grid.Row="0"

VerticalAlignment="Center"

Margin="10"

Stretch="Uniform"

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

<Border Grid.Row="1"

Height="60"

Background="#a5ffffff">

<TextBlock Name="Control2Text"

Style="{StaticResource TitleTextBlockStyle}"

HorizontalAlignment="Center"

Padding="10 10"

Foreground="Black"

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

</Border>

</Grid>

</DataTemplate>

</FlipView.ItemTemplate>

</FlipView>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;

using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이미지 항목 리스트 - ImageItemList

        /// <summary>
        /// 이미지 항목 리스트
        /// </summary>
        public List<ImageItem> ImageItemList { get; } = new List<ImageItem>()
        {
            new ImageItem { Title = "cliff"  , ImagePath = "ms-appx:///IMAGE/cliff.jpg"   },
            new ImageItem { Title = "grapes" , ImagePath = "ms-appx:///IMAGE/grapes.jpg"  },
            new ImageItem { Title = "rainier", ImagePath = "ms-appx:///IMAGE/rainier.jpg" },
            new ImageItem { Title = "sunset" , ImagePath = "ms-appx:///IMAGE/sunset.jpg"  },
            new ImageItem { Title = "valley" , ImagePath = "ms-appx:///IMAGE/valley.jpg"  }
        };

        #endregion

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

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Collections.Generic;

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 이미지 항목 리스트 - ImageItemList

/// <summary>

/// 이미지 항목 리스트

/// </summary>

public List<ImageItem> ImageItemList { get; } = new List<ImageItem>()

{

new ImageItem { Title = "cliff" , ImagePath = "ms-appx:///IMAGE/cliff.jpg" },

new ImageItem { Title = "grapes" , ImagePath = "ms-appx:///IMAGE/grapes.jpg" },

new ImageItem { Title = "rainier", ImagePath = "ms-appx:///IMAGE/rainier.jpg" },

new ImageItem { Title = "sunset" , ImagePath = "ms-appx:///IMAGE/sunset.jpg" },

new ImageItem { Title = "valley" , ImagePath = "ms-appx:///IMAGE/valley.jpg" }

};

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] FlipView 엘리먼트 사용하기

■ FlipView 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <FlipView
        HorizontalAlignment="Center"
        Width="400"
        Height="270">
        <Image Source="ms-appx:///IMAGE/cliff.jpg"   />
        <Image Source="ms-appx:///IMAGE/grapes.jpg"  />
        <Image Source="ms-appx:///IMAGE/rainier.jpg" />
        <Image Source="ms-appx:///IMAGE/sunset.jpg"  />
        <Image Source="ms-appx:///IMAGE/valley.jpg"  />
    </FlipView>
</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"

Title="TestProject">

<FlipView

HorizontalAlignment="Center"

Width="400"

Height="270">

</FlipView>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] ToggleSwitch 엘리먼트 : OffContent/OnContent/IsOn 속성 사용하기

■ ToggleSwitch 엘리먼트의 OffContent/OnContent/IsOn 속성을 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ToggleSwitch Name="toggleSwitch"
            HorizontalAlignment="Center"
            Header="Toggle work"
            OffContent="Do work"
            OnContent="Working"
            IsOn="True" />
        <ProgressRing
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="32"
            IsActive="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ToggleSwitch Name="toggleSwitch"

HorizontalAlignment="Center"

Header="Toggle work"

OffContent="Do work"

OnContent="Working"

IsOn="True" />

<ProgressRing

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="32"

IsActive="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

</StackPanel>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] Slider 엘리먼트 사용하기

■ Slider 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Slider Name="slider1"
            HorizontalAlignment="Center"
            Width="300"
            Header="Control header"
            Minimum="{x:Bind minimumNumberBox.Value, Mode=OneWay}"
            Maximum="{x:Bind maximumNumberBox.Value, Mode=OneWay}"
            StepFrequency="{x:Bind stepFrequencyNumberBox.Value, Mode=OneWay}"
            SmallChange="{x:Bind smallChangeNumberVox.Value, Mode=OneWay}"
            Value="800" />
        <Grid
            HorizontalAlignment="Center"
            Margin="0 10 0 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Name="minimumTextBlock" Grid.Row="0" Grid.Column="0"
                Text="Minimum" />
            <NumberBox Name="minimumNumberBox" Grid.Row="0" Grid.Column="1"
                Margin="10 0 0 0"
                SpinButtonPlacementMode="Compact"
                Value="500" />
            <TextBlock Name="maximumTextBlock" Grid.Row="1" Grid.Column="0"
                Margin="0 5 0 0"
                Text="Maximum" />
            <NumberBox Name="maximumNumberBox" Grid.Row="1" Grid.Column="1"
                Margin="10 5 0 0"
                SpinButtonPlacementMode="Compact"
                Value="1000" />
            <TextBlock Name="stepFrequencyTextBlock" Grid.Row="2" Grid.Column="0"
                Margin="0 5 0 0"
                Text="StepFrequency" />
            <NumberBox Name="stepFrequencyNumberBox" Grid.Row="2" Grid.Column="1"
                Margin="10 5 0 0"
                SpinButtonPlacementMode="Compact"
                Minimum="1"
                Value="10" />
            <TextBlock Name="smallChangeTextBlock" Grid.Row="3" Grid.Column="0"
                Margin="0 5 0 0"
                Text="SmallChange" />
            <NumberBox Name="smallChangeNumberVox" Grid.Row="3" Grid.Column="1"
                Margin="10 5 0 0"
                SpinButtonPlacementMode="Compact"
                Value="10" />
        </Grid>
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Text="{x:Bind slider1.Value.ToString(), Mode=OneWay}" />
        <Slider Name="slider2"
            HorizontalAlignment="Center"
            Margin="0 30 0 0"
            Width="300"
            TickPlacement="Outside"
            TickFrequency="20" />
        <RadioButtons Name="radioButtons"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Header="Snaps to">
            <x:String>StepValues</x:String>
            <x:String>Ticks</x:String>
        </RadioButtons>
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Text="{x:Bind slider2.Value.ToString(), Mode=OneWay}" />
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Slider Name="slider1"

HorizontalAlignment="Center"

Width="300"

Header="Control header"

Minimum="{x:Bind minimumNumberBox.Value, Mode=OneWay}"

Maximum="{x:Bind maximumNumberBox.Value, Mode=OneWay}"

StepFrequency="{x:Bind stepFrequencyNumberBox.Value, Mode=OneWay}"

SmallChange="{x:Bind smallChangeNumberVox.Value, Mode=OneWay}"

Value="800" />

<Grid

HorizontalAlignment="Center"

Margin="0 10 0 0">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Name="minimumTextBlock" Grid.Row="0" Grid.Column="0"

Text="Minimum" />

<NumberBox Name="minimumNumberBox" Grid.Row="0" Grid.Column="1"

Margin="10 0 0 0"

SpinButtonPlacementMode="Compact"

Value="500" />

<TextBlock Name="maximumTextBlock" Grid.Row="1" Grid.Column="0"

Margin="0 5 0 0"

Text="Maximum" />

<NumberBox Name="maximumNumberBox" Grid.Row="1" Grid.Column="1"

Margin="10 5 0 0"

SpinButtonPlacementMode="Compact"

Value="1000" />

<TextBlock Name="stepFrequencyTextBlock" Grid.Row="2" Grid.Column="0"

Margin="0 5 0 0"

Text="StepFrequency" />

<NumberBox Name="stepFrequencyNumberBox" Grid.Row="2" Grid.Column="1"

Margin="10 5 0 0"

SpinButtonPlacementMode="Compact"

Minimum="1"

Value="10" />

<TextBlock Name="smallChangeTextBlock" Grid.Row="3" Grid.Column="0"

Margin="0 5 0 0"

Text="SmallChange" />

<NumberBox Name="smallChangeNumberVox" Grid.Row="3" Grid.Column="1"

Margin="10 5 0 0"

SpinButtonPlacementMode="Compact"

Value="10" />

</Grid>

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="{x:Bind slider1.Value.ToString(), Mode=OneWay}" />

<Slider Name="slider2"

HorizontalAlignment="Center"

Margin="0 30 0 0"

Width="300"

TickPlacement="Outside"

TickFrequency="20" />

<RadioButtons Name="radioButtons"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Header="Snaps to">

<x:String>StepValues</x:String>

<x:String>Ticks</x:String>

</RadioButtons>

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="{x:Bind slider2.Value.ToString(), Mode=OneWay}" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.radioButtons.SelectionChanged += radioButtons_SelectionChanged;

            this.radioButtons.SelectedIndex = 1;
        }

        #endregion

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

        #region 라디오 버튼 리스트 선택 변경시 처리하기 - radioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 라디오 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch(this.radioButtons.SelectedItem)
            {
                case "StepValues" : this.slider2.SnapsTo = SliderSnapsTo.StepValues; break;
                default           : this.slider2.SnapsTo = SliderSnapsTo.Ticks;      break;
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Controls.Primitives;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.radioButtons.SelectionChanged += radioButtons_SelectionChanged;

this.radioButtons.SelectedIndex = 1;

}

#endregion

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

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

#region 라디오 버튼 리스트 선택 변경시 처리하기 - radioButtons_SelectionChanged(sender, e)

/// <summary>

/// 라디오 버튼 리스트 선택 변경시 처리하기

/// </summary>

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

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

private void radioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

switch(this.radioButtons.SelectedItem)

{

case "StepValues" : this.slider2.SnapsTo = SliderSnapsTo.StepValues; break;

default : this.slider2.SnapsTo = SliderSnapsTo.Ticks; break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] RatingControl 엘리먼트 : Caption/IsClearEnabled/PlaceholderValue 속성 사용하기

■ RatingControl 엘리먼트의 Caption/IsClearEnabled/PlaceholderValue 속성을 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <RatingControl Name="ratingControl1"
            HorizontalAlignment="Center"
            Caption="312 ratings"
            IsClearEnabled="{x:Bind isClearEnabledCheckBox.IsChecked.Value, Mode=OneWay}"
            IsReadOnly="{x:Bind isReadOnlyCheckBox.IsChecked.Value, Mode=OneWay}" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            FontWeight="Bold"
            Text="{x:Bind ratingControl1.Value, Mode=OneWay}" />
        <CheckBox Name="isClearEnabledCheckBox"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Content="IsClearEnabled" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Text="평가를 삭제하려면 왼쪽으로 스와이프 해주시기 바랍니다."
            TextWrapping="WrapWholeWords" />
        <CheckBox Name="isReadOnlyCheckBox"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Content="IsReadOnly" />
        <RatingControl Name="RatingControl2"
            HorizontalAlignment="Center"
            Margin="0 30 0 0"
            PlaceholderValue="{x:Bind slider.Value, Mode=TwoWay}" />
        <Slider Name="slider"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Header="PlaceholderValue"
            Minimum="0"
            Maximum="5"
            SmallChange="0.5"
            StepFrequency="0.5"
            IsFocusEngagementEnabled="False" />
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<RatingControl Name="ratingControl1"

HorizontalAlignment="Center"

Caption="312 ratings"

IsClearEnabled="{x:Bind isClearEnabledCheckBox.IsChecked.Value, Mode=OneWay}"

IsReadOnly="{x:Bind isReadOnlyCheckBox.IsChecked.Value, Mode=OneWay}" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

FontWeight="Bold"

Text="{x:Bind ratingControl1.Value, Mode=OneWay}" />

<CheckBox Name="isClearEnabledCheckBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Content="IsClearEnabled" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="평가를 삭제하려면 왼쪽으로 스와이프 해주시기 바랍니다."

TextWrapping="WrapWholeWords" />

<CheckBox Name="isReadOnlyCheckBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Content="IsReadOnly" />

<RatingControl Name="RatingControl2"

HorizontalAlignment="Center"

Margin="0 30 0 0"

PlaceholderValue="{x:Bind slider.Value, Mode=TwoWay}" />

<Slider Name="slider"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Header="PlaceholderValue"

Minimum="0"

Maximum="5"

SmallChange="0.5"

StepFrequency="0.5"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.ratingControl1.ValueChanged += ratingControl1_ValueChanged;
        }

        #endregion

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

        #region 평가 컨트롤 1 값 변경시 처리하기 - ratingControl1_ValueChanged(sender, e)

        /// <summary>
        /// 평가 컨트롤 1 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void ratingControl1_ValueChanged(RatingControl sender, object e)
        {
            this.ratingControl1.Caption = "Your rating";
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.ratingControl1.ValueChanged += ratingControl1_ValueChanged;

}

#endregion

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

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

#region 평가 컨트롤 1 값 변경시 처리하기 - ratingControl1_ValueChanged(sender, e)

/// <summary>

/// 평가 컨트롤 1 값 변경시 처리하기

/// </summary>

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

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

private void ratingControl1_ValueChanged(RatingControl sender, object e)

{

this.ratingControl1.Caption = "Your rating";

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] RadioButtons 클래스 : SelectionChanged 이벤트 사용하기

■ RadioButtons 클래스의 SelectionChanged 이벤트를 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <RadioButtons Name="borderRadioButtons"
            MaxColumns="3"
            Header="테두리">
            <x:String>Green</x:String>
            <x:String>Yellow</x:String>
            <x:String>White</x:String>
        </RadioButtons>
        <RadioButtons Name="backgroundRadioButtons"
            MaxColumns="3"
            Header="배경">
            <x:String>Green</x:String>
            <x:String>Yellow</x:String>
            <x:String>White</x:String>
        </RadioButtons>
        <Border Name="border"
            Margin="0 10 0 0"
            Height="50"
            BorderThickness="10"
            BorderBrush="#ffffd700"
            Background="#ffffffff" />
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<RadioButtons Name="borderRadioButtons"

MaxColumns="3"

Header="테두리">

<x:String>Green</x:String>

<x:String>Yellow</x:String>

<x:String>White</x:String>

</RadioButtons>

<RadioButtons Name="backgroundRadioButtons"

MaxColumns="3"

Header="배경">

<x:String>Green</x:String>

<x:String>Yellow</x:String>

<x:String>White</x:String>

</RadioButtons>

<Border Name="border"

Margin="0 10 0 0"

Height="50"

BorderThickness="10"

BorderBrush="#ffffd700"

Background="#ffffffff" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.borderRadioButtons.SelectionChanged     += borderRadioButtons_SelectionChanged;
            this.backgroundRadioButtons.SelectionChanged += backgroundRadioButtons_SelectionChanged;

            this.borderRadioButtons.SelectedIndex     = 1;
            this.backgroundRadioButtons.SelectedIndex = 0;
        }

        #endregion

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

        #region 테두리 라디오 버튼 리스트 선택 변경시 처리하기 - borderRadioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 테두리 라디오 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void borderRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.border != null && sender is RadioButtons radionButtons)
            {
                string colorName = radionButtons.SelectedItem as string;

                switch(colorName)
                {
                    case "Yellow" : this.border.BorderBrush = new SolidColorBrush(Colors.Yellow   ); break;
                    case "Green"  : this.border.BorderBrush = new SolidColorBrush(Colors.DarkGreen); break;
                    case "White"  : this.border.BorderBrush = new SolidColorBrush(Colors.White    ); break;
                }
            }
        }

        #endregion
        #region 배경 라디오 버튼 리스트 선택 변경시 처리하기 - backgroundRadioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 배경 라디오 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void backgroundRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.border != null && sender is RadioButtons radioButtons)
            {
                string colorName = radioButtons.SelectedItem as string;

                switch(colorName)
                {
                    case "Yellow": this.border.Background = new SolidColorBrush(Colors.Yellow); break;
                    case "Green" : this.border.Background = new SolidColorBrush(Colors.Green ); break;
                    case "White" : this.border.Background = new SolidColorBrush(Colors.White ); break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.borderRadioButtons.SelectionChanged += borderRadioButtons_SelectionChanged;

this.backgroundRadioButtons.SelectionChanged += backgroundRadioButtons_SelectionChanged;

this.borderRadioButtons.SelectedIndex = 1;

this.backgroundRadioButtons.SelectedIndex = 0;

}

#endregion

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

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

#region 테두리 라디오 버튼 리스트 선택 변경시 처리하기 - borderRadioButtons_SelectionChanged(sender, e)

/// <summary>

/// 테두리 라디오 버튼 리스트 선택 변경시 처리하기

/// </summary>

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

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

private void borderRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.border != null && sender is RadioButtons radionButtons)

{

string colorName = radionButtons.SelectedItem as string;

switch(colorName)

{

case "Yellow" : this.border.BorderBrush = new SolidColorBrush(Colors.Yellow ); break;

case "Green" : this.border.BorderBrush = new SolidColorBrush(Colors.DarkGreen); break;

case "White" : this.border.BorderBrush = new SolidColorBrush(Colors.White ); break;

}

#endregion

#region 배경 라디오 버튼 리스트 선택 변경시 처리하기 - backgroundRadioButtons_SelectionChanged(sender, e)

/// <summary>

/// 배경 라디오 버튼 리스트 선택 변경시 처리하기

/// </summary>

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

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

private void backgroundRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.border != null && sender is RadioButtons radioButtons)

{

string colorName = radioButtons.SelectedItem as string;

switch(colorName)

{

case "Yellow": this.border.Background = new SolidColorBrush(Colors.Yellow); break;

case "Green" : this.border.Background = new SolidColorBrush(Colors.Green ); break;

case "White" : this.border.Background = new SolidColorBrush(Colors.White ); break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] RadioButtons 엘리먼트 : 라디오 버튼 그룹 만들기

■ RadioButtons 엘리먼트를 사용해 라디오 버튼 그룹을 만드는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <StackPanel>
            <RadioButtons Header="옵션">
                <RadioButton Name="radioButton1"
                    Content="옵션 1" />
                <RadioButton Name="radioButton2"
                    Content="옵션 2" />
                <RadioButton Name="radioButton3"
                    Content="옵션 3" />
            </RadioButtons>
        </StackPanel>
        <TextBlock Name="textBlock"
            Margin="0 10 0 0"
            Text="옵션을 선택해 주시기 바랍니다." />
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<RadioButton Name="radioButton1"

Content="옵션 1" />

<RadioButton Name="radioButton2"

Content="옵션 2" />

<RadioButton Name="radioButton3"

Content="옵션 3" />

</RadioButtons>

</StackPanel>

<TextBlock Name="textBlock"

Margin="0 10 0 0"

Text="옵션을 선택해 주시기 바랍니다." />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.radioButton1.Checked += radioButton_Checked;
            this.radioButton2.Checked += radioButton_Checked;
            this.radioButton3.Checked += radioButton_Checked;
        }

        #endregion

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

        #region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

        /// <summary>
        /// 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButton_Checked(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = $"선택 옵션 : {(sender as RadioButton).Content}";
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.radioButton1.Checked += radioButton_Checked;

this.radioButton2.Checked += radioButton_Checked;

this.radioButton3.Checked += radioButton_Checked;

}

#endregion

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

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

#region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

/// <summary>

/// 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void radioButton_Checked(object sender, RoutedEventArgs e)

{

this.textBlock.Text = $"선택 옵션 : {(sender as RadioButton).Content}";

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ContentDialog 클래스 : 대화 상자 표시하기 1

■ ContentDialog 클래스를 사용해 대화 상자를 표시하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <Button Name="button"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="10"
        Content="대화 상자 표시하기" />
</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"

Title="TestProject">

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="대화 상자 표시하기" />

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.button.Click += button_Click;
        }

        #endregion

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

        #region 버튼 클릭시 처리하기 - button_Click(sender, e)

        /// <summary>
        /// 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_Click(object sender, RoutedEventArgs e)
        {
            ContentDialog dialog = new ContentDialog();

            dialog.Content         = "폰트 크기는 8에서 100 사이의 숫자이어야 합니다.";
            dialog.CloseButtonText = "닫기";
            dialog.DefaultButton   = ContentDialogButton.Close;
            dialog.XamlRoot        = this.button.XamlRoot;

            _ = dialog.ShowAsync();
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.button.Click += button_Click;

}

#endregion

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

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

#region 버튼 클릭시 처리하기 - button_Click(sender, e)

/// <summary>

/// 버튼 클릭시 처리하기

/// </summary>

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

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

private void button_Click(object sender, RoutedEventArgs e)

{

ContentDialog dialog = new ContentDialog();

dialog.Content = "폰트 크기는 8에서 100 사이의 숫자이어야 합니다.";

dialog.CloseButtonText = "닫기";

dialog.DefaultButton = ContentDialogButton.Close;

dialog.XamlRoot = this.button.XamlRoot;

_ = dialog.ShowAsync();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ComboBox 엘리먼트 사용하기

■ ComboBox 엘리먼트를 사용하는 방법을 보여준다. ▶ 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:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ComboBox Name="colorComboBox"
            HorizontalAlignment="Center"
            Width="200"
            Header="Colors"
            PlaceholderText="색성 선택">
            <x:String>Blue</x:String>
            <x:String>Green</x:String>
            <x:String>Red</x:String>
            <x:String>Yellow</x:String>
        </ComboBox>
        <Rectangle Name="colorRectangle"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="100"
            Height="30" />
        <ComboBox Name="fontComboBox"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="200"
            Header="폰트"
            DisplayMemberPath="Item1"
            SelectedValuePath="Item2"
            ItemsSource="{x:Bind FontList}" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            FontFamily="{x:Bind (FontFamily)fontComboBox.SelectedValue, Mode=OneWay}"
            Text="이 텍스트에 사용되는 폰트를 설정할 수 있습니다." />
        <ComboBox Name="fontSizeComboBox"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="200"
            Header="Font Size"
            contract7Present:IsEditable="True"
            ItemsSource="{x:Bind FontSizeList}" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            FontFamily="Segoe UI"
            FontSize="{x:Bind (x:Double)fontSizeComboBox.SelectedValue, Mode=OneWay}"
            Text="이 텍스트에 사용되는 폰트 크기를 설정할 수 있습니다." />
    </StackPanel>
</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:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ComboBox Name="colorComboBox"

HorizontalAlignment="Center"

Width="200"

Header="Colors"

PlaceholderText="색성 선택">

<x:String>Blue</x:String>

<x:String>Green</x:String>

<x:String>Red</x:String>

<x:String>Yellow</x:String>

</ComboBox>

<Rectangle Name="colorRectangle"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="100"

Height="30" />

<ComboBox Name="fontComboBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="200"

Header="폰트"

DisplayMemberPath="Item1"

SelectedValuePath="Item2"

ItemsSource="{x:Bind FontList}" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

FontFamily="{x:Bind (FontFamily)fontComboBox.SelectedValue, Mode=OneWay}"

Text="이 텍스트에 사용되는 폰트를 설정할 수 있습니다." />

<ComboBox Name="fontSizeComboBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="200"

Header="Font Size"

contract7Present:IsEditable="True"

ItemsSource="{x:Bind FontSizeList}" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

FontFamily="Segoe UI"

FontSize="{x:Bind (x:Double)fontSizeComboBox.SelectedValue, Mode=OneWay}"

Text="이 텍스트에 사용되는 폰트 크기를 설정할 수 있습니다." />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Collections.Generic;

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

using Windows.Foundation.Metadata;
using Windows.UI;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 폰트 리스트 - FontList

        /// <summary>
        /// 폰트 리스트
        /// </summary>
        public List<Tuple<string, FontFamily>> FontList { get; } = new List<Tuple<string, FontFamily>>()
        {
            new Tuple<string, FontFamily>("Arial"          , new FontFamily("Arial"          )),
            new Tuple<string, FontFamily>("Comic Sans MS"  , new FontFamily("Comic Sans MS"  )),
            new Tuple<string, FontFamily>("Courier New"    , new FontFamily("Courier New"    )),
            new Tuple<string, FontFamily>("Segoe UI"       , new FontFamily("Segoe UI"       )),
            new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))
        };

        #endregion
        #region 폰트 크기 리스트 - FontSizeList

        /// <summary>
        /// 폰트 크기 리스트
        /// </summary>
        public List<double> FontSizeList { get; } = new List<double>()
        {
            8,
            9,
            10,
            11,
            12,
            14,
            16,
            18,
            20,
            24,
            28,
            36,
            48,
            72
        };

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.colorComboBox.SelectionChanged += colorComboBox_SelectionChanged;
            this.fontComboBox.Loaded            += fontComboBox_Loaded;
            this.fontSizeComboBox.Loaded        += fontSizeComboBox_Loaded;
        }

        #endregion

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

        #region 색상 콤보 박스 선택 변경시 처리하기 - colorComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void colorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorName = e.AddedItems[0].ToString();

            Color color;

            switch(colorName)
            {
                case "Yellow" : color = Colors.Yellow; break;
                case "Green"  : color = Colors.Green;  break;
                case "Blue"   : color = Colors.Blue;   break;
                case "Red"    : color = Colors.Red;    break;
                default       : throw new Exception($"Invalid argument : {colorName}");
            }

            colorRectangle.Fill = new SolidColorBrush(color);
        }

        #endregion
        #region 폰트 콤보 박스 로드시 처리하기 - fontComboBox_Loaded(sender, e)

        /// <summary>
        /// 폰트 콤보 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fontComboBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.fontComboBox.SelectedIndex = 2;
        }

        #endregion
        #region 폰트 크기 콤보 박스 로드시 처리하기 - fontSizeComboBox_Loaded(sender, e)

        /// <summary>
        /// 폰트 크기 콤보 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fontSizeComboBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.fontSizeComboBox.SelectedIndex = 2;

            if((ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)))
            {
                this.fontSizeComboBox.TextSubmitted += fontSizeComboBox_TextSubmitted;
            }
        }

        #endregion
        #region 폰트 크기 콤보 박스 텍스트 제출시 처리하기 - fontSizeComboBox_TextSubmitted(sender, e)

        /// <summary>
        /// 폰트 크기 콤보 박스 텍스트 제출시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
        {
            bool isDouble = double.TryParse(sender.Text, out double newValue);

            if(isDouble && (FontSizeList.Contains(newValue) || (newValue < 100 && newValue > 8)))
            {
                sender.SelectedItem = newValue;
            }
            else
            {
                sender.Text = sender.SelectedValue.ToString();

                ContentDialog dialog = new ContentDialog();

                dialog.Content         = "폰트 크기는 8에서 100 사이의 숫자이어야 합니다.";
                dialog.CloseButtonText = "닫기";
                dialog.DefaultButton   = ContentDialogButton.Close;
                dialog.XamlRoot        = sender.XamlRoot;

                _ = dialog.ShowAsync();
            }

            e.Handled = true;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

using System;

using System.Collections.Generic;

using Microsoft.UI;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

using Windows.Foundation.Metadata;

using Windows.UI;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 폰트 리스트 - FontList

/// <summary>

/// 폰트 리스트

/// </summary>

public List<Tuple<string, FontFamily>> FontList { get; } = new List<Tuple<string, FontFamily>>()

{

new Tuple<string, FontFamily>("Arial" , new FontFamily("Arial" )),

new Tuple<string, FontFamily>("Comic Sans MS" , new FontFamily("Comic Sans MS" )),

new Tuple<string, FontFamily>("Courier New" , new FontFamily("Courier New" )),

new Tuple<string, FontFamily>("Segoe UI" , new FontFamily("Segoe UI" )),

new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))

};

#endregion

#region 폰트 크기 리스트 - FontSizeList

/// <summary>

/// 폰트 크기 리스트

/// </summary>

public List<double> FontSizeList { get; } = new List<double>()

{

10,

11,

12,

14,

16,

18,

20,

24,

28,

36,

48,

};

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.colorComboBox.SelectionChanged += colorComboBox_SelectionChanged;

this.fontComboBox.Loaded += fontComboBox_Loaded;

this.fontSizeComboBox.Loaded += fontSizeComboBox_Loaded;

}

#endregion

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

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

#region 색상 콤보 박스 선택 변경시 처리하기 - colorComboBox_SelectionChanged(sender, e)

/// <summary>

/// 색상 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void colorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string colorName = e.AddedItems[0].ToString();

Color color;

switch(colorName)

{

case "Yellow" : color = Colors.Yellow; break;

case "Green" : color = Colors.Green; break;

case "Blue" : color = Colors.Blue; break;

case "Red" : color = Colors.Red; break;

default : throw new Exception($"Invalid argument : {colorName}");

}

colorRectangle.Fill = new SolidColorBrush(color);

}

#endregion

#region 폰트 콤보 박스 로드시 처리하기 - fontComboBox_Loaded(sender, e)

/// <summary>

/// 폰트 콤보 박스 로드시 처리하기

/// </summary>

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

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

private void fontComboBox_Loaded(object sender, RoutedEventArgs e)

{

this.fontComboBox.SelectedIndex = 2;

}

#endregion

#region 폰트 크기 콤보 박스 로드시 처리하기 - fontSizeComboBox_Loaded(sender, e)

/// <summary>

/// 폰트 크기 콤보 박스 로드시 처리하기

/// </summary>

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

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

private void fontSizeComboBox_Loaded(object sender, RoutedEventArgs e)

{

this.fontSizeComboBox.SelectedIndex = 2;

if((ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)))

{

this.fontSizeComboBox.TextSubmitted += fontSizeComboBox_TextSubmitted;

}

#endregion

#region 폰트 크기 콤보 박스 텍스트 제출시 처리하기 - fontSizeComboBox_TextSubmitted(sender, e)

/// <summary>

/// 폰트 크기 콤보 박스 텍스트 제출시 처리하기

/// </summary>

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

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

private void fontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)

{

bool isDouble = double.TryParse(sender.Text, out double newValue);

if(isDouble && (FontSizeList.Contains(newValue) || (newValue < 100 && newValue > 8)))

{

sender.SelectedItem = newValue;

}

else

{

sender.Text = sender.SelectedValue.ToString();

ContentDialog dialog = new ContentDialog();

dialog.Content = "폰트 크기는 8에서 100 사이의 숫자이어야 합니다.";

dialog.CloseButtonText = "닫기";

dialog.DefaultButton = ContentDialogButton.Close;

dialog.XamlRoot = sender.XamlRoot;

_ = dialog.ShowAsync();

}

e.Handled = true;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ColorPicker 엘리먼트 : 색상 선택하기

■ ColorPicker 엘리먼트를 사용해 색상을 선택하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ColorPicker Name="colorPicker" Grid.Column="0"
            IsMoreButtonVisible="{x:Bind isMoreButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
            IsColorSliderVisible="{x:Bind isColorSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
            IsColorChannelTextInputVisible="{x:Bind isColorChannelTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
            IsHexInputVisible="{x:Bind isHexInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
            IsAlphaEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}"
            IsAlphaSliderVisible="{x:Bind isAlphaSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
            IsAlphaTextInputVisible="{x:Bind isAlphaTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}" />
        <StackPanel Grid.Column="1"
            Margin="30 0 0 0">
            <CheckBox Name="isMoreButtonVisibleCheckBox"
                Content="IsMoreButtonVisible"
                IsChecked="False" />
            <CheckBox Name="isColorSliderVisibleCheckBox"
                Content="IsColorSliderVisible"
                IsChecked="True" />
            <CheckBox Name="isColorChannelTextInputVisibleCheckBox"
                Content="IsColorChannelTextInputVisible"
                IsChecked="True" />
            <CheckBox Name="isHexInputVisibleCheckBox"
                Content="IsHexInputVisible"
                IsChecked="True" />
            <CheckBox Name="alphaEnabledCheckBox"
                Content="Alpha Enabled" />
            <CheckBox Name="isAlphaSliderVisibleCheckBox"
                Content="IsAlphaSliderVisible"
                IsChecked="True"
                IsEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />
            <CheckBox Name="isAlphaTextInputVisibleCheckBox"
                Content="IsAlphaTextInputVisible"
                IsEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" IsChecked="True" />
            <RadioButtons Name="colorSpectrumShapeRadioButtons"
                Header="Colorspectrum shape"
                SelectedIndex="0">
                <x:String>Box</x:String>
                <x:String>Ring</x:String>
            </RadioButtons>
            <StackPanel Margin="0 10 0 0">
                <TextBlock Text="ColorPicker applied on a Rectangle" />
                <Rectangle
                    Margin="0 10 0 0"
                    Width="100"
                    Height="100"
                    StrokeThickness="1"
                    Stroke="{ThemeResource TextControlBorderBrush}">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{x:Bind colorPicker.Color, Mode=OneWay}" />
                    </Rectangle.Fill>
                </Rectangle>
            </StackPanel>
        </StackPanel>
    </Grid>
</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"

Title="TestProject">

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ColorPicker Name="colorPicker" Grid.Column="0"

IsMoreButtonVisible="{x:Bind isMoreButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsColorSliderVisible="{x:Bind isColorSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsColorChannelTextInputVisible="{x:Bind isColorChannelTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsHexInputVisible="{x:Bind isHexInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaSliderVisible="{x:Bind isAlphaSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaTextInputVisible="{x:Bind isAlphaTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}" />

<StackPanel Grid.Column="1"

Margin="30 0 0 0">

<CheckBox Name="isMoreButtonVisibleCheckBox"

Content="IsMoreButtonVisible"

IsChecked="False" />

<CheckBox Name="isColorSliderVisibleCheckBox"

Content="IsColorSliderVisible"

IsChecked="True" />

<CheckBox Name="isColorChannelTextInputVisibleCheckBox"

Content="IsColorChannelTextInputVisible"

IsChecked="True" />

<CheckBox Name="isHexInputVisibleCheckBox"

Content="IsHexInputVisible"

IsChecked="True" />

<CheckBox Name="alphaEnabledCheckBox"

Content="Alpha Enabled" />

<CheckBox Name="isAlphaSliderVisibleCheckBox"

Content="IsAlphaSliderVisible"

IsChecked="True"

IsEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />

<CheckBox Name="isAlphaTextInputVisibleCheckBox"

Content="IsAlphaTextInputVisible"

IsEnabled="{x:Bind alphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" IsChecked="True" />

<RadioButtons Name="colorSpectrumShapeRadioButtons"

Header="Colorspectrum shape"

SelectedIndex="0">

<x:String>Box</x:String>

<x:String>Ring</x:String>

</RadioButtons>

<Rectangle

Margin="0 10 0 0"

Width="100"

Height="100"

StrokeThickness="1"

Stroke="{ThemeResource TextControlBorderBrush}">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.colorSpectrumShapeRadioButtons.SelectionChanged += colorSpectrumShapeRadioButtons_SelectionChanged;
        }

        #endregion

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

        #region 색상 스펙트럼 도형 라디오 버튼 리스트 선택 변경시 처리하기 - colorSpectrumShapeRadioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 색상 스펙트럼 도형 라디오 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void colorSpectrumShapeRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch(this.colorSpectrumShapeRadioButtons.SelectedItem)
            {
                case "Box" :

                    this.colorPicker.ColorSpectrumShape = ColorSpectrumShape.Box;

                    break;

                default :

                    this.colorPicker.ColorSpectrumShape = ColorSpectrumShape.Ring;

                    break;
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.colorSpectrumShapeRadioButtons.SelectionChanged += colorSpectrumShapeRadioButtons_SelectionChanged;

}

#endregion

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

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

#region 색상 스펙트럼 도형 라디오 버튼 리스트 선택 변경시 처리하기 - colorSpectrumShapeRadioButtons_SelectionChanged(sender, e)

/// <summary>

/// 색상 스펙트럼 도형 라디오 버튼 리스트 선택 변경시 처리하기

/// </summary>

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

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

private void colorSpectrumShapeRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

switch(this.colorSpectrumShapeRadioButtons.SelectedItem)

{

case "Box" :

this.colorPicker.ColorSpectrumShape = ColorSpectrumShape.Box;

break;

default :

this.colorPicker.ColorSpectrumShape = ColorSpectrumShape.Ring;

break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] AppWindow 클래스 : Resize 메소드를 사용해 윈도우 크기 설정하기

■ AppWindow 클래스의 Resize 메소드를 사용해 윈도우 크기를 설정하는 방법을 보여준다. ▶ App.xaml.cs


using Windows.Graphics;

using Microsoft.UI.Xaml;

namespace TestProject;

/// <summary>
/// 앱
/// </summary>
public partial class App : Application
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 윈도우
    /// </summary>
    private Window window;

    #endregion

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

    #region 생성자 - App()

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

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 시작시 처리하기 - OnLaunched(args)

    /// <summary>
    /// 시작시 처리하기
    /// </summary>
    /// <param name="args">이벤트 인자</param>
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        this.window = new MainWindow();

        this.window.AppWindow.Resize(new SizeInt32(800, 600));

        this.window.Activate();
    }

    #endregion
}

using Windows.Graphics;

using Microsoft.UI.Xaml;

namespace TestProject;

/// <summary>

/// 앱

/// </summary>

public partial class App : Application

{

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

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

#region Field

/// <summary>

/// 윈도우

/// </summary>

private Window window;

#endregion

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

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

#region 생성자 - App()

/// <summary>

/// 생성자

/// </summary>

public App()

{

InitializeComponent();

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 시작시 처리하기 - OnLaunched(args)

/// <summary>

/// 시작시 처리하기

/// </summary>

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

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

this.window = new MainWindow();

this.window.AppWindow.Resize(new SizeInt32(800, 600));

this.window.Activate();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] CheckBox 엘리먼트 : IsThreeState/IsChecked 속성 사용하기

■ CheckBox 엘리먼트의 IsThreeState/IsChecked 속성을 사용하는 방법을 보여준다. ▶ 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"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <CheckBox Name="twoStateCheckBox"
            HorizontalAlignment="Center"
            Content="2단계 상태 체크 박스" />
        <TextBlock Name="twoStateTextBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0" />
        <CheckBox Name="threeStateCheckBox"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            IsThreeState="True"
            Content="3단계 상태 체크 박스" />
        <TextBlock Name="threeStateTextBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0" />
        <StackPanel
            HorizontalAlignment="Center"
            Margin="0 10 0 0">
            <CheckBox Name="selectAllCheckBox"
                IsThreeState="True"
                Content="모두 선택하기" />
            <CheckBox Name="option1CheckBox"
                Margin="25 0 0 0"
                Content="옵션 1" />
            <CheckBox Name="option2CheckBox"
                Margin="25 0 0 0"
                IsChecked="True"
                Content="옵션 2" />
            <CheckBox Name="option3CheckBox"
                Margin="25 0 0 0"
                Content="옵션 3" />
        </StackPanel>
    </StackPanel>
</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"

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox Name="twoStateCheckBox"

HorizontalAlignment="Center"

Content="2단계 상태 체크 박스" />

<TextBlock Name="twoStateTextBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0" />

<CheckBox Name="threeStateCheckBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

IsThreeState="True"

Content="3단계 상태 체크 박스" />

<TextBlock Name="threeStateTextBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0" />

<StackPanel

HorizontalAlignment="Center"

Margin="0 10 0 0">

<CheckBox Name="selectAllCheckBox"

IsThreeState="True"

Content="모두 선택하기" />

<CheckBox Name="option1CheckBox"

Margin="25 0 0 0"

Content="옵션 1" />

<CheckBox Name="option2CheckBox"

Margin="25 0 0 0"

IsChecked="True"

Content="옵션 2" />

<CheckBox Name="option3CheckBox"

Margin="25 0 0 0"

Content="옵션 3" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            SetSelectAllCheckBoxValue();

            this.twoStateTextBlock.Text   = "박스 체크 해제";
            this.threeStateTextBlock.Text = "박스 체크 해제";

            this.twoStateCheckBox.Checked         += twoStateCheckBox_Checked;
            this.twoStateCheckBox.Unchecked       += twoStateCheckBox_Unchecked;
            this.threeStateCheckBox.Indeterminate += threeStateCheckBox_Indeterminate;
            this.threeStateCheckBox.Checked       += threeStateCheckBox_Checked;
            this.threeStateCheckBox.Unchecked     += threeStateCheckBox_Unchecked;
            this.selectAllCheckBox.Checked        += selectAllCheckBox_Checked;
            this.selectAllCheckBox.Unchecked      += selectAllCheckBox_Unchecked;
            this.selectAllCheckBox.Indeterminate  += selectAllCheckBox_Indeterminate;
            this.option1CheckBox.Checked          += optionCheckBox_Checked;
            this.option1CheckBox.Unchecked        += optionCheckBox_Unchecked;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 2단계 상태 체크 박스 체크시 처리하기 - twoStateCheckBox_Checked(sender, e)

        /// <summary>
        /// 2단계 상태 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void twoStateCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.twoStateTextBlock.Text = "박스 체크";
        }

        #endregion
        #region 2단계 상태 체크 박스 체크 해제시 처리하기 - twoStateCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 2단계 상태 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void twoStateCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.twoStateTextBlock.Text = "박스 체크 해제";
        }

        #endregion
        #region 3단계 상태 체크 박스 체크시 처리하기 - threeStateCheckBox_Checked(sender, e)

        /// <summary>
        /// 3단계 상태 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void threeStateCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.threeStateTextBlock.Text = "박스 체크";
        }

        #endregion
        #region 3단계 상태 체크 박스 체크시 처리하기 - threeStateCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 3단계 상태 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void threeStateCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.threeStateTextBlock.Text = "박스 체크 해제";
        }

        #endregion
        #region 3단계 상태 체크 박스 미확정시 처리하기 - threeStateCheckBox_Indeterminate(sender, e)

        /// <summary>
        /// 3단계 상태 체크 박스 미확정시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void threeStateCheckBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            this.threeStateTextBlock.Text = "박스 상태 미확정";
        }

        #endregion
        #region 모두 선택하기 체크 박스 체크시 처리하기 - selectAllCheckBox_Checked(sender, e)

        /// <summary>
        /// 모두 선택하기 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void selectAllCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = this.option2CheckBox.IsChecked = this.option3CheckBox.IsChecked = true;
        }

        #endregion
        #region 모두 선택하기 체크 박스 체크 해제시 처리하기 - selectAllCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 모두 선택하기 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void selectAllCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = this.option2CheckBox.IsChecked = this.option3CheckBox.IsChecked = false;
        }

        #endregion
        #region 모두 선택하기 체크 박스 미확정시 처리하기 - selectAllCheckBox_Indeterminate(sender, e)

        /// <summary>
        /// 모두 선택하기 체크 박스 미확정시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void selectAllCheckBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            if
            (
                this.option1CheckBox.IsChecked == true &&
                this.option2CheckBox.IsChecked == true &&
                this.option3CheckBox.IsChecked == true
            )
            {
                this.selectAllCheckBox.IsChecked = false;
            }
        }

        #endregion
        #region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            SetSelectAllCheckBoxValue();
        }

        #endregion
        #region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            SetSelectAllCheckBoxValue();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 모두 선택하기 체크 박스 값 설정하기 - SetSelectAllCheckBoxValue()

        /// <summary>
        /// 모두 선택하기 체크 박스 값 설정하기
        /// </summary>
        private void SetSelectAllCheckBoxValue()
        {
            if(this.option1CheckBox != null)
            {
                if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)
                {
                    this.selectAllCheckBox.IsChecked = true;
                }
                else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)
                {
                    this.selectAllCheckBox.IsChecked = false;
                }
                else
                {
                    this.selectAllCheckBox.IsChecked = null;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

SetSelectAllCheckBoxValue();

this.twoStateTextBlock.Text = "박스 체크 해제";

this.threeStateTextBlock.Text = "박스 체크 해제";

this.twoStateCheckBox.Checked += twoStateCheckBox_Checked;

this.twoStateCheckBox.Unchecked += twoStateCheckBox_Unchecked;

this.threeStateCheckBox.Indeterminate += threeStateCheckBox_Indeterminate;

this.threeStateCheckBox.Checked += threeStateCheckBox_Checked;

this.threeStateCheckBox.Unchecked += threeStateCheckBox_Unchecked;

this.selectAllCheckBox.Checked += selectAllCheckBox_Checked;

this.selectAllCheckBox.Unchecked += selectAllCheckBox_Unchecked;

this.selectAllCheckBox.Indeterminate += selectAllCheckBox_Indeterminate;

this.option1CheckBox.Checked += optionCheckBox_Checked;

this.option1CheckBox.Unchecked += optionCheckBox_Unchecked;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 2단계 상태 체크 박스 체크시 처리하기 - twoStateCheckBox_Checked(sender, e)

/// <summary>

/// 2단계 상태 체크 박스 체크시 처리하기

/// </summary>

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

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

private void twoStateCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.twoStateTextBlock.Text = "박스 체크";

}

#endregion

#region 2단계 상태 체크 박스 체크 해제시 처리하기 - twoStateCheckBox_Unchecked(sender, e)

/// <summary>

/// 2단계 상태 체크 박스 체크 해제시 처리하기

/// </summary>

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

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

private void twoStateCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

this.twoStateTextBlock.Text = "박스 체크 해제";

}

#endregion

#region 3단계 상태 체크 박스 체크시 처리하기 - threeStateCheckBox_Checked(sender, e)

/// <summary>

/// 3단계 상태 체크 박스 체크시 처리하기

/// </summary>

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

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

private void threeStateCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.threeStateTextBlock.Text = "박스 체크";

}

#endregion

#region 3단계 상태 체크 박스 체크시 처리하기 - threeStateCheckBox_Unchecked(sender, e)

/// <summary>

/// 3단계 상태 체크 박스 체크시 처리하기

/// </summary>

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

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

private void threeStateCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

this.threeStateTextBlock.Text = "박스 체크 해제";

}

#endregion

#region 3단계 상태 체크 박스 미확정시 처리하기 - threeStateCheckBox_Indeterminate(sender, e)

/// <summary>

/// 3단계 상태 체크 박스 미확정시 처리하기

/// </summary>

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

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

private void threeStateCheckBox_Indeterminate(object sender, RoutedEventArgs e)

{

this.threeStateTextBlock.Text = "박스 상태 미확정";

}

#endregion

#region 모두 선택하기 체크 박스 체크시 처리하기 - selectAllCheckBox_Checked(sender, e)

/// <summary>

/// 모두 선택하기 체크 박스 체크시 처리하기

/// </summary>

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

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

private void selectAllCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = this.option2CheckBox.IsChecked = this.option3CheckBox.IsChecked = true;

}

#endregion

#region 모두 선택하기 체크 박스 체크 해제시 처리하기 - selectAllCheckBox_Unchecked(sender, e)

/// <summary>

/// 모두 선택하기 체크 박스 체크 해제시 처리하기

/// </summary>

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

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

private void selectAllCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = this.option2CheckBox.IsChecked = this.option3CheckBox.IsChecked = false;

}

#endregion

#region 모두 선택하기 체크 박스 미확정시 처리하기 - selectAllCheckBox_Indeterminate(sender, e)

/// <summary>

/// 모두 선택하기 체크 박스 미확정시 처리하기

/// </summary>

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

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

private void selectAllCheckBox_Indeterminate(object sender, RoutedEventArgs e)

{

(

this.option1CheckBox.IsChecked == true &&

this.option2CheckBox.IsChecked == true &&

this.option3CheckBox.IsChecked == true

)

{

this.selectAllCheckBox.IsChecked = false;

}

#endregion

#region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크시 처리하기

/// </summary>

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

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

private void optionCheckBox_Checked(object sender, RoutedEventArgs e)

{

SetSelectAllCheckBoxValue();

}

#endregion

#region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크 해제시 처리하기

/// </summary>

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

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

private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

SetSelectAllCheckBoxValue();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 모두 선택하기 체크 박스 값 설정하기 - SetSelectAllCheckBoxValue()

/// <summary>

/// 모두 선택하기 체크 박스 값 설정하기

/// </summary>

private void SetSelectAllCheckBoxValue()

{

if(this.option1CheckBox != null)

{

if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)

{

this.selectAllCheckBox.IsChecked = true;

}

else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)

{

this.selectAllCheckBox.IsChecked = false;

}

else

{

this.selectAllCheckBox.IsChecked = null;

}

#endregion

}

TestProject.zip