一键多种样式和内容

Question

I have a HomePage with a number of buttons on that I am trying to get to do a couple of things. Firstly, I have a Style in a ResourceDictionary that dictates the overall 'look and feel' of the buttons. It looks like this:

<Style TargetType="Button" x:Key="HomeButton">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="#06658D"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="White" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="#06658D"/>
        </Trigger>
    </Style.Triggers>
</Style>

Nothing too complicated, however I want the MouseOver effect to persist after being clicked. So now I am looking at doing something like this:

<Button Grid.Row="0" Style="{StaticResource HomeButton}" Content="Contacts">
    <Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding ContactsClicked}" Value="True">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Foreground" Value="#06658D"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Button>

I'll bind the command element of the Button to set ContactsClicked = true and reset this when another button is pressed. However, I get the error saying that Content is set multiple times.

Is it possible to have an overall Style of the Button set, as well as a 'Clicked style and to have a TextBlock displaying text on the button all at once or am I approaching this wrong? I am trying to not have an individual overall style for every single displaying text on the button all at once or am I approaching this wrong? I am trying to not have an individual overall style for every single Button`as that's a lot of repeated code.

For clarity this is what I am aiming for:

Answer 1

I've managed to find a solution myself, instead of using a Button us a ToggleButton instead:

<Style TargetType="ToggleButton" x:Key="HomeButton">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="#06658D"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="{TemplateBinding Background}" BorderBrush="White" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="Black" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="#06658D"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="#06658D"/>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

I would add this as a comment but im not allowed.

If your goal is that the button will stay selected after it is clicked, why not use a RadioButton ? A RadioButton has a built-in property called IsChecked but will also remain "Checked" or "Selected" even after multiple clicks.

Of course you can define the behavior and the styles in a similar manner, create a simple Trigger on the property IsChecked .

If more explanation is needed, just say so.