CODEWITHSUNDEEP
c#wpfwpf-style
SZT
SZT

Reputation: 1966

WPF changing button background on click

I have a set of buttons in a side panel. I want to change the background of the button that has been clicked. I have tried to do that using style.trigger and the only property I could think of is IsPressed, but that doesn't help that much since it changes the background for a second (till the button is pressed [duh]).

This is the code I've tried:

<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
    <Setter Property="Background" Value="SlateGray" />
    <Setter Property="Foreground" Value="White"></Setter>
</Trigger>
</Style.Triggers>

Another way I could think of was creating individual style for each button with a datatrigger since I've a property that changes with the selection of the button, but that seems like a overkill. Any idea how can I highlight a button that has been clicked?

Upvotes: 5

Views: 45842

Answers (2)

Sam Keshri
Sam Keshri

Reputation: 1

<UserControl.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Green"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid RenderTransformOrigin="0.578,0.503">
    <Button Width="100" Height="50" Margin="265,265,435,135"/>
    <Button Height="50" Margin="400,202,302,198"/>
</Grid>

Upvotes: 0

Maximus
Maximus

Reputation: 3448

This kind of trigger runs when your condition is fulfilled and then the effect disappears. In order to set for good instead of a while take a look at this

<Button Content="Content" Background="Red">
        <Button.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="CadetBlue"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

Since IsPressed is not a RoutedEvent you can use this

 <Button Content="Content" Background="Red">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="CadetBlue"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Upvotes: 13

Related Questions