UWPで一定間隔で表示が切り替わるPivotを作ろう

小ネタです。ViewModelあたりにSelectedIndexというプロパティをはやして、これを一定時間でインクリメントするようにします。 UIスレッド上でやるのがポイントですね。DispatcherTimerかRx使うのがいいでしょう。（RxのInterval使う場合はObserveOnでUIスレッドに持ってくる）

using Prism.Mvvm;
using System;
using System.Reactive.Linq;
using System.Threading;

namespace App37
{
    public class MainPageViewModel : BindableBase
    {
        private int selectedIndex;

        public int SelectedIndex
        {
            get { return this.selectedIndex; }
            set { this.SetProperty(ref this.selectedIndex, value); }
        }

        public MainPageViewModel()
        {
            Observable.Interval(TimeSpan.FromSeconds(5))
                .ObserveOn(SynchronizationContext.Current)
                .Subscribe(_ => this.ChangeSelectedIndex());
        }

        public void ChangeSelectedIndex()
        {
            var current = this.SelectedIndex;
            current++;
            current = current >= 3 ? 0 : current;
            this.SelectedIndex = current;
        }
    }
}

今回はPivotが3画面あることを想定しているコードになります。XAML側は適当にPivotを用意して、PivotのSelectedIndexプロパティとTwoWayバインディングしてやります。

<Page
    x:Class="App37.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App37"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:MainPageViewModel x:Name="ViewModel" />
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Pivot SelectedIndex="{x:Bind ViewModel.SelectedIndex, Mode=TwoWay}">
            <PivotItem Header="Item1">
                <TextBlock Text="Item1" />
            </PivotItem>
            <PivotItem Header="Item2">
                <TextBlock Text="Item2" />
            </PivotItem>
            <PivotItem Header="Item3">
                <TextBlock Text="Item3" />
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

これで5秒間隔で表示の切り替わるPivotの完成です。