WPF ToggleButton to look like normal button

Question

Is there a easy way to make ToggleButton to appear as a normal button? I am trying to click the button and it will trigger IsEnabled to false to another control. With ToggleButton, I can do a trigger on IsChecked property. However the ToggleButton appears quite different when it is toggled. Thanks.

Answer 1

In the WPF designer, right click the ToggleButton in question and select Edit Template -> Edit a Copy. Pick the appropriate settings and click OK.

The default template for the ToggleButton will be added to your XAML. In there, delete this code:

<Trigger Property="IsChecked" Value="true">
    <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>

You can reuse this style/template for multiple ToggleButtons.

EDIT

You have another option at your disposal. Use a standard Button and wire up the Click event handler or a Command binding that executes code to update your IsChecked property, e.g.

<CheckBox IsChecked="{Binding IsChecked}" IsEnabled="False" Content="State" />
<Button Content="Toggle" Command="{Binding ToggleStateCommand}" />

Then, of course, your command merely has to execute

IsChecked = !IsChecked

This all assumes you have an ICommand implementation you're comfortable with and that you're somewhat doing MVVM, but perhaps that's a bit out of scope for this Q/A.

Answer 2

Easiest way is to make ToggleButton transparent, and show some other control as it's content. Set IsHitTestVisible = False for the content.

Experiment with Margin value too.

<ToggleButton Background="Transparent" BorderBrush="Transparent" BorderThickness="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Button Content="Toggle Button" Margin="-5" IsHitTestVisible="True" />
</ToggleButton>

Above can be customized to use ToggleButton's Content like :

<ToggleButton Content="Toggle Button" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Left="233" Canvas.Top="158">
    <ToggleButton.ContentTemplate>
        <DataTemplate>
            <Button IsHitTestVisible="False" Content="{Binding}"/>
        </DataTemplate>
    </ToggleButton.ContentTemplate>
</ToggleButton>