CODEWITHSUNDEEP
wpftogglebutton
falukky
falukky

Reputation: 1139

Remove ToggleButton annoying background Mouse over style

I have simple ToggleButton and when IsChecked i want to change only the text. I want all other properties like border and background will be Transparent but it seems that i still have this background style:

<ToggleButton x:Name="changeButBorderedBlinky" Content="EDIT" Width="40" Height="40" Background="Transparent">
      <ToggleButton.Style>
           <Style TargetType="{x:Type ToggleButton}">
               <Style.Triggers>
                   <Trigger Property="IsMouseOver" Value="true">
                         <Setter Property="Content" Value="Done"/>
                         <Setter Property="FontWeight" Value="Bold"/>
                    </Trigger>
                </Style.Triggers>
           </Style>
       </ToggleButton.Style>
</ToggleButton>

Upvotes: 3

Views: 3158

Answers (2)

nurchi
nurchi

Reputation: 800

Sorry to revive an old thread, but (for someone struggling) the following worked for me. This can be in App.xaml file under Application.Resources tag or directly in the Window.Resources. I originally needed it for a UWP application, then had to adapt for WPF for a different project:

<Style TargetType="ToggleButton" x:Key="TransparentToggleButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid x:Name="RootGrid" Background="Transparent">
                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then just style your ToggleButton:

<ToggleButton Style="{StaticResource TransparentToggleButtonStyle}">
    (whatever content you want to present)
</ToggleButton>

Hope this helps someone,

Upvotes: 1

Jeff R.
Jeff R.

Reputation: 1521

One thing that is often annoying is some visual aspects of the default WPF controls are coded in a way so as they are not configurable. The MouseOver Background is an example (scrollbar sizes is another... grrr!!!). You can solve this though by defining your own Template for the ToggleButton and eliminate that MouseOver trigger. Here is a simple example:

<ToggleButton x:Name="changeButBorderedBlinky" Width="40" Height="40" Background="Transparent">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="EDIT"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="True">
                                <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}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Content" Value="Done"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Also, in order to change a property in a trigger it has to be set in a style, not directly. That is why your Content doesn't change in your MouseOver Trigger. If you remove the property setting for it and add it into the Style with a Setter, it will allow the trigger to change it.

One downside to all this is it overrides all the default template triggers so you won't see when the ToggleButton is checked anymore unless you add a trigger for "IsChecked" too. (and if you need to alter the Background in the trigger, move the Background Property to a Setter like I did for Content)

Hope that helps...

Upvotes: 9

Related Questions