Multiple styles and content on one button

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 'Clickedstyle and to have aTextBlockdisplaying 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 singleButton`as that's a lot of repeated code.

For clarity this is what I am aiming for:

score 1 · Answer 1 · answered Oct 16 '17 at 09:56

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>

Shame, it was definitely possible using a button. I was about to suggest something from [this answer](https://stackoverflow.com/a/25414917/6741868). Anyways, glad you figured it out :) — Keyur PATEL, Oct 16 '17 at 09:57

score -1 · Answer 2 · answered Oct 16 '17 at 09:39

-1

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.

answered Oct 16 '17 at 09:39

TomerAgmon1

295
3
10

Thanks for your answer :). I haven't though of using a `RadioButton` actually, is it possible to Style it in the way of a normal button? For example could I remove the usual circle that says whether it is selected or not? I would struggle to see how I could style it to look like the above. – CBreeze Oct 16 '17 at 09:42
Of course! You could style anything to look like anything, buttons are the most simple actually. Here is the control template:[Template](https://msdn.microsoft.com/fr-fr/library/ms751600(v=vs.85).aspx). – TomerAgmon1 Oct 16 '17 at 09:45
Carefully remove what you don't need. I can give you a complete example if needed – TomerAgmon1 Oct 16 '17 at 09:46
Wow that seems like a crazy amount of code just for me to change the background of a Button to white when it is clicked! There must be a simpler way... – CBreeze Oct 16 '17 at 09:50
Actually, there isn't. And believe me, I know what i'm talking about. Keeping that in mind, you should delete most of that code as I mentioned. Everything related to the VisualStatesManager as well – TomerAgmon1 Oct 16 '17 at 09:59
So basically, all of the bottom code snippets are brushes that are unrelevant to you. You only need the top code snippet. There, you only have the basic visual structure of the control and the Triggers that control the behavior. Not so much code in my opinion. – TomerAgmon1 Oct 16 '17 at 10:02

Multiple styles and content on one button

2 Answers2