我需要创建一个百分比加载器控件。我创建了一个两个Arc控件。一个弧用于背景,一个用于前景。我将结束角度作为Arc的输入。我写了一个双动画类来执行加载动画。当我试图在后面的代码中调用故事板时,动画可以工作。
但我的要求是,每当属性发生变化时,我都需要加载加载器。所以我决定使用PropertyChangedBehaviour。但动画不起作用。请建议最好的方法来做到这一点'
这是xaml代码:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValueStates">
<VisualState x:Name="On">
<Storyboard x:Name="storyBoard2">
<DoubleAnimation Duration="0:0:9" To="270" Storyboard.TargetProperty="(Arc.EndAngle)" Storyboard.TargetName="TimerProgressBar">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Grid.Row="1"
Background="Transparent"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0 40 0 0">
<i:Interaction.Triggers>
<ec:PropertyChangedTrigger Binding="{Binding EndAngleValue}">
<ec:GoToStateAction StateName="On"/>
</ec:PropertyChangedTrigger>
</i:Interaction.Triggers>
<es:Arc ArcThickness="1"
Fill="{StaticResource OlaTextLightGrayBrush}"
ArcThicknessUnit="Pixel"
Stretch="None"
Stroke="{StaticResource OlaTextLightGrayBrush}"
StartAngle="0"
EndAngle="360"
UseLayoutRounding="False"
Width="297"
Height="297" />
<es:Arc ArcThickness="4"
Fill="{StaticResource OlaGreenBrush}"
x:Name="TimerProgressBar"
ArcThicknessUnit="Pixel"
Stretch="None"
StartAngle="0"
UseLayoutRounding="False"
Width="300"
Height="300" VerticalAlignment="Bottom" d:LayoutOverrides="Height" >
<es:Arc.Stroke>
<SolidColorBrush
Color="{StaticResource OlaGreen}"/>
</es:Arc.Stroke>
</es:Arc>
我的视图模型:
public double EndAngleValue
{
get
{
return _EndAngleValue;
}
set
{
SetProperty(ref _EndAngleValue, value);
}
}
每当属性&#39; EndAngleValue&#39;改变,我需要执行动画。
感谢任何建议
答案 0 :(得分:0)
如果您已实施,那么您应该可以这样做:
<input type="text" name="value" id="value"/>
<input type="button" id="add" />
<script>
$('#add').click(function (){
alert($('value').val());
});
</script>