Каков наилучший подход к созданию «списка контактов» в Silverlight?

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 внешнего Listbox (или элемента управления предка) для вашей коллекции контактов.

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 может вам помочь.

Что касается стилизации пользовательского элемента управления, вы видели MIX видео ?