How do you bind a ListBox of CheckBoxes while preserving selection style?

1
votes

I have the following XAML to bind data to a ListBox filled with CheckBoxes:

        <ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
        Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
                    <CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
                </ListBoxItem>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:

    <ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
        <ListBoxItem IsSelected="True">
            <CheckBox IsChecked="True" Foreground="White" Content="Low" />
        </ListBoxItem>
        <ListBoxItem IsSelected="True">
            <CheckBox IsChecked="True" Foreground="White" Content="Medium" />
        </ListBoxItem>
        <ListBoxItem IsSelected="True">
            <CheckBox IsChecked="True" Foreground="White" Content="High" />
        </ListBoxItem>
        <ListBoxItem IsSelected="True">
            <CheckBox IsChecked="True" Foreground="White" Content="Highest" />
        </ListBoxItem>
    </ListBox>

Here are the images:

With Binding

Without Binding

I would like it to look like the second image. Any ideas are greatly appreciated.

Update: The following is the style I am trying to apply to the ListBoxItem:

    <Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border Name="Border" Padding="3" SnapsToDevicePixels="true">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
2
c#wpfxaml
I'm not positive I understand the question... are you asking about how to style the SelectedItem (if so, can you include the XAML for SelectionListBoxItem?)? How to synchronize your ListBoxItem.IsSelected with CheckBox.IsChecked? Or how to make sure the item gets selected when the user clicks on a control inside the ListBoxItem, such as on the CheckBox? – Rachel

2 Answers

1
votes

The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.

0
votes
<Window.Resources>
    <Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="Red"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>
<Grid>
    <ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
    Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None"> 
                    <CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
                </ListBoxItem>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.