FlipView を使ってみる

Metro Style App

　Windows Developer Preview には Visual Studio も用意されていますので、サンプルを作って Metro Style アプリの機能を調べてみたいと思います。
　最初は、新しく追加されたコントロールの中から FlipView を触ってみます。

FlipView

　FlipView は複数のコンテンツを切り替えて表示するコントロールです。
　表示されるコンテンツは一つで、フリップする事で隣のコンテンツへの切り替えを行います。
　サンプルとして、FlipView にコンテンツとして画像を表示するようにしてみます。

サンプル作成

　FlipView だけを表示させますので、一番単純なテンプレートである 　Application を選んでプロジェクトを作成します。
　Application テンプレートは LayoutRoot となる Grid が配置されているだけです。
　ここに FlipView コントロールを配置し、Image を表示する ItemTemplate を定義します。

MainPage.xaml

<Grid x:Name="LayoutRoot" >
    <FlipView x:Name="FlipViewTest" Width="800" Height="600">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="Uniform" Width="800" Height="600" />
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

　表示する画像はプロジェクトの Image 以下に追加します。
　ソースには、画像のパスを保持するコレクションを生成して ItemsSource に設定する処理を記述します。

MainPage.xaml.cs

ObservableCollection<string> pictures = null;

public MainPage()
{
    InitializeComponent();

    string[] strings = { "Images/image1.jpg", "Images/image2.jpg", "Images/image3.jpg" };
    pictures = new ObservableCollection<string>(strings);

    FlipViewTest.ItemsSource = pictures;
}

　実行すると、フリップで画像を切り替えられます。

注意点

　現状シミュレータの動作は安定しておらず画像が表示されない事があります。
　まだ Developer Preview ですので、動作については参考程度に見ておいた方がいいようです。