2011-08-15 9 views
0

からプロパティに影響を与えるために:シルバー - 私は次のコードを持っているかvisualSTATEの

<Style x:Key="GoButton" TargetType="Button"> 
    <Setter Property="Background" Value="#FF2B832C"/> 
    <Setter Property="Foreground" Value="#FFfdf7bd"/> 
    <Setter Property="FontSize" Value="30" /> 
    <Setter Property="Padding" Value="3"/> 
    <Setter Property="BorderThickness" Value="3"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
       <GradientStop Color="#4d9e41" Offset="0" /> 
       <GradientStop Color="#294c22" Offset="1" /> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="5"> 
         <Grid Background="{TemplateBinding Background}" Margin="0"> 
          <Border x:Name="BackgroundAnimation" Background="#FF448DCA" CornerRadius="5" Opacity="0"/> 
          <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5"> 
           <Rectangle.Fill> 
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0,0"> 
             <GradientStop Color="#66b04d" Offset="0"/> 
             <GradientStop Color="#66b04d" Offset="0.375"/> 
             <GradientStop Color="#2d822d" Offset="0.625"/> 
             <GradientStop Color="#2d822d" Offset="1"/> 
            </LinearGradientBrush> 
           </Rectangle.Fill> 
          </Rectangle> 
         </Grid> 
        </Border> 
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="6" RadiusX="6"/> 
        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="5" RadiusX="5" Stroke="#FF6DBDD1" StrokeThickness="1"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

は私がときユーザーがボタンをマウスオーバーのFontSizeを変更したいです。

<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" /> 

は、どのようにそれを正しく行うには:しかし、このコードは、それは私が文字列を削除した場合に動作しますが、私のアニメーションなしで、動作しませんか?

答えて

3

私は

<ContentControl x:Name="nestedContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" 
       Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 

であなたのテンプレートに<ContentPresenter>を交換し、その後nestedContentControlにあなたのマウスオーバーアニメーションのStoryboard.TargetNameを設定することで動作するようにあなたのアニメーションを得ました。

この問題は、Storyboard.TargetNameの値を指定しているようです。テンプレートが適用されるコントロールの名前(このテンプレートを使用するボタン)にアクセスできますが、ストーリーボードはテンプレートコントロールにアクセスできないようです。その代わりに、テンプレート内に別のContentControl(Buttonはそれ自体ContentControl)をネストして使用します。

ただし、別のContentControlを使用することには欠点があります。使用していたフォアグラウンドカラーをピックアップするために、Foreground="{TemplateBinding Foreground}"プロパティを追加する必要がありました。他のどのプロパティを使用する必要があるかに応じて、このようなパススルーバインディングを追加する必要があるかもしれません。

Focused VisualStateにもアニメーションがあることに注意してください。このアニメーションは、TargetNameを指定していないため動作しません。私はあなたが何を達成しようとしているのか分からないので、これについて何を提案するべきかわかりません。

最後に、私はこの質問に答える一方で、templated-parentオブジェクトのプロパティをアニメートすることについてもa similar questionが見つかりました。その場合、ソリューションはコードビハインドでアニメーションを繋ぐように見えます。

関連する問題