当前位置： 文江博客话题详情

如何将 XAML 故事板动画添加到 XBAP 中的完整 WPF 自定义控件？

发布于 2024-07-08 09:59:07 字数 12603 浏览 7 评论 0原文

我们正在为 XBAP 应用程序创建自定义 WPF 控件（不是用户控件），并且希望添加故事板动画，以便当鼠标悬停在控件上时将控件缩放为其原始大小的 110%。 我们使用 Blend 来创建情节提要，它编译得很好……但是，当我们运行时，它的动画速度并没有达到 110%。 我已经阅读过一些文章，指出不能在 XAML 中为自定义控件制作故事板动画。 有谁知道如何在 XAML 中完全对自定义控件执行此操作？

以下是我们的自定义控件的 XAML：

    <Style TargetType="{x:Type controls:ExitButton}">
    <Style.Resources>
        <Storyboard x:Key="OnMouseEnter">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}" x:Name="OnMouseEnter_BeginStoryboard"/>
            </Trigger.EnterActions>
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="4"/>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="8"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
    <Setter Property="ToolTip" Value="Exit this Application" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ExitButton}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <Viewbox x:Name="ControlViewBox">
                        <Grid x:Name="ExitApplication" Width="35" Height="50">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5" />
                                <RowDefinition Height="25" />
                                <RowDefinition Height="15" />
                            </Grid.RowDefinitions>

                            <Viewbox Grid.Row="1" Width="25" x:Name="ImageViewBox">
                                <Canvas Width="23" Height="23" HorizontalAlignment="Center">
                                    <Path Width="22.9708" Height="22.9703" Canvas.Left="4.06802e-005" Canvas.Top="0" Stretch="Fill" Data="F1 M 16.1087,1.25732C 16.1087,1.25732 12.4594,4.90935 11.4834,5.88135L 11.4834,5.88135C 10.5141,4.91203 6.86068,1.25871 6.86068,1.25871L 6.86068,1.25871C 5.18604,-0.416016 2.93538,-0.42131 1.25407,1.26131L 1.25407,1.26131C -0.417969,2.93335 -0.417969,5.18799 1.25407,6.86272L 1.25407,6.86272C 1.25407,6.86272 4.90739,10.5146 5.87939,11.4866L 5.87939,11.4866C 4.91138,12.4561 1.25806,16.1067 1.25806,16.1067L 1.25806,16.1067C -0.415283,17.7827 -0.415283,20.0374 1.26204,21.7134L 1.26204,21.7134C 2.9327,23.388 5.18604,23.3853 6.86068,21.7107L 6.86068,21.7107C 6.86068,21.7107 10.5114,18.0614 11.4834,17.0894L 11.4834,17.0894C 12.4527,18.0614 16.1087,21.7174 16.1087,21.7174L 16.1087,21.7174C 17.7861,23.3893 20.0367,23.388 21.7113,21.7134L 21.7113,21.7134C 23.3901,20.0347 23.3887,17.7853 21.7167,16.112L 21.7167,16.112C 21.7167,16.112 18.0607,12.4561 17.0887,11.4841L 17.0887,11.4841C 18.0607,10.5107 21.714,6.86003 21.714,6.86003L 21.714,6.86003C 23.3887,5.18269 23.3901,2.93335 21.7167,1.25732L 21.7167,1.25732C 20.878,0.418701 19.8953,0 18.9141,0L 18.9141,0C 17.9314,0 16.9487,0.418701 16.1087,1.25732 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.945183,0.945154" EndPoint="0.0547729,0.0547262">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFB12702" Offset="0"/>
                                                    <GradientStop Color="#FFD02F00" Offset="0.093399"/>
                                                    <GradientStop Color="#FFE87A5F" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="9.9987" Height="6.8707" Canvas.Left="11.246" Canvas.Top="0.665356" Stretch="Fill" Data="F1 M 18.9114,0.665359C 18.0847,0.663986 17.2727,1.03606 16.5807,1.72803L 11.9567,6.35466L 11.246,7.06404L 11.7194,7.53606L 12.4287,6.82666L 17.0567,2.20134C 18.262,1.03606 19.5647,1.03467 20.7727,2.20271L 21.2447,1.72932C 20.5553,1.03865 19.7434,0.665359 18.9194,0.665359L 18.9114,0.665359 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.616568,0.713077" EndPoint="1.02849,0.713077">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.616568" CenterY="0.713077" AngleX="21.0093" AngleY="0"/>
                                                        <RotateTransform CenterX="0.616568" CenterY="0.713077" Angle="235.505"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="5.72795" Height="5.72534" Canvas.Left="0.660726" Canvas.Top="0.665359" Stretch="Fill" Data="F1 M 1.72607,1.73332C 1.03402,2.42268 0.662028,3.23601 0.660726,4.05998L 0.660726,4.05998C 0.662028,4.88802 1.0367,5.69865 1.73136,6.3907L 2.20207,5.91731C 1.0367,4.7093 1.0367,3.40935 2.19938,2.20671L 2.19938,2.20671C 3.40739,1.03735 4.70874,1.03606 5.91675,2.20532L 6.38867,1.73071C 5.69401,1.03735 4.88338,0.665359 4.05672,0.665359L 4.05672,0.665359C 3.22868,0.665359 2.41805,1.03735 1.72607,1.73332 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.593564,0.59328" EndPoint="1.16939,0.59328">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.593564" CenterY="0.59328" AngleX="0.0259795" AngleY="0"/>
                                                        <RotateTransform CenterX="0.593564" CenterY="0.59328" Angle="225.013"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="6.86931" Height="9.99202" Canvas.Left="0.66471" Canvas.Top="11.2507" Stretch="Fill" Data="F1 M 6.3527,11.9561L 1.73136,16.5827C 1.0367,17.2734 0.663411,18.0867 0.664714,18.9106L 0.664714,18.9106C 0.663411,19.7374 1.03939,20.5507 1.73275,21.2427L 2.20605,20.7707L 2.20467,20.7707C 1.0367,19.5614 1.0367,18.2613 2.20207,17.0547L 6.82739,12.4321L 7.53402,11.7227L 7.06201,11.2507L 6.3527,11.9561 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.713103,0.616728" EndPoint="1.12533,0.616728">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.713103" CenterY="0.616728" AngleX="-20.9846" AngleY="0"/>
                                                        <RotateTransform CenterX="0.713103" CenterY="0.616728" Angle="214.508"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Canvas>
                            </Viewbox>
                            <TextBlock Grid.Row="2" Text="exit" HorizontalAlignment="Center" FontFamily="Calibri" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" FontSize="18">
                            <TextBlock.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                    </TransformGroup>
                                </TextBlock.RenderTransform></TextBlock>
                        </Grid>
                    </Viewbox>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </Setter.Value>
    </Setter>
</Style>
原文

We are creating custom WPF controls (not user controls) for an XBAP application and we would like to add a storyboard animation to scale the control to be 110% of its original size when the mouse hovers over it. We've used Blend to create the storyboard and it compiles just fine...however, when we run, it does not animate up to 110%. I've read bits and pieces here and there that you can't do storyboard animations in XAML for custom controls. Does anyone know how to do this for custom controls fully in XAML?

Here is the XAML for our custom control:

    <Style TargetType="{x:Type controls:ExitButton}">
    <Style.Resources>
        <Storyboard x:Key="OnMouseEnter">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}" x:Name="OnMouseEnter_BeginStoryboard"/>
            </Trigger.EnterActions>
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="4"/>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="8"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
    <Setter Property="ToolTip" Value="Exit this Application" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ExitButton}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <Viewbox x:Name="ControlViewBox">
                        <Grid x:Name="ExitApplication" Width="35" Height="50">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5" />
                                <RowDefinition Height="25" />
                                <RowDefinition Height="15" />
                            </Grid.RowDefinitions>

                            <Viewbox Grid.Row="1" Width="25" x:Name="ImageViewBox">
                                <Canvas Width="23" Height="23" HorizontalAlignment="Center">
                                    <Path Width="22.9708" Height="22.9703" Canvas.Left="4.06802e-005" Canvas.Top="0" Stretch="Fill" Data="F1 M 16.1087,1.25732C 16.1087,1.25732 12.4594,4.90935 11.4834,5.88135L 11.4834,5.88135C 10.5141,4.91203 6.86068,1.25871 6.86068,1.25871L 6.86068,1.25871C 5.18604,-0.416016 2.93538,-0.42131 1.25407,1.26131L 1.25407,1.26131C -0.417969,2.93335 -0.417969,5.18799 1.25407,6.86272L 1.25407,6.86272C 1.25407,6.86272 4.90739,10.5146 5.87939,11.4866L 5.87939,11.4866C 4.91138,12.4561 1.25806,16.1067 1.25806,16.1067L 1.25806,16.1067C -0.415283,17.7827 -0.415283,20.0374 1.26204,21.7134L 1.26204,21.7134C 2.9327,23.388 5.18604,23.3853 6.86068,21.7107L 6.86068,21.7107C 6.86068,21.7107 10.5114,18.0614 11.4834,17.0894L 11.4834,17.0894C 12.4527,18.0614 16.1087,21.7174 16.1087,21.7174L 16.1087,21.7174C 17.7861,23.3893 20.0367,23.388 21.7113,21.7134L 21.7113,21.7134C 23.3901,20.0347 23.3887,17.7853 21.7167,16.112L 21.7167,16.112C 21.7167,16.112 18.0607,12.4561 17.0887,11.4841L 17.0887,11.4841C 18.0607,10.5107 21.714,6.86003 21.714,6.86003L 21.714,6.86003C 23.3887,5.18269 23.3901,2.93335 21.7167,1.25732L 21.7167,1.25732C 20.878,0.418701 19.8953,0 18.9141,0L 18.9141,0C 17.9314,0 16.9487,0.418701 16.1087,1.25732 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.945183,0.945154" EndPoint="0.0547729,0.0547262">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFB12702" Offset="0"/>
                                                    <GradientStop Color="#FFD02F00" Offset="0.093399"/>
                                                    <GradientStop Color="#FFE87A5F" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="9.9987" Height="6.8707" Canvas.Left="11.246" Canvas.Top="0.665356" Stretch="Fill" Data="F1 M 18.9114,0.665359C 18.0847,0.663986 17.2727,1.03606 16.5807,1.72803L 11.9567,6.35466L 11.246,7.06404L 11.7194,7.53606L 12.4287,6.82666L 17.0567,2.20134C 18.262,1.03606 19.5647,1.03467 20.7727,2.20271L 21.2447,1.72932C 20.5553,1.03865 19.7434,0.665359 18.9194,0.665359L 18.9114,0.665359 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.616568,0.713077" EndPoint="1.02849,0.713077">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.616568" CenterY="0.713077" AngleX="21.0093" AngleY="0"/>
                                                        <RotateTransform CenterX="0.616568" CenterY="0.713077" Angle="235.505"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="5.72795" Height="5.72534" Canvas.Left="0.660726" Canvas.Top="0.665359" Stretch="Fill" Data="F1 M 1.72607,1.73332C 1.03402,2.42268 0.662028,3.23601 0.660726,4.05998L 0.660726,4.05998C 0.662028,4.88802 1.0367,5.69865 1.73136,6.3907L 2.20207,5.91731C 1.0367,4.7093 1.0367,3.40935 2.19938,2.20671L 2.19938,2.20671C 3.40739,1.03735 4.70874,1.03606 5.91675,2.20532L 6.38867,1.73071C 5.69401,1.03735 4.88338,0.665359 4.05672,0.665359L 4.05672,0.665359C 3.22868,0.665359 2.41805,1.03735 1.72607,1.73332 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.593564,0.59328" EndPoint="1.16939,0.59328">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.593564" CenterY="0.59328" AngleX="0.0259795" AngleY="0"/>
                                                        <RotateTransform CenterX="0.593564" CenterY="0.59328" Angle="225.013"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="6.86931" Height="9.99202" Canvas.Left="0.66471" Canvas.Top="11.2507" Stretch="Fill" Data="F1 M 6.3527,11.9561L 1.73136,16.5827C 1.0367,17.2734 0.663411,18.0867 0.664714,18.9106L 0.664714,18.9106C 0.663411,19.7374 1.03939,20.5507 1.73275,21.2427L 2.20605,20.7707L 2.20467,20.7707C 1.0367,19.5614 1.0367,18.2613 2.20207,17.0547L 6.82739,12.4321L 7.53402,11.7227L 7.06201,11.2507L 6.3527,11.9561 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.713103,0.616728" EndPoint="1.12533,0.616728">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.713103" CenterY="0.616728" AngleX="-20.9846" AngleY="0"/>
                                                        <RotateTransform CenterX="0.713103" CenterY="0.616728" Angle="214.508"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Canvas>
                            </Viewbox>
                            <TextBlock Grid.Row="2" Text="exit" HorizontalAlignment="Center" FontFamily="Calibri" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" FontSize="18">
                            <TextBlock.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                    </TransformGroup>
                                </TextBlock.RenderTransform></TextBlock>
                        </Grid>
                    </Viewbox>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </Setter.Value>
    </Setter>
</Style>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

谎言月老 2024-07-15 09:59:07

有可能......我只是认为你需要移动一些东西。 特别是，您需要将 Storyboard 移至 ControlTemplate.Resources 部分...并将触发器移至 ControlTemplate.Triggers 部分。

我实际上构建了一个快速示例来尝试此操作...并且它作品。 这里是：

<Style TargetType="{x:Type controls:ExitButton}">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
                <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ExitButton}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="OnMouseEnter">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
                            </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <Viewbox x:Name="ControlViewBox">
                        <Grid x:Name="ExitApplication" Width="35" Height="50">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5" />
                                <RowDefinition Height="25" />
                                <RowDefinition Height="15" />
                            </Grid.RowDefinitions>

                            <Viewbox Grid.Row="1" Width="25" x:Name="ImageViewBox">
                                <Canvas Width="23" Height="23" HorizontalAlignment="Center">
                                    <Path Width="22.9708" Height="22.9703" Canvas.Left="4.06802e-005" Canvas.Top="0" Stretch="Fill" Data="F1 M 16.1087,1.25732C 16.1087,1.25732 12.4594,4.90935 11.4834,5.88135L 11.4834,5.88135C 10.5141,4.91203 6.86068,1.25871 6.86068,1.25871L 6.86068,1.25871C 5.18604,-0.416016 2.93538,-0.42131 1.25407,1.26131L 1.25407,1.26131C -0.417969,2.93335 -0.417969,5.18799 1.25407,6.86272L 1.25407,6.86272C 1.25407,6.86272 4.90739,10.5146 5.87939,11.4866L 5.87939,11.4866C 4.91138,12.4561 1.25806,16.1067 1.25806,16.1067L 1.25806,16.1067C -0.415283,17.7827 -0.415283,20.0374 1.26204,21.7134L 1.26204,21.7134C 2.9327,23.388 5.18604,23.3853 6.86068,21.7107L 6.86068,21.7107C 6.86068,21.7107 10.5114,18.0614 11.4834,17.0894L 11.4834,17.0894C 12.4527,18.0614 16.1087,21.7174 16.1087,21.7174L 16.1087,21.7174C 17.7861,23.3893 20.0367,23.388 21.7113,21.7134L 21.7113,21.7134C 23.3901,20.0347 23.3887,17.7853 21.7167,16.112L 21.7167,16.112C 21.7167,16.112 18.0607,12.4561 17.0887,11.4841L 17.0887,11.4841C 18.0607,10.5107 21.714,6.86003 21.714,6.86003L 21.714,6.86003C 23.3887,5.18269 23.3901,2.93335 21.7167,1.25732L 21.7167,1.25732C 20.878,0.418701 19.8953,0 18.9141,0L 18.9141,0C 17.9314,0 16.9487,0.418701 16.1087,1.25732 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.945183,0.945154" EndPoint="0.0547729,0.0547262">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFB12702" Offset="0"/>
                                                    <GradientStop Color="#FFD02F00" Offset="0.093399"/>
                                                    <GradientStop Color="#FFE87A5F" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="9.9987" Height="6.8707" Canvas.Left="11.246" Canvas.Top="0.665356" Stretch="Fill" Data="F1 M 18.9114,0.665359C 18.0847,0.663986 17.2727,1.03606 16.5807,1.72803L 11.9567,6.35466L 11.246,7.06404L 11.7194,7.53606L 12.4287,6.82666L 17.0567,2.20134C 18.262,1.03606 19.5647,1.03467 20.7727,2.20271L 21.2447,1.72932C 20.5553,1.03865 19.7434,0.665359 18.9194,0.665359L 18.9114,0.665359 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.616568,0.713077" EndPoint="1.02849,0.713077">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.616568" CenterY="0.713077" AngleX="21.0093" AngleY="0"/>
                                                        <RotateTransform CenterX="0.616568" CenterY="0.713077" Angle="235.505"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="5.72795" Height="5.72534" Canvas.Left="0.660726" Canvas.Top="0.665359" Stretch="Fill" Data="F1 M 1.72607,1.73332C 1.03402,2.42268 0.662028,3.23601 0.660726,4.05998L 0.660726,4.05998C 0.662028,4.88802 1.0367,5.69865 1.73136,6.3907L 2.20207,5.91731C 1.0367,4.7093 1.0367,3.40935 2.19938,2.20671L 2.19938,2.20671C 3.40739,1.03735 4.70874,1.03606 5.91675,2.20532L 6.38867,1.73071C 5.69401,1.03735 4.88338,0.665359 4.05672,0.665359L 4.05672,0.665359C 3.22868,0.665359 2.41805,1.03735 1.72607,1.73332 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.593564,0.59328" EndPoint="1.16939,0.59328">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.593564" CenterY="0.59328" AngleX="0.0259795" AngleY="0"/>
                                                        <RotateTransform CenterX="0.593564" CenterY="0.59328" Angle="225.013"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="6.86931" Height="9.99202" Canvas.Left="0.66471" Canvas.Top="11.2507" Stretch="Fill" Data="F1 M 6.3527,11.9561L 1.73136,16.5827C 1.0367,17.2734 0.663411,18.0867 0.664714,18.9106L 0.664714,18.9106C 0.663411,19.7374 1.03939,20.5507 1.73275,21.2427L 2.20605,20.7707L 2.20467,20.7707C 1.0367,19.5614 1.0367,18.2613 2.20207,17.0547L 6.82739,12.4321L 7.53402,11.7227L 7.06201,11.2507L 6.3527,11.9561 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.713103,0.616728" EndPoint="1.12533,0.616728">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.713103" CenterY="0.616728" AngleX="-20.9846" AngleY="0"/>
                                                        <RotateTransform CenterX="0.713103" CenterY="0.616728" Angle="214.508"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Canvas>
                            </Viewbox>
                            <TextBlock Grid.Row="2" Text="exit" HorizontalAlignment="Center" FontFamily="Calibri" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" FontSize="18">
                            <TextBlock.RenderTransform>
                                        <TransformGroup>
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                <RotateTransform Angle="0"/>
                                                <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                </TextBlock.RenderTransform></TextBlock>
                        </Grid>
                    </Viewbox>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}" x:Name="OnMouseEnter_BeginStoryboard"/>
                        </Trigger.EnterActions>
                        <Setter Property="BitmapEffect">
                            <Setter.Value>
                                <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="4"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="BitmapEffect">
                            <Setter.Value>
                                <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="8"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It is possible ... I just think you need to move some stuff around. In particular, you need to move your Storyboard into the ControlTemplate.Resources section ... and your triggers into the ControlTemplate.Triggers section.

I actually built a quick sample to try this out ... and it works. Here it is:

<Style TargetType="{x:Type controls:ExitButton}">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
                <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ExitButton}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="OnMouseEnter">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
                            </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <Viewbox x:Name="ControlViewBox">
                        <Grid x:Name="ExitApplication" Width="35" Height="50">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5" />
                                <RowDefinition Height="25" />
                                <RowDefinition Height="15" />
                            </Grid.RowDefinitions>

                            <Viewbox Grid.Row="1" Width="25" x:Name="ImageViewBox">
                                <Canvas Width="23" Height="23" HorizontalAlignment="Center">
                                    <Path Width="22.9708" Height="22.9703" Canvas.Left="4.06802e-005" Canvas.Top="0" Stretch="Fill" Data="F1 M 16.1087,1.25732C 16.1087,1.25732 12.4594,4.90935 11.4834,5.88135L 11.4834,5.88135C 10.5141,4.91203 6.86068,1.25871 6.86068,1.25871L 6.86068,1.25871C 5.18604,-0.416016 2.93538,-0.42131 1.25407,1.26131L 1.25407,1.26131C -0.417969,2.93335 -0.417969,5.18799 1.25407,6.86272L 1.25407,6.86272C 1.25407,6.86272 4.90739,10.5146 5.87939,11.4866L 5.87939,11.4866C 4.91138,12.4561 1.25806,16.1067 1.25806,16.1067L 1.25806,16.1067C -0.415283,17.7827 -0.415283,20.0374 1.26204,21.7134L 1.26204,21.7134C 2.9327,23.388 5.18604,23.3853 6.86068,21.7107L 6.86068,21.7107C 6.86068,21.7107 10.5114,18.0614 11.4834,17.0894L 11.4834,17.0894C 12.4527,18.0614 16.1087,21.7174 16.1087,21.7174L 16.1087,21.7174C 17.7861,23.3893 20.0367,23.388 21.7113,21.7134L 21.7113,21.7134C 23.3901,20.0347 23.3887,17.7853 21.7167,16.112L 21.7167,16.112C 21.7167,16.112 18.0607,12.4561 17.0887,11.4841L 17.0887,11.4841C 18.0607,10.5107 21.714,6.86003 21.714,6.86003L 21.714,6.86003C 23.3887,5.18269 23.3901,2.93335 21.7167,1.25732L 21.7167,1.25732C 20.878,0.418701 19.8953,0 18.9141,0L 18.9141,0C 17.9314,0 16.9487,0.418701 16.1087,1.25732 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.945183,0.945154" EndPoint="0.0547729,0.0547262">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFB12702" Offset="0"/>
                                                    <GradientStop Color="#FFD02F00" Offset="0.093399"/>
                                                    <GradientStop Color="#FFE87A5F" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="9.9987" Height="6.8707" Canvas.Left="11.246" Canvas.Top="0.665356" Stretch="Fill" Data="F1 M 18.9114,0.665359C 18.0847,0.663986 17.2727,1.03606 16.5807,1.72803L 11.9567,6.35466L 11.246,7.06404L 11.7194,7.53606L 12.4287,6.82666L 17.0567,2.20134C 18.262,1.03606 19.5647,1.03467 20.7727,2.20271L 21.2447,1.72932C 20.5553,1.03865 19.7434,0.665359 18.9194,0.665359L 18.9114,0.665359 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.616568,0.713077" EndPoint="1.02849,0.713077">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.616568" CenterY="0.713077" AngleX="21.0093" AngleY="0"/>
                                                        <RotateTransform CenterX="0.616568" CenterY="0.713077" Angle="235.505"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="5.72795" Height="5.72534" Canvas.Left="0.660726" Canvas.Top="0.665359" Stretch="Fill" Data="F1 M 1.72607,1.73332C 1.03402,2.42268 0.662028,3.23601 0.660726,4.05998L 0.660726,4.05998C 0.662028,4.88802 1.0367,5.69865 1.73136,6.3907L 2.20207,5.91731C 1.0367,4.7093 1.0367,3.40935 2.19938,2.20671L 2.19938,2.20671C 3.40739,1.03735 4.70874,1.03606 5.91675,2.20532L 6.38867,1.73071C 5.69401,1.03735 4.88338,0.665359 4.05672,0.665359L 4.05672,0.665359C 3.22868,0.665359 2.41805,1.03735 1.72607,1.73332 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.593564,0.59328" EndPoint="1.16939,0.59328">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.593564" CenterY="0.59328" AngleX="0.0259795" AngleY="0"/>
                                                        <RotateTransform CenterX="0.593564" CenterY="0.59328" Angle="225.013"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Width="6.86931" Height="9.99202" Canvas.Left="0.66471" Canvas.Top="11.2507" Stretch="Fill" Data="F1 M 6.3527,11.9561L 1.73136,16.5827C 1.0367,17.2734 0.663411,18.0867 0.664714,18.9106L 0.664714,18.9106C 0.663411,19.7374 1.03939,20.5507 1.73275,21.2427L 2.20605,20.7707L 2.20467,20.7707C 1.0367,19.5614 1.0367,18.2613 2.20207,17.0547L 6.82739,12.4321L 7.53402,11.7227L 7.06201,11.2507L 6.3527,11.9561 Z ">
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.713103,0.616728" EndPoint="1.12533,0.616728">
                                                <LinearGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <SkewTransform CenterX="0.713103" CenterY="0.616728" AngleX="-20.9846" AngleY="0"/>
                                                        <RotateTransform CenterX="0.713103" CenterY="0.616728" Angle="214.508"/>
                                                    </TransformGroup>
                                                </LinearGradientBrush.RelativeTransform>
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="#FFC12900" Offset="0"/>
                                                    <GradientStop Color="#FFFFE4DE" Offset="1"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Canvas>
                            </Viewbox>
                            <TextBlock Grid.Row="2" Text="exit" HorizontalAlignment="Center" FontFamily="Calibri" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" FontSize="18">
                            <TextBlock.RenderTransform>
                                        <TransformGroup>
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                <RotateTransform Angle="0"/>
                                                <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                </TextBlock.RenderTransform></TextBlock>
                        </Grid>
                    </Viewbox>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}" x:Name="OnMouseEnter_BeginStoryboard"/>
                        </Trigger.EnterActions>
                        <Setter Property="BitmapEffect">
                            <Setter.Value>
                                <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="4"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="BitmapEffect">
                            <Setter.Value>
                                <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="8"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
回复 原文
~没有更多了~

关于作者

梦魇绽荼蘼

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文