#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>


#361 – Creating a ToggleButton Whose Content Is an Image

Because ToggleButton is a ContentControl, it can contain a single child element that can be any .NET object.  You typically set the ToggleButton’s content to a text string, which appears as a label on the button.  But you can also set the content to some other control.

In the example below, the content of each ToggleButton in a panel is set to an Image control.

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <Label Content="Click on cartoon characters that you like:"/>
        <StackPanel>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5">
                <Image Source="001-Bugs.jpg" Stretch="None"/>
            </ToggleButton>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5">
                <Image Source="002-Underdog.jpg" Stretch="None"/>
            </ToggleButton>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5">
                <Image Source="003-Betty.jpg" Stretch="None"/>
            </ToggleButton>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5">
                <Image Source="004-Bart.jpg" Stretch="None"/>
            </ToggleButton>
        </StackPanel>
    </StackPanel>

#360 – Binding a ToggleButton’s IsChecked Property to a Boolean Variable

Instead of handling the Checked and Unchecked events of a ToggleButton and then setting a boolean variable to represent the current state, you’ll most often just use data binding to bind the IsChecked property to a boolean variable.

In the example below, we have three ToggleButton controls, each bound to a boolean property.

        <StackPanel Orientation="Horizontal">
            <ToggleButton Content="Bold" IsChecked="{Binding Bold}"  FontWeight="Bold" Padding="5" />
            <ToggleButton Content="Italic" IsChecked="{Binding Italic}" FontStyle="Italic" Padding="5"/>
            <ToggleButton IsChecked="{Binding Underline}" Padding="5" >
                <TextBlock>
                    <Underline>Underline</Underline>
                </TextBlock>
            </ToggleButton>
        </StackPanel>
        <Button Content="Test" Click="Button_Click" Margin="15" Padding="3"/>

In the code-behind, we define the boolean properties that we can bind to and then set the data context to refer to the parent class.

        public bool Bold { get; set; }
        public bool Italic { get; set; }
        public bool Underline { get; set; }

		public MainWindow()
		{
			this.InitializeComponent();
            this.DataContext = this;
        }

        private void Test_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(string.Format("Bold: {0}, Italic: {1}, Underline: {2}", Bold, Italic, Underline));
        }

#359 – ToggleButton Basics

The ToggleButton control is similar to the CheckBox control, in that allows the user to toggle something on/off in an application.  Instead of looking like a checkmark next to a label, however, the ToggleButton looks like a normal button.  The button appears to stay pressed in after you click it.  When you click the ToggleButton a second time, it appears to pop back out.

You specify the text that appears on the face of the ToggleButton using the Content property.

        <StackPanel Orientation="Horizontal">
            <ToggleButton Content="Bold" FontWeight="Bold" Padding="5"/>
            <ToggleButton Content="Italic" FontStyle="Italic" Padding="5"/>
            <ToggleButton Padding="5" >
                <TextBlock>
                    <Underline>Underline</Underline>
                </TextBlock>
            </ToggleButton>
        </StackPanel>

Like the CheckBox control, the IsChecked property indicates whether the ToggleButton is currently checked.

Also like the CheckBox control, the Checked and Unchecked events fire when the ToggleButton is checked or unchecked.