wpfxamltogglebuttonwpf-style

WPF ToggleButton XAML styling


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.


Solution

  • 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,