Question

我正在尝试创建一个Silverlight应用程序，它可以提取我的Flickr联系人和照片。我希望他们能够“很好地”展示。我打算创建一个控件，在他们的名字旁边显示用户及其图像。我希望每个用户一个接一个地列出。像这样：

----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------
User Name: <Photo> <Photo>
           <Photo> <Photo>
----------------------------

我希望能够动态创建它并在需要时显示滚动条。（因此用户可以上下滚动）。

创建这样的东西的最佳方法是什么？我应该遵循控制或技术吗？

Answer 1

你想要一个ListBox。实际上，有多个嵌套的列表框。

首先，将您的数据放入一个可以很好地与Silverlight配合使用的结构（我在这里假设Silverlight2）。为此，我会使用

ObservableCollection<Contact>

其中，联系人是代表一个联系人的类。那个班应该有一个

ObservableCollection<FlickrPhoto>

作为财产。

这是XAML的结构。您可能希望将模板移到资源，或创建用户控件来保存每个列表项。

<!-- needs the SilverlightToolkit for WrapPanel -->
<!-- xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" -->

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="400">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding UserName}"/>
                <ListBox 
                    Grid.Column="1" 
                    ItemsSource="{Binding FlickrPhotos}"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <tk:WrapPanel/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Photo}" Width="80"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

注意：

此代码只是一个非常粗略的例子
您需要禁用列表框上的水平滚动条以强制WrapPanel换行。
您需要将外部列表框（或祖先控件）的DataContext设置为您的联系人集合。

Answer 2

一旦你理解了模板，那么在Silverlight中这种布局很容易。

如果您曾经使用过ASP.net，请考虑使用类固醇的转发器（或者在最近的版本中使用ListView）。

基本上你想要的是一个列表框，用你的特定“模板”（用户名和四张照片）显示每个项目。

所以假设您将列表框的ItemsSource属性设置为携带UserName属性的对象集合，以及Photo1到Photo4：

<ListBox x:Name="Photos">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <YOUR_ITEM_LAYOUT_HERE />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

<YOUR_ITEM_LAYOUT_HERE />替换为您想要的一个项目的实际布局（用户名和四张照片）。

希望有所帮助。如果您需要更多信息，请发表评论。

Answer 3

Silverlight和Flicker上的article可能会对您有所帮助。

至于样式化用户控件，你看过MIX videos吗？

在Silverlight中创建“联系人列表”的最佳方法是什么？

3 个答案: