ToggleButton Style only works on last ToggleButton

Question

I'm trying to customize my ToggleButtons so that when checked they say 'Yes' in green and when not checked, say 'No' in red.

I've created the following style which is sitting in my Styles resource dictionary.

<!--  ToggleButtons   -->
<Style x:Key="YesNoToggleStyle" TargetType="ToggleButton">
  <Style.Triggers>
    <Trigger Property="IsChecked" Value="True">
      <Setter Property="Background" Value="SpringGreen" />
      <Setter Property="Content">
        <Setter.Value>
          <TextBlock Text="Yes"/>
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="IsChecked" Value="False">
      <Setter Property="Background" Value="Crimson" />
      <Setter Property="Content">
        <Setter.Value>
          <TextBlock Text="No"/>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

This works ... sort of. If the ToggleButton is the last one of either value, then it displays correctly. All previous buttons with the same value are blank. The height was also shrinking, but I fixed that with the 'Height' Setter above the triggers. To illustrate, when a new record is being created it looks like:

and after I've clicked buttons 1, 2, and 3 and 1 again:

I originally had the style referenced from the surrounding grid:

<Grid>
  ...
    <Grid.Resources>
      <Style BasedOn="{StaticResource YesNoToggleStyle}" TargetType="{x:Type ToggleButton}" />
    </Grid.Resources>

But changing that so each ToggleButton references the style individually (<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />) hasn't made a difference.

I looked at Customizing the toggle state of a toggle button in wpf, and Override ToggleButton Style where the effect is the same, but they talk about external images, and my issues is all within wpf.

I also looked at the second answer to: i want to change backcolor of toggle button when toggle button ischecked and viceversa in WPF but a) I only have the blend + sketchflow preview that comes with VS2012, and b) i'm a total noob with blend and can't get from Select the "Checked State" to Reset the Background Color instruction in the answer (plus i'd be surprised if this task requires the blend tool).

Can anyone show me what to do to get multiple ToggleButtons to use the same style properly?

Answer 1

This works for me. Somewhere in Dictionary1.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="YesNoToggleStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Background" Value="Crimson" />
                <Setter Property="Content" Value="No"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="SpringGreen" />
                <Setter Property="Content" Value="Yes"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

Note, that style is based on ToolBar.ToggleButtonStyle.

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="pack://application:,,,/Dictionary1.xaml"/>
    </Grid.Resources>

    <ItemsControl ItemContainerStyle="{StaticResource YesNoToggleStyle}">
        <ToggleButton />
        <ToggleButton />
        <ToggleButton />
    </ItemsControl>
</Grid>

Answer 2

try to replace Content property to ContentTemplate:

  <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="Yes"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>

Answer 3

In my case I wanted to have a "Locked" ToggleButton in a common dll defined and reused across my Apps. Here's my result, which worked for me. Maybe someone find it useful (put this in a Resourcedictionary.xaml):

<BitmapImage  x:Key="LockedLock"
              UriSource="/...;component/Resources/Lock_closed_16p.png" />
<BitmapImage  x:Key="OpenLock"
              UriSource="/...;component/Resources/Lock_open_16p.png" />

<Style x:Key="LockButton"
       TargetType="ToggleButton">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{DynamicResource OpenLock }"
                       Width="12"
                       Height="12"
                       Name="contentimage" />
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton , AncestorLevel=1, Mode=FindAncestor }, Path=IsChecked}"
                                 Value="True">
                        <Setter Property="Image.Source"
                                TargetName="contentimage"
                                Value="{DynamicResource LockedLock }" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Credits to:

Setting Button's Content to <Image> via Styles

Setter Target Name not recognized