言語: HTML | XAML

クイック スタート: FlipView コントロールの追加 (XAML)

Applies to Windows and Windows Phone

C++、C#、または Visual Basic で開発された Windows ランタイム アプリ内に項目のコレクションを表示し、ユーザーがそのコレクションを順にめくって表示できるようにするには、FlipView コントロールを使います。

必要条件

C++、C#、または Visual Basic で開発された基本的な Windows ランタイム アプリにコントロールを追加できることを前提としています。コントロールを追加する場合は、「クイック スタート: コントロールの追加とイベントの処理」をご覧ください。

FlipView とは

FlipView は、項目のコレクションを順に 1 つずつめくって表示できるようにするコントロールです。これは、イメージ ギャラリーの表示に適しています。FlipView は、ListView コントロールや GridView コントロールのような ItemsControl クラスから派生するため、それらの機能の多くを共有できます。FlipView は、項目をインラインで追加するか、データ ソースにバインドして挿入できます。

FlipView コントロール

項目コレクションへの項目の追加

Items コレクションに項目を追加するには、XAML かコードを使います。通常、項目が少数で、その項目が変わらず、XAML で簡単に定義できる場合や、実行時にコードで項目を生成する場合は、この方法で項目を追加します。XAML を使って項目をインラインで定義した FlipView の例を次に示します。


<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>



// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView^ flipView1 = ref new FlipView();
flipView1->Items->Append("Item 1");
flipView1->Items->Append("Item 2");
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

// Add the flip view to a parent container in the visual tree.
stackPanel1->Children->Append(flipView1);


FlipView に項目を追加すると、追加した項目は FlipViewItem コンテナーに自動的に設定されます。項目の表示方法を変更するには、ItemContainerStyle プロパティを設定して、項目コンテナーにスタイルを適用します。

項目は、XAML (Extensible Application Markup Language) で定義すると、自動的に Items コレクションに追加されます。

項目ソースの設定

通常、FlipView を使って、データベースやインターネットなどのソースからデータを表示します。データ ソースの FlipView を設定するには、ItemsSource プロパティにデータ項目のコレクションを設定します。

  FlipView を設定するには、その Items コレクションに項目を追加するか、ItemsSource プロパティを設定しますが、同時に両方の方法で設定することはできません。ItemsSource プロパティを設定して XAML で項目を追加した場合、追加された項目は無視されます。ItemsSource プロパティを設定してコードで Items コレクションに項目を追加した場合、例外がスローされます。

以下の例では、コードでコレクションのインスタンスに直接 FlipViewItemsSource を設定しています。


// Data source.
Platform::Collections::Vector<String^>^ itemsList = 
    ref new Platform::Collections::Vector<String^>();
itemsList->Append("Item 1");
itemsList->Append("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView^ flipView1 = ref new FlipView();
flipView1->ItemsSource = itemsList;
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

// Add the flip view to a parent container in the visual tree.
stackPanel1->Children->Append(flipView1);


ItemsSource プロパティを、XAML でコレクションにバインドすることもできます。詳しくは、「XAML を使ったデータ バインディング」をご覧ください。

ItemsSourceitemsViewSource という名前の CollectionViewSource にバインドされている例を次に示します。


<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>



<ListView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>


項目の表示方法の指定

既定では、データ項目は、バインドされているデータ オブジェクトの文字列表現として FlipView に表示されます。通常は、リッチな表現でデータを表示する必要があります。FlipView 内での項目の表示方法を正確に指定するには、DataTemplate を作ります。DataTemplate の XAML では、個々の項目を表示するために使うコントロールのレイアウトと外観を定義します。レイアウト内のコントロールは、データ オブジェクトのプロパティにバインドすることも、インラインでコンテンツを定義することもできます。DataTemplate は、FlipViewItemTemplate プロパティに割り当てます。

この例では、FlipViewItemTemplate がインラインで定義されています。画像名を表示するためにオーバーレイが画像に追加されます。


    <FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                       Foreground="#CCFFFFFF" Padding="15,20"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>


このデータ テンプレートで定義されたレイアウトは次のように表示されます。

FlipView (データ テンプレート)。

FlipView の向きの設定

既定では、FlipView は横方向にめくれます。縦方向にめくれるようにするには、FlipView の ItemsPanel として縦方向の StackPanel を使います。

次の例は、FlipViewItemsPanel として縦方向の StackPanel を指定する方法を示しています。


  <FlipView x:Name="flipViewVertical" Width="480" Height="270" 
            BorderBrush="Black" BorderThickness="1">
      <!-- Use a vertical stack panel for vertical flipping. -->
      <FlipView.ItemsPanel>
          <ItemsPanelTemplate>
              <VirtualizingStackPanel Orientation="Vertical"/>
          </ItemsPanelTemplate>
      </FlipView.ItemsPanel>
    
      <FlipView.ItemTemplate>
          <DataTemplate>
              <Grid>
                  <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                  <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" 
                                 Foreground="#CCFFFFFF" Padding="15,20"/>
                  </Border>
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>

  </FlipView>


縦方向の FlipView は次のように表示されます。

縦方向の FlipView

要約と次のステップ

データ コレクションを表示する FlipView コントロールの作成方法について説明しました。

他の例については、XAML FlipView のサンプルをダウンロードしてください。

関連トピック

FlipView
FlipView コントロールのガイドライン
C# または Visual Basic を使った Windows ランタイム アプリのためのロードマップ
C++ を使った Windows ランタイム アプリのためのロードマップ

 

 

表示:
© 2014 Microsoft