Conditional formatting items in grid layout inside a ListView in Xamarin.Forms

Question

I'm very new to Xamarin.Forms and I'm developing my first app (for Android and IoS).

I have a set of info to show in a Grid Layout inside a ListView (data source is set in the code behind).

I have to change the frames' color and the relative labels' text basing on some values I have in the source data.

Here is the working code (using placeholders as frame color and label text):

XAML:

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <Grid x:Name="GridLayout" Padding="20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Label Text="{Binding Name}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="18" TextColor="Black" FontAttributes="Bold" />
                                <Label Text="{Binding LessonDate}" Grid.Row="1" Grid.Column="0"  FontSize="14" TextColor="Gray"  />
                                <Label Text="{Binding StartEndTime}" Grid.Row="1" Grid.Column="1"  FontSize="14" TextColor="Gray"  Margin="-30,0,0,0"/>
                                <Frame Grid.Row="2" Grid.Column="0"
                                                    CornerRadius="15"
                                                    Padding="0"
                                                    BackgroundColor="Silver"
                                                    Margin="0,10,0,10" 
                                                    HasShadow="False" 
                                                    WidthRequest="125"
                                                     x:Name="UserStatusFrame">
                                    <Label Text="Placeholder" Margin="5" HorizontalOptions="Center" BackgroundColor="Transparent" 
                                                                             TextColor="Gray" x:Name="UserStatusLabel"/>
                                </Frame>
                                <Frame Grid.Row="2" Grid.Column="1"
                                                    CornerRadius="15"
                                                    Padding="0"
                                                    BackgroundColor="Yellow"
                                                    Margin="0,10,0,10" 
                                                    HasShadow="False" 
                                                    WidthRequest="125"
                                                    x:Name="CourseStatusFrame">
                                    <Label Text="Placeholder" Margin="5" HorizontalOptions="Center" BackgroundColor="Transparent" 
                                                                             TextColor="Black" x:Name="CourseStatusLabel" />
                                </Frame>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView> 

Code Behind:

protected override void OnAppearing()
        {
            base.OnAppearing();

            FillUncompletedLessonsList(); // fills the list from a rest WS using a simple model class

            LessonsListview.ItemsSource = UncompletedLessonsList;

            SetListViewFormat();
        }

What I was wondering to do is create a function SetListViewFormat in which I can manage label texts and frame colors from the code behind basing on certain data criteria.

For example, something like:

foreach item in the list {
  if UncompletedLessonsList.completed == true {
    UserStatusLabel.Text = "Completed"
    UserStatusFrame.BackgroundColor = "Green"
  }
}

But I cannot understand in which way I can access to those settings dinamically..

Thanks in advance for the help!

Edit 1 - Data Model:

UncompletedLessonsList is a list of Lesson

 public class Lesson
    {
        public string Name { get; set; }

        public string Description { get; set; }

        public string LessonDate { get; set; }

        public string StartEndTime { get; set; }

        public string Location { get; set; }

        public string State { get; set; }

        public bool Completed { get; set; }

        public RestWSTeacher Teacher { get; set; }

        public List<Activity> Activities { get; set; }
    }

Answer 1

You need to use a Value Converters to convert Value from bool value:

public class myValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {

        if ((bool)value == true)
        {
            return "Completed";
        }

        return "unCompleted";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((bool)value == true)
        {
            return "Completed";
        }

        return "unCompleted";
    }
}

Then in you xaml, binding your data like this:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:myValueConverter x:Key="myCellValueConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

<StackLayout>
    <Button Text="changeStatus" Clicked="Button_Clicked"/>

    <ListView x:Name="myListView">

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>

                    <Grid x:Name="GridLayout" Padding="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding isComplete, Converter={StaticResource myCellValueConverter}}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="18" TextColor="Black" FontAttributes="Bold" />

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

I uploaded my sample project here and feel free to ask me any question.