Search code examples
c#wpfxamldoubleanimation

WPF Style Storyboard To Another Objects Value

Here I have a button style in appliction resources

<Style x:Key="ClickableText" TargetType="{x:Type Button}">
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <StackPanel VerticalAlignment="Center">
                            <ContentPresenter x:Name="Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="White"/>                                
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

In the style I have added a underlining rectangle to the text in the button.

<Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>

I have binded the rectangles width to be the same width as the text so that it adds a underline effect.

I now want to add an effect so that when you hover the button the rectangle reveals by spliting out.

I have got this far by adding this under the trigger tag

<Trigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
             <DoubleAnimation Duration="0:0:0.300" From="0" To="{Binding ActualWidth, ElementName=Text}" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
        </Storyboard>
    </BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
    <BeginStoryboard>
         <Storyboard>
             <DoubleAnimation Duration="0:0:0.300" From="{Binding ActualWidth, ElementName=Text}" To="0" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
         </Storyboard>
    </BeginStoryboard>
</Trigger.ExitActions>

I want to link the to and from part of the double animation to the binding I used in the rectangle but it keeps producing errors. How can I do this effect?

I also want to use this as a reusable style I can distribute and keep in Application resources. I have seen other people do this through workarounds in code but am not sure if you can do this in application resources

Any help or guidance is greatly appriciated!!

Solution

  • LayoutTransform animation is Better for this effect. I would do this animation in this way: 

    <Style x:Key="ClickableText" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="MainBorder" Background="{TemplateBinding Background}">
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="2"/>
                    </Grid.RowDefinitions>
                    <ContentPresenter x:Name="Text" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Rectangle x:Name="Rect1" Grid.Row="1" Height="2" Width="{Binding ElementName=Text, Path=ActualWidth}" Fill="LightGray">
                        <Rectangle.LayoutTransform>
                            <ScaleTransform ScaleX="0"/>
                        </Rectangle.LayoutTransform>
                    </Rectangle>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" TargetName="MainBorder" Value="White"/>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="1" To="0" Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>