CODEWITHSUNDEEP
c#xamlxamarin.formsdata-binding
Stefano Ston
Stefano Ston

Reputation: 91

CollectionView within a DataTemplate always remains empty

I have a CarouselView in which inside the DataTemplate I have a CollectionView, whose ItemsSource property is binded to an Observablecollection, in which elements are added only when the user presses on a button. The problem is that this CollectionView is always empty, I can't see any items

<CarouselView
                    x:Name="CollectionDiary"
                    RelativeLayout.YConstraint="{ConstraintExpression
                    Type=Constant,
                    Constant=242}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,
                    Property=Width,
                    Factor=1}"
                    PeekAreaInsets="20"
                    HeightRequest="330">
                    <CarouselView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" SnapPointsType="MandatorySingle" SnapPointsAlignment="Center" ItemSpacing="5"/>
                    </CarouselView.ItemsLayout>
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <yummy:PancakeView  CornerRadius="22" BackgroundColor="Transparent">
                                <yummy:PancakeView.Shadow>
                                    <yummy:DropShadow Color="#000000" Offset="2,2" BlurRadius="5" Opacity="0.8" />
                                </yummy:PancakeView.Shadow>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="25"/>
                                        <RowDefinition Height="15"/>
                                        <RowDefinition Height="45"/>
                                        <RowDefinition Height="268"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="70"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.Background>
                                        <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                                <GradientStop Color="Black" Offset="0" />
                                                <GradientStop Color="#4191cc" Offset="1.0" />
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Data}" FontSize="14" TextColor="Gray" VerticalTextAlignment="End" Margin="10,5,10,0"/>
                                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Orario}" FontSize="14" TextColor="Gray" VerticalTextAlignment="End" Margin="10,0"/>
                                    <Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Margin="15,15,0,0" Source="{Binding Umore}" HeightRequest="60"/>
                                    <Label Grid.Row="2" Grid.Column="1" Text="{Binding TipoUmore}" FontAttributes="Bold" TextColor="{Binding ColoreUmore}" FontSize="22" Margin="10,0" VerticalOptions="Start"/>
                                    <Label Grid.Row="3" Grid.Column="1" TextColor="White" FontSize="16" Text="{Binding Nota}" Margin="10,0" VerticalOptions="Start" HorizontalTextAlignment="Start"/>
                                    <CollectionView
                                        Grid.Row="2"
                                        Grid.Column="0"
                                        Margin="10"             
                                        SelectionMode="None"
                                        ItemsSource="{Binding listEmojiDiarioView}">
                                        <CollectionView.ItemsLayout>
                                            <GridItemsLayout Orientation="Vertical" VerticalItemSpacing="10" HorizontalItemSpacing="10"/>
                                        </CollectionView.ItemsLayout>
                                        <CollectionView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*"/>
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"/>
                                                        <ColumnDefinition Width="Auto"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Image Grid.Row="0" Grid.Column="0" Source="{Binding SourceImg}"/>
                                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding id}" TextColor="White" FontSize="13"/>
                                                </Grid>
                                            </DataTemplate>
                                        </CollectionView.ItemTemplate>
                                    </CollectionView>
                                </Grid>
                            </yummy:PancakeView>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

c#

ObservableCollection<HumorDiary> listDiario = new ObservableCollection<HumorDiary>();
ObservableCollection<IconDiary> listEmojiDiarioView = new ObservableCollection<IconDiary>();

        private async void BTSaveDiary_Clicked(object sender, EventArgs e)
                {
    
                     HumorDiary hum = new HumorDiary
                    {
                        Nota = TestoDiary.Text,
                        Data = DateTime.Today.Day.ToString() + " " + Mese,
                        Orario = DateTime.Now.TimeOfDay.ToString().Remove(5,DateTime.Now.TimeOfDay.ToString().Length-5),
                        Anno = DateTime.Now.Year.ToString(),
                        Umore = "Smile" + NUmore + ".png",
                        TipoUmore = tipoUmore,
                        ColoreUmore = Colore,
                        IconTot = NIcon,
                    };
    
                    string[] srListIcon = NIcon.Split(new string[] { set.Tag }, StringSplitOptions.RemoveEmptyEntries);
                    foreach (string sr in srListIcon)
                    {
                        string src = sr.Substring(0, 9);
                        string id = sr.Substring(9, sr.Length-9);
                        IconDiary ic = new IconDiary
                        {
                            SourceImg = src,
                            id = id,
                        };
                        listEmojiDiarioView.Add(ic);
                    }
    
                    listDiario.Insert(0, hum);
                    CollectionDiary.ItemsSource = listDiario.Take(3);
             }

Upvotes: 2

Views: 350

Answers (1)

Cfun
Cfun

Reputation: 9671

  1. Since the BindingContext inside a CarouselView changes and takes it ItemsSource as a BindingContext, you need to explicitly specify your BindingContext in case of your CollectionView. I guess if you look at the logs you will find some binding error/failure because it was looking for an IEnumerable property with the name of listEmojiDiarioView inside listDiario which obviously is not there.

One way you can overcome this is by using a reference of your page as binding source:

<ContentPage x:Name="pageref" ...

     <CollectionView ...
          ItemsSource="{Binding Source={x:Reference pageref}, Path=BindingContext.listEmojiDiarioView}">

  1. listEmojiDiarioView must be a property not a field

  2. If it is not working check weather you have implemented the INotifyPropertyChanged on your ObservableCollection used in binding or no. Omitted code remains unchanged.

Related documentation

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics

Upvotes: 1

Related Questions