Question

我需要在InkCanvas上放置许多Image控件。当满足某些代码条件时，所有这些都需要动画。经过多次尝试，我的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>

（供参考here是MSDN上您可以找到该花絮的页面。）

如何使用可视状态管理器和故事板将图像放在控件模板中？

1 个答案: