locked
How to assign custome template to List View RRS feed

  • 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:

    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.

    • 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:

    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.

    • 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