MAUI CollectionView CheckBox 문제 해결

MAUI CollectionView CheckBox가 반응하지 않는 이유와 해결 방법

MAUI로 앱을 개발하다 보면 CollectionView 안에 CheckBox를 넣었을 때 전혀 반응하지 않거나, 체크를 했는데 바로 다시 원래 상태로 돌아가는 이상한 현상을 자주 경험하게 된다. 코드 상으로는 분명히 IsChecked 바인딩을 해 두었고, 에러도 뜨지 않는데 체크가 안 되니 어디부터 봐야 할지 막막해지는 경우가 많다. 특히 처음 MAUI를 사용하는 개발자는 XAML이나 MVVM 구조에는 큰 문제가 없다고 느끼기 때문에, 이 현상을 단순한 버그나 플랫폼 문제라고 오해하기 쉽다.

하지만 실제로는 MAUI CollectionView와 데이터 바인딩 구조, 셀 재활용 방식, 이벤트 전달 구조가 서로 얽혀 있으면서 나타나는 전형적인 구조적 문제인 경우가 대부분이다. 이 글에서는 CollectionView 안의 CheckBox가 반응하지 않는 이유를 정리하고, 실제 코드 예시와 함께 단계별 해결 방법을 정리한다. 처음 MAUI를 접한 개발자라도 이 글을 따라가면 같은 문제를 다시 만나도 스스로 원인을 찾고 해결할 수 있도록 돕는 것을 목표로 한다.

핵심은 간단하다. 체크 상태가 바뀌어도 UI가 갱신되려면 모델이 변경 알림을 보내야 하고, 리스트는 변경 이벤트를 전달할 수 있는 컬렉션이어야 하며, CollectionView의 선택 상태와 CheckBox 상태가 충돌하지 않아야 한다. 또한 상위 레이아웃이 터치 이벤트를 가로채지 않도록 입력 전달 구조를 함께 점검해야 한다.

CheckBox가 눌렸는데도 다시 풀리거나, 특정 항목만 반응하지 않거나, 스크롤 후 상태가 뒤섞이는 현상은 대부분 같은 축으로 묶인다. 변경 알림이 없어서 셀이 이전 상태로 되돌아가거나, 컬렉션이 변경 이벤트를 제공하지 못하거나, 선택 상태가 이중으로 관리되거나, 터치 이벤트가 중간에서 끊기는 경우다.

---

CheckBox가 반응하지 않을 때 어떤 증상이 반복되나

다음과 같은 증상이 반복적으로 나타난다면 CollectionView와 CheckBox 구조에서 문제가 발생하고 있을 가능성이 높다.

1. CheckBox를 눌러도 체크 상태가 바뀌지 않는다.
2. 체크가 잠깐 바뀌었다가 바로 원래 상태로 돌아간다.
3. 어떤 항목은 반응하고 어떤 항목은 반응하지 않는다.
4. 스크롤 후 다시 돌아오면 체크 상태가 초기화된 것처럼 보인다.

이러한 현상은 대부분 데이터 변경 알림이 UI까지 제대로 전달되지 않거나, CollectionView 내부 상태와 CheckBox 바인딩 상태가 충돌하면서 발생한다.

---

문제가 발생하는 전형적인 CollectionView와 CheckBox 구조는 무엇인가

먼저 문제가 발생하는 전형적인 상황을 간단한 예제 코드로 살펴본다. CollectionView 안에 플레이리스트 항목을 보여 주고, 각 항목마다 선택 여부를 나타내는 CheckBox를 둔 코드라고 가정해 보자.

 

<CollectionView ItemsSource="{Binding PlaylistItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="8">
                <CheckBox IsChecked="{Binding IsSelected}" />
                <Label Text="{Binding Title}" Margin="8,0,0,0" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

 

 

그리고 항목 모델은 다음과 같이 단순하게 작성되어 있다고 하자.

 

public class PlaylistItem
{
    public string Title { get; set; }
    public bool IsSelected { get; set; }
}

 

 

ViewModel에서는 대략 이런 식으로 목록을 준비했을 것이다.

 

public class PlaylistViewModel
{
    public List<PlaylistItem> PlaylistItems { get; } = new()
    {
        new PlaylistItem { Title = "첫 번째 영상" },
        new PlaylistItem { Title = "두 번째 영상" },
        new PlaylistItem { Title = "세 번째 영상" }
    };
}

 

 

겉으로 보면 아무 문제 없는 코드처럼 보인다. 하지만 실행해 보면 체크를 눌렀는데 아무 변화가 없거나, 체크가 잠깐 바뀌었다가 다시 원래 상태로 돌아가는 현상이 나타날 수 있다.

---

CollectionView 안에서 CheckBox가 반응하지 않는 원인은 무엇인가

이 문제는 하나의 원인이 아니라 여러 구조적 요소가 겹치면서 발생한다. 주요 원인을 번호로 나누어 정리하면 다음과 같다.

데이터 모델이 INotifyPropertyChanged를 구현하지 않은 경우

위 예제 코드에서 PlaylistItem의 IsSelected는 단순한 자동 구현 속성이다. 사용자가 CheckBox를 눌러 값이 바뀌더라도 UI에게 이 값이 변경되었다는 알림이 전달되지 않는다. MAUI는 PropertyChanged 이벤트를 통해 속성 변경을 감지하고 화면을 다시 그리기 때문에 이 이벤트가 발생하지 않으면 CollectionView는 상태를 그대로 유지하려고 한다. 그 결과 사용자는 체크를 했는데도 화면에는 반영되지 않는 것처럼 보이게 된다.

ItemsSource에 List를 사용한 경우

List는 항목이 추가되거나 삭제되거나 속성이 바뀌더라도 UI에 아무런 알림을 보내지 않는다. MAUI에서 리스트 바인딩에 권장되는 타입은 ObservableCollection이다. ObservableCollection은 항목이 변경될 때 컬렉션 변경 이벤트를 발생시켜 UI가 다시 렌더링되도록 돕는 역할을 한다. 따라서 List를 그대로 사용하면 체크 상태가 바뀌어도 CollectionView는 이를 제대로 반영하지 못할 가능성이 크다.

CollectionView SelectionMode와 CheckBox 바인딩이 충돌하는 경우

SelectionMode가 Single이나 Multiple로 설정되어 있고, 동시에 각 항목에 CheckBox를 두고 IsSelected를 별도로 관리하면 내부 선택 상태와 바인딩된 상태가 서로 다른 값을 유지하려고 하면서 꼬일 수 있다. 이때는 CollectionView의 SelectionMode를 None으로 두고 선택 상태는 전적으로 IsSelected 속성만으로 관리하는 것이 훨씬 안정적이다.

상위 레이아웃이 터치 이벤트를 가로채는 경우

Grid나 StackLayout에 TapGestureRecognizer가 설정되어 있을 때 상위 레이아웃이 터치 이벤트를 먼저 소비해 버리고 CheckBox까지 이벤트가 전달되지 않는 경우도 있다. 특히 Android에서는 터치 이벤트 전달 구조가 민감해서 상위 컨트롤이 이벤트를 가로채면 하위 컨트롤은 아무 반응이 없는 것처럼 보인다. 따라서 CheckBox 주변에 불필요한 GestureRecognizer가 있는지, InputTransparent 설정이 적절한지 함께 확인해야 한다.

---

CheckBox가 안정적으로 동작하려면 어떤 코드 구조가 필요한가

위에서 정리한 원인에 대응하기 위해서는 구조를 단계적으로 정리하는 것이 가장 확실하다.

모델 클래스에 INotifyPropertyChanged 구현

 

public class PlaylistItem : INotifyPropertyChanged
{
    private bool _isSelected;

    public string Title { get; set; }

    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            if (_isSelected == value)
                return;

            _isSelected = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsSelected)));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

 

 

IsSelected가 변경될 때마다 PropertyChanged 이벤트가 발생하고, CollectionView는 이 이벤트를 기반으로 셀을 다시 렌더링할 수 있게 된다.

ItemsSource를 ObservableCollection으로 변경

 

public class PlaylistViewModel
{
    public ObservableCollection<PlaylistItem> PlaylistItems { get; } =
        new ObservableCollection<PlaylistItem>
        {
            new PlaylistItem { Title = "첫 번째 영상" },
            new PlaylistItem { Title = "두 번째 영상" },
            new PlaylistItem { Title = "세 번째 영상" }
        };
}

 

 

이렇게 하면 항목이 추가되거나 제거될 때도 UI가 자동으로 갱신되고, 내부 속성 변경도 보다 안정적으로 반영된다.

SelectionMode와 바인딩 모드 명확히 설정

 

<CollectionView
    ItemsSource="{Binding PlaylistItems}"
    SelectionMode="None">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="8">
                <CheckBox
                    IsChecked="{Binding IsSelected, Mode=TwoWay}"
                    VerticalOptions="Center" />

                <Label
                    Text="{Binding Title}"
                    Margin="8,0,0,0"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

 

 

SelectionMode를 None으로 설정해 CollectionView가 선택 상태를 따로 관리하지 않도록 하고, CheckBox의 IsChecked 바인딩 모드를 TwoWay로 지정해 사용자의 입력이 곧바로 모델의 IsSelected에 반영되도록 한다.

---

CheckBox 입력이 무시될 때 무엇을 점검해야 하나

상위 레이아웃의 제스처가 입력을 가로채는지 확인

Grid나 StackLayout에 TapGestureRecognizer가 설정되어 있다면 우선 제거한 상태에서 CheckBox가 정상 동작하는지 확인하는 것이 좋다. 필요하다면 상위 레이아웃에 InputTransparent를 활용해 하위 컨트롤의 입력을 우선 처리하도록 설정할 수도 있다.

BindingContext 교체 타이밍이 반복되는지 확인

BindingContext가 여러 번 바뀌면서 상태가 꼬이는 경우가 있다면 페이지 초기화 시점과 데이터 바인딩 시점을 분리하고, OnAppearing에서 BindingContext를 반복해서 교체하는 패턴을 피하는 것이 좋다.

---

마무리

MAUI CollectionView 안에서 CheckBox가 반응하지 않는 문제는 단순히 컨트롤 하나만 잘못 설정된 것이 아니라, 데이터 바인딩 구조와 셀 재활용, 이벤트 전달, SelectionMode 설정 등 여러 요소가 겹쳐서 나타나는 구조적 문제인 경우가 많다. 처음에는 매우 복잡한 버그처럼 느껴지지만, 원인을 나누어 살펴보면 대부분 INotifyPropertyChanged 누락, ObservableCollection 미사용, SelectionMode 충돌, 이벤트 가로채기 문제로 정리할 수 있다.

이 글에서 정리한 구조와 순서대로 모델과 ViewModel, XAML을 점검하면 CheckBox가 안정적으로 동작하는 것을 확인할 수 있을 것이다. 앞으로도 CollectionView와 상태 기반 컨트롤을 함께 사용할 때는 이 구조를 기준으로 점검해 두면 비슷한 문제를 훨씬 빠르게 해결할 수 있다.