Change a button's content in a style?

Question

I\'m trying to do something similar to this:

Answer 1

If you are making a generic style to be used by buttons all around your app, you will get visual tree conflicts using the approach where the image is a resource. So the template is your only choice in that case.

Answer 2

WARNING: This may not be the best or correct way to do it. Make sure you read the other answers on this page as well.

Pretty sure you'd want to use a control template in this sort of situation. Something like:

<style>
    <Setter Property="Content">
        <Setter.Value>
            <ControlTemplate>
                <Image Img="something.jpg" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</style>

And add a control template in the trigger for the on-hover.

Here's a good link

Answer 3

The actual error is occurring because Visuals can not be directly set as a Setter value. You can get the behavior you are looking for though, by setting the ContentTemplate using a DataTemplate, or by creating your content as a resource, either specific to the button or located elsewhere.

<Button>
    <Button.Resources>
        <CheckBox x:Key="Local_MouseOverContent" Content="Mouse is over" />
    </Button.Resources>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Content" Value="No mouse over" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Content"
                            Value="{StaticResource Local_MouseOverContent}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Content" Value="No mouse over" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate DataType="Button">
                                <CheckBox Content="Mouse is over" />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Answer 4

REMARK! Exactly your example works in .NET Framework 4 without any Changes !!!!

  <Button>
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Content"
                        Value="No mouse over" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <CheckBox Content="Mouse is over" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>