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

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

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;

 

[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を設定した例です。

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