翻转动画类似于主屏幕的未读计数

时间:2011-11-13 17:56:53

标签: silverlight windows-phone-7 windows-phone-7.1

我正在寻找Windows Phone控件(或源代码),以便在主屏幕中显示类似于显示SMS和邮件的未读计数的计数器。例如,当值从2变为5时,我们会有各种动画,简要显示3,4和5。

1 个答案:

答案 0 :(得分:2)

一种方法是使用Reactive Extension

首先,您需要Microsoft.Phone.ReactiveSystem.Observable个引用。

在我的xaml页面中,我定义了一个名为TextBlock的{​​{1}}。我还创建了一个NumberTextBlock,通过修改Storyboard来动画Text的外观。

ScaleY

在我的代码隐藏中,我使用了<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="NumberTextBlock"> <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/> <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </phone:PhoneApplicationPage.Resources> <Grid x:Name="LayoutRoot" Background="Transparent"> <TextBlock x:Name="NumberTextBlock" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource PhoneTextTitle1Style}"> <TextBlock.RenderTransform> <CompositeTransform /> </TextBlock.RenderTransform> </TextBlock> </Grid> 中名为Rx的方法,该方法为生成的序列添加了时间维度。 GenerateFromTime()这是每个数字之间的延迟。

TimeSpan.FromMilliseconds(100)

您可以从herehere (Silverlight TV)了解有关 public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { var getNumbers = this.GetNumbers(10); getNumbers.ObserveOnDispatcher().Subscribe(ChangeNumberTextBlock); } private void ChangeNumberTextBlock(int number) { this.NumberTextBlock.Text = number.ToString(); Storyboard1.Begin(); } private IObservable<int> GetNumbers(int total) { return Observable.GenerateWithTime(0, i => i <= total, i => i, _ => TimeSpan.FromMilliseconds(100), i => ++i); } 的更多信息。

希望这会有所帮助。 :)