酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Windows PhoneでWrapPanelを使ってサムネイル画像の表示をおこなう

ListBoxは、アイテム毎がStackPanel扱いになっているのか縦一行でしか表示出来ませんでした。

ItemsControlをWrapPanelの上に載せてコントロールを横置きします。但し、ItemsControlはスクロールに対応していませんので、ScrollViewerの上にItemsControlを配置するようにします。

<ScrollViewer>
    <ItemsControl x:Name="MainListBox" ItemsSource="{Binding Path=Items}">
    
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <toolkit:WrapPanel Name="wrapPanel1" Orientation="Horizontal" 
                    ItemHeight="90" ItemWidth="90" Margin="10">
                    <Image Source="/TestApp;component/Images/sample.jpg"></Image>
            </toolkit:WrapPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    </ItemsControl>
</ScrollViewer>

上記のXAMLを実行すると以下のような表示になります。

f:id:ch3cooh393:20141025092622p:plain