WPF 체크박스 목록을 만들도록 MVVM 데이터 바인딩을 사용하는 방법 > 온라인 스터디

본문 바로가기

ComponentOne

온라인 스터디

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

페이지 정보

작성자 GrapeCity 작성일 22-07-29 13:34 조회 190회 댓글 0건

본문

사용자 입력을 요구하는 응용 프로그램에서는 종종 사용자가 ComboBox에서 여러 값을 선택해야 합니다. 이 입력 유형에 대해 종종 상용 컨트롤이 필요한 경우가 있습니다. 당사는 ComponentOne WPF Edition을 사용하여 태그 편집 기능이 있는 드롭 다운 검사 목록인 MultiSelect를 제공합니다. WPF MultiSelect 컨트롤을 사용하여 사용자는 "해당하는 모든 항목 선택" 설문 조사 질문과 같이 하나의 필드에서 여러 항목을 쉽게 선택할 수 있습니다.


다중 선택

nuget.org의 C1.WPF.Input 패키지의 일부로 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" 속성이 있는지 확인할 수 있습니다(원하는 대로 이름을 정할 수 있습니다). 이것이 중요한 이유는 나중에 확인할 수 있습니다.

View에서는 각 학생에 대해 입력 양식을 빠르게 표시하도록 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 컬렉션에 설정하고 DisplayMemberPathCheckedMemberPath를 Hobby 객체의 속성에 설정합니다.

데이터가 구조화된 방식을 아는 것이 중요합니다. 모든 학생은 각 Hobby를 Hobbies 컬렉션에 추가해야 합니다. 그런 다음 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를 확장한 기존 샘플에서 업데이트했습니다. 여기에서 기존 샘플을 찾을 수 있습니다.




지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

c1.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.