Change custom behavior of togglebutton in WPF

Question

I am new in WPF.

What the way to change a togglebutton behavior. to with black baground and no border. Is need to use Control Template?

Answer 1

You have to modify the Control Template or Style to change the look and feel of the existing Control available. Have a look at this sample which is some what similar to your requirement. what i have done is i changed the Chrome (default style of windows) and created my own style with Border and content presenter. Then i have created the Triggers for the style. For visualization, in the mouseover and ischecked event i am changing background color of the Border.

<Window.Resources>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="border">
                        <ContentPresenter 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        RecognizesAccessKey="True" TextElement.Foreground="White" HorizontalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true"/>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#FF6C6C6C"/>
                            <Setter Property="CornerRadius" TargetName="border" Value="5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FF282828"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton HorizontalAlignment="Left" Margin="136,59,0,0" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="27" Height="24" Content="-" FontSize="21.333" FontWeight="Bold" HorizontalContentAlignment="Center" Padding="0" VerticalContentAlignment="Center" IsThreeState="True"/>
</Grid>

Answer 2

Yes, you want to use a ControlTemplate to change how the ToggleButton looks. Take a look at the page for the ToggleButton as well as this article:

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

to get you started.