如何将用户控件复选框绑定到列表框

Question

我编写了自己的复选框控件。 我使用MVVM模式将此复选框放入列表框。 该用户控件具有自己的类，视图模型和xaml视图。

这是一堂课：

public class MultiSelectListBox
{
    public bool IsChecked { get; set; }
    public string Text { get; set; }
}

UserControl的ViewModel：

public partial class VMMultiSelectListBox : ViewModelBase
{
    private bool _isChecked;
    private string _text;

    public VMMultiSelectListBox()
    {

    }

    public VMMultiSelectListBox(MultiSelectListBox.BusinnesModel.MultiSelectListBox item)
    {
        IsChecked = item.IsChecked;
        Text = item.Text;
    }

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

    public string Text
    {
        get { return _text; }
        set { _text = value; NotifyPropertyChanged("Text"); }
    }           
}

这是xaml：

<UserControl x:Class="MES.UserControls.MultiSelectListBox.UCMultiSelectListBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:MES.UserControls.MultiSelectListBox">    
    <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Content="{Binding Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"  />
</UserControl>

现在，我想将此UserControl绑定到位于主窗体中的ListBox内。

这就是我在表格xaml中使用的内容。

<Expander x:Name="expanderProccesses" Header="Procesy" IsExpanded="{Binding IsExpanded}"  Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Margin="5,6,-30,0">
    <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding ProccessFilter}" SelectedItem="{Binding SelectedProcess, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ucLb:UCMultiSelectListBox/>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Expander>

最后一件事是这种形式的视图模型。

public VMMultiSelectListBox SelectedProcess
{
    get { return _selectedProccess; }
    set { 
        _selectedProccess = value;                       
        NotifyPropertyChanged("SelectedProcess");
        NotifyPropertyChanged("ProccessFilter");                   
        }
} 

 public ObservableCollection<VMMultiSelectListBox> ProccessFilter
 {
    get { return _proccesFilter; }
    set { _proccesFilter = value;       NotifyPropertyChanged("ProccessFilter");}
}

我做错了。 在selectedProcces中，它总是在我需要的getter中飞跃，而不是在setter中飞跃。 我不知道为什么。

Answer 1

我想通过在ItemContainerStyle绑定IsSelected属性并在ItemTemplate使用CheckBox可以在更标准的上下文中实现您要执行的操作：

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Extended" ItemsSource="{Binding ProccessFilter}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Content="{Binding Text}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="IsSelected" Value="{Binding IsChecked, Mode=TwoWay}"/>
        </Style>
    </ListBox.ItemContainerStyle>

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

请注意，您应该设置SelectionMode="Extended" 。

希望能帮助到你。