Forum Xamarin.Forms

Define ItemTemplate directly from Item in ListView

alihutalihut TRMember ✭✭

So i made custom CustomListView. Something like this.

public class MyCustomListView : ListView
    {
        public static readonly BindableProperty ItemsProperty =
            BindableProperty.Create("Items", typeof(IEnumerable<MyCustomListViewItem>), typeof(MyCustomListView), new List<MyCustomListViewItem>());

        public MyCustomListView()
        {
            ItemTapped += MyCustomListView_ItemTapped;
        }

        public IEnumerable<MyCustomListViewItem> Items
        {
            get { return (IEnumerable<MyCustomListViewItem>)GetValue(ItemsProperty); }
            set
            {
                SetValue(ItemsProperty, value);

                List<MyCustomListViewItem> tlList = new List<MyCustomListViewItem>();
                foreach (MyCustomListViewItem tlItem in value)
                    tlList.Add(tlItem);

                ItemsSource = tlList;
            }
        }

        private async void MyCustomListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            //do something when tapped
        }
}

Now _MyCustomListViewItem _was like this.

public class MyCustomListViewItem 
    {
        public string Property1{ get; set; }

        public string Property2{ get; set; }

    }

So i defined my itemtemplate easily in the xaml.

<views:MyCustomListView>
              <views:MyCustomListView.ItemTemplate>
                  <DataTemplate>
                      <ViewCell>
                          <StackLayout Orientation="Vertical">
                              <Label 
                                     Text="{Binding Property1}"></Label>
                              <Label Text="{Binding Property2}"></Label>
                            </StackLayout>
                        </ViewCell>
                  </DataTemplate>
                </views:MyCustomListView.ItemTemplate>
          </views:MyCustomListView>

But MyCustomListViewItem ise changed now. Its something like

    public class MyCustomListViewItem 
        {
            public string Property1{ get; set; }

            public string Property2{ get; set; }

            public List<ItemInfoModel> ItemInfoModels= new List<ItemInfoModel>();

        }

Now for defining the itemtemplate i need to get ItemInfoModels and iterate each item in the list to bind multiple label.

            myCustomListView.ItemTemplate = new DataTemplate(() =>
            {
                StackLayout sl = new StackLayout();
                var label1= new Label();
                var label2= new Label();

                label1.SetBinding(Label.TextProperty, "Property1");
                label2.SetBinding(Label.TextProperty, "Property2");
               //i can bind Property1 and Property2 like this. but how can i bind every item of ItemInfoModels to new label? Can i get the MyCustomListViewItem here?

                sl.Children.Add(label1);
                sl.Children.Add(label2);

                return new ViewCell { View = grid };
            });

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited April 2020

    You could use Bindable Layouts inside ViewCell .

    Check the simple sample

    Xaml

     <ListView x:Name="listview" RowHeight="200" HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell Height="200">
                            <StackLayout Orientation="Vertical" >
                                <Label  Text="{Binding Property1}"></Label>
                                <Label Text="{Binding Property2}"></Label>
                                <StackLayout  BindableLayout.ItemsSource="{Binding ItemInfoModels}" Orientation="Vertical" BackgroundColor="Red">
                                    <Label  Text="{Binding .}"></Label>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    

    Code behind

        public class MyCustomListViewItem
        {
            public string Property1 { get; set; }
    
            public string Property2 { get; set; }
    
            public List<string> ItemInfoModels { get; set; }   // here we should use string list 
    
        }
    
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Page7 : ContentPage
        {
            List<MyCustomListViewItem> list = new List<MyCustomListViewItem>(); 
    
            public Page7()
            {
                InitializeComponent();
    
                MyCustomListViewItem model = new MyCustomListViewItem();
                model.Property1 = "111";
                model.Property2 = "222";
    
    
                List<string> ItemInfoModels = new List<string>();
                ItemInfoModels.Add("a");
                ItemInfoModels.Add("b");
                model.ItemInfoModels = ItemInfoModels;
    
                list.Add(model);
    
                listview.ItemsSource = list;
            }
        }
    

    Considerations :

    I tried to use model list in MyCustomListViewItem , but it seems can't find the correct path , so i change it to string list .

Sign In or Register to comment.