[UWPアプリ][FlipView] データソースを使用してイメージを表示する

2016.04.05

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

FlipViewでデータソースを使用するには、XAMLを以下のようにします。

<FlipView.ItemTemplate>の中で<DataTemplate>を定義し、<Image>のSourceプロパティにバインディングします。

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

続いてデータを流し込むコードを示します。

イメージがあるパス（ここではAsstesフォルダにある画像）の文字列を作成し、FlipViewのItemSourceプロパティに設定します。

以上でデータソースを使用してイメージを表示できるようになります。

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

imageFlip.ItemsSource = images;

Please follow and like us: