从另一个用户控件的样式动画化 UserControl

Question

我实现了一个切换按钮，根据它是打开还是关闭，我想为另一个控件设置动画。 ControlTemplate 中的 TargetName 似乎是不允许的，我该如何解决这个问题？

error line: Storyboard.TargetName="grdEditBookmark"

 <ToggleButton Grid.Row="4" Grid.Column="1" Style="{StaticResource AnimatedSwitch}" Height="20"/>
            <Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}">
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="#FAFAFB" />
                <Setter Property="BorderBrush" Value="#EAEAEB" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Viewbox Stretch="Uniform">
                                <Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
                                    <Ellipse  Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                    <Ellipse  Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                    <Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/>
                                    <Ellipse x:Name="ellipse"  Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform X="0" Y="0" />
                                        </Ellipse.RenderTransform>
                                        <Ellipse.BitmapEffect>
                                            <DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/>
                                        </Ellipse.BitmapEffect>
                                    </Ellipse>
                                </Canvas>
                            </Viewbox>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True" >
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#52D468" Duration="0:0:0.2" />
                                                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#41C955" Duration="0:0:0.2" />
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>                                        
                                        </BeginStoryboard>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation  From="0" To="150" Storyboard.TargetName="grdEditBookmark" Storyboard.TargetProperty="Height" Duration="0:0:0.5" AccelerationRatio="0.10" DecelerationRatio="0.25" ></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#EAEAEB" Duration="0:0:0.2" />
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Answer 1

我已经根据 Chris W. 的建议实现了预期的行为。这是片段：

           <Border Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="grdEditBookmark" BorderBrush="Gray" CornerRadius="2" VerticalAlignment="Top"  Margin="5,0" BorderThickness="1">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="Height" Value="0"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource sbGrdEditBookmarkShow}"></BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource sbGrdEditBookmarkHide}"></BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>

从另一个用户控件的样式动画化 UserControl

Animating UserControl from Style of another User Control

wpf

animation

xaml

storyboard

controltemplate