WPF Style Storyboard To Another Objects Value

Question

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!!

Haven't read the whole question, but basically `Binding` is very limited on `StoryBoard` elements, typically fails and workarounds exist only for some of the properties. — grek40, Jun 29 '17 at 11:38
Possible duplicate of [WPF animation: binding to the "To" attribute of storyboard animation](https://stackoverflow.com/questions/2186933/wpf-animation-binding-to-the-to-attribute-of-storyboard-animation) — grek40, Jun 29 '17 at 11:40

Valera Scherbakov · Accepted Answer · 2017-06-29T12:11:15.210

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>

WPF Style Storyboard To Another Objects Value

1 Answers1