Answered by:
How to assign custome template to List View

Question
-
Hi All,
I am developing Windows store app in C#.
I have a listview with grid layout.
I want to assign custom template to list. That is first item in the list is bigger one and others will be smaller.
In this scenario how to assign custom template.
Please provide link for sample if there is any.
Thanks in Advance
NarenExt
- Edited by NarenExt Friday, December 27, 2013 1:27 PM
Friday, December 27, 2013 11:18 AM
Answers
-
Hi,
Do you mean you want to create different sized item in listview? If so, you can see this link below:
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.- Marked as answer by Anne Jing Monday, January 6, 2014 9:44 AM
Monday, December 30, 2013 5:13 AM -
Hi Naren
In your scenario we need to use "DataTemplateSelector" for dynamically change the item template , kindly follow the below steps.
Step : 1
Create different template in your App.xaml
<Application.Resources>
<DataTemplate x:Key="HorizontalItemTemplate">
<StackPanel Height="100" Width="50" >
<TextBlock Text="FirstTemplate"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="VerticalItemTemplate">
<StackPanel Height="100" Width="100" >
<TextBlock Text="SecondTemplate"></TextBlock>
</StackPanel>
</DataTemplate>
</Application.Resources>Step : 2
Create TempplateSelector.cs class for override the "SelectTemplateCore" methods using DataTemplateSelector class
public class CustomItem
{
public string TemplateName { get; set; }
}
public class TemplateSelector : DataTemplateSelector
{
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
// cast item to your custom item class
var customItem = item as CustomItem;
if (customItem == null)
return null;
string templateName = String.Empty;
if (customItem.TemplateName == "HorizontalItemTemplate")
{
// image is horizontal
templateName = "HorizontalItemTemplate";
}
else
{
templateName = "VerticalItemTemplate";
}
object template = null;
// find template in App.xaml
Application.Current.Resources.TryGetValue(templateName, out template);
return template as DataTemplate;
}
}In your xaml page coding, Bind the "TemplateSelector" resource for "ItemTemplateSelector" property
<Page
x:Class="DataValidation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DataValidation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Extension ="using:Validation.Extension"
mc:Ignorable="d">
<Page.Resources>
<local:TemplateSelector x:Key="OrientationTemplateSelector" /></Page.Resources>
<ListView x:Name="collection" ItemTemplateSelector="{StaticResource OrientationTemplateSelector}" Grid.Row="9" Grid.ColumnSpan="2" >
</ListView>Xaml.cs
List<CustomItem> item = new List<CustomItem>();
public MainPage()
{
this.InitializeComponent();
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
collection.ItemsSource = item;
}- Edited by Loganathan.v Thursday, January 2, 2014 2:33 PM
- Marked as answer by Anne Jing Monday, January 6, 2014 9:45 AM
Thursday, January 2, 2014 2:32 PM
All replies
-
Hi,
Do you mean you want to create different sized item in listview? If so, you can see this link below:
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.- Marked as answer by Anne Jing Monday, January 6, 2014 9:44 AM
Monday, December 30, 2013 5:13 AM -
Hi Naren
In your scenario we need to use "DataTemplateSelector" for dynamically change the item template , kindly follow the below steps.
Step : 1
Create different template in your App.xaml
<Application.Resources>
<DataTemplate x:Key="HorizontalItemTemplate">
<StackPanel Height="100" Width="50" >
<TextBlock Text="FirstTemplate"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="VerticalItemTemplate">
<StackPanel Height="100" Width="100" >
<TextBlock Text="SecondTemplate"></TextBlock>
</StackPanel>
</DataTemplate>
</Application.Resources>Step : 2
Create TempplateSelector.cs class for override the "SelectTemplateCore" methods using DataTemplateSelector class
public class CustomItem
{
public string TemplateName { get; set; }
}
public class TemplateSelector : DataTemplateSelector
{
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
// cast item to your custom item class
var customItem = item as CustomItem;
if (customItem == null)
return null;
string templateName = String.Empty;
if (customItem.TemplateName == "HorizontalItemTemplate")
{
// image is horizontal
templateName = "HorizontalItemTemplate";
}
else
{
templateName = "VerticalItemTemplate";
}
object template = null;
// find template in App.xaml
Application.Current.Resources.TryGetValue(templateName, out template);
return template as DataTemplate;
}
}In your xaml page coding, Bind the "TemplateSelector" resource for "ItemTemplateSelector" property
<Page
x:Class="DataValidation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DataValidation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Extension ="using:Validation.Extension"
mc:Ignorable="d">
<Page.Resources>
<local:TemplateSelector x:Key="OrientationTemplateSelector" /></Page.Resources>
<ListView x:Name="collection" ItemTemplateSelector="{StaticResource OrientationTemplateSelector}" Grid.Row="9" Grid.ColumnSpan="2" >
</ListView>Xaml.cs
List<CustomItem> item = new List<CustomItem>();
public MainPage()
{
this.InitializeComponent();
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });
item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });
collection.ItemsSource = item;
}- Edited by Loganathan.v Thursday, January 2, 2014 2:33 PM
- Marked as answer by Anne Jing Monday, January 6, 2014 9:45 AM
Thursday, January 2, 2014 2:32 PM