MetroStyleApp入門 vol56.FlipViewコントロール

月曜日 , 3, 9月 2012 Leave a comment

 FlipViewコントロールを利用すると画面をスワイプすることで次々と左右(または上下)に画面を切り替えて表示する表現を実現することができます。

 

FlipViewは次々と画面を切り替える表現ができる

 

 上の画像のように画面の左右に矢印のマークが表示され次々と画面を切り替えることができます。

 FlipViewの動作を見るには、プロジェクトの作成で、グリッドアプリケーションを作成すると簡単です。

 

 

 ItemDetailPage.xamlにFlipViewを利用したコードがあります。

 

        <FlipView
            x:Name="flipView"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="0,137,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate>
                <DataTemplate>
/// Flipされる画面の定義
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

 

 

  GridView、ListViewなどと同じく複数のデータの集合(コレクション)を扱うためにDataTemplateを利用しています。

 (コレクションの扱いについてはデータバィンディングとして後程紹介する予定です)

 

 リストページから商品の詳細に遷移した場合などに次々と商品を表示するのに利用されます。

 あわせて自動で段組みを行い拡張してくれるRitchTextBlockを利用すると便利です。

 

 Windows 8アプリケーションではよく使うコントロールの一つなのでぜひ覚えておきましょう。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください