如何从多个触发器中为ScaleTransform设置动画?

时间:2014-01-03 10:21:21

标签: c# wpf xaml animation

首先:我只是想开始使用WPF并稍微使用它,所以事情可能不是完全最优的,我对任何建议的改进感到高兴。

我正在为我的按钮设置以下样式和模板,并尝试在鼠标悬停时将它们放大,而对于点击则更小,这几乎可以正常工作:

    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="Width" Value="80" />
        <Setter Property="Height" Value="80" />
        <Setter Property="Margin" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Name="ButtonGrid"  Width="{TemplateBinding Width}" 
                          Height="{TemplateBinding Height}" ClipToBounds="True" RenderTransformOrigin="0.5, 0.5">

                        <Grid.RenderTransform>
                            <ScaleTransform></ScaleTransform>
                        </Grid.RenderTransform>

                        <Viewbox Stretch="Uniform">
                            <Canvas Name="svg2" Width="100" Height="100">
                                <Canvas.RenderTransform>
                                    <TranslateTransform X="-322.04954" Y="-476.16966"/>
                                </Canvas.RenderTransform>
                                <Path Name="path2985" Fill="#FFFFFFFF" StrokeThickness="2" Stroke="#FFDB2325" StrokeMiterLimit="4">
                                    <Path.Data>
                                        <PathGeometry Figures="m 166.96292 92.089554 c 0 43.240226 -35.05313 78.293346 -78.293349 78.293346 -43.240223 0 -78.29335 -35.05312 -78.29335 -78.293346 0 -43.240224 35.053127 -78.29335 78.29335 -78.29335 43.240219 0 78.293349 35.053126 78.293349 78.29335 z" FillRule="NonZero"/>
                                    </Path.Data>
                                    <Path.RenderTransform>
                                        <MatrixTransform Matrix="0.6305699 0 0 0.6305699 316.13718 468.10076"/>
                                    </Path.RenderTransform>
                                </Path>
                                <Path Name="path2987" Fill="#FFDB2325">
                                    <Path.Data>
                                        <PathGeometry Figures="m 145.26718 89.259674 a 61.314068 61.314068 0 1 1 -122.628138 0 61.314068 61.314068 0 1 1 122.628138 0 z" FillRule="NonZero"/>
                                    </Path.Data>
                                    <Path.RenderTransform>
                                        <MatrixTransform Matrix="0.63076923 0 0 0.63076923 319.0945 469.8674"/>
                                    </Path.RenderTransform>
                                </Path>
                            </Canvas>
                        </Viewbox>

                        <!-- Present Content (text) of the button. -->
                        <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter x:Name="myContentPresenter" Margin="20" 
      Content="{TemplateBinding  Content}" 
      TextBlock.Foreground="White" />
                        </DockPanel>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="1.08"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                            To="1.08" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="1.00"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                            To="1.00" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="0.95"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                            To="0.95" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="1.00"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                            Storyboard.TargetName="ButtonGrid" 
                                            Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                            To="1.00" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

问题是,当我单击一个按钮时,MouseOver Trigger不再执行或者缩放不起作用。因此按钮不再在MouseOver上放大。

非常感谢提示:)

1 个答案:

答案 0 :(得分:0)

将IsMouseOver触发器更改为MultiTrigger并将IsPressed触发器移动到IsMouseOver多触发器上方,如下所示。

   <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="0.95"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="0.95" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="1.08"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="1.08" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsPressed" Value="False"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard >
                                    <Storyboard >
                                        <DoubleAnimation 
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="1.08"  Duration="0:0:0.05" />
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="1.08" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)"
                                        To="1.00"  Duration="0:0:0.05" />
                                        <DoubleAnimation 
                                        Storyboard.TargetName="ButtonGrid" 
                                        Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)" 
                                        To="1.00" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>                        
                    </ControlTemplate.Triggers>