我有以下ControlTemplate
并加入了Style
。当用户将鼠标悬停在Rectangle
拇指控件的Width属性上时,我要对其进行动画处理。我已尝试在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
设置动画?