[WPF] ComboBox와 SelectedItem

최근에 프로젝트를 진행하면서 ListView Control을 하며 어려웠던 부분을 정리하였습니다.

 

👉 기본 환경

- Language: C#, xaml

- IDE: Visual Basic 2022

---

콤보박스를 이용해 정렬을 해봅시다.

 

<ComboBox Grid.Column="1"
          Width="120"
          HorizontalAlignment="Right"
          >
    <ComboBoxItem Content="Tag"
                  IsSelected="True"
                  />
    <ComboBoxItem Content="RegisteredDate"/>
    <ComboBoxItem Content="Complete"/>
</ComboBox>

 

 

실행하면 ComboBox에 Tag가 Selected된 상태가 됩니다.

 

하지만, 지금 상태에서는 ComboBoxItem 값을 ViewModel에 전달하지 못하므로 바인딩 코드로 변경해봅니다.

 

 

 

 

 

 

 

 

 

 

<ComboBox Grid.Column="1"
          Width="120"
          HorizontalAlignment="Right"
          SelectedItem="{Binding SelectedSortOption, Mode=TwoWay}"
          >
    <ComboBoxItem Content="Tag"
                  IsSelected="True"
                  />
    <ComboBoxItem Content="RegisteredDate"/>
    <ComboBoxItem Content="Complete"/>
</ComboBox>

 

SelectedItem 부분을 바인딩해서 다시 실행해보면, Tag가 Selected된 상태로 나타나지 않습니다.

전 IsSelected? Yes!를 소중히 하지 않았던 것이죠🫠.

 

 

최근에 친구를 만나서 제 코드에 대해 이야기를 하는데, 종종 코드를 고칠 때, 물 새는 부분을 스카치 테이프로 열심히 붙여서 막는 기분이라는 이야기가 나왔습니다🤔.

그 범인 중 하나가 이 코드입니다.

 

1. SelectedItem 초기값 설정

private string _selectedSortOption = "Tag";
 
public string SelectedSortOption
{
    get { return _selectedSortOption; }
    set 
    {
        _selectedSortOption = value;
        OnPropertyChanged("SelectedSortOption");
 
        SortToDoItems(SelectedSortOption);
    }
}

 

이 상태로 실행하면 Tag가 선택된 상태로 나오지만, 실제로는 정렬이 되지 않은 상태로 나옵니다.

정렬도 시켜주기 위해 생성자에 SortToDoItems 메서드를 추가해봅니다.

 

2. 생성자에 정렬 메서드 추가

public ViewModelMain()
{
    OriginalToDoList = new ObservableCollection<ToDoItem>
    {
        new ToDoItem{Tag="Study", Content="WPF", RegisteredDate=new DateTime(2024, 05, 01), isComplete=true},
        new ToDoItem{Tag="Study", Content="C#", RegisteredDate=new DateTime(2024, 07, 01), isComplete=true},
        new ToDoItem{Tag="Study", Content="WPF", RegisteredDate=new DateTime(2024, 02, 01), isComplete=true},
        new ToDoItem{Tag="Study", Content="C#", RegisteredDate=new DateTime(2024, 06, 01), isComplete=true},
        new ToDoItem{Tag="Health", Content="Running", RegisteredDate=new DateTime(2024, 04, 01), isComplete=true},
        new ToDoItem{Tag="Health", Content="Tennis", RegisteredDate=new DateTime(2024, 03, 01), isComplete=true},
        new ToDoItem{Tag="Shopping", Content="Shoes", RegisteredDate=new DateTime(2024, 01, 01), isComplete=true},
    };
 
    SortToDoItems(SelectedSortOption);
}

 

이 상태로 실행해도 정렬이 되지 않습니다.

디버깅을 통해 SelectedSortOption에 넘어오는 데이터를 확인하면 'System.Windows.Controls.ComboBoxItem: Tag' 값이 넘어옵니다.

 

맞는 값이긴 한데.. 이렇게까지 원했던 건 아닌데..🤔

저는 그저 Tag라는 글자만 얻어서 정렬을 하고 싶었던 것인데..😮

 

그러기 위해서 View를 변경해야 합니다.

 

3. SelectedValue 및 SelectedValuePath 사용

<ComboBox Grid.Column="1"
          Width="120"
          HorizontalAlignment="Right"
          SelectedValue="{Binding SelectedSortOption, Mode=TwoWay}"
          SelectedValuePath="Content"
          >
    <ComboBoxItem Content="Tag"/>
    <ComboBoxItem Content="RegisteredDate"/>
    <ComboBoxItem Content="Complete"/>
</ComboBox>

 

 

 

 

 

 

 

 

WPF와 화해에 성공했습니다🫠.

 

 

 

 

 

 

 

 

 

 

⭐ 디버깅을 통해 어떤 값이 넘어오는지 확인하고, View에서 컨트롤이 안되면 ViewModel에서 도전해보자🔥