Анимированная анимация, похожая на непрочитанный счетчик домашнего экрана

Question

Я ищу элемент управления Windows Phone (или исходный код), чтобы счетчик был похож на счетчик непрочитанных сообщений для SMS и почты на домашнем экране.Например, когда значение меняется с 2 на 5, у нас есть различные анимации, кратко показывающие 3, 4 и 5.

Answer 1

Одним из способов является использование Reactive Extension.

Сначала вам понадобятся ссылки Microsoft.Phone.Reactive и System.Observable.

На моей странице xaml я определил TextBlock с именем 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) здесь - задержка между каждым числом.

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

Подробнее о Rx можно узнать из здесь и здесь (Silverlight TV) .

Надеюсь, это поможет.:)