Customizing the toggle state of a toggle button in wpf

Question

I wanna customize the toggle state of the toggle button in wpf. I want to set a image to the toggle button when it is on and set another image when it is off. TO do so, i thought of using triggers. This is how i ended up doing,

<Window ...>
    <Window.Resources>
        <Image x:Key="OnImage" Source="C:\ON.jpg" />
        <Image x:Key="OffImage" Source="C:\OFF.jpg" />
        <Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{StaticResource OnImage}" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content" Value="{StaticResource OffImage}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                ...
                <ToggleButton IsChecked="{Binding Status}" Width="100" Height="35" Style="{StaticResource OnOffToggleImageStyle}" />
                ...
            </DataTemplate>
        </ListBox.ItemTemplate>
</Window>

The above snippet seems to works fine only for two items in the list box. If more than one item has the binding value, status to be true, it doesn't work (it works for only one such item). Please tell me whether I am proceeding in the correct direction. Also tell me other ways of achieving this.

Answer 1

The issue here is because you are using Image resources. The Image in your resources is a concrete instance of a control. It can only be in one place at a time. So when you have more than one item in your list...

This should work for you:

<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
 <Style.Triggers>
   <Trigger Property="IsChecked" Value="True">
     <Setter Property="Content">
       <Setter.Value>
         <Image Source="C:\ON.jpg" />
       </Setter.Value>
     </Setter>
   </Trigger>
   <Trigger Property="IsChecked" Value="False">
     <Setter Property="Content">
       <Setter.Value>
         <Image Source="C:\OFF.jpg" />
       </Setter.Value>
     </Setter>
   </Trigger>
 </Style.Triggers>
</Style>

Note that you can improve the performance of this by using an ImageSource for each image file in your resources, then referencing this in the Image. This effectively means that each image is only loaded once from disk, rather than 2*N times (where N is the number of items in your list.)

Answer 2

This answer will help you. In there I took a ToggleButton and styled it to look as the ToggleButton in a TreeView (the + / - part to expand collapse nodes). You'll just need to change the paths that draw the - and + signs, to show your images instead.

Here goes personalized to you, just put an image called "on.jpg" and another one called "off.jpg" under your C:\ directory, and it should work by just copy/pasting into your window:

    <Window.Resources>
     <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
     <ControlTemplate x:Key="toggleButtonTemplate" TargetType="ToggleButton">
      <Grid
       Width="15"
       Height="13"
       Background="Transparent">
       <Image x:Name="ExpandImage"
          Source="C:\off.jpg"
          HorizontalAlignment="Left" 
          VerticalAlignment="Center" 
          Margin="1,1,1,1" />       
      </Grid>
      <ControlTemplate.Triggers>
       <Trigger Property="IsChecked"
                  Value="True">
        <Setter Property="Source"
             TargetName="ExpandImage"
          Value="C:\on.jpg"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
     <Style x:Key="toggleButtonStyle" TargetType="ToggleButton">
      <Setter Property="Template" Value="{StaticResource toggleButtonTemplate}" />
     </Style>
    </Window.Resources>
    <Grid>
     <ToggleButton Style="{StaticResource toggleButtonStyle}" />
    </Grid>

Answer 3

Like Drew Noakes said, in my snippte there were only two images. So only two items were working properly. I solved this issue with the following snippet.

                        <ToggleButton Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding Status}" Width="100" Height="35">
                            <ToggleButton.Resources>
                                <Image x:Key="OnImage" Source="C:\ON.jpg" />
                                <Image x:Key="OffImage" Source="C:\OFF.jpg" />
                            </ToggleButton.Resources>
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Style.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Content" Value="{StaticResource OnImage}">
                                            </Setter>
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="False">
                                            <Setter Property="Content" Value="{StaticResource OffImage}">
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>

Simple, I moved the triggers in to the data template. Dunno whether this is the correct answer thou'. Seems to be working