フリップビュー

2025-07-22

コレクション内の画像やその他の項目 (アルバムの写真や製品の詳細ページの項目など) を一度に 1 つずつ表示するには、フリップビューコントロールを使います。タッチデバイスでは、項目をスワイプしてコレクション内を移動します。マウスでは、マウスをホバーするとナビゲーションボタンが表示されます。キーボードでは、方向キーを使ってコレクション内を移動します。

これは適切なコントロールですか?

フリップビューは、小規模から中規模のコレクション (最大で 25 個程度の項目を含むコレクション) の画像を参照する場合に最適です。このようなコレクションの例として、製品の詳細ページ内の項目やフォトアルバム内の写真などがあります。多くの場合、大規模なコレクションではフリップビューを使うことはお勧めしません。このコントロールは、フォトアルバム内の個々の画像を表示するためによく使われます。

推奨事項

FlipView は最大 25 個程度の項目のコレクションに最適です。
大規模なコレクションではフリップビューコントロールを使わないでください。これは、項目ごとにフリップ操作を繰り返す必要があり、ユーザーの負担になるためです。フォトアルバムは例外です。フォトアルバムには数百または数千の画像が含まれている場合があります。ほとんどの場合、フォトアルバムでは、グリッドビューのレイアウトで写真を選ぶと、フリップビューに切り替わります。他の大規模なコレクションの場合は、リストビューまたはグリッドビューを検討してください。

グローバリゼーションとローカライズのチェックリスト

双方向の考慮事項: RTL 言語には標準ミラーリングを使用します。 "戻る" と "進む" のコントロールは言語の方向に基づく必要があります。RTL 言語では、右ボタンが "戻る" で、左ボタンが "進む" になります。

例

水平方向の閲覧、左端の項目から開始し、右にフリップするのが、フリップビューの一般的なレイアウトです。このレイアウトは、すべてのデバイス上で縦方向でも横方向でも正常に動作します。

水平方向のフリップビューレイアウトの例

フリップビューは、垂直方向にも閲覧できます。

垂直反転ビューの例

フリップビューを作成する

重要な API: FlipView クラス、 ItemsSource プロパティ、 ItemTemplate プロパティ

WinUI 3 ギャラリーアプリを開き、FlipView の動作を確認する

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得する

FlipView は ItemsControl であるため、任意の型の項目のコレクションを含めることができます。ビューを設定するには、 Items コレクションに項目を追加するか、 ItemsSource プロパティをデータソースに設定します。

既定では、データ項目は、バインドされているデータオブジェクトの文字列表現としてフリップビューに表示されます。フリップビューの項目の表示方法を正確に指定するには、 DataTemplate を作成して、個々の項目の表示に使用するコントロールのレイアウトを定義します。レイアウト内のコントロールは、データオブジェクトのプロパティにバインドすることも、インラインでコンテンツを定義することもできます。 DataTemplate を FlipView の ItemTemplate プロパティに割り当てます。

Items コレクションに項目を追加する

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

<FlipView x:Name="flipView1">
    <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 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

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

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

XAML で項目を定義すると、定義した項目は Items コレクションに自動的に追加されます。

アイテムソースの設定

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

ここでは、コードでコレクションのインスタンスに直接フリップビューの ItemsSource を設定しています。

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

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

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

ここでは、ItemsSource はという名前のにバインドされます。

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

...

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

注意

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

アイテムの表示方法の指定

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

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

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

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

データテンプレートを使用したフリップビューの例

フリップビューの向きを設定する

既定では、フリップビューは水平方向に反転します。垂直方向に反転するには、フリップビューの ItemsPanel として垂直方向のスタックパネルを使用します。

次の例は、FlipView の ItemsPanel として縦方向のスタックパネルを使う方法を示しています。

<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" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <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>

垂直方向のフリップビューの外観を次に示します。

垂直方向のフリップビューの例。

コンテキストインジケーターの追加

コンテキストインジケーター ( PipsPager やフィルムストリップなど) をフリップビューと共に使用して、コンテンツ内の参照ポイントをユーザーに提供します。

次の図は、小さなフォトギャラリーで使用されている PipsPager を示しています (ギャラリーの下の PipsPager を中央に配置することをお勧めします)。

FlipView フォトアルバムの下に 5 つの水平ドットがある PipsPager。3 番目のドットが選択されています。これは、コンテンツの 3 ページ目を示します。

このコードスニペットは、PipsPager を FlipView にバインドする方法を示しています。

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

大きなコレクション (10 以上の項目) の場合は、サムネイルのフィルムストリップなどのコンテキストインジケーターを使用することを強くお勧めします。単純なドットやグリフを使用する PipsPager とは異なり、フィルムストリップの各サムネイルは、対応する画像の小さいバージョンで、対応する画像を選択できます。

FlipView フォトアルバムの下にあるサムネイルのフィルムストリップ。

FlipView にコンテキストインジケーターを追加する方法を示す完全な例については、 XAML FlipView のサンプルを参照してください。

UWP と WinUI 2

重要

この記事の情報と例は、 Windows App SDK と WinUI 3 を使用するアプリ向けに最適化されていますが、一般的には WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は、Windows.UI.Xaml.Controls 名前空間に存在します。

UWP API:FlipView クラス、 ItemsSource プロパティ、 ItemTemplate プロパティ
WinUI 2 ギャラリーアプリを開き、FlipView の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸めた角を使用するこのコントロールの新しいテンプレートが含まれます。詳細については、「コーナー半径」を参照してください。

次の方法で共有

フリップ ビュー

これは適切なコントロールですか?

推奨事項

グローバリゼーションとローカライズのチェックリスト

例

フリップ ビューを作成する

Items コレクションに項目を追加する

アイテム ソースの設定

アイテムの表示方法の指定

フリップ ビューの向きを設定する

コンテキスト インジケーターの追加

UWP と WinUI 2

関連記事

フィードバック

その他のリソース

フリップビュー

フリップビューを作成する

アイテムソースの設定

フリップビューの向きを設定する

コンテキストインジケーターの追加