Help trying to use a ToggleButton in a dictionnary

Question

I am very new to WPF and I am facing a problem where I need help:

My environment is .net 4, VS2010, win 7

I want to define a styled toggle button that I will use from a User Control. When I declare the ToggleButton control in the UserControl I want to give the 2 possible Contents according to the button state.

My question: I don't know how to declare my button with the 2 contents (one when IsChecked=true, one when IsChecked=false), I have included some code I have written that does not compile.

Thank you in advance

...

Answer 1

You should be able to use something like:

      <ToggleButton>
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="Content">
                    <Setter.Value>
                        <Grid>
                            <TextBlock>Click Me</TextBlock>
                        </Grid>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <Grid>
                                    <TextBlock>Click Me Again</TextBlock>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>

Answer 2

Depending on what your 2 contents are, you can do something like:

<ToggleButton IsChecked="True">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Button></Button>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border Background="Red" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

In this example the ToggleButton has one content when it's checked (a button) and other content when it is not checked (a red background border). You will have to handle the actions to toggle the IsChecked state separately.

Also one thing, if the ToggleButton is the only control in your UserControl there is no need to use a UserControl, just restyle the ToggleButton. UserControls are more appropriated when you want to group controls together to have a specific functionality (like a search text box and a Go button to be used together as a search control).

Answer 3

You can style the ToggleButton by setting ControlTemplate

check WPF ControlTemplate Trigger tip. this will help you