how can make this xaml design? - xaml

+------------------------------------+
|____________________________________|
| | | |
| | | |
. . . .
. . . .
. . . .
. . . .
. . . .
below code didnt run. how can i learn ui design in xaml on xamarin.forms ......................................................................
<Grid ColumnSpacing="0" RowSpacing="0" x:Name="GrdContainer">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="FillAndExpand" Grid.Row="0" Style="{StaticResource DashboardMenusHeadGridStyle}">
<Label Text="başlık ... " TextColor="Black"></Label>
</Grid>
<Grid Column="0" Row="1" Style="{StaticResource DashboardMenusMyProfileGridStyle}">
<Label Text="0,0" TextColor="Black" VerticalOptions="Center"></Label>
</Grid>
<Grid Column="1" Row="1" Style="{StaticResource DashboardMenusWillGoEventsGridStyle}">
<Label Text="1,0" TextColor="Black" VerticalOptions="Center"></Label>
</Grid>
<Grid Column="2" Row="1" Style="{StaticResource DashboardMenusAllEventGridStyle}">
<Label Text="2,0" TextColor="Black" VerticalOptions="Center"></Label>
</Grid>
</Grid>


<Grid ColumnSpacing="0" RowSpacing="0" x:Name="GrdContainer">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="başlık ... " TextColor="Black"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="0,0" TextColor="Black" VerticalOptions="Center"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="1,0" TextColor="Black" VerticalOptions="Center"></Label>
<Label Grid.Row="1" Grid.Column="2" Text="2,0" TextColor="Black" VerticalOptions="Center"></Label>
</Grid>


Firstly start learning and implementing all the layouts and then start using controls, it will help you in designing a good UI. Stack Layout and Grid should be your first priority https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/ this link contains everything.

Related

Component Layout is restricted on my Maui application

I have an issue with a component on my MAUI application:
When i load the page that the component (a bar) is shown appears like this:
Image on loading
But, when i touch the size of my windows, the layout fix immediatly.
Image after windows resize
This is the xaml of the page that contains the bar:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
xmlns:components="clr-namespace:APEEvo.Mobile.Components"
x:Class="APEEvo.Mobile.ReturnFileSearch.ReturnFileDetailPage"
Loaded="ContentPage_Loaded">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2">
<components:InfoBar x:Name="infoBar" VerticalOptions="Start"/>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,30">
<components:ReturnFileBar x:Name="ReturnFileBar" VerticalOptions="Center"/>
</StackLayout>
<HorizontalStackLayout Grid.Row="2" Grid.ColumnSpan="2" >
<Label Text="{x:Static res:UIStrings.Article}" HorizontalOptions="Start" Margin="10,0" Style="{StaticResource TopDetailPageLabel}"/>
<components:BarcodeScanner x:Name="barcodeScanner" BackgroundColor="{StaticResource TertiaryAccent}" HorizontalOptions="Start" VerticalOptions="Center" ButtonVisible="true" Caption="{x:Static res:UIStrings.ArticleBarcode}" Margin="20,0"/>
<Button x:Name="buttonNavigation" HorizontalOptions="Start" VerticalOptions="Center" Text="Test" Margin="20,0" Clicked="ButtonNavigation_Clicked"/>
</HorizontalStackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2" Padding="30" >
<components:OutcomeSummary x:Name="grpOutcomes" HeightRequest="450"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And this the xaml of the component:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
x:Class="APEEvo.Mobile.Components.ReturnFileBar">
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{x:Static res:UIStrings.Return}" Style="{StaticResource TopReturnFileLabel}" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,5,0" />
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2" />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Key}" />
<Label x:Name="txtKey" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="2" Margin="5,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Date}" />
<Label x:Name="txtDateOfWhat" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="3"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="3" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Type}" />
<Label x:Name="txtType" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="4" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Reason}" />
<Label x:Name="txtReason" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="5" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.ReconditionType}" />
<Label x:Name="txtRecondition" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="6" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.SAPInboundDelivery}" />
<Label x:Name="txtSapInbound" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="7" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.IctReference}" />
<Label x:Name="txtIctReference" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="8" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.NPcs}" />
<Label x:Name="txtNPcs" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
</Grid>
</HorizontalStackLayout>
</Grid>
</Grid>
</ContentView>
Can you help me?

"nested layouts" with auto-sizing are sometimes difficult for layout manager to figure out correctly. You can greatly simplify the XAML of your component.
Original:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
... more elements ...
</Grid>
</Grid>
Simplified:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
<Grid Grid.Column="1" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
... more elements ...
</Grid>
Removed from above: One layer of grid; VerticalStackLayouts that served no purpose, as they only contained a single Grid each.
Does this work better?
[OPTIONAL] Flattened:
If above doesn't work, try to "flatten" into a single Grid (below will need tweaking of margins):
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...many Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... Margin="5,0" />
<Line Grid.Column="1" ... Margin="5,0" />
<VerticalStackLayout Grid.Column="3" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="4" ... />
... more elements ...
</Grid>
ALTERNATIVE TECHNIQUE:
Adding explicit WidthRequest="NN"s, where "NN" is some number, will fix most layout issues. Obviously this hardcodes those widths, so is less desireable. But sometimes it is the only way.

xamarin forms - ios - listview header - showing bold border?

Please see below image
please see below code
//PopUp.Xaml
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="Product"
HorizontalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0"
Text="Quantity"
HorizontalOptions="Center"/>
<Label Grid.Column="2" Grid.Row="0"
Text="Price"
HorizontalOptions="Center"/>
<Label Grid.Column="3" Grid.Row="0"
Text="Sub"
HorizontalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="4"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
<Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
<Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</pages:PopupPage>
My Q being why does the popUp header of the listview...appear with a bold border below it? only on ios...not on android...I would like to remove it please. does anyone know how?

Xamarin Forms Center Grid horizontal

I have a problem. I am trying to achieve the following Grid:
To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:
And here is my code:
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
<Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22 (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
How can I create my wanted result?

Can you try this?
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22 (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>

How to design a button from bottom of my Grid in Xamarin.forms

I have a grid view and I want to add a button in bottom of my screen
I have used following code:
[![enter image description here][1]][1]
<Grid>[![enter image description here][2]][2]
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Row="1" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>
[1]: https://i.stack.imgur.com/vsEn9.png
[2]: https://i.stack.imgur.com/TazCg.png

Please Add Grid.ColumnSpan="2" Like,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>

Use VerticalOptions="End"
Example:
<Grid Padding="20" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- row 0 -->
<Image Grid.Row="0" Source="icon-76.png" WidthRequest="150" HeightRequest="150" />
<!-- row 1 -->
<StackLayout Grid.Row="2" VerticalOptions="End">
<Button Margin="0,5,0,5" Text="Button at the bottom" BackgroundColor="#4a4acd" TextColor="White" FontAttributes="Bold" />
</StackLayout>
</Grid>
This will give you the following view:

How to add Entry Control inside Grid View in Xamarin Forms?

I am facing problem to add Entry inside Grid View Control. I have a list view which will have data with checkbox and entry. If user selects certain item, he can also add quantity of the item in entry. I am facing issue adding entry in grid view. Entry is only displayed half. Text is not displayed correctly. I am adding Entry in xaml as.
<StackLayout>
<Label Text="Items"></Label>
<ListView x:Name="ItemsListView" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" Grid.ColumnSpan="2" Grid.Row="1" Margin="2" BackgroundColor="Green"></Label>
<common:CheckBox Grid.Column="3" Grid.Row="1" HeightRequest="20" WidthRequest="20"
VerticalOptions="Center" Checked="{Binding isChecked ,Mode=TwoWay}"
CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked"
CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry Grid.Column="3" Grid.Row="1" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Done" HorizontalOptions="CenterAndExpand"
CommandParameter="{Binding .}" Clicked="Button_Clicked"/>
</StackLayout>
I am getting following output.
Control with purple background is my Entry. Text is not displayed correctly. Any help will be appreciated. Thanks in advance.
I have already posted question in Xamarin Forums here.

<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Text="Apple" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2" VerticalTextAlignment="Center" BackgroundColor="Green" />
<Switch Grid.Row="0" Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Brown" />
<Entry Text="CountStr" Grid.Row="0" Grid.Column="3" IsEnabled="false" HorizontalOptions="Center" FontSize="Small" BackgroundColor="Purple"/>
</Grid>
Note: I sub'd in a Switch vs. your 3rd-party Checkbox

use StackLayout like this
<StackLayout Padding="5,0" Orientation="Horizontal">
<Label Text="{Binding Title}" WidthRequest="120" Margin="2" BackgroundColor="Green"/>
<common:CheckBox HeightRequest="20" WidthRequest="20" Checked="{Binding isChecked, Mode=TwoWay}" CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked" CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry WidthRequest="120" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</StackLayout>
you can change the Size using the WidthRequest property and HorizontalOption="FillAndExpand"