FlipViewにコンテキストインジケータをつけてみよう

XAML AC25日目用のエントリですが、あまりにもネタに走りすぎてXAML成分なさすぎだとぐらばくさん*1に怒られる勢い。

しかたないので、XAML AC25日目延長戦ということでもう少しXAMLっぽいの。

Windows Store Appsで上下や左右にスワイプでページめくりできるコントロール、FlipViewってありますよね。ちなみにこれです。

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh850405.aspx

ちなみにこのFlipViewですが、MSDNのガイドラインを見てみると次のようなことがかいてます。

ユーザーが特定の項目に直接ジャンプできるように、コンテキストインジケーターコントロールを追加することもできます。

追加することもできます。

つまりどういうことやねん。

といって調べてみると、どうやらガイドラインとして追加してもいいけど別にコントロールとしてそういう見た目は提供していないので好き勝手やってね。ということみたいです。じゃぁ実際どうやってやるの。というはなし。

さっそくXAMLでぱっとやるとこうです。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <FlipView x:Name="FlipView" ItemsSource="{Binding}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" />
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
    <ListBox Grid.Row="1" ItemsSource="{Binding}" Background="Transparent"
            SelectedIndex="{Binding ElementName=FlipView,Path=SelectedIndex,Mode=TwoWay}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate >
                <Rectangle Fill="White" Width="80" Height="80"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.Template>
            <ControlTemplate TargetType="ListBox">
                <ItemsPresenter/>
            </ControlTemplate>
        </ListBox.Template>
    </ListBox>
</Grid>