WPF 样式情节提要到另一个对象值

Question

这里我在应用资源中有一个按钮样式

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

在样式中，我在按钮中的文本中添加了一个带下划线的矩形。

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

我已将矩形宽度绑定为与文本宽度相同，以便添加下划线效果。

我现在想添加一个效果，当您将鼠标悬停在按钮上时，矩形会分开显示。

通过在触发器标签下添加它，我已经做到了这一点

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

我想 link 双动画的一部分到我在矩形中使用的绑定，但它一直产生错误。这个效果要怎么做？

我也想将其用作可重用的样式，我可以分发并保存在应用程序资源中。我已经看到其他人通过代码中的变通方法来做到这一点，但我不确定您是否可以在应用程序资源中做到这一点

非常感谢任何帮助或指导！！

Answer 1

LayoutTransform 动画效果更好。我会用这种方式做这个动画：

<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 样式情节提要到另一个对象值

WPF Style Storyboard To Another Objects Value

c#

wpf

xaml

doubleanimation