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の見た目をちょこちょこっと調整してやれば、ほらこの通り。
ね?簡単でしょ?