CODEWITHSUNDEEP
c#xamldata-bindingwindows-store-appsselecteditem
Rudi
Rudi

Reputation: 936

Bind CheckBox to SelectedItem in ListBox

I have created a ListBox in WPF, which does the following:

It binds to a DataSource in my ViewModel. The ListBox contains Items and next to each item is a CheckBox. If the user clicks on a CheckBox, the Item is being selected and the Command will be executed. It works fine and the code for WPF looks like this:

    <ListBox ItemsSource="{Binding OCAntwort}" SelectedItem="{Binding SelectedAntwort}" >
        <ListBox.Resources>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid>
                                <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>

                                    <!--ElementName=Window is the Name of the XAML (in root definition)-->
                                    <CheckBox DataContext="{Binding DataContext, ElementName=Window}" Command="{Binding CheckAnswer}" CommandParameter="{Binding ElementName=cbox, Path=IsChecked}" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" x:Name="cbox" HorizontalAlignment="Right"/>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.Resources>
    </ListBox>

Now I'm trying the same on Windows Store App, but there's no AncestorType... If I'm doing it like this:

<Style TargetType="ListBoxItem" x:Name="lbitem">

<CheckBox DataContext="{Binding DataContext, ElementName=Window}" Command="{Binding CheckAnswer}" CommandParameter="{Binding ElementName=cbox, Path=IsChecked}" IsChecked="{Binding ElementName=lbitem, Path=IsSelected}" x:Name="cbox" HorizontalAlignment="Left"/>

The Checkbox disappears and it'll just display the ItemsSource of OCAntwort. Clicking on an item won't execute the Command of the CheckBox (since there is no CheckBox). Doing it like this:

IsChecked="{Binding ElementName=lbitem, Path=IsSelected,RelativeSource={RelativeSource Mode=Self}}"

would display the CheckBox and execute the Command, but it's not being binded to the SelectedItem.

How can I bind the CheckBox (which is being displayed next to the ListBoxItem for each ListBoxItem) to the SelectedItem of a ListBox? Working code is above... I want that the code should work in my Windows Store App (and later in my Windows Phone App).

Example:

You can download a sample here: http://weblogs.asp.net/marianor/archive/2008/02/04/multiselect-listview-with-checkboxes-in-wpf.aspx

This shows what I want to achieve in Windows Store App.

Edit: Doing it like this displays the ListBox with a content and a CheckBox, but I still need to bind the CheckBox by the SelectedItem. Means when the user clicks on a CheckBox, the ListBoxItem has to be selected or if the user clicks on a ListBoxItem, the CheckBox has to be selected.

    <ListBox ItemsSource="{Binding OCAntwort}" SelectedItem="{Binding SelectedAntwort}" Grid.Row="2" Grid.Column="1" x:Name="listBox" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Text}" Width="150" VerticalAlignment="Center"/>
                    <CheckBox IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Upvotes: 0

Views: 3833

Answers (2)

Troy
Troy

Reputation: 567

Not sure if you've found the solution yet but I have used the following code to establish two way binding between the IsChecked property of a CheckBox and the IsSelected property of a parent ListBoxItem or ListViewItem.

<CheckBox IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"/>

Upvotes: 2

David Bekham
David Bekham

Reputation: 2175

You should use TemplatedParent as you are writing inside the ListBoxItem.

IsChecked="{Binding ElementName=lbitem, 
            Path=IsSelected,
            RelativeSource={RelativeSource Mode=TemplatedParent}}"

I think this may resolve your problem.

Upvotes: 0

Related Questions