Alex Rivera | Logout

Customizing the toggle state of a toggle button in wpf

Asked 2009-10-07T16:02:28.323
9

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.

c# wpf controls togglebutton
Edit
Report

1 Answer

3

Here is a ToggleButton with 3 images and a popup:

  1. An image for when IsChecked = false.
  2. An image for when IsChecked = true.
  3. An image for when IsMouseOver = true.

The images are stored in resources as BitmapImage in order to avoid changing Visuals on trigers.

The image files have to be added to resources and then, the files added to the "Resoruces" folder in the project have to be marked as BuildAction = Resource.

It also applies an opacity to the Image control when the ToggleButton IsEnabled = false;

Code:

    <ToggleButton
        x:Name="btnToggleImage"
        Margin="5"
        Width="50"            
        Height="50"
        >
        <ToggleButton.Resources>
            <BitmapImage x:Key="imgNormal" UriSource="/YOURPROJECTNAME;component/Resources/YourUncheckedImage.png"/>
            <BitmapImage x:Key="imgHover" UriSource="/YOURPROJECTNAME;component/Resources/YourHoverImage.png"/>
            <BitmapImage x:Key="imgChecked" UriSource="/YOURPROJECTNAME;component/Resources/YourCheckedImage.png"/>
        </ToggleButton.Resources>

        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Image
                                x:Name="PART_Image"
                                Source="{StaticResource imgNormal}"
                                />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/>
                                </Trigger>
answered 2012-03-22T11:48:29.813

Your Answer