0

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

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

我想将双动画的部分链接到我在矩形中使用的绑定，但它不断产生错误。我该怎么做这个效果？

我还想将其用作可重复使用的样式，我可以分发并保留在应用程序资源中。我见过其他人通过代码中的变通办法做到这一点，但不确定你是否可以在应用程序资源中做到这一点

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

4

1 回答 1

0

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>

于 2017-06-29T11:52:51.057 回答