从另一个用户控件的样式动画用户控件答案

【问题标题】：Animating UserControl from Style of another User Control从另一个用户控件的样式动画用户控件
【发布时间】：2016-05-12 23:28:29
【问题描述】：

我已经实现了一个切换按钮，并且根据它是打开还是关闭，我想为另一个控件设置动画。看来 ControlTemplate 内的 TargetName 是不允许的，我该如何绕过这个困难？

错误行：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>

【问题讨论】：

是的，你不能做那个朋友。控制模板旨在独立。但是，您可以做的是在目标元素上打一个 DataTrigger 以获取 ToggleButton 的 IsChecked 布尔值，并使用 BeginStoryboard 以这种方式触发故事板
我在考虑 DataTrigger（但我希望它可以通过上述方式实现，哦，好吧），看起来 DataTrigger 是要走的路。感谢您的回复
是的，把控制模板想象成它自己的小野兽，它关心外部世界的一切，你不能抓住它里面的事件处理程序和东西。除非有人提出创造性的解决方案，否则我不知道我可能只会拍摄那条路线。

标签： wpf xaml animation storyboard controltemplate

【解决方案1】：

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

           <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>

【讨论】：