Silverlightで「連絡先の一覧」を作成する最良の方法は何ですか？

Question

Flickrの連絡先や写真を取り込むSilverlightアプリケーションを作成しようとしています。私は彼らに「きれいに」表示させたい。私は自分の名前のすぐ隣にユーザーとそのイメージを表示するコントロールを作成しようと考えています。私は各ユーザーを次々とリストアップしたい。

---------------------------- 
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

SilverlightとFlickerのarticleがお手伝いします。

ユーザーコントロールのスタイリングに関しては、MIX videosを見たことがありますか？

Answer 2

ListBoxが必要です。実際には、複数のネストされたリストボックス。

まず、Silverlightでうまく動作する構造にデータを取得します（ここではSilverlight2と仮定しています）。これについては、私は

ObservableCollection<Contact> 

ここで、連絡先は1つの連絡先を表すクラスです。そのクラスはプロパティとして

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 3

シルバーライトでは、テンプレートを理解すると、そのようなレイアウトが簡単です。

ASP.netをやったことがあるなら、ステロイド（または最近のバージョンのListViewかもしれません）でリピーターを考えてください。

基本的には、各アイテムを特定の「テンプレート」（ユーザー名と4枚の写真）で表示するリストボックスが必要です。

ので、あなたはUserNameプロパティを持つオブジェクトのコレクションにあなたのリストボックスのItemsSourceプロパティを設定すると仮定すると、だけでなく、写真4に写真1：

<YOUR_ITEM_LAYOUT_HERE />は、1つの項目のためにあなたがしたい実際のレイアウトに置き換えられ

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

（ユーザー名と4枚の写真）。

希望に役立ちます。さらに情報が必要な場合は、コメントを残してください。