Question

I have a ObservableCollection> property that I would like to display in a list box in a WPF window using the MVVM model. Ideally I would like to have a listbox that has a check box for the bool and a label for the string and when the user changes the value of the checkbox it would change the corresponding bool. What is the best way to go about doing this?

Answer 1

Idealy, if you want to follow the MVVM approach, everyone of your elements in the ObservableCollection should be a ViewModel.

These viewModels should expose 2 properties, such as string Description and bool IsSelected.

All you need then is to provider your ListBox with a Style in order to display a checkbox and textblock for each databound ViewModel.

The following XAML implements such a Style. Note: The usercontrol DataContext should hold a ViewModel containing an ObservableCollection<YourClass> Items { get; set; } property where YourClass exposes string Description { get; set; } and bool IsSelected { get; set; }. You will obviously want to throw in some INotifyPropertyChanged magic in there.

<Grid>
    <Grid.Resources>

        <Style x:Key="CheckBoxListStyle" TargetType="ListBox">
            <Style.Resources>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <StackPanel Orientation="Horizontal">
                                    <CheckBox x:Name="itemChoix" Margin="5,5,0,0" IsChecked="{Binding IsSelected, Mode=TwoWay}" IsEnabled="{Binding IsEnabled, Mode=TwoWay}"  />
                                    <TextBlock Margin="5,5,0,0" Text="{Binding Description, Mode=TwoWay}" />
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Style.Resources>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Vertical"  />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="0" />
        </Style>

    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="1" Style="{StaticResource BoxBorder}" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid>
            <ListBox ItemsSource="{Binding Path=Items}" SelectionMode="Multiple" Style="{StaticResource CheckBoxListStyle}"/>
        </Grid>
    </Border>

</Grid>