How to Dynamically Set Button Content based on a Variable Change

Question

I have a UserControl created that has a pair of buttons beside each other like this X|X They are meant to be used like directional buttons, Left/Right, Up/Down, +/-, etc whatever the application required is. The text on them changes dynamically as the user changes the settings in the program.

What I am looking to do is based on what the buttons are set to, it will change the content of the button. Sometimes text, sometimes pictures, whatever I think is best. So right now I just have 2 string variables holding the text for the buttons and they are bound to the buttons Content property.

For example I want it, when I set the text to "left" to display a nice picture of an arrow in the button instead of "left". But when I set the text to "+", it just uses normal text to display the +.

How would I go about dynamically changing the content of these buttons based on a changing text variable (or even an enum)?

Thanks in advance for your help!

EDIT I know how to do it by triggers using styles and the ContentTemplate triggers. Maybe there is a way to check the values of a variable here?

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

LaniusExcubitor · Accepted Answer · 2020-01-07 21:51:57Z

2

You should use triggers.

<Button>
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <DataTrigger Binding="{Binding SomeProperty}" Value="{x:Static n:YourEnum.Value}">
                    <Setter Property="Content">
                       <Setter.Value>
                              <!-- add the content you want to see in this case -->
                              <Image Source="…" />
                       </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

answered Jan 7, 2020 at 21:51

LaniusExcubitor

3563 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Dynamically Set Button Content based on a Variable Change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related