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

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,