読者です 読者をやめる 読者になる 読者になる

tmytのらくがき

個人の日記レベルです

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

雑記

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

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

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

ちなみにこの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>

FlipViewにBindingされてるのはIEnumerable<String>でファイルパスが入ってます。

とっても簡単ですね。FlipViewのSelectedIndexとListBoxのSelectedIndexをBindingしているだけ。あとはListBoxの見た目をちょこちょこっと調整してやれば、ほらこの通り。

f:id:tmyt:20131225003503p:plain

ね?簡単でしょ?

*1:XAML ACのボスにして、26日目の守護者。別名大とり