prs/prs.mobile/comal.timesheets/Modules/MyHR/Qualifications/QualificationList.xaml

<?xml version="1.0" encoding="utf-8" ?>
<timesheets:BasePage xmlns:timesheets="clr-namespace:comal.timesheets" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="comal.timesheets.QualificationList">

    <NavigationPage.TitleView>
        <Grid Margin="0" Padding="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" TextColor="White" BackgroundColor="Transparent" Margin="0" Padding="0"
                Text="Exit" Clicked="ExitBtn_Clicked"/>
            <Label Grid.Column="1"  Text="Qualifications List" VerticalOptions="Center" x:Name="titleLbl"
                   HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="White" FontSize="Medium" FontAttributes="Bold"/>
            <Button Grid.Column="2" HorizontalOptions="End" VerticalOptions="Center" TextColor="White" BackgroundColor="Transparent" Margin="0" Padding="0"
                Text="New" Clicked="AddBtn_Clicked"/>
        </Grid>
    </NavigationPage.TitleView>
    <timesheets:BasePage.PageContent>
        <StackLayout>
            <Label Text="Tap a Qualification to view / edit details" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium"/>
            <Entry x:Name="searchEnt" Placeholder="Search" Margin="5" HorizontalOptions="FillAndExpand" VerticalOptions="Center" TextChanged="SearchEnt_Changed"/>
            <ListView x:Name="qualificationsDisplayList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="5">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell Tapped="Qualification_Tapped">
                            <Frame Padding="5" BorderColor="#15C7C1" Margin="3" CornerRadius="10" HasShadow="False">
                                <Grid RowSpacing="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    
                                    <!-- image -->
                                    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"
                                           Margin="10"
                                        Source="certificate.png" Aspect="AspectFit"/>

                                    <!-- Row 0-->
                                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" FontAttributes="Bold" FontSize="Medium" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding Description}" HorizontalOptions="Start" VerticalOptions="Center"/>

                                    <!-- Row 1-->
                                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" FontSize="Small" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding Number}" HorizontalOptions="Start" VerticalOptions="Center" TextColor="#a2006d"/>

                                    <!-- Row 2-->
                                    <Label Grid.Row="2" Grid.Column="1" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding DisplayQualified}" HorizontalOptions="Start" VerticalOptions="Center"/>

                                    <Label Grid.Row="2" Grid.Column="2" BackgroundColor="{Binding ExpiryColor}" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding DisplayExpiry}" HorizontalOptions="Start" VerticalOptions="Center"/>

                                    <!-- Row 3-->
                                    <Label Grid.Row="3" Grid.Column="1" BackgroundColor="{Binding PhotoCountColor}" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding DisplayPhotoCount}" HorizontalOptions="Start" VerticalOptions="Center"/>

                                    <Label Grid.Row="3" Grid.Column="2" BackgroundColor="{Binding VerifiedColor}" Padding="1" Margin="0" LineBreakMode="WordWrap"
                                           Text="{Binding DisplayVerified}" HorizontalOptions="Start" VerticalOptions="Center"/>

                                </Grid>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </timesheets:BasePage.PageContent>
</timesheets:BasePage>