how to make a windows phone app LongListSelecter with Image and strings

Question

i made a simple long list selector app without jump header or header template. i made it after a long journey in to the google and stack overflow. i was satisfied with it. the

Answer 1

I found a better way to do that.

Project needs 3 components mainly.

1. xml file
2. xml.cs file
3. class file

Implications are mainly made in these file.

In XML file arrange all control drag and drop longlistselector control

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

class file

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

Answer 2

Here is demo XAML

You need to add contact image in your class

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

Hope this helps.