Search code examples
wpfstylestogglebutton

Remove ToggleButton backgroung on activate state

This is my ToggleButton:

<ToggleButton Width="100" Height="30" Margin="344,262,530,345" BorderThickness="2" Background="Transparent"
              BorderBrush="#38abcf" FontFamily="Resources/#Buxton Sketch" Foreground="Gainsboro" FontSize="14">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="OFF"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="ON"/>
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="Background" Value="Transparent"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Currently on activate state it's look like that:

enter image description here

And the Background color not changed although i set new property.

  • Update

        <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="Loops OFF"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Width="100" Height="30" BorderThickness="2" Background="Transparent" BorderBrush="#38abcf">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" Value="Red" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="Loops ON"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
Solution

  • Override default template

         <ToggleButton>
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Content" Value="OFF"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Border Name="Border" Width="100" Height="30"   BorderThickness="2" Background="Transparent"
                      BorderBrush="#38abcf">
                                       <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                   </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">                                    
                                          <Setter Property="BorderBrush" Value="Red" TargetName="Border" />    
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="ON"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>