朋友图片列表

时间:2011-05-06 14:44:10

标签: windows-phone-7 datatemplate panorama-control

我正在开发一个Windows Phone 7应用程序。我很新。

我看过here带有一些照片的全景控制(在全景项目样本中)。

我想这样做,但我不知道如何。

如何使用列表框和DataItemTemplate执行此操作?或者还有其他方法吗?

我将使用带有URL列表的XML。我将添加与XML相同数量的图像。

但我的问题是如何填写这种矩阵?

如果您不明白,请告诉我。

1 个答案:

答案 0 :(得分:1)

该特定样本是全景控件的手工制作副本。

理解它的最简单方法可能是下载并查看 - 查看http://phone.codeplex.com/SourceControl/changeset/view/55041#820130中“示例”PanoramaItem中特定图片部分的源代码 - 您可以看到它是使用ListBox完成的他们的风格PanoramaImageListBox

列表框:

 <ListBox x:Name="listBox2"
                         HorizontalAlignment="Left"
                         Width="600"
                         ItemsSource="{Binding Source={StaticResource PicturesLoader}, Path=Pictures}"
                         Style="{StaticResource PanoramaImageListBox}"
                         SelectionChanged="listBox_SelectionChanged"/>

风格:

<Style x:Key="PanoramaImageListBox" TargetType="ListBox">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <my:MultiColumnsPanel Columns="3"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Image Width="185" Margin="0,0,12,12"
                                           Source="{Binding Bitmap}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

您可以看到此样式使用自己的类 - MultiColumnPanel - 请参阅http://phone.codeplex.com/SourceControl/changeset/view/55041#820131处的代码