How can I set Background color in Label in CollectionView getting from RealtimeDatabase?

Question

I am trying to set different background color based on "Color" in field in RealtimeDatabase.

 <CollectionView x:Name="lstCalendarDates" ItemsSource="{Binding CalendarDatesId}" VerticalOptions="Center" HorizontalOptions="Center" Margin="10,0,10,0">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">

                                <StackLayout >
                                    <Label Text="{Binding Date}" 
                                           BackgroundColor="{Binding Color}"
                                           TextColor="Black"
                                           FontSize="Medium"
                                           FontAttributes="Bold"
                                           HorizontalOptions="StartAndExpand" />
                                    <Button Text="{Binding Description}" 
                                           TextColor="Black"
                                           BackgroundColor="White" 
                                           CornerRadius="15"
                                           BorderColor="{Binding Color}"
                                           BorderWidth="2"
                                           FontSize="Medium"
                                           HorizontalOptions="Start"
                                           Clicked="Description_Clicked"/>
                                </StackLayout>
                            </Frame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

Answer 1

Hello,

How do I get it to go to CalendarLink when Description_Clicked?

I notice you have use data-binding, you can do it by Data Bindings to MVVM.

Firstly, please remove your click event in the collectionview and use Command and CommandParameter like following layout.

 <CollectionView x:Name="lstCalendarDates" ItemsSource="{Binding CalendarDatesId}" VerticalOptions="Center" HorizontalOptions="Center" Margin="10,0,10,0">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
                       <StackLayout >
                            <Label Text="{Binding Date}"
                                           BackgroundColor="{Binding Color}"
                                           TextColor="Black"
                                           FontSize="Medium"
                                           FontAttributes="Bold"
                                           HorizontalOptions="StartAndExpand" />
                            <Button Text="{Binding Description}"
                                           TextColor="Black"
                                           BackgroundColor="White"
                                           CornerRadius="15"
                                           BorderColor="{Binding Color}"
                                           BorderWidth="2"
                                           FontSize="Medium"
                                           HorizontalOptions="Start"
                                    
                                   Command="{Binding Source={x:Reference lstCalendarDates} , Path=BindingContext.MyCommand}" CommandParameter="{Binding .}"
                                          />
                            
                        </StackLayout>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

Then, open your layout's background code. Creating a list for CalendarDatesId and ICommand for Button click event. When you get data from firebaseDB, you can set it to CalendarDatesId directly. When you click the button, MyCommand will be executed, you can get the CalendarLink by string CalendarLink = myModel.CalendarLink; from Model. As note, please do not forget to add   BindingContext = this;.

public partial class MainPage : ContentPage
    {
        public List<Model> CalendarDatesId { get; set; }
       public ICommand MyCommand { get; set; }


       public MainPage()
        {
            InitializeComponent();
           CalendarDatesLoad();
       
            MyCommand = new Command(async (obj) =>
            {
                Model myModel = obj as Model;
                string CalendarLink = myModel.CalendarLink;
                await Browser.OpenAsync(CalendarLink, BrowserLaunchMode.SystemPreferred);
            });
            BindingContext = this;
        }

       public async void CalendarDatesLoad()
        {      
            var allCalendarDates = await firebaseHelper.GetAllCalendarDates();
            CalendarDatesId = allCalendarDates;
        }  
    }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.