Xamarin 数据模板在代码中绑定不起作用

Question

我试图在我的应用程序中创建一个页面，其中所有控件都是通过 C# 代码隐藏动态生成的。我正在使用 Nuget 包，DLToolkit, flowlist 来创建流列表。

在使用Xaml之前，我已经在我的项目中使用过这个包，而且它完全可以工作。然而，当我尝试在代码隐藏中创建一个 datatemplate 时，它只显示一个空白控件，但是当悬停在该控件上方时，您可以看到其中实际上有项目。

我的问题是：如何在代码隐藏中使用数据绑定制作数据模板？

这是一个示例，适用于 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>

然而，在这个项目中，控件是生成的，所以没有涉及Xaml代码。这是我在后面的代码中尝试过但不起作用的代码示例：

#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

谁能给我一些建议，我怎样才能在后面的代码中变成类似上层 Xaml 的东西？

我已经尝试了以下来源，但不幸的是我没有按预期工作。我希望看到相同的结果或类似于 XAML 代码的结果。但是在关注他们的信息之后，FLowListView 似乎是空的：

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

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

Answer 1

你应该使用

flowList.SetBinding(FlowListView.FlowItemsSourceProperty, "List"); 而不是 ItemsSource

这是工作示例....

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

Xamarin 数据模板在代码中绑定不起作用

Xamarin datatemplate with bindings in code behind not working

c#

code-behind

datatemplate

xamarin

xamarin.forms