Adding Children in StackLayout using Binding in ViewModel, Xamarin.Forms

Question

I am trying to implement MVVM in my Xamarin.Forms project.

This is my StackLayout with x:Name

<StackLayout x:Name="approvalsStack"></StackLayout>

And This is how I am populating Children in this StackLayout

StackLayout stack = new StackLayout();
                    Frame frame = new Frame { BorderColor = Color.LightGray };
                    frame.Content = new Label { Text = a.FullName + " (" + a.Decision + ")" + " " + a.DecisionDate.ToString() };
                    stack.Children.Add(frame);
                    approvalsStack.Children.Add(stack);

Now I am stuck, How can I populate the children using ViewModel/Binding.

Almir Vuk · Accepted Answer · 2018-07-18T08:08:32.080

4

You can't do it in that way, as you can see here, Property Children in StackLayout is not a Bindable property.

However you can solve that by making custom one with implementation of bindable-property which will have some ItemSource for dynamically adding/removing items from it, or you can just use some great community implementations of RepeaterView for Xamarin.Forms, which I recommend you to do.

RepeaterView is basically a Bindable StackLayout where you can populate items dynamically.

I recommend you to take a look at this one here from Glenn Versweyveld, if you want you can search on google or on github for some more additional ones (but I strongly recommend you this one).

Wishing you lots of luck with coding!

edited Jul 18 '18 at 08:08

answered Jul 18 '18 at 07:54

Almir Vuk

2,983
1
18
22

Yes i think i should use RepeaterView.. Will feed you back after implementation.Thanks – Sameer Kamran Jul 18 '18 at 08:18
Ok, let me know if you are ok with it. – Almir Vuk Jul 18 '18 at 10:20
1

Thanks Bro.. Helped Alot :) – Sameer Kamran Jul 19 '18 at 06:30
Nice to hear that! – Almir Vuk Jul 19 '18 at 10:29

score 2 · Answer 2 · answered Jul 18 '18 at 13:27

Found the Solution!!

https://github.com/HoussemDellai/Xamarin-Forms-RepeaterView/blob/master/Repeater/Repeater/RepeaterView.cs

1-Used this implementation of RepeaterView 2-Added Namespace to Xaml

<local:RepeaterView x:Name="approvalsStack" ItemsSource="{Binding Approvals}">
                        <local:RepeaterView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <Label Grid.Column="0" Text="{Binding FullName}"/>
                                            <Label Grid.Column="1" Text="{Binding Decision}"/>
                                            <Label Grid.Column="2" Text="{Binding DecisionDate}"/>
                                        </Grid>
                                        <StackLayout>
                                            <BoxView HeightRequest="1" Color="Gray" HorizontalOptions="FillAndExpand"/>
                                        </StackLayout>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </local:RepeaterView.ItemTemplate>
                    </local:RepeaterView>

and Bound the repeater view then poplulated it with ViewModel

Adding Children in StackLayout using Binding in ViewModel, Xamarin.Forms

2 Answers2