Табличка данных Xamarin с привязками в коде позади не работает - PullRequest
Новая
       26

Табличка данных Xamarin с привязками в коде позади не работает

0 голосов
/ 21 мая 2018

Я попытался сделать страницу в своем приложении, где все элементы управления генерируются динамически с помощью кода C # позади.Я использую Nuget Packages, 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

1 Ответ

0 голосов
/ 22 мая 2018

Вы должны использовать

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