wpf - 如何使用可视状态管理器和情节提要将图像放置在控件模板中？

Question

我需要在 InkCanvas 上放置许多图像控件。当满足某些代码条件时，它们都需要动画。经过多次尝试，我的 ControlTemplate 仍然不正确。

<ControlTemplate x:Key="AnimatedImage" TargetType="{x:Type Image}">
    <Grid>
        <Image Name="image" 
               Source="{TemplateBinding Filename}"
               Width="{TemplateBinding Width}"
               Height="{TemplateBinding Height}"
               HorizontalAlignment="Center"
               VerticalAlignment="Center">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="AnimationLocations">

                    <!-- When the image is first loaded move it to the center of the InkCanvas -->
                    <VisualState Name="AnimateToCenterScreen">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="image"
                                             Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                                             From="{TemplateBinding From}"
                                             To="{TemplateBinding To}"
                                             Duration="{TemplateBinding Duration}" />
                        </Storyboard>
                    </VisualState>

                    <!-- Animate the image to an off screen position to effectively hide it.  -->
                    <VisualState Name="AnimateToOffScreen">
                        <!-- To be filled in later.  -->
                    </VisualState>

                    <!-- Animate the image back to the original on screen position.  -->
                    <VisualState Name="AnimateToOnScreen">
                        <!-- To be filled in later.  -->
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Image>
    </Grid>
</ControlTemplate>

这是主网格的 xaml：

        <Image Name="image1" 
               Template="{StaticResource AnimatedImage}"
               Source="{Binding Path=Image1}" 
               Visibility="{Binding ElementName=chkShowPerson, Path=IsChecked, Converter={StaticResource b2v}}" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" >
        </Image>
    </InkCanvas>
</Grid>

Answer 1

该VisualStateManager元素必须作为控件模板根的子元素。

<ControlTemplate x:Key="AnimatedImage" TargetType="{x:Type Image}">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            ...
        </VisualStateManager.VisualStateGroups>

        <Image Name="image" ... />
    </Grid>
</ControlTemplate>

（参考这里是 MSDN 上的页面，您可以在其中找到该花絮。）