使用属性值作为“从”值的DoubleAnimation

时间:2019-03-15 17:33:23

标签: wpf xaml binding

我有以下ControlTemplate并加入了Style。当用户将鼠标悬停在Rectangle拇指控件的W​​idth属性上时,我要对其进行动画处理。我已尝试在Style中执行以下操作

<ControlTemplate x:Key="SransportControl" TargetType="{x:Type local:SransportControl}">
        <Grid Name="PART_Container"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Center"
                Margin="4,2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
        <Border Grid.Row="0" 
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding IndicatorSize, 
                        Converter={StaticResource ValueToHorizontalPaddingConverter}, 
                        ConverterParameter=0.5}">
            <Canvas Name="PART_TimelineCanvas" 
                    Height="20" 
                    ClipToBounds="False"/>
        </Border>
            <StackPanel Name="PART_IndicatorContainer"
                        Grid.Row="1"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        Background="Transparent"
                        Orientation="Horizontal">
            <Thumb Name="PART_IndicatorThumb"
                   Grid.Row="1"
                   Panel.ZIndex="1"
                   Width="{TemplateBinding IndicatorSize}"
                   Height="{TemplateBinding IndicatorSize}"
                   Style="{DynamicResource IndicatorThumb}"
                   Cursor="Arrow"/>
        </StackPanel>
        </Grid>
</ControlTemplate>

<Style TargetType="{x:Type local:SransportControl}">
    <Setter Property="MinorTickBrush" Value="{DynamicResource BlackBrush}"/>
    <Setter Property="MajorTickBrush" Value="{DynamicResource BlackBrush}"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="Template" Value="{StaticResource SransportControl}" />
</Style>

<Style x:Key="IndicatorThumb" TargetType="Thumb">
    <Setter Property="Background" Value="{DynamicResource BlackBrush}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                    <Rectangle x:Name="Thumb"
                               Fill="{TemplateBinding Background}"
                               Stroke="{DynamicResource ThumbStrokeBrush}"
                               StrokeThickness="4"
                               Margin="{TemplateBinding BorderThickness}" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation From="{DynamicResource BlackColor}" 
                                                    To="{DynamicResource HighlightColor}" 
                                                    Duration="0:0:0.1" 
                                                    Storyboard.TargetName="Thumb" 
                                                    Storyboard.TargetProperty="Fill.Color"/>
                                    <DoubleAnimation From="{Binding ElementName=Thumb, Path=ActualWidth, Mode=OneWay}" 
                                                     To="{Binding ElementName=Thumb, Path=ActualWidth, Mode=OneWay, Converter={StaticResource MultiplyingConverter}, ConverterParameter=1.5}" 
                                                     Duration="0:0:0.4"
                                                     Storyboard.TargetName="Thumb"
                                                     Storyboard.TargetProperty="Width">
                                        <DoubleAnimation.EasingFunction>
                                            <BounceEase Bounces="2" EasingMode="EaseOut"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想以Rectangle的当前宽度开始动画,但出现以下异常

  

System.InvalidOperationException:” System.Windows.Media.Animation.DoubleAnimation”不能使用默认的原始值“ NaN”。

Q1。如何使用其当前值为Rectangle width属性设置动画?

Q2。不用给Rectangle设置动画(不会扩展包含Thumb的动画),如何使整个Thumb设置动画?

0 个答案:

没有答案