WPF ToggleButton XAML styling

Question

I have two toggle buttons that I am trying to combine - sort of. So the first button toggles the images based on whether it's IsChecked is true or false, but this button has a border around it that I can't get rid of.

The second toggle button doesn't have a border and doesn't blink when clicked, but it also doesn't change images based on it's state.

What I want is the best of both worlds. Change the image AND get rid of the border. I have tried exactly 23 things and none of them work.

Here is the code I am using:

<ToggleButton x:Name="changeButBorderedBlinky" Margin="0,12,194,0" Width="82" Height="82" Background="Transparent" Padding="-1"  Focusable="false" VerticalAlignment="Top" HorizontalAlignment="Right">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content">
                <Setter.Value>
                    <Border BorderThickness="0"  >
                        <Image Source="images/buttonimages/back2.png" Stretch="Fill"  />
                    </Border>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <Border  BorderThickness="0" >
                                <Image Source="images/buttonimages/back.png" Stretch="fill" />
                            </Border>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
 </ToggleButton>
 <ToggleButton x:Name="noChangeNoBorder"  Margin="0,12,104,0" VerticalAlignment="Top" HorizontalAlignment="Right" Height="80" Width="80" >
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border x:Name="border">
                <Image x:Name="img" Source="images/buttonimages/back2.png"  />
            </Border>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Thanks for any help on this. It's driving me insane.

Answer 1

Your customization options are endless in either case. Have you ever tried Expression Blend? It comes along with Visual Studio 2013 Community (which is free to use) and it would let you customize either control any way you want.

Here, done using Expression Blend, no blink, no border, image swapping:

        <ToggleButton x:Name="changeButBorderedBlinky" Margin="0,12,194,0" Width="82" Height="82" Background="Transparent" Padding="-1"  Focusable="false" VerticalAlignment="Top" HorizontalAlignment="Right">
        <ToggleButton.Template>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True"/>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="ToggleButton.IsChecked" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ToggleButton.Template>
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="Content">
                    <Setter.Value>
                        <Border BorderThickness="0"  >
                            <Image Source="images/buttonimages/back2.png" Stretch="Fill"  />
                        </Border>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <Border  BorderThickness="0" >
                                    <Image Source="images/buttonimages/back.png" Stretch="fill" />
                                </Border>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>

    </ToggleButton>

Answer 2

Try to use slightly modified XAML pertinent to your first ToggleButton:

<ToggleButton x:Name="changeButBorderedBlinky" 
              Margin="0,12,194,0"
              Width="82" Height="82" 
              Background="Transparent" 
              Padding="-1"  
              Focusable="false" 
              VerticalAlignment="Top" HorizontalAlignment="Right">

        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Content">
                    <Setter.Value>

                        <Image Source="images/buttonimages/back2.png" Stretch="Fill"  />

                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>

                                <Image Source="images/buttonimages/back.png" Stretch="fill" />

                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>

You can also try to customize other properties, for eg:

  <Setter Property="Background" Value="#FF1F3B53"/>
  <Setter Property="Foreground" Value="#FF000000"/>
  <Setter Property="BorderBrush" Value="Transparent">

For more styling options refer to: http://msdn.microsoft.com/en-us/library/cc296245%28v=vs.95%29.aspx

Hope this will help. Regards,