prs/prs.mobile.new/PRS.Mobile/Modules/StoreRequis/StoreRequiConfirmationPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<mobile:MobilePage xmlns:local="clr-namespace:PRS.Mobile" 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:material="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
    x:Class="PRS.Mobile.StoreRequiConfirmationPage"
             Title="Confirm Details">
    <mobile:MobilePage.PrimaryMenu>
        <ImageButton Source="save" Clicked="SaveBtn_Clicked"/>
    </mobile:MobilePage.PrimaryMenu>

    <mobile:MobilePage.PageContent>
        <ScrollView>
            <StackLayout Orientation="Vertical"  VerticalOptions="StartAndExpand" Padding="5">

                <!--Row 0 Title-->
                <Frame HasShadow="False" BorderColor="Gray" Padding="10" >
                    <material:MaterialLabel x:Name="titleLbl" Text="" TypeScale="H6" HorizontalTextAlignment="Center" Margin="5"  HorizontalOptions="Center"/>
                </Frame>

                <!--Row 1 Requi Status-->
                <material:MaterialLabel x:Name="requiStatusLbl" Text="Requi Status" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5" IsVisible="false"/>

                <Frame x:Name="requiStatusFrame" HasShadow="False" BorderColor="Gray" Padding="10" IsVisible="false">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <RadioButton Grid.Column="0" Content="For Delivery" FontSize="Medium" FontAttributes="Bold" TextColor="PaleVioletRed"
                            x:Name="forDeliveryRb" HorizontalOptions="Start" VerticalOptions="Center"/>
                        <RadioButton Grid.Column="1" Content="Taken By Me Now" FontSize="Medium" FontAttributes="Bold" TextColor="PaleVioletRed"
                            x:Name="takenNowRb" HorizontalOptions="Start" VerticalOptions="Center"/>
                    </Grid>
                </Frame>

                <!--Row 2 Job-->
                <material:MaterialLabel Text="Job" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Red" x:Name="jobFrame">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" x:Name="jobLbl" LineBreakMode="WordWrap"  VerticalOptions="Center" FontSize="Medium" FontAttributes="Bold"/>
                        <Button Grid.Column="1" x:Name="selectJobBtn" Clicked="SelectJobBtn_Clicked" Text="Select" Padding="3" FontSize="Medium" TextColor="White" BackgroundColor="#15C7C1" FontAttributes="Bold"/>
                    </Grid>
                </Frame>

                <!--Row 3 Notes-->
                <material:MaterialLabel Text="Notes" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5" x:Name="notesTitleLbl"/>

                <Frame HasShadow="False" BorderColor="Gray" Padding="10" >
                    <Editor x:Name="notesEdt" AutoSize="TextChanges" Placeholder="Edit"/>
                </Frame>

                <!--Row 4 Boxes-->
                <material:MaterialLabel x:Name="boxesLbl" Text="No. of boxes / packages" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5" IsVisible="false"/>
                
                <Frame HasShadow="False" BorderColor="Gray" Padding="10" x:Name="boxesQtyFrame" IsVisible="false">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60"/>
                            <!--col 0-->
                            <ColumnDefinition Width="*"/>
                            <!--col 2-->
                            <ColumnDefinition Width="60"/>
                            <!--col 3-->
                        </Grid.ColumnDefinitions>

                        <!--col 0-->
                        <Button  Grid.Column="0"
                    x:Name="reduceQtyBtn" Text="-" Clicked="ReduceQtyBtn_Clicked"
                    FontSize="Medium" TextColor="White" BackgroundColor="#15C7C1" FontAttributes="Bold" VerticalOptions="Center" Margin="5,0,0,0" CornerRadius="5"/>

                        <!--col 1-->
                        <Label  Grid.Column="1"
                    x:Name="boxQtyLbl"
                    FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center"/>

                        <!--col 2-->
                        <Button Grid.Column="2"
                    x:Name="increaseQtyBtn" Text="+" Clicked="IncreaseQtyBtn_Clicked"
                    FontSize="Medium" TextColor="White" BackgroundColor="#15C7C1" FontAttributes="Bold" VerticalOptions="Center" Margin="0,0,5,0" CornerRadius="5"/>
                    </Grid>
                </Frame>

                <!--Row 5 Photos-->
                <material:MaterialLabel x:Name="photosLbl" Text="Photos" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5" IsVisible="false"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Red" x:Name="photosFrame" IsVisible="false">
                    <StackLayout Orientation="Vertical">
                        <Label Text="Tap on photo to view / delete" HorizontalOptions="Center" VerticalOptions="Center"/>
                        <ScrollView Orientation="Horizontal" x:Name="ImageScroller" IsVisible="false">
                            <StackLayout x:Name="images" Orientation="Horizontal" HeightRequest="150" HorizontalOptions="StartAndExpand" VerticalOptions="Fill"/>
                        </ScrollView>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Button x:Name="TakePhoto" Grid.Column="0" Text="Camera" Clicked="TakePhoto_Clicked" Padding="3" FontSize="Medium" TextColor="White" BackgroundColor="#15C7C1" FontAttributes="Bold"/>
                            <Button x:Name="ChooseImage" Grid.Column="1" Text="Library" Clicked="ChooseImage_Clicked" Padding="3" FontSize="Medium" TextColor="White" BackgroundColor="#15C7C1" FontAttributes="Bold"/>
                        </Grid>
                    </StackLayout>
                </Frame>

                <!--Row 6 Requested By -->
                <!--<material:MaterialLabel x:Name="requestedByTitleLbl" Text="Requested By" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Gray" x:Name="requestedByFrame">
                    <Label Grid.Row="1" Grid.Column="0" x:Name="requestedByLbl" LineBreakMode="WordWrap"  VerticalOptions="Center" FontSize="Medium" FontAttributes="Bold"/>
                </Frame>-->

                <!--Row 7 Due-->
                <material:MaterialLabel Text="Due (tap to select)" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5" x:Name="dueLbl"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Gray" x:Name="dueFrame">
                    <DatePicker x:Name="dueDatePckr" TextColor="DarkGray" DateSelected="DueDatePckr_DateSelected" IsEnabled="False"/>
                </Frame>

            </StackLayout>
        </ScrollView>
    </mobile:MobilePage.PageContent>
</mobile:MobilePage>