如何在中绑定电话联系人

Question

I want to display my phone contacts in LongListMultiSelector. Earlier I was using a list box to display the phone contacts... My implementation was like: 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>

and 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)
            {
            }
        }

Now in spite of List Box, i want to display it in a LongListMultiSelector.

How can I do that?

Now I am Using a View Model

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");
            }
        }
}

How can I bind this viewModel to LongListMultiSelector, so that the ObservableCollection contact data is visible ? just like the figure ..instead of mail details, i want to show contact details. 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

For the most part, simply replacing all instances of ListBox with phone:LongListSelector works perfectly fine. There are a number of cases where the LongListSelector is not recommended over the ListBox (as some unexpected functionality occurs), but it should work fine.

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

Answer 2

I modified my view-model as follow:

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");
        }
    }
}

instead of observablecollection , i am using a list. and in the xaml, i binded PhoneContactsList to my longlistmultiselector as follow:

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

where ContactItemTemplate is as follow:

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