如何綁定WP8中的<toolkit：LongListMultiSelector中的電話聯繫人？

Question

我想在LongListMultiSelector中顯示我的手機聯繫人。早些時候，我用一個列表框，顯示手機中的聯繫人...我的執行是這樣的： XAML

<ListBox Name="ContactResultsData" ItemsSource="{Binding}" Height="331" Margin="12,0" > 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal" > 
          <Border BorderThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center" BorderBrush="{StaticResource PhoneAccentBrush}" > 
           <Image Source="{Binding Converter={StaticResource ContactPictureConverter}}" Width="48" Height="48" Stretch="Fill" /> 
          </Border> 
          <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" /> 
         </StackPanel> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 

和C＃

private void SearchContacts_Click(object sender, RoutedEventArgs e) 
     { 
      ContactResultsData.DataContext = null; 
      Contacts cons = new Contacts(); 
      cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted); 
     } 
     void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e) 
     { 
      try 
      { 
       ContactResultsData.DataContext = e.Results; 
      } 
      catch (System.Exception) 
      { 
      } 
     } 

現在儘管列表框，我想以顯示它在LongListMultiSelector中。

我該怎麼做？

我現在用視圖模型

public partial class ContactsView : PhoneApplicationPage 
    { 
public ContactsViewModel() 
     { 
      var cons = new Microsoft.Phone.UserData.Contacts(); 
      cons.SearchAsync(String.Empty, FilterKind.None, null); 
      cons.SearchCompleted += ContactsSearchCompleted; 
     } 
     private void ContactsSearchCompleted(object sender, ContactsSearchEventArgs e) 
     { 
      PhoneContacts = new ObservableCollection<Contact>(e.Results.OrderBy(c => c.DisplayName)); 

     } 

     private ObservableCollection<Contact> _phoneContacts; 
     public ObservableCollection<Contact> PhoneContacts 
     { 
      get { return _phoneContacts; } 
      set 
      { 
       _phoneContacts = value; 
       RaisePropertyChanged("PhoneContacts"); 
      } 
     } 
} 

我怎麼能結合這個視圖模型來LongListMultiSelector，這樣的ObservableCollection聯繫人數據可見？ 就像圖..代替郵件的細節，我想顯示聯繫方式。 Phone Contacts http://blogs.windows.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-53-84-metablogapi/clip_5F00_image010_5F00_41CD2003.png

Answer 1

我修改視圖模型如下：

public class ContactsViewModel : ViewModelBase 
{ 

    public ContactsViewModel() 
    { 
     Contacts cons = new Contacts(); 
     cons.SearchAsync(String.Empty, FilterKind.None, null); 
     cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted); 

    } 

    void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e) 
    { 

     try 
     { 

      PhoneContactsList = new List<Contact>(e.Results.OrderBy(c => c.DisplayName)); 
      System.Diagnostics.Debug.WriteLine("PhoneContacts phone" + PhoneContactsList); 

     } 
     catch (System.Exception) 
     { 
      //That's okay, no results 
     } 

    } 

    //-------------------------------- 
    private List<Contact> _phoneContactsList; 
    public List<Contact> PhoneContactsList 
    { 
     get { return _phoneContactsList; } 
     set 
     { 
      _phoneContactsList = value; 
      RaisePropertyChanged("PhoneContactsList"); 
     } 
    } 
} 

代替的ObservableCollection，我使用的是列表。 而在XAML，我綁定PhoneContactsList我longlistmultiselector如下：

<toolkit:LongListMultiSelector x:Name="contactList" 
               Margin="0,14,-12,0" 
               ItemsSource="{Binding PhoneContactsList}" 
               LayoutMode="List" 
               ItemTemplate="{StaticResource ContactItemTemplate}" 
      /> 

其中ContactItemTemplate情況如下：

<DataTemplate x:Key="ContactItemTemplate"> 
      <StackPanel Margin="0,-14,0,24" > 
       <TextBlock Text="{Binding Path=DisplayName, Mode=OneWay}" 
             Margin="0,0,0,-4" 
             FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
             FontFamily="{StaticResource PhoneFontFamilySemiLight}"/> 

       <ListBox ItemsSource="{Binding Path=PhoneNumbers}" Height="60" Margin="36,0,0,0"> 
        <ListBox.ItemTemplate> 
         <DataTemplate> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="*"/> 
           </Grid.ColumnDefinitions> 
           <TextBlock Grid.Column="0" Text="{Binding Path=Kind, Mode=OneWay}" /> 
           <TextBlock Grid.Column="1" Text=": " /> 
           <TextBlock Grid.Column="2" Text="{Binding Path=PhoneNumber, Mode=OneWay}" /> 
          </Grid> 
         </DataTemplate> 
        </ListBox.ItemTemplate> 
       </ListBox> 

      </StackPanel> 
     </DataTemplate> 

Answer 2

大部分情況下，只需用手機替換ListBox的所有實例：LongListSelector工作得很好。有很多情況下，LongListSelector不推薦在ListBox上使用（因爲出現了一些意外功能），但它應該可以正常工作。

<phone:LongListSelector ItemsSource="{Binding DataList}"> 
    <phone:LongListSelector.ItemTemplate> 
     <DataTemplate/> 
    </phone:LongListSelector.ItemTemmplate> 
</phone:LongListSelector>