问题
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 app contains only text blocks to show names- like first name last name phone number but i need to add photos also what would be the code how to show pictures along with names. i search a lot couldn't get a proper solution here is my code:
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;
}
}
}
}
回答1:
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.
回答2:
I found a better way to do that.
Project needs 3 components mainly.
- xml file
- xml.cs file
- 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; }
}
}
}
来源：https://stackoverflow.com/questions/39732720/how-to-make-a-windows-phone-app-longlistselecter-with-image-and-strings