CODEWITHSUNDEEP
xamarin.forms
Ks.P
Ks.P

Reputation: 222

Xamarin Forms Expander with CollectionView

Expander must contain CollectionView with Observablecollection in Observablecollection. How to link data? This is my template for List1 = Observablecollection(Object1):

<StackLayout BindableLayout.ItemsSource="{Binding List1}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Expander IsExpanded="True">
                                <Expander.Header>
                                    <Label Text="{Binding Name}" />
                                </Expander.Header>
                                <Expander.ContentTemplate>
                                    <DataTemplate>
                                        <CollectionView ItemsSource="{Binding List2}">
                                            <CollectionView.ItemTemplate>
                                                <DataTemplate>
                                                    <StackLayout>
                                                        <Grid Padding="10">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="Auto" />
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="40*" />
                                                                <ColumnDefinition Width="40*" />
                                                            </Grid.ColumnDefinitions>
                                                            <Label Text="{Binding Date, StringFormat='{0:dd/MM/yy}'}"  Grid.Row="0" Grid.Column="0" />
                                                            <Label Text="{Binding Name}"  Grid.Row="0" Grid.Column="1" />
                                                        </Grid>
                                                    </StackLayout>
                                                </DataTemplate>
                                            </CollectionView.ItemTemplate>
                                        </CollectionView>
                                    </DataTemplate>
                                </Expander.ContentTemplate>
                            </Expander>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>

This class of object:

public class Object1
{
        public string Name { get; set; }
        public ObservableCollection<Object2> List2 { get; set; }
}

Upvotes: 0

Views: 640

Answers (1)

Amjad S.
Amjad S.

Reputation: 1241

First Create an ObservableCollection of object1

 public ObservableCollection<Object1> FirstList { get; set; } = new ObservableCollection<Object1>()
        {
            new Object1(){ Name="TEST 1" ,
                Description = new ObservableCollection<Object2>(){ new Object2() { Name = "2" },
                                                               new Object2(){ Name = "3" }, new Object2(){ Name = "4" } } }
        };

then in your xaml binding bind this way .

  <StackLayout BindableLayout.ItemsSource="{Binding FirstList}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <extensions:Expander IsExpanded="True">
                        <extensions:Expander.Header>
                            <Label Text="{Binding Name}" />
                        </extensions:Expander.Header>

                        <CollectionView ItemsSource="{Binding Description}">
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout>
                                                <Grid Padding="10">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="40*" />
                                                        <ColumnDefinition Width="40*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Label Text="{Binding Name}"  Grid.Row="0" Grid.Column="1" />
                                                </Grid>
                                            </StackLayout>
                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>
                          
                    </extensions:Expander>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>

Upvotes: 1

Related Questions