How to remove the distance between two frames from scrollview - c#

I created a horizontal ScrollView and in it I created a frame. I created a second frame for each column But there was a huge distance between the frame and the frame of each column.
How can I remove the distance between the main frame and the frame of each column ?
The code:
<Frame
BorderColor="Black"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<ScrollView
BackgroundColor="Transparent"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
BorderColor="black"
BackgroundColor="Transparent">
<StackLayout>
<Label x:Name="DayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="0"
Grid.Column="0"
TextColor="#eeff00"/>
<Label x:Name="TempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="1"
Grid.Column="0"
TextColor="#eeff00"/>
<Label Text="Min °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="2"
Grid.Column="0"
TextColor="#0025f7"/>
<Label x:Name="MinTempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="3"
Grid.Column="0"
TextColor="#0025f7"/>
<Label Text="Max °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="4"
Grid.Column="0"
TextColor="#ff0000"/>
<Label x:Name="MaxTempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="5"
Grid.Column="0"
TextColor="#ff0000"/>
<Image x:Name="IconChanceOf5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="6"
Grid.Column="0"/>
<Label x:Name="ChanceOf5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="7"
Grid.Column="0"/>
<Image x:Name="IconWind5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="8"
Grid.Column="0"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="9"
Grid.Column="0"/>
</StackLayout>
</Frame>
<Frame Grid.Column="1"
BorderColor="black"
BackgroundColor="Transparent">
<StackLayout>
<Label x:Name="DayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="0"
Grid.Column="1"
TextColor="#eeff00"/>
<Label x:Name="TempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="1"
Grid.Column="1"
TextColor="#eeff00"/>
<Label Text="Min °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="2"
Grid.Column="1"
TextColor="#0025f7"/>
<Label x:Name="MinTempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="3"
Grid.Column="1"
TextColor="#0025f7"/>
<Label Text="Max °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="4"
Grid.Column="1"
TextColor="#ff0000"/>
<Label x:Name="MaxTempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="5"
Grid.Column="1"
TextColor="#ff0000"/>
<Image x:Name="IconChanceOf5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="6"
Grid.Column="1"/>
<Label x:Name="ChanceOf5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="7"
Grid.Column="1"/>
<Image x:Name="IconWind5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="8"
Grid.Column="1"/>
<Label Text="{Binding WeatherDataForecastHourly.List[8].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="9"
Grid.Column="1"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</Frame>
I created 10 rows for 5 columns, but when I put the inner frames and a huge distance appeared.


How can I remove the distance between the main frame and the frame of each column ?
From Grid.ColumnSpacing Property, the space between columns in this Grid layout. The default is 6.
So you can set ColumnSpacing="0" for Grid. It will work fine.
<Grid BackgroundColor="Transparent" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>


from the docs
Frame have a default Padding of 20.
StackLayout also has a default spacing value. You will need to play with the padding, margin and spacing values to get the effect you want

Related

How to center Grid with 2 rows and 2 columns in xamarin with 4 Labels

I have one grid with two columns and two rows. I have stack layout in the begin and the end of the grid and there into the layout I have 4 labels with Grid.Row[0] Grid.Column[0]...1 and etc.
The code:
<Frame CornerRadius="30"
BackgroundColor="Transparent"
Margin="20,0,20,10"
HeightRequest="100"
BorderColor="Red">
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Temp Now"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="0"/>
<Label x:Name="TempNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="0"/>
<Label Text="Wind Speed"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="WindSpeedNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
</StackLayout>
</Frame>
The result is:
How to center this Labels ?

use HorizontalTextAlignment="Center" on Label.
<Frame CornerRadius="30"
BackgroundColor="Transparent"
Margin="20,0,20,10"
HeightRequest="100"
BorderColor="Red">
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Temp Now"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="0"/>
<Label x:Name="TempNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="0"/>
<Label Text="Wind Speed"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="WindSpeedNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
</Frame>

Nothing Show inside Stacklayout

I' m working in Xamarin forms application ,I'm currently implementing a form contains two parts one is data entering part and other part is a list view Afetr i entered data and saved it should appear in list view ,In debug i checked ListViewUsers.ItemsSource count is not 0 it has values , but listView is not showing in the form .
<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="labelName" Grid.Row="0" Grid.Column="0" Margin="10" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" Text="Name"/>
<Entry x:Name="textName" Grid.Row="0" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Name}" />
<Label x:Name="labelAge" Grid.Row="1" Grid.Column="0" Margin="10" FontSize="6" Text="Age" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAge" Grid.Row="1" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Age}" />
<Label x:Name="labelAddress" Grid.Row="2" Grid.Column="0" Margin="10" FontSize="6" Text="Address" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAddress" Grid.Row="2" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Address}" />
<Label x:Name="labelNICNumber" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textNIC" Grid.Row="3" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding NIC}" />
<Button Grid.Row="4" Grid.Column="1" HeightRequest = "30" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" FontSize="6" Text="Save" Clicked="UserSaveClick" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0">
<Label x:Name="labelNICNumber2" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<ListView x:Name="ListViewUsers" SeparatorColor="Transparent" HasUnevenRows="True" IsVisible="True" IsEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="6"
Text="{Binding Name}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="1"/>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Age}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="2" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Address}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="3" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding NIC}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="4"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</StackLayout>

Its hard to see whats going on here, however
I have removed the redundant column definition
I have removed the highest level stacklayout, and just used a grid
I have removed the second nested stacklayout and left the grid
I have set both Rows to * in the main grid, just to make sure
Note : if this doesn't work, remove everything except the ListView, just as a sanity check
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="grid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
x:Name="labelName"
Grid.Row="0"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Name"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textName"
Grid.Row="0"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Name}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAge"
Grid.Row="1"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Age"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAge"
Grid.Row="1"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Age}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAddress"
Grid.Row="2"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Address"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAddress"
Grid.Row="2"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Address}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelNICNumber"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textNIC"
Grid.Row="3"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding NIC}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Button
Grid.Row="4"
Grid.Column="1"
Clicked="UserSaveClick"
FontSize="6"
HeightRequest="30"
HorizontalOptions="Start"
Text="Save"
VerticalOptions="CenterAndExpand" />
</Grid>
<StackLayout Grid.Row="1">
<Label
x:Name="labelNICNumber2"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<ListView
x:Name="ListViewUsers"
HasUnevenRows="True"
IsEnabled="True"
IsVisible="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="Open Sans"
FontSize="6"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Name}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="2"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Age}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="3"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Address}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="4"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding NIC}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>

how to see four buttons in the first row and a list of images in second row?

I am writing this code, but I can´t see the buttons, only the images. I am usiang xamaring forms in visual studio for a mobile app.I need to see both elements, the buttons in the first row and de images in the second row
<ContentPage.Content>
<ScrollView
Padding="{ StaticResource MainWrapperPadding }">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="1" Grid.Row="0" Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="2" Grid.Row="0" Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="3" Grid.Row="0" Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>-->
</ScrollView>
</ContentPage.Content>
</ContentPage>

Here i am going to make more easy of your task adding more fields
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" >
<Button Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Red" >
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>
</StackLayout>
stack layout with grid rows

Grid taking all the space Xamarin

I've got in my xamarin forms app an xaml in which I have a Grid and a horizontal StackLayout inside a main vertical StackLayout. The problem is that the Grid takes all the vertical space of the screen and I cannot see the inner StackLayout. Here's the code.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Practice3.AddPage">
<StackLayout Margin="15,10,15,5" Orientation="Vertical">
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0 -->
<Label
x:Name="TitleText"
Text="New film:"
Grid.Row="0"
Grid.Column="0"
FontSize="Large"
FontAttributes="Bold"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Title"
x:Name="TitleEntry"
Grid.Row="0"
Grid.Column="1"
FontSize="Large"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="YearLabel"
Text="Year:"
Grid.Row="1"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Year"
x:Name="YearEntry"
Grid.Row="1"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="DurationLabel"
Text="Duration:"
Grid.Row="2"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Duration"
x:Name="DurationEntry"
Grid.Row="2"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 3 -->
<Label
x:Name="CountryLabel"
Text="Country:"
Grid.Row="3"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Country"
x:Name="CountryEntry"
Grid.Row="3"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 4 -->
<Label
x:Name="DirectorLabel"
Text="Director:"
Grid.Row="4"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Director"
x:Name="DirectorEntry"
Grid.Row="4"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 5 -->
<Label
x:Name="ScreenwriterLabel"
Text="Screenwriter:"
Grid.Row="5"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Screenwriter"
x:Name="ScreenwriterEntry"
Grid.Row="5"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 6 -->
<Label
x:Name="MusicLabel"
Text="Music:"
Grid.Row="6"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Music"
x:Name="MusicEntry"
Grid.Row="6"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 7 -->
<Label
x:Name="CinematographyLabel"
Text="Cinematography:"
Grid.Row="7"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Cinematography"
x:Name="CinematographyEntry"
Grid.Row="7"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 8 -->
<Label
x:Name="CastLabel"
Text="Cast:"
Grid.Row="8"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="75"
Keyboard="Text"
x:Name="CastEntry"
Grid.Row="8"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 9 -->
<Label
x:Name="ProducerLabel"
Text="Producer:"
Grid.Row="9"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Producer"
x:Name="ProducerEntry"
Grid.Row="9"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 10 -->
<Label
x:Name="GenreLabel"
Text="Genre:"
Grid.Row="10"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Genre"
x:Name="GenreEntry"
Grid.Row="10"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 11 -->
<Label
x:Name="PlotLabel"
Text="Plot:"
Grid.Row="11"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="100"
Keyboard="Default"
x:Name="PlotEntry"
Grid.Row="11"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
</Grid>
<StackLayout Orientation="Vertical">
<Image
x:Name="cancelButton"
Source="Assets/cancelB.jpg"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
<Image
x:Name="okButton"
Source="Assets/okB.jpg"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</ContentPage>
What I would like to happen is that the inner StackLayout with that couple of Images takes all the space that it needs at the bottom of the screen and the rest of the screen is used by the grid, which may be scrollable.

Because your Grid taking all the space of the screen I suggest you to add scroll view as following code:
<?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:local="clr-namespace:App25"
x:Class="App25.MainPage">
<ScrollView Orientation="Both" >
<StackLayout Margin="15,10,15,5" Orientation="Vertical" >
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0 -->
<Label
x:Name="TitleText"
Text="New film:"
Grid.Row="0"
Grid.Column="0"
FontSize="Large"
FontAttributes="Bold"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Title"
x:Name="TitleEntry"
Grid.Row="0"
Grid.Column="1"
FontSize="Large"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="YearLabel"
Text="Year:"
Grid.Row="1"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Year"
x:Name="YearEntry"
Grid.Row="1"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="DurationLabel"
Text="Duration:"
Grid.Row="2"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Duration"
x:Name="DurationEntry"
Grid.Row="2"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 3 -->
<Label
x:Name="CountryLabel"
Text="Country:"
Grid.Row="3"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Country"
x:Name="CountryEntry"
Grid.Row="3"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 4 -->
<Label
x:Name="DirectorLabel"
Text="Director:"
Grid.Row="4"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Director"
x:Name="DirectorEntry"
Grid.Row="4"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 5 -->
<Label
x:Name="ScreenwriterLabel"
Text="Screenwriter:"
Grid.Row="5"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Screenwriter"
x:Name="ScreenwriterEntry"
Grid.Row="5"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 6 -->
<Label
x:Name="MusicLabel"
Text="Music:"
Grid.Row="6"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Music"
x:Name="MusicEntry"
Grid.Row="6"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 7 -->
<Label
x:Name="CinematographyLabel"
Text="Cinematography:"
Grid.Row="7"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Cinematography"
x:Name="CinematographyEntry"
Grid.Row="7"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 8 -->
<Label
x:Name="CastLabel"
Text="Cast:"
Grid.Row="8"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="75"
Keyboard="Text"
x:Name="CastEntry"
Grid.Row="8"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 9 -->
<Label
x:Name="ProducerLabel"
Text="Producer:"
Grid.Row="9"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Producer"
x:Name="ProducerEntry"
Grid.Row="9"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 10 -->
<Label
x:Name="GenreLabel"
Text="Genre:"
Grid.Row="10"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Genre"
x:Name="GenreEntry"
Grid.Row="10"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 11 -->
<Label
x:Name="PlotLabel"
Text="Plot:"
Grid.Row="11"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="100"
Keyboard="Default"
x:Name="PlotEntry"
Grid.Row="11"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
</Grid>
<StackLayout Orientation="Vertical">
<Image
x:Name="cancelButton"
BackgroundColor="Black"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
<Image
x:Name="okButton"
BackgroundColor="Blue"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>

When you use Auto for your ColumnDefiitions and RowDefinitions, it gives the layout measurement calculations to the inner views of each cell. Therefore, your Grid is taking up all the space simply because the inner Views are increasing the width and height.
My suggestion would be to abandon the Auto widths and heights. They are really tough on performance too. See Kent's blog post here about some tips on this. It can also help you with structuring your Grid (you might want to just use a StackLayout since you're using what is basically a bunch of Rows. http://kent-boogaart.com/blog/jason-smith's-xamarin-forms-performance-tips
If each of your Rows need to be the same height, use * instead of Auto:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Using * will also guarantee the measurements do not increase the size of the container, meaning your StackLayout that is hidden should be visible.
One last alternative is to to what Mike said, and wrap it in a ScrollView.

How to add rating bar in xamarin forms

here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin

Categories