[Windows ストア アプリ] FlipViewにデータソースを設定する

多くのコントロールでは、データソースを指定して、動的にデータを設定することができます。

今回はFlipViewでデータソースを設定する例を紹介します。

まずは、FlipViewのXAMLは下記のようにします。

XAMLの例

<FlipView x:Name="imageFlip" HorizontalAlignment="Left" VerticalAlignment="Top">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Stretch="Uniform" />
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

画像部分を動的に指定できるように<Image>タグのSource属性で{Binding}を指定しています。

この{Binding}部分には、下記のようにしてコードからデータを流しこみます。

string[] images = { "Assets/flower1.jpg" ,
                  "Assets/flower2.jpg",
                  "Assets/flower3.jpg",
                  "Assets/flower4.jpg",
                  "Assets/flower5.jpg"};

public FlipView03()
{
    this.InitializeComponent();

    imageFlip.ItemsSource = images;
}

String配列に、表示するデータのパスを格納しておいて、コンストラクタでItemSourceプロパティにセットしています。これにより、FlipViewに表示される画像は、String配列に格納していた画像が表示されるようになります。

[Windows ストア アプリ] FlipViewで縦方向にページをめくる

FlipViewでは縦方向にページをめくることができます。

縦方向にページをめくるには、項目のレイアウトを制御するItemsPanel を配置し、<VirtualizationStackPane>のOrientation属性にVerticalを設定します(3〜7行目)。

XAMLの例は下記の通りです。

<Grid Grid.Row="1">
    <FlipView HorizontalAlignment="Left" VerticalAlignment="Top" >
        <FlipView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </FlipView.ItemsPanel>

        <Image Source="Assets/flower1.jpg"></Image>
        <Image Source="Assets/flower2.jpg"></Image>
        <Image Source="Assets/flower3.jpg"></Image>
        <Image Source="Assets/flower4.jpg"></Image>
        <Image Source="Assets/flower5.jpg"></Image>
    </FlipView>
</Grid>

下図は、上記XAMLを設定した例です。

縦方向にめくるようにする例縦方向にページをめくる例

[Windows ストア アプリ] FlipViewを使用する

FlipViewを使用すると、アプリ内の項目をアルバム写真のように1つずつめくることが可能になります。

まずは、ページ上にFlipViewを配置し、次に画像を追加します。

画像をアプリ内に組み込むには、ソリューションエクスプローラーで Assets フォルダを右クリックして、[追加]-[新しい項目]を選択し、画像を追加します。

画像の追加

ここでは、flower1~flower5までの画像を追加しました。追加後の Assetsフォルダは下記のようになります。

画像追加後の Assets フォルダ

次に、追加した画像をFlipViewに表示できるようにします。

FlipViewの中に<Image>タグを使用して、表示する画像を設定します。

Source属性に、画像が存在するパスを指定します。Assetsフォルダにある画像を使用するのでSource属性は”Assets/画像ファイル”とします。

画像は[<][>]で切り替えて表示させることができます。

XAMLの例

<FlipView HorizontalAlignment="Left" VerticalAlignment="Top">
	<Image Source="Assets/flower1.jpg"></Image>
	<Image Source="Assets/flower2.jpg"></Image>
	<Image Source="Assets/flower3.jpg"></Image>
	<Image Source="Assets/flower4.jpg"></Image>
	<Image Source="Assets/flower5.jpg"></Image>
</FlipView>

FlipViewの例FlipViewの例