通过单击整个项目来选中 wpf 中的复选框答案

【问题标题】：Check ckeckbox in wpf by clicking on the whole item通过单击整个项目来选中 wpf 中的复选框
【发布时间】：2019-04-17 20:09:42
【问题描述】：

我的客户遇到了CheckBox 在ListBox 中的大小问题。我同意，它很小，有时不容易检查。

我试图找到一种方法让CheckBox 更大，但我发现它很复杂（并且需要使用我不想使用的 Blend）。

我想做的是在单击整个项目时检查CheckBox。

[ ] 一些文字

在这个例子中 - 在“一些文本”或项目内部的任何地方。现在我必须在CheckBox 中单击以进行检查。

我动态生成我的CheckBoxes。

我的这个控件的 xamls 如下所示：

     <ListBox Name="restoredDBsListBox" ItemsSource="{Binding ProperlyRestoredDatabases}"  Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="170" Margin="34,160,0,0" VerticalAlignment="Top" Width="276" SelectionMode="Extended">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" >
                    <CheckBox Name="check" IsChecked="{Binding IsChecked, Mode=TwoWay}" Margin="3" VerticalAlignment="Center"/>
                    <ContentPresenter Content="{Binding Value}" Margin="1"/>                       
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

和我的 ViewModel：

    /// <summary>
    /// Defines the _properlyRestoredDatabases
    /// </summary>
    private CheckableObservableCollection<string> _properlyRestoredDatabases;

    /// <summary>
    /// Gets or sets the ProperlyRestoredDatabases
    /// </summary>
    public CheckableObservableCollection<string> ProperlyRestoredDatabases
    {
        get { return _properlyRestoredDatabases; }
        set
        {
            _properlyRestoredDatabases = value;
            OnPropertyChanged("ProperlyRestoredDatabases");
        }
    }

CheckableObservableCollection 类：

  public class CheckableObservableCollection<T> : ObservableCollection<CheckedWrapper<T>>
{
    private ListCollectionView _selected;

    public CheckableObservableCollection()
    {
        _selected = new ListCollectionView(this);
        _selected.Filter = delegate (object checkObject) {
            return ((CheckedWrapper<T>)checkObject).IsChecked;
        };
    }

    public void Add(T item)
    {
        this.Add(new CheckedWrapper<T>(this) { Value = item });
    }

    public ICollectionView CheckedItems
    {
        get { return _selected; }
    }

    internal void Refresh()
    {
        _selected.Refresh();
    }
}

和 CheckedWrapper

 public class CheckedWrapper<T> : INotifyPropertyChanged
{
    private readonly CheckableObservableCollection<T> _parent;

    public CheckedWrapper(CheckableObservableCollection<T> parent)
    {
        _parent = parent;
    }

    private T _value;

    public T Value
    {
        get { return _value; }
        set
        {
            _value = value;
            OnPropertyChanged("Value");
        }
    }

    private bool _isChecked;

    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            _isChecked = value;
            CheckChanged();
            OnPropertyChanged("IsChecked");
        }
    }

    private void CheckChanged()
    {
        _parent.Refresh();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler pceh = PropertyChanged;
        if (pceh != null)
        {
            pceh(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

【问题讨论】：

标签： c# wpf checkbox

【解决方案1】：

CheckBox 具有Content 属性，因此没有理由使用单独的ContentPresenter。如果您还添加了一个水平延伸ListBoxItem 容器的ItemContainerStyle，则可以通过单击行上的任意位置来选中和取消选中CheckBox：

<ListBox Name="restoredDBsListBox" ItemsSource="{Binding ProperlyRestoredDatabases}"  Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="170" Margin="34,160,0,0" VerticalAlignment="Top" Width="276" SelectionMode="Extended">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Name="check" IsChecked="{Binding IsChecked, Mode=TwoWay}"
                    Content="{Binding Value}"
                    Margin="3" 
                    VerticalAlignment="Center"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

【讨论】：