フリップビュー

[アーティクル]
07/04/2024

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

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

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

推奨事項

フリップビューは、最大 25 個のアイテムのコレクションに最適です。
各項目を反転する繰り返し動作は面倒な場合があるため、より大きなコレクションにはフリップビューコントロールを使用しないでください。フォトアルバムには例外があり、多くの場合、数百または数千の画像が含まれます。フォトアルバムは、グリッドビューレイアウトで写真が選択されると、ほとんど常にフリップビューに切り替わります。その他の大規模なコレクションの場合は、 List ビューまたはグリッドビューを検討してください。

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

双方向の考慮事項: RTL 言語には標準ミラーリングを使用します。前後のコントロールは言語の方向に基づいている必要があるため、RTL 言語の場合、右ボタンは後方に移動し、左ボタンは前方に移動する必要があります。

例

左右の参照は、左端の項目から始まり、右に反転して、フリップビューの一般的なレイアウトです。このレイアウトは、すべてのデバイスで縦向きまたは横向きに適切に機能します。

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

フリップビューは、垂直方向に参照することもできます。

垂直反転ビューの例

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ 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 以降には、丸みのある角を使用するこのコントロールの新しいテンプレートが含まれます。詳しくは、「角の半径」をご覧ください。

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

重要な 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 は itemsViewSource という名前の CollectionViewSourceにバインドされます。

<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 のサンプルに関するページを参照してください。

サンプルコードの入手

WinUI ギャラリーサンプル - すべての XAML コントロールを対話形式で参照できます。

次の方法で共有

フリップビュー

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

推奨事項

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

例

UWP と WinUI 2

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

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

アイテムソースの設定

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

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

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

サンプルコードの入手

フィードバック

その他のリソース

次の方法で共有

フリップ ビュー

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

推奨事項

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

例

UWP と WinUI 2

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

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

アイテム ソースの設定

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

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

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

サンプル コードの入手

関連記事

フィードバック

その他のリソース

フリップビュー

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

アイテムソースの設定

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

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

サンプルコードの入手