WP8中的PropertyChangedTrigger无法正常工作

时间:2015-08-14 10:55:24

标签: c# xaml windows-phone-7 windows-phone-8

我需要创建一个百分比加载器控件。我创建了一个两个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;改变,我需要执行动画。

感谢任何建议

1 个答案:

答案 0 :(得分:0)

如果您已实施,那么您应该可以这样做:

<input type="text" name="value" id="value"/>
<input type="button" id="add" />

<script>
    $('#add').click(function (){
      alert($('value').val());
    });
</script>