Как сделать приложение для телефона Windows 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; } 
     } 
    } 
}