ホーム画面の未読数に似たアニメーションを反転する

Question

ホーム画面でSMSとメールの未読数を表示するようなカウンターを表示するには、Windows Phoneコントロール（またはソースコード）を探しています。例えば、値が2から5に変化すると、3,4、および5の短いアニメーションが表示されます。

Answer 1

一方的にはReactive Extensionを使用します。

まず、Microsoft.Phone.ReactiveとSystem.Observableの参照が必要です。

私のxamlページではNumberTextBlockというTextBlockを定義しました。また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> 

、私は、生成されたシーケンスに時間ディメンションを追加しGenerateFromTime()呼ばRxからメソッドを使用していました。 TimeSpan.FromMilliseconds(100)ここでは各番号の間の遅延です。

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); 
    } 

あなたはhereとhere (Silverlight TV)からRxについての詳細を読むことができます。

これが役に立ちます。 :)