ComboBox의 클릭

⁉️ 프로그래밍 언어 Q&A C# Q&A
1

우선 코드 먼저 보여 드리면

// MainWindow.xaml
<Window
    x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="Window"
    SizeToContent="WidthAndHeight"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid Margin="4">
        <Grid MinWidth="50">
            <ComboBox
                IsEditable="True"
                IsReadOnly="True"
                ItemsSource="{Binding Items}">
                <ComboBox.ItemTemplate>
                    <DataTemplate DataType="{x:Type local:ListItem}">
                        <CheckBox
                            Command="{Binding DataContext.ItemCheckChandedCommand, ElementName=Window}"
                            Content="{Binding Content}"
                            IsChecked="{Binding IsChecked}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <TextBlock
                Margin="8,2,22,2"
                VerticalAlignment="Center"
                IsHitTestVisible="False"
                Text="{Binding SelectedItem}" />
        </Grid>
    </Grid>
</Window>

// MainViewModel.cs
using ReactiveUI;
using ReactiveUI.Fody.Helpers;
using System.Collections.ObjectModel;

namespace WpfApp1;

public class MainViewModel : ReactiveObject
{
    public ObservableCollection<ListItem> Items { get; } = [];
    public IReactiveCommand ItemCheckChandedCommand { get; }
    [Reactive] public string SelectedItem { get; set; } = "";
    public MainViewModel()
    {
        ItemCheckChandedCommand = ReactiveCommand.Create(ItemCheckChanded);
        Items.Add(new() { Content = "1000" });
        Items.Add(new() { Content = "2000" });
        Items.Add(new() { Content = "3000" });
        Items.Add(new() { Content = "4000" });
        Items.Add(new() { Content = "5000" });
        ItemCheckChanded();
    }

    private void ItemCheckChanded()
    {
        SelectedItem = string.Join(", ", Items.Where(x => x.IsChecked).Select(x => x.Content));
    }
}
public class ListItem : ReactiveObject
{
    [Reactive] public bool IsChecked { get; set; } = true;
    [Reactive] public string Content { get; set; } = "Content";
    public override string ToString() => string.Empty;
}

로 되어 있습니다.

여기서 ComboBox 아이템을 펼쳤을 때
CheckBox의 Content 영역 까지를 클릭 했을땐
CheckBox 의 Check 값이 바뀌는데
그 뒤부분을 클릭 했을땐
ComboBox가 닫히고 값이 바뀌지 않습니다.

혹시 해결 방법이 있을까요?

직접 실행해 보시려면 프로젝트 파일에

  <ItemGroup>
    <PackageReference Include="ReactiveUI" Version="20.1.63" />
    <PackageReference Include="ReactiveUI.Fody" Version="19.5.41" />
    <PackageReference Include="ReactiveUI.WPF" Version="20.1.63" />
  </ItemGroup>

추가 하시거나 위 nuget 설치 하시면 됩니다.

1 Like
4 
            <ComboBox
                IsEditable="True"
                IsReadOnly="True"
                ItemsSource="{Binding Items}">
                <ComboBox.ItemTemplate>
                    <DataTemplate DataType="{x:Type local:ListItem}">
                        <CheckBox
                            Command="{Binding DataContext.ItemCheckChandedCommand, ElementName=Window}"
                            Content="{Binding Content}"
                            HorizontalAlignment="Stretch"
                            IsChecked="{Binding IsChecked}">
                        </CheckBox>
                    </DataTemplate>                    
                </ComboBox.ItemTemplate>
                <ComboBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ComboBoxItem}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ComboBox.ItemContainerStyle>
            </ComboBox>

출처 : wpf - How to stretch checkbox item the full width of the combobox - Stack Overflow

5

감사합니다!!
실은 어제 글 올리고 몇분뒤에 찾아서 지울려고 해봤는데 글을 못지웠습니다…ㅜ.ㅜ

1 Like
6

글을 지우는 것이 아니라 어떻게 해결했는지 공유 주셔야 합니다. 문제의 해결과 그 글도 커뮤니티에 기여하기 때문이에요.

3 Likes