'How can I access the Color from the SolidColorBrush of the Background in a ColorAnimation in XAML

I'm trying to do my own button style. I want to the MouseEnter and the MouseLeave event to use the color chosen for BorderBrush and Background respectively.

My style code is:

<Style x:Key="RoundButton" TargetType="Button">
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Margin="-1"
                                        CornerRadius="3"
                                        Background="{TemplateBinding Background}"
                                        BorderThickness="0.7"
                                        BorderBrush="{TemplateBinding BorderBrush}">
                            <ContentPresenter 
                                            Margin="-1"
                                            x:Name="MyContentPresenter"
                                            Content="{TemplateBinding Content}" 
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="{Binding (CHOSEN BORDER BRUSH)}" Duration="0:0:0.1" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="{Binding (CHOSEN BACKGROUND BURSH)}" Duration="0:0:0.1" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>

My usage is:

<Button Grid.Row="1"
                Style="{StaticResource RoundButton}"
                Height="30"
                HorizontalAlignment="Right"
                Margin="10"
                Background="Green"
                BorderBrush="ForestGreen">

I would like to do that using only XAML, without any converters, if possible.

wpfxaml


Solution 1:[1]

Please note that there are some limitations to using storyboards in a style, see Animate in a Style.

However, the easy solution would be to use the <ControlTemplate.Triggers> from the default Button template. Below, the "IsDefaulted" property is unchanged from the default Button template, Property="IsMouseOver" Value="true" is modified, and Property="IsMouseOver" Value="false" is added:

<ControlTemplate.Triggers>
  <Trigger Property="IsDefaulted" Value="true">
    <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
  </Trigger>
  <Trigger Property="IsMouseOver" Value="true">
   <Setter Property="Background" TargetName="border" Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"/>
   <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
 </Trigger>
 <Trigger Property="IsMouseOver" Value="false">
   <Setter Property="Background" TargetName="border" Value="{Binding Path=Background, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"/>
   <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
 </Trigger>
 ...

Or, try naming the brushes, see also How to: Animate a Property by Using a Storyboard and use a behavior, see XAML Behaviors for WPF. Use of behaviors is not shown here.

<Button.Background>
   <SolidColorBrush x:Name="backgroundBrush" Color="Green" />
</Button.Background>

...

<Button.BorderBrush>
  <SolidColorBrush x:Name="borderBrush" Color="ForestGreen" />
</Button.BorderBrush>

...

<Storyboard>
  <ColorAnimation Storyboard.TargetName="backgroundBrush" 
                  Storyboard.TargetProperty="Color" 
                  To="{Binding ElementName=borderBrush, Path=Color}" 
                  Duration="0:0:0.1" />
</Storyboard>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions