Creating a WPF Button that dynamically changes its content

Question

I have created a custom WPF button that has 3 states (normal, clicked, disabled). For each state I have a different image. I use this general button in different places in my project and each time I load a different images using a property in the .CS file.

<Button.Resources>
    <ImageSource x:Key="Normal">..\Resources\DefaultNormal.png</ImageSource>
    <ImageSource x:Key="Disabled">..\Resources\DefaultDisabled.png</ImageSource>
    <ImageSource x:Key="Pressed">..\Resources\DefaultPressed.png</ImageSource>
</Button.Resources>
<Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
            <Image Name="normal" Source="{DynamicResource Normal}" Stretch="Fill"/>
            <Image Name="pressed" Source="{DynamicResource Pressed}" Stretch="Fill" Visibility="Hidden"/>
            <Image Name="disabled" Source="{DynamicResource Disabled}" Stretch="Fill" Visibility="Hidden"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="normal" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="pressed" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="normal" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="disabled" Property="Visibility" Value="Visible"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Button.Template>

Now I would like to do the same with the button's text/content but I can't find something similar to ImageSource for text. Is there something like that?, or is there a different way to change the text dynamically?

Answer 1

It looks like you just need to add a new element to your control template; then you can access it in the triggers.

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Image Name="normal" Source="{DynamicResource Normal}" Stretch="Fill"/>
        <Image Name="pressed" Source="{DynamicResource Pressed}" Stretch="Fill" Visibility="Hidden"/>
        <Image Name="disabled" Source="{DynamicResource Disabled}" Stretch="Fill" Visibility="Hidden"/>
        <TextBlock Name="text" Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="normal" Property="Visibility" Value="Hidden"/>
            <Setter TargetName="pressed" Property="Visibility" Value="Visible"/>
            <Setter TargetName="text" Property="Text" Value="Pressed :)"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="normal" Property="Visibility" Value="Hidden"/>
            <Setter TargetName="disabled" Property="Visibility" Value="Visible"/>
            <Setter TargetName="text" Property="Text" Value="Disabled :("/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Here I added a TextBlock over the images, and changed the text on press/disabled states.

---

If you wanted to add the text strings as resources within the control, then use the System namespace to reference the String type. xmlns:clr="clr-namespace:System;assembly=mscorlib

<Button.Resources>
    <clr:String x:Key="NormalText">Normal</clr:String>
    <clr:String x:Key="DisabledText">Disabled</clr:String>
    <clr:String x:Key="PressedText">Pressed</clr:String>
</Button.Resources>

Answer 2

Try this:

1) Add to namespace:

xmlns:system="clr-namespace:System;assembly=mscorlib"

2) Add to resource this entry:

<system:String x:Key="myMessage">Button state: clicked!</system:String>

And now you can use in TextBlock Text property "myMessage" or as Button content:

<Button Content="{StaticResource myMessage}" />