如何使用图像和字符串制作Windows Phone应用程序LongListSelecter

Question

我做了一个简单的长列表选择器应用程序，没有跳转头或头模板。 经过一段漫长的旅程，我做到了google和堆栈溢出。 我对此感到满意。 该应用程序仅包含用于显示姓名的文本块-如名字，姓氏电话号码，但我还需要添加照片，以及如何与姓名一起显示图片的代码。 我搜索了很多无法获得适当解决方案的代码，这是我的代码：

namespace listparee6
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
            List<SpeedDial> speeddial = new List<SpeedDial>();
            speeddial.Add(new SpeedDial ( "deepu", "43" ));
            speeddial.Add(new SpeedDial ( "anoop","32" ));
            speeddial.Add(new SpeedDial ( "abhilash","76"  ));
            SpeedDialLLS.ItemsSource = speeddial;
        }

        public class SpeedDial
        {

            public string Name { get; set;}
            public String Phone { get; set; }
            public SpeedDial(string peru, string num) 
            {this.Phone=num ;
            this.Name = peru;
            }
           }
    }
}

Answer 1

这是演示XAML

您需要在课程中添加联系人图像

<phone:LongListSelector
                      x:Name="SpeedDialLLS"
                      ItemsSource="{Binding  Path=speeddial}"
                      Background="Transparent"
                      Height="auto"
                      LayoutMode="List"
                      IsGroupingEnabled="True"
                      HideEmptyGroups ="False">
                    <phone:LongListSelector.GroupHeaderTemplate>
                        <DataTemplate>
                            <Border Background="Transparent" Padding="5">
                                <Border Background="Black" BorderBrush="Black" BorderThickness="2" Width="500" 
                                        Height="62" Margin="0,0,0,0" HorizontalAlignment="Left">
                                    <TextBlock Text="{Binding Path=Key}" Foreground="White" FontSize="25" Padding="0" 
                                                FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </Border>
                        </DataTemplate>
                    </phone:LongListSelector.GroupHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>

                                        <Grid x:Name="GridItem">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="150" />
                                                <RowDefinition Height="10"/>
                                            </Grid.RowDefinitions>

                                            <Image x:Name="photoimg" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Center"  Margin="10,0,0,0" Source="{Binding Path=ContactImage}" Height="100" Width="100" ></Image>
                                            <TextBlock x:Name="FirstName" Grid.Row="0" Margin="20,0,0,0"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" TextWrapping="Wrap" Foreground="Black" Text="{Binding Path=FirstName}" FontSize="30"></TextBlock>

希望这可以帮助。

Answer 2

我找到了一种更好的方法。

项目主要需要3个组成部分。

1. xml文件
2. xml.cs文件
3. 类文件

含义主要在这些文件中。

在XML文件中排列所有控件拖放longlistselector控件

<phone:LongListSelector x:Name="LLs" HorizontalAlignment="Left" Height="566" VerticalAlignment="Top" Width="401" Margin="42,144,0,0">
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Source="{Binding Photo}" Height="100" Width="100" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding Names}" HorizontalAlignment="Right"/>
            </StackPanel>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

xml.cs

public partial class MainPage : PhoneApplicationPage
{
    ObservableCollection<SpeedDial> speedDialList = new ObservableCollection<SpeedDial>();

    // Constructor
    public MainPage()
    {

        InitializeComponent();
        speedDialList = new ObservableCollection <SpeedDial>();
        speedDialList.Add(new SpeedDial() { Names = "deepu", Photo =  new Uri("Image/2.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "jilu", Photo =  new Uri("Image/3.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "tinu", Photo =  new Uri("Image/4.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "jhd", Photo = new Uri("Image/7.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "jose", Photo = new Uri("image/1.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "hgscf", Photo =  new Uri("image/2.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "hjsg", Photo =  new Uri("Image/5.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "jhvdj", Photo =  new Uri("Image/6.jpg" ,UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "jhd", Photo =  new Uri("Image/7.jpg",UriKind.Relative) }); 
        speedDialList.Add(new SpeedDial() { Names = "jkgh", Photo =  new Uri("Image/4.jpg",UriKind.Relative) });
        speedDialList.Add(new SpeedDial() { Names = "kigh", Photo =  new Uri("Image/3.jpg",UriKind.Relative) });
        LLs.ItemsSource = speedDialList;
    }
}
}}

类文件

namespace yourprojuctname
{
class SpeedDial
    {
       public string name;
        public string Names
        {
            get { return name; }
            set { name = value; }
        }
        private Uri photo;
        public Uri Icon
        {
            get { return photo; }
            set { photo = value; }
        }
    }
}