CODEWITHSUNDEEP
c#wpfxaml
thesma
thesma

Reputation: 93

How to change the color of a button after hover and click in xaml

Below is what I have written to change my button color when I hover and click. It works. I want the new color to remain after I have clicked and not return to the former color. I tried using the click event but it didn't work. Is there any other way to do it?

<Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="bdr_main"  CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC" >
            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>

            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>
</Button.Template>

Upvotes: 2

Views: 1762

Answers (1)

King King
King King

Reputation: 63387

Setting it normally using Trigger won't work because we need some persistent state to keep the effect. But IsMouseOver and IsPressed are both non-persistent states. However you can use some animation to keep the end value (hence keeping the effect). To prevent the original Border from being polluted with the animation source, you can add one more Border (and animate this Border instead). Both the Borders are contained in the same Grid, so they cover each other. This kind of technique is used very commonly in WPF styling and templating. Here is an example of the code:

<Button>
   <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">                
            <Grid>
              <Border x:Name="bdr_main" CornerRadius="5" BorderThickness="2" 
                      BorderBrush="#FFBC89BC" Background="White">  
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
              </Border>
              <Border Name="b2" Background="#FF603276" Opacity="0" CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC">
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
                </Trigger>
                <EventTrigger RoutedEvent="Button.Click">
                   <BeginStoryboard>
                      <Storyboard>
                         <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                      </Storyboard>
                   </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

As Flat Eric commented, you may want to use some ToggleButton instead. It has a property called IsChecked which has a persistent state. Clicking will toggle that property.

<ToggleButton>
   <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border x:Name="bdr_main" Background="White" CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC" >
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>

                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Note that the Trigger in the code above listens to IsChecked instead of IsPressed.

Upvotes: 1

Related Questions