How to set the background color of a checkbox's content by binding in WPF

Question

I am trying to figure out how to bind the background color of the content for a checkbox. Here is the code I have, of course the background setting just changes the color of the checkbox not the color behind the text.

        <ListBox Name="ListBox1" ItemsSource="{Binding Path=relationshipTypesTable.dataTable.DefaultView}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox IsChecked="True" Content="{Binding typeDesc}" Background="{Binding color}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Answer 1

Try this:

<ListBox Name="ListBox1" ItemsSource="{Binding Path=relationshipTypesTable.dataTable.DefaultView}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox IsChecked="True">
                <TextBlock Text="{Binding typeDesc}" Background="{Binding color}"/>
            </CheckBox>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

I don't think you're able to style the background of a CheckBox without using your own ControlTemplate instead of the default one.

Tou could use a ControlTemplate along these lines (I've just grabbed the basic template from Kaxaml) - I've made the background Red - you'll want to replace that with your {Binding color}

 <Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <BulletDecorator Background="Transparent">
                            <BulletDecorator.Bullet>
                                <Border x:Name="Border"  
          Width="13" 
          Height="13" 
          CornerRadius="0" 
          Background="Red"
          BorderThickness="1"
          BorderBrush="#404040">
                                    <Path 
            Width="7" Height="7" 
            x:Name="CheckMark"
            SnapsToDevicePixels="False" 
            Stroke="#404040"
            StrokeThickness="2"
            Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                                </Border>
                            </BulletDecorator.Bullet>
                            <ContentPresenter Margin="4,0,0,0"
        VerticalAlignment="Center"
        HorizontalAlignment="Left"
        RecognizesAccessKey="True"/>
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}">
                                <Setter TargetName="CheckMark" Property="Data" Value="M 0 7 L 7 0" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#808080" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="#606060" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
                                <Setter Property="Foreground" Value="#888888"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Which will produce something that looks like this:

You can use this style simply by placing it within a local ResourceDictionary e.g:

<Window....

    <Window.Resources>
        <!-- Style Goes Here -->
    </Window.Resources>

    <!-- Your Code -->
</Window>

Although it may be better off in a separate ResourceDictionary, if you intend to use throughout your application. This style will be applied to all CheckBoxes; if you wish to apply it to only a select few, you should change the x:Key="{x:Type CheckBox}" to x:Key="NameOfYourChoice", and reference the style on individual CheckBoxes - Style="{StaticResource ResourceKey=NameOfYourChoice}"

You can style the rest to your liking. You can actually grab the default ControlTemplate from MSDN if you'd prefer to use that as a basis.