WPFスタイルのストーリーボードバリュー

Question

は、ここで私はappliction資源私はボタンのテキストに下線矩形を追加したスタイルで

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

私は、矩形で使用される結合にすると、二重アニメーションの一部からリンクしたいが、それはエラーを生成し続けるの下にこれを追加することで、これを持っています。この効果をどうやってすることができますか？

私はこれを再利用可能なスタイルとして使用したいので、私は配布してアプリケーションリソースに保管することができます。コード内の回避策によって他の人がこれを行うのを見たことがありますが、アプリケーションリソースでこれを行うことができるかどうかはわかりません。

ヘルプやガイダンスが大幅にアップされました！

Answer 1

レイアウトトランスフォームアニメーションは、この効果の方が優れています。 私は、このように、このアニメーションを行うだろう：

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