Xamarin datatemplate with bindings in code behind

Question

I have tried to make a page in my app where all controls are generated dynamically via C# code behind. I am using a Nuget Packages, DLToolkit, flowlist to create a flow list.

I have already used this package in my project before using Xaml, and it fully works. However when I try to create a datatemplate in code behind, it just displays a blank control, however when hovering above this control, you can see there's actually items in it.

My question is: How can I make a datatemplate with databindings in code behind?

Here is an example and works in Xaml:

<flv:FlowListView x:Name="flvList" BackgroundColor="White" FlowColumnCount="3" FlowItemsSource="{Binding LstItemSource}" HasUnevenRows="True">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>

                    <StackLayout BackgroundColor="White" Padding="2" HorizontalOptions="FillAndExpand">

                        <Frame  Margin="20" Padding="0" HeightRequest="175" OutlineColor="Gray" BackgroundColor="White" CornerRadius="10" HasShadow="True" IsClippedToBounds="True">
                            <Frame.Content>

                                <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
                                    <Image Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All"  Source="{Binding BgImage}" />
                                    <BoxView Color="Black" Opacity=".5"  AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All"/>
                                    <StackLayout Margin="20" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                                        <Label Text="{Binding SubTitle}"  FontSize="Medium" TextColor="#66FFFFFF"/>
                                        <Label Text="{ Binding Title}" FontSize="Large" TextColor="White" />
                                    </StackLayout>
                                </AbsoluteLayout>

                            </Frame.Content>
                        </Frame>

                    </StackLayout>

                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>

However, in this project the controls are generated, so there is no Xaml code involved. This is an example of the code that I've tried in code behind, but doesn't work:

#region Datatemplate
            var dataTemplate = new DataTemplate(() =>
            {
                var StackLayout = new StackLayout { BackgroundColor = Color.Pink, Padding = 2, HorizontalOptions = LayoutOptions.FillAndExpand };

                #region children/content for frame
                AbsoluteLayout absoluteLayout = new AbsoluteLayout { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };


                #region content for AbsoluteLayout
                var imgBg = new Image();
                AbsoluteLayout.SetLayoutBounds(imgBg , new Rectangle(1, 1, 1, 1));
                AbsoluteLayout.SetLayoutFlags(imgBg , AbsoluteLayoutFlags.All);

                imgBg .SetBinding(Image.SourceProperty, "BgImage");
                absoluteLayout.Children.Add(imgBg );


                var overlayBox = new BoxView { Color = Color.Black, Opacity = 0.5 };
                AbsoluteLayout.SetLayoutBounds(overlayBox, new Rectangle(1, 1, 1, 1));
                AbsoluteLayout.SetLayoutFlags(overlayBox, AbsoluteLayoutFlags.All);
                absoluteLayout.Children.Add(overlayBox);


                #region InnerStackpanel
                StackLayout innerStackVoorAbsoluteLayout = new StackLayout { Margin = new Thickness(20), VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.CenterAndExpand };

                var lblTitel = new Label { FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)), TextColor = Color.White };
                var lblSubTitel = new Label { FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)), TextColor = Color.White };


                //Bindings 
                lblTitel.SetBinding(Label.TextProperty, "Title");
                lblSubTitel.SetBinding(Label.TextProperty, "SubTitle");

                innerStackVoorAbsoluteLayout.Children.Add(lblSubTitel);
                innerStackVoorAbsoluteLayout.Children.Add(lblTitel);

                absoluteLayout.Children.Add(innerStackVoorAbsoluteLayout);
                #endregion

                #endregion


                #endregion

                Frame frame = new Frame();
                frame.Content = absoluteLayout;



                StackLayout.Children.Add(frame);


                return StackLayout;
            });

            #endregion


            FlowListView lstRelatieLijst = new FlowListView();
            lstRelatieLijst.ItemsSource = lstRelatieItems;
            lstRelatieLijst.FlowColumnTemplate = dataTemplate;
            lstRelatieLijst.BackgroundColor = Color.LightGoldenrodYellow;
            lstRelatieLijst.FlowColumnCount = 1;
            lstRelatieLijst.HasUnevenRows = true;


            #endregion

Can someone give me some advice how I can become something similar like the upper Xaml in code behind, please?

I already tried the following sources but unfortunately I doesn't work as expected. I hoped to see the same result or something similar like the XAML code. But after following their info,the FLowListView appears to be empty:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/creating

https://www.codeproject.com/Questions/516614/createplusdatatemplatepluscodeplusbehind

Answer 1

You should use

flowList.SetBinding(FlowListView.FlowItemsSourceProperty, "List"); instead of ItemsSource

Here is the working sample....

using DLToolkit.Forms.Controls;
using System;
using Xamarin.Forms;

namespace FlowListTest
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            LoadUI();
            BindingContext = new BContext();
        }

        private void LoadUI()
        {
            var dataTemplate = new DataTemplate(() =>
            {
                var image = new Image();
                image.SetBinding(Image.SourceProperty, "BgImage");

                var titleLabel = new Label
                {
                    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                    TextColor = Color.White,
                };
                titleLabel.SetBinding(Label.TextProperty, "Title");

                var subTitleLabel = new Label
                {
                    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                    TextColor = Color.White,
                };
                subTitleLabel.SetBinding(Label.TextProperty, "Subtitle");

                return new StackLayout
                {
                    BackgroundColor = Color.Pink,
                    Padding = 2,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    Children = {
                        new Frame {
                            Content = new AbsoluteLayout {
                                 HorizontalOptions = LayoutOptions.FillAndExpand,
                                 VerticalOptions = LayoutOptions.FillAndExpand,
                                 Children = {
                                    image,
                                    new StackLayout {
                                         Margin = new Thickness(20),
                                         VerticalOptions = LayoutOptions.CenterAndExpand,
                                         HorizontalOptions = LayoutOptions.CenterAndExpand,
                                         Children = {
                                            titleLabel,
                                            subTitleLabel
                                         }
                                    }
                                 }
                            }
                        }
                    }
                };
            });

            var flowList = new FlowListView();
            flowList.SetBinding(FlowListView.FlowItemsSourceProperty, "List");
            flowList.FlowColumnTemplate = dataTemplate;
            flowList.BackgroundColor = Color.LightGoldenrodYellow;
            flowList.FlowColumnCount = 1;
            flowList.HasUnevenRows = true;

            var button = new Button { Text = "Add" };
            button.Clicked += Button_Clicked
            ;
            Content = new StackLayout
            {
                Children = {
                    button,
                    flowList
                }
            };

        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            (BindingContext as BContext).Add();
        }
    }

    public class Foo
    {
        public string BgImage { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
    }

    public class BContext
    {
        public FlowObservableCollection<Foo> List { get; set; }

        public BContext()
        {
            List = new FlowObservableCollection<Foo>
            {
                new Foo {
                    BgImage = "http://via.placeholder.com/350x150",
                    Title = "Title",
                    Subtitle = "SubTitle"
                },
                new Foo {
                    BgImage = "http://via.placeholder.com/350x150",
                    Title = "Title1",
                    Subtitle = "SubTitle1"
                }
            };
        }

        public void Add()
        {
            List.Add(new Foo
            {
                BgImage = "http://via.placeholder.com/350x150",
                Title = "Title" + List.Count,
                Subtitle = "SubTitle" + List.Count
            });
        }
    }
}