locked
create ListView ItemTemplate programmatically/dynamically

    Question

  • Hi,

    here is my problem:

    I have a ListView control on my xaml page. But the data item structure is different from on item to another. Sometimes i need a Grid with 4 columns, sometimes with 5, sometimes with 6. So my idea was to dynamically create the data template and change the ColumnDefinitions programmatically . But i don´t find a way to do it. I come from the HTML/JS Windows App Devolpment side, and there it is relatively easy to do such things ...

    Wednesday, January 21, 2015 1:18 PM

Answers

All replies

  • try this:

     <Grid>
    
            <ListView x:Name="listview">
                <ListView.ItemContainerStyle >
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <StackPanel >
                           <TextBlock Text="{Binding GroupName}"/>
                            <ListView     ItemsSource="{Binding Items}" Background="Blue" >
                                <ListView.ItemsPanel >
                                    <ItemsPanelTemplate>
                                        <WrapGrid Orientation="Vertical"  MaximumRowsOrColumns="1"/>
                                    </ItemsPanelTemplate>
                                </ListView.ItemsPanel> 
                                <ListView.ItemTemplate >
                                    <DataTemplate >
                                        <Border BorderBrush="Yellow" BorderThickness="2" Width="24" >
                                            <TextBlock Text="{Binding Data}" FontSize="18" Foreground="White" />
                                        </Border>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
    
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>

    namespace App1
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
            }
    
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.
            /// This parameter is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                var d =BuildTestData();
               listview.ItemsSource  = d;
               foreach (var item in d)
               {
                   Debug.WriteLine(item.GroupName);
                 
               }
            }
    
    
            private List<MyGroup> BuildTestData()
            {
                List<MyGroup> groups = new List<MyGroup>();
                List<Detail> c1 = new List<Detail>();
                c1.Add(new Detail() { Data = "1" });
                c1.Add(new Detail() { Data = "2" });
                c1.Add(new Detail() { Data = "3" });
                groups.Add(new MyGroup() { Items = c1, GroupName = "First" });
    
                List<Detail> c2 = new List<Detail>();
                c2.Add(new Detail() { Data = "11" });
                c2.Add(new Detail() { Data = "21" });
                c2.Add(new Detail() { Data = "31" });
                c2.Add(new Detail() { Data = "41" });
                groups.Add(new MyGroup() { Items = c2, GroupName = "Second" });
    
    
                List<Detail> c3 = new List<Detail>();
                c3.Add(new Detail() { Data = "A" });
                c3.Add(new Detail() { Data = "B" });
                c3.Add(new Detail() { Data = "C" });
                c3.Add(new Detail() { Data = "D" });
                c3.Add(new Detail() { Data = "E" });
                groups.Add(new MyGroup() { Items = c3, GroupName = "Third" });
    
                return groups;
            }
        }
    
        public class MyGroup
        {
           public List<Detail> Items
            { get; set; } 
            public string GroupName
            {
                get;
                set;
            }
        }
    
     
    
        public class Detail
        {
            public string Data
            {
                get;
                set;
            }
        }
    }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Wednesday, January 21, 2015 3:01 PM
  • Thanks, but not quite what i wanted. in your solution, the listView elements in the second listView have equally distributed widths. the same i could accomplish with defining a grid with fractions (if i know the maximum number of columns). But what i really want to do is to calculate the width of the grid-columns to optimally distribute the column-widths.

    Therefore, my question was, if there is a way to dynamically and programmtically change the rendering of listview-Items based on the data structure.

    Friday, January 23, 2015 8:50 AM
  • Hi Preininf,

    You can try to change the ListView ItemTemplate according to the data source at runtime. See how to do it from https://social.msdn.microsoft.com/Forums/windowsapps/en-US/62d40126-b950-4ebd-8438-afcf86fd83b3/dynamically-setting-the-itemtemplate-with-a-datatemplate-at-runtime-in-codebehind?forum=winappswithcsharp.

    Please let me know if you have any concerns.

    Regards,


    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.

    Tuesday, January 27, 2015 9:16 AM
    Moderator