CODEWITHSUNDEEP
c#wpfxaml
NickV
NickV

Reputation: 649

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

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>

Upvotes: 1

Views: 1318

Answers (2)

yo chauhan
yo chauhan

Reputation: 12315

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

Upvotes: 0

Surfbutler
Surfbutler

Reputation: 1528

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.

Upvotes: 1

Related Questions