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

时间:2017-03-03 06:32:03

标签: c# wpf xaml mvvm

我写了自己的复选框控件。这个复选框,我使用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>

现在我想在我的ListBox中绑定这个UserControl,它位于主窗体中。

这就是我在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中。我不知道为什么。

1 个答案:

答案 0 :(得分:0)

我想通过在IsSelected中绑定ItemContainerStyle属性并在CheckBox中使用ItemTemplate,在更标准的上下文中实现您要做的事情:

<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"

希望它有所帮助。