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

Answer 1

Hi,

Do you mean you want to create different sized item in listview? If so, you can see this link below:

http://social.msdn.microsoft.com/Forums/windowsapps/en-US/94a040c7-4ddf-44b3-a219-e3a84270a062/gridview-listview-different-sized-items-in-cxaml?forum=winappswithcsharp

Best Wishes!

---

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 &quot;Mark as Answer&quot; 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.

Answer 2

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