prs/prs.mobile/comal.timesheets/DigitalForms/DigitalFormPickerScreen/DigitalFormsPicker.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:timesheets="clr-namespace:comal.timesheets"
             x:Class="comal.timesheets.DigitalFormsPicker">
    <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="Digital Forms" VerticalOptions="Center" x:Name="titleLbl"
                   HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="White" FontSize="Medium" FontAttributes="Bold"/>
        </Grid>
    </NavigationPage.TitleView>

    <ContentPage.Content>
        <Grid RowSpacing="0" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid x:Name="buttonsGrid" Grid.Row="0" RowSpacing="0" ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" x:Name="newButton" BackgroundColor="#15C7C1" 
                        TextColor="Black"   FontAttributes="Bold" Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                        Text="New" HorizontalOptions="FillAndExpand" VerticalOptions="Center" 
                        Clicked="NewButton_Clicked"/>

                <Grid Grid.Column="1" RowSpacing="0" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="0" x:Name="notificationColumn"/>
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" x:Name="myFormsButton"
                        TextColor="Black"  FontAttributes="Bold" Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                        Text="My Forms" HorizontalOptions="FillAndExpand" VerticalOptions="Center" 
                        Clicked="MyFormsButton_Clicked"/>
                    <Frame x:Name="notificationFrame" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" 
                           HeightRequest="30" WidthRequest="30" CornerRadius="15" IsVisible="false" HasShadow="False"
                    BackgroundColor="Yellow" Padding="1">
                        <Frame.GestureRecognizers>
                            <TapGestureRecognizer Tapped="MyFormsButton_Clicked"/>
                        </Frame.GestureRecognizers>
                        <Label FontAttributes="Bold" TextColor="Red" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="Center" Margin="1"
                        x:Name="numberOfIncompleteFormsLbl" />
                    </Frame>
                </Grid>


            </Grid>

            <Grid Grid.Row="1" RowSpacing="0" ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" x:Name="templatesColumn"/>
                    <ColumnDefinition Width="0" x:Name="formsColumn"/>
                </Grid.ColumnDefinitions>

                <!-- Page for templates / digital form picker -->
                <Grid Grid.Column="0" x:Name="templatesGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <timesheets:FilterOptionsControl Grid.Row="0" x:Name="filterOptionsControl"/>

                    <ListView Grid.Row="1"
                x:Name="layoutsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell Tapped="LayoutsList_Tapped">
                                    <Frame Padding="6" BorderColor="#15C7C1" Margin="5, 2, 5, 2" CornerRadius="10" HasShadow="False">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="auto"/>
                                                <RowDefinition Height="{Binding AverageTimeRow}"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <Image Grid.Row="0" Grid.RowSpan="{Binding ImageRowSpan}" Grid.Column="0" Margin="5"
                                           Source="forms.png" HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"/>

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

                                            <Label Grid.Row="1" Grid.Column="1" TextColor="#873260" LineBreakMode="WordWrap"
                                           Text="{Binding AverageTime}" VerticalOptions="Center" HorizontalOptions="Start"/>
                                        </Grid>
                                    </Frame>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>

                <!-- Page for complete and incomplete forms -->
                <Grid Grid.Column="1" x:Name="existingFormsGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Entry Grid.Row="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand" x:Name="searchEnt" Margin="5, 0, 5, 0"
                           Placeholder="Search" TextChanged="SearchEnt_Changed"/>

                    <Grid Grid.Row="1" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" Text="Incomplete" x:Name="incompleteBtn" BackgroundColor="#15C7C1" 
                                HorizontalOptions="FillAndExpand" VerticalOptions="Center" TextColor="Black" FontAttributes="Bold"
                                Clicked="Incomplete_Tapped"
                                Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                                />
                        <Button Grid.Column="1" Text="Complete"  x:Name="completeBtn" TextColor="Black" FontAttributes="Bold"
                                HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                Clicked="Complete_Tapped"
                                Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                                />
                    </Grid>

                    <Grid Grid.Row="2" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" x:Name="incompleteFormsColumn"/>
                            <ColumnDefinition Width="0" x:Name="completeFormsColumn"/>
                        </Grid.ColumnDefinitions>

                        <ListView Grid.Column="0"
                        x:Name="incompleteFormsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell Tapped="IncompleteFormsList_Tapped">
                                        <Frame Padding="3" BorderColor="#15C7C1" Margin="3" CornerRadius="10" HasShadow="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="auto"/>
                                                </Grid.ColumnDefinitions>
                                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding Description}" FontAttributes="Bold"/>
                                                <Label Grid.Row="1" Grid.Column="0" Text="{Binding Started}"/>

                                                <Image Grid.Row="0" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="End"
                                                       HeightRequest="20" WidthRequest="20" Source="closee.png" Margin="5, 5, 7, 5">
                                                    <Image.GestureRecognizers>
                                                        <TapGestureRecognizer Tapped="Delete_Tapped" CommandParameter="{Binding .}"/>
                                                    </Image.GestureRecognizers>
                                                </Image>
                                            </Grid>
                                        </Frame>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                        <ListView Grid.Column="1" IsVisible="false"
                        x:Name="completeFormsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell Tapped="CompleteFormsList_Tapped">
                                        <Frame Padding="3" BorderColor="#15C7C1" Margin="3" CornerRadius="10" HasShadow="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                </Grid.RowDefinitions>
                                                <Label Grid.Row="0" Text="{Binding Description}" FontAttributes="Bold"/>
                                                <Label Grid.Row="1" Text="{Binding Started}"/>
                                                <Label Grid.Row="2" Text="{Binding Completed}"/>
                                            </Grid>
                                        </Frame>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>


                </Grid>
            </Grid>
        </Grid>


    </ContentPage.Content>
</ContentPage>