[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配列に格納していた画像が表示されるようになります。

Please follow and like us: