#362 – Changing the Text on a ToggleButton When a User Clicks On It

It’s reasonable to want to change the text on a ToggleButton when a user clicks on it, so it shows the current state.  You can do this by using a property trigger, which fires when the IsChecked property of the ToggleButton changes.

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <Label Content="Click to arm the electric fence that surrounds your cube:"/>
        <StackPanel>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5" Width="80">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Content" Value="Disarmed"/>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="ARMED"/>
                                <Setter Property="Foreground" Value="Red"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
        </StackPanel>
    </StackPanel>


About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

2 Responses to #362 – Changing the Text on a ToggleButton When a User Clicks On It

  1. phacops@gmx.de says:

    Hello Sean,
    is ist possible to extend the example to change background- and foreground-color on click too?

    Cheers Marco

    • Sean says:

      Sorry Marco, each blog post is meant to show one small thing. Changing the Foreground or Background is quite easy though–just specify the Foreground or Background property in the trigger.

Leave a comment