contact list display

Data template:

<DataTemplate x:Key="TextTileListFolderTemplate">
<Grid Background="DarkGray" Width="300" Height="70">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="s1.png" Stretch="UniformToFill"/>
<TextBlock Text="ameya "
FontSize="16" Margin="10,0,0,10"
TextTrimming="WordEllipsis" HorizontalAlignment="Left" />
StackPanel>
Grid>
DataTemplate>

Data template used in Grid view

common:LayoutAwarePage

x:Name="pageRoot"

x:Class="display45.GroupedItemsPage"

DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:display45"

xmlns:data="using:display45.Data"

xmlns:common="using:display45.Common"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Page.Resources>

<CollectionViewSource

x:Name="groupedItemsViewSource"

Source="{Binding Groups}"

IsSourceGrouped="true"

ItemsPath="TopItems"

d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

Page.Resources>

<Grid.RowDefinitions>

Grid.RowDefinitions>

<GridView

x:Name="TextTileListFolderGrid"

VerticalAlignment="Stretch" HorizontalAlignment="Left"

CanReorderItems="True" CanDragItems="True"

AutomationProperties.AutomationId="ItemGridView"

AutomationProperties.Name="Grouped Items"

Grid.RowSpan="2"

Padding="116,137,40,46"

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

ItemTemplate="{StaticResource TextTileListFolderTemplate}"

SelectionMode="None"

IsSwipeEnabled="false"

IsItemClickEnabled="True"

ItemClick="ItemView_ItemClick" >

<GridView.ItemsPanel>

<WrapGrid MaximumRowsOrColumns="6"

VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Center" />

ItemsPanelTemplate>

GridView.ItemsPanel>

I want to display contacts in this format.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishnujeet Kumar13y ago
Accepted answer
can you give some sample of your contact list , and
you can try this article code also may be that help you .

http://www.c-sharpcorner.com/UploadFile/0b73e1/different-types-of-panels-in-xaml-layout/
Vishnujeet Kumar13y ago
you can use this article data template .
http://www.scip.be/index.php?Page=ArticlesNET07

apply this style for win8 looks .

http://msdn.microsoft.com/en-us/library/ff727788.aspx
surya syamala13y ago
UI required for contacts list with profile pic and profile name without any functionality (initially right now).Just a XAML screen
Vishnujeet Kumar13y ago
can you explain your requirement .
surya syamala13y ago
Data template:

  <DataTemplate x:Key="TextTileListFolderTemplate">
<Grid Background="DarkGray" Width="300" Height="70">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="s1.png" Stretch="UniformToFill"/>
<TextBlock Text="ameya "
FontSize="16" Margin="10,0,0,10"
TextTrimming="WordEllipsis" HorizontalAlignment="Left" />
StackPanel>
Grid>
DataTemplate>

Data template used in Grid view
<
common:LayoutAwarePage

x:Name="pageRoot"



x:Class="display45.GroupedItemsPage"



DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"



xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"



xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"



xmlns:local="using:display45"



xmlns:data="using:display45.Data"



xmlns:common="using:display45.Common"



xmlns:d="http://schemas.microsoft.com/expression/blend/2008"



xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"



mc:Ignorable="d">



<Page.Resources>





<CollectionViewSource



x:Name="groupedItemsViewSource"



Source="{Binding Groups}"



IsSourceGrouped="true"



ItemsPath="TopItems"



d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>



Page.Resources>





<Grid Style="{StaticResource LayoutRootStyle}">



<Grid.RowDefinitions>



<RowDefinition Height="140"/>



<RowDefinition Height="*"/>



Grid.RowDefinitions>





<GridView



x:Name="TextTileListFolderGrid"



VerticalAlignment="Stretch" HorizontalAlignment="Left"



CanReorderItems="True" CanDragItems="True"



AutomationProperties.AutomationId="ItemGridView"



AutomationProperties.Name="Grouped Items"



Grid.RowSpan="2"



Padding="116,137,40,46"



ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"



ItemTemplate="{StaticResource TextTileListFolderTemplate}"



SelectionMode="None"



IsSwipeEnabled="false"



IsItemClickEnabled="True"



ItemClick="ItemView_ItemClick" >



<GridView.ItemsPanel>



<ItemsPanelTemplate>



<WrapGrid MaximumRowsOrColumns="6"



VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Center" />



ItemsPanelTemplate>



GridView.ItemsPanel>

I want to display contacts in this format.