Question

我有一个进度条，我的样式看起来像不确定的窗口ui进度条，5个椭圆从一边到另一边，动画是基于画布，问题是我的应用程序是分辨率和大小独立的，因此画布的宽度属性是动态的，我想让动画的结束属性（Canvas.Left）到动态更改为画布的宽度减去椭圆的宽度。我试图以某种方式绑定它（我仍然是绑定的初学者）所以我总是得到一个运行时错误... 有人可以帮忙吗？

画布：

<Canvas Name="canvas" Height="9" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="{TemplateBinding Width}">
                            <Ellipse Name="ellipse" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
                            <Ellipse Name="ellipse1" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
                            <Ellipse Name="ellipse2" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
                            <Ellipse Name="ellipse3" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
                            <Ellipse Name="ellipse4" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
                        </Canvas>

故事板：

<Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse">
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,1,1,0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse1">
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.8,1,0.2" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse2">
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.6,1,0.4" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse3">
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.4,1,0.6" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse4">
                                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.2,1,0.8" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse1">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse3">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse2">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse4">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>

我想将故事板值1260更改为画布宽度的值减去椭圆的宽度

动态双动画结束 - XAML

0 个答案: