如何在按钮样式中触发视觉画笔（带故事板）？

Question

我有动态图形背景，我是 Expression Blend 的新手。我将尝试解释我到底想要实现什么。

我创建了一个 'Polygon - Star' 的动画（故事板）。此 Polygon-Star 放置在 Grid (x:Name="vbGrid").
我将这个 Grid (x:Name="vbGrid") 制作成了可视画笔资源。
我在另一个网格 (x:Name="OpMaskGrid") 中创建了另一个设计对象，并将此 视觉画笔应用为网格的不透明遮罩。当我运行应用程序时，故事板在 window 的加载时被触发。到这里一切都很好。
我创建了一个按钮样式。这就是我挣扎的地方...... 我想将此网格 (x:Name="OpMaskGrid") 放在按钮样式中。 我想要运行这个视觉画笔效果 - 在鼠标悬停在按钮上时。（不加载 WINDOW）

我怎样才能做到这一点？请帮助。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:LOBTest"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="LOBTest.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Storyboard x:Key="vbStoryBoard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-2.667"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Star">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-11.333"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <VisualBrush x:Key="VisualBrushStarAnim" Visual="{Binding ElementName=vbGrid}"/>

    <Style x:Key="SimpleButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.3">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF1F7385"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="Aqua"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF01DEFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Grid x:Name="OpMaskGrid1" Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
                            <Grid.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
                            </Grid.OpacityMask>
                            <Rectangle Width="20" Fill="#FFFF8000" />
                            <Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="90"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true"/>
                        <Trigger Property="IsMouseOver" Value="true"/>
                        <Trigger Property="IsPressed" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource vbStoryBoard}"/>
    </EventTrigger>
</Window.Triggers>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>
    <Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
        <ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
            <ed:RegularPolygon.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </ed:RegularPolygon.RenderTransform>
        </ed:RegularPolygon>
    </Grid>
    <Grid x:Name="OpMaskGrid" Background="#FF0598A6" Grid.Column="2">
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
        </Grid.OpacityMask>
        <Rectangle Width="20" Fill="#FFFF8000" />
        <Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
    <Button Grid.Column="1" Grid.Row="1" Width="100" Height="100" Style="{DynamicResource SimpleButton}" Content="VB BUTTON" FontWeight="Bold"/>
</Grid>

Answer 1

您可以在按钮样式中定义 VisualBrush 内联，如下所示：

<!--...-->
<Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
    <!--...-->
</Rectangle>
<Grid Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
    <Grid.OpacityMask>
        <VisualBrush Stretch="None">
            <VisualBrush.Visual>
                <Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
                    <ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
                        <ed:RegularPolygon.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </ed:RegularPolygon.RenderTransform>
                    </ed:RegularPolygon>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.OpacityMask>
    <!--...-->
</Grid>

然后在控件模板中，使用触发器启动故事板：

<ControlTemplate.Triggers>
    <!--...-->
    <Trigger Property="IsMouseOver" Value="true">
        <Trigger.EnterActions>
            <BeginStoryboard x:Name="Storyboard" Storyboard="{StaticResource vbStoryBoard}"/>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <StopStoryboard BeginStoryboardName="Storyboard"/>
        </Trigger.ExitActions>
    </Trigger>
    <!--...-->
</ControlTemplate.Triggers>

如何在按钮样式中触发视觉画笔（带故事板）？

How to Trigger a Visual Brush (with storyboard) within a Button Style?

wpf

xaml

expression-blend