» [WPF] 목록 컨트롤

[WPF] 목록 컨트롤

by DUBUKIMCH

WPF(Windows Presentation Foundation)에서 목록 컨트롤은 여러 항목을 화면에 표시하고, 사용자가 항목을 선택할 수 있도록 하는 UI 요소입니다. 목록 컨트롤은 데이터 바인딩을 지원하여 동적으로 데이터를 표시할 수 있고, 항목의 스타일과 템플릿을 커스터마이징할 수 있습니다.

주요 목록 컨트롤 종류 및 설명

  1. ListBox:
    • 여러 항목을 세로로 나열하여 표시하며, 단일 또는 다중 선택을 지원합니다.
    • 단순한 리스트를 보여줄 때 유용합니다.
  2. ComboBox:
    • 드롭다운 형태로 항목을 표시하며, 하나의 항목만 선택할 수 있습니다.
    • 사용자가 선택한 항목을 표시하는 입력 필드와 옵션 리스트로 구성됩니다.
  3. ListView:
    • ListBox와 비슷하지만, GridView와 함께 사용하여 항목을 테이블 형태로 표시할 수 있습니다.
    • 다양한 데이터 형식의 항목을 표 형태로 시각화할 때 적합합니다.
  4. DataGrid:
    • 데이터를 테이블 형식으로 표시하며, 항목의 편집, 정렬, 필터링 기능을 제공합니다.
    • 복잡한 데이터 구조를 표시하거나 편집할 때 사용됩니다.

활용 예시 및 코드

ListView를 사용하여 사용자 목록을 표시하고, 선택된 사용자의 세부 정보를 표시하는 예시를 소개하겠습니다.

1. MainWindow.xaml (XAML 코드)

<Window x:Class="WpfApp241113.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="User List Example" Height="400" Width="600">
    <StackPanel>
        <ListView Name="userListView" ItemsSource="{Binding UserList}" SelectedItem="{Binding SelectedUser, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}" Width="50" />
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="150" />
                    <GridViewColumn Header="Email" DisplayMemberBinding="{Binding Email}" Width="200" />
                </GridView>
            </ListView.View>
        </ListView>

        <TextBlock Text="Selected User Details:" FontWeight="Bold" Margin="10,20,0,0" />
        <StackPanel DataContext="{Binding SelectedUser}">
            <TextBlock Text="Name: " />
            <TextBlock Text="{Binding Name}" />
            <TextBlock Text="Email: " />
            <TextBlock Text="{Binding Email}" />
            <TextBlock Text="Phone: " />
            <TextBlock Text="{Binding Phone}" />
        </StackPanel>
    </StackPanel>
</Window>

2. MainWindow.xaml.cs (코드 비하인드)

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace WpfApp241113
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private User _selectedUser;
        public ObservableCollection<User> UserList { get; set; }

        public User SelectedUser
        {
            get => _selectedUser;
            set
            {
                _selectedUser = value;
                OnPropertyChanged();
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            UserList = new ObservableCollection<User>
            {
                //new User { ID = 1, Name = "John Doe", Email = "john.doe@example.com", Phone = "123-456-7890" },
                //new User { ID = 2, Name = "Jane Smith", Email = "jane.smith@example.com", Phone = "098-765-4321" },
                //new User { ID = 3, Name = "Bob Johnson", Email = "bob.johnson@example.com", Phone = "555-123-4567" }
            };
            DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class User
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}

실행 결과

코드 설명

  • ObservableCollection<User>: 데이터 소스 역할을 하며 ListView에 바인딩됩니다. 데이터 변경 시 UI가 자동으로 업데이트됩니다.
  • SelectedUser 프로퍼티: 사용자가 선택한 항목을 저장하며, UI에서 해당 항목의 세부 정보를 표시할 수 있도록 합니다.
  • INotifyPropertyChanged: SelectedUser가 변경될 때 UI가 업데이트되도록 PropertyChanged 이벤트를 구현합니다.
  • DataContext: MainWindowDataContext로 설정되어 XAML에서 바인딩할 수 있습니다.

실행 결과

  • ListView에는 사용자 목록이 표시됩니다.
  • 목록에서 항목을 클릭하면 선택된 사용자의 세부 정보(이름, 이메일, 전화번호)가 아래에 표시됩니다.

이 코드는 WPF에서 목록 컨트롤을 사용하여 사용자 목록을 표시하고, 선택된 사용자의 세부 정보를 동적으로 보여주는 방법을 보여줍니다.

You may also like

Leave a Comment

error: Content is protected !!