MVVM 데이터 바인딩을 사용하여 WPF 체크박스 목록을 만드는 방법

사용자 입력을 요구하는 응용 프로그램은 종종 사용자가 ComboBox에서 여러 값을 선택해야 합니다. 이러한 유형의 입력은 매우 전문적이며 종종 타사 컨트롤이 필요합니다. ComponentOne WPF Edition에서는 태그 편집 기능이 있는 드롭다운 체크리스트인 MultiSelect을 제공합니다. WPF MultiSelect 컨트롤을 사용하면 사용자는 "적용되는 항목 모두 선택"설문 조사 질문과 같이 하나의 필드에서 여러 항목을 쉽게 선택할 수 있습니다.



C1.WPF.Input package on nuget.org의 일부로 WPF MultiSelect 컨트롤을 다운로드할 수 있습니다. 타사 컨트롤을 사용할 때의 이점 중 하나는 MVVM 데이터 바인딩 또는 MVVM(Model-View-ViewModel) 구조화된 응용 프로그램과 잘 작동한다는 것입니다.

C1MultiSelect가 있는 샘플과 C1InputPanel이 있는 양방향 데이터 바인딩을 살펴보겠습니다.



샘플에는 학생의 이름, 나이 및 취미를 저장하는 학생 비즈니스 개체가 있습니다.

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
    public ObservableCollection<Hobby> Hobbies { get; set; }
}

public class Hobby
{
    public string Value { get; set; }
    public bool IsSelected { get; set; }
}

취미 분야의 경우 C1MultiSelect를 사용하여 각 학생의 관심사를 관리하고자 합니다. MVVM 친화적인 데이터 바인딩의 경우 항목 목록에 C1MultiSelect 컨트롤에서 선택되었는지 여부를 결정하는 자체 부울 속성이 있는 것이 좋습니다. Hobby 클래스에 "IsSelected"속성이 있는 것을 볼 수 있습니다(원하는 대로 이름을 지정할 수 있음). 나중에 이것이 왜 중요한지 알게 될 것입니다.

보기에서 각 학생의 입력 양식을 빠르게 표시하기 위해 C1InputPanel 컨트롤을 정의했습니다. ComponentOne InputPanel은 필드를 자동 생성하거나 템플릿에서 각 필드를 명시적으로 정의할 수 있습니다. Hobbies 편집기에 C1MuliSelect를 사용하려고 하므로 C1InputPanel 컨트롤의 각 필드를 정의하고 AutoGenerate 속성을 False로 설정했습니다.

<c1:C1InputPanel ItemsSource="{Binding Students}" AutoGenerate="False">
    <c1:C1InputPanel.ItemsTemplate>
        <DataTemplate>
            <StackPanel>
                <c1:C1InputTextBox Header="Name"
                                   DataBinding="{Binding Name}"/>
                <c1:C1InputNumericBox Header="Age"
                                      DataBinding="{Binding Age}" />
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Label Content="Hobbies" />
                    <c1:C1MultiSelect Grid.Column="1"
                                      Margin="8 0"
                                      ItemsSource="{Binding Hobbies}"
                                      DisplayMemberPath="Value"
                                      CheckedMemberPath="IsSelected"/>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </c1:C1InputPanel.ItemsTemplate>
</c1:C1InputPanel>

위의 C1MultiSelect 구현을 볼 수 있습니다. ItemsSource 속성을 Hobbies 컬렉션으로 설정하고 DisplayMemberPath 및 CheckedMemberPath를 Hobby 개체의 속성으로 설정했습니다.

데이터가 어떻게 구성되어 있는지 확인하는 것이 중요합니다. 각 학생은 자신의 취미 컬렉션에 모든 취미를 추가해야 합니다. 그런 다음 Hobby 개체의 "IsSelected"속성을 사용하여 학생이 어떤 취미에 관심이 있는지 확인합니다(CheckedMemberPath 속성에 매핑하여). 예를 들어 다음은 보기 모델에서 샘플 학생을 정의하는 방법입니다.

public class ViewModel
{
    public ViewModel()
    {
        // generate view model data
        this.Students = new ObservableCollection<Student>();
        this.Students.Add(new Student()
        {
            Name = "Barry",
            Age = 15,
            Hobbies = new ObservableCollection<Hobby>() {
                new Hobby() { Value = "Reading", IsSelected = false },
                new Hobby() { Value = "Writing", IsSelected = false },
                new Hobby() { Value = "Sports", IsSelected = true },
                new Hobby() { Value = "Swimming", IsSelected = true },
                new Hobby() { Value = "Games", IsSelected = false },
                new Hobby() { Value = "Sewing", IsSelected = false },
                new Hobby() { Value = "Hiking", IsSelected = true }
            }
        });
        // ... add more students
    }
    public ObservableCollection<Student> Students { get; set; }
}

런타임 시 컨트롤은 드롭다운에 체크리스트를 표시하고 각 선택 항목을 태그 또는 레이블로 표시합니다. 사용자는 각 태그에서 "X"를 클릭하여 선택한 항목을 제거할 수 있습니다. WPF MultiSelect 컨트롤은 편집 가능한 텍스트 상자로도 작동하므로 사용자가 모든 값을 작성할 수 있습니다. 드롭다운 부분을 원하지 않으면 동일한 네임스페이스에 있는 별도의 TagEditor 컨트롤을 간단한 태그 편집기로 사용할 수 있습니다. 선택한 항목을 가져와야 하는 경우 SelectedItems 속성에서 가져올 수 있습니다.

전체 코드는 샘플을 다운로드할 수 있습니다.

2022년 6월 업데이트: 이 블로그는 동일한 다중 선택 기능을 제공하도록 C1ComboBox를 확장한 이전 샘플에서 업데이트되었습니다. 이전 샘플을 찾을 수 있습니다 .