How to bind user control checkbox into listbox

Question

I write my own checkbox control. This checkbox, I put inside listbox using MVVM pattern. This user control have its own class, view model and xaml view.

Here is a class:

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

ViewModel for UserControl:

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"); }
    }           
}

And here is 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>

Now I want to bind this UserControl inside my ListBox, which is located in main form.

This is what I'm using in my form 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>

Last thing is view model of this form.

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");}
}

Something I'm doing wrong. In selectedProcces it always leap in getter, but not in setter, which I need. I don't exactly know why.

What exactly are you trying to achieve? It looks like you're reinventing the wheel. You dont have to make a Usercontrol. Just DataTemplate your model as Checkbox and do the appropriate bindings — lokusking
The goal i want to achieve is to use user control in another list boxes. I dont want to write hundreds data templates, just one use control and this user control is filled with data from repository. ( Mean content ). I think the whole concept is good, but there is something wrong with binding. — Daniel Capek
hello thanks for your answer, i actually trying it, so i will let u know :) — Daniel Capek

Ron Ron · Accepted Answer · 2017-03-03T08:44:01

I thing what you are trying to do can be achieved in a more standard context, by binding IsSelected property in ItemContainerStyle and using a CheckBox in the 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>

Please note that you should set SelectionMode="Extended".

Hope it helps.

How to bind user control checkbox into listbox

1 Answers