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

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?

Related

Replace a FlexLayout with a StackLayout

I have a Grid with two rows in Auto within a CollectionView. In one I have a FlexLayout, in the other a Label. For some strange problem, with these two controls the Label is not displayed and the only way I have found so far is to replace the FlexLayout with a StackLayout.
<DataTemplate>
<yummy:PancakeView CornerRadius="15">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="LightBlue" Offset="10,10"/>
</yummy:PancakeView.Shadow>
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="27"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Margin="4,4,4,7" Source="{Binding Umore}" VerticalOptions="Center"/>
<Label Grid.Row="0" FontFamily="FontM" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center" />
<Label Grid.Row="1" FontFamily="FontM" Grid.Column="1" Text="{Binding Orario}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="LightGray" HeightRequest="10" Progress="1" VerticalOptions="End"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="{Binding ColoreUmore}" HeightRequest="10" Progress="{Binding ProgValore}" VerticalOptions="End"/>
<FlexLayout
Grid.Row="2"
Margin="0,5,10,0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding IconDiaries}"
Wrap="Wrap"
JustifyContent="Start"
Direction="Row"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Padding="0,2,3,0">
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:TintedImage Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="2" TintColor="{Binding ColoreUmore}"/>
<Label Grid.Row="0" Grid.Column="1" FontFamily="FontM" Text="{Binding id}" TextColor="{DynamicResource TextColor}" Opacity="0.9" FontSize="13" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<Label Grid.Row="3" Grid.Column="1" FontFamily="FontM" TextColor="{DynamicResource TextColor}" FontSize="16" Text="{Binding Nota}"/>
Result
Is there any way to turn this FlexLayout into a StackLayout and be able to visualize in the same way?
Use * instead of Auto for your FlexLayout row.
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27" />
<RowDefinition Height="27" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- elements -->
</Grid>

Entry and Buttons are not focused in xamarin forms

I am developing one android application using xamarin android. I am designing one page using xaml. in my screen i have 5 images. it is basically a login screen. but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
below is my xaml
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="745"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="10" Grid.Column="0" >
<Grid Grid.Column="0" ColumnSpacing="80" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Image Source="image1.png" Margin="0" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Image Source="image3.png" Margin="0" Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Label x:Name="lblTitle" FontSize="22" TextColor="Blue" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="Title goes here"/>
<Image Source="image3.png" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="500" WidthRequest="500" />
<StackLayout Grid.Row="2" Grid.Column="1" InputTransparent="False" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="User Name"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Entry x:Name="txtUsername" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Username" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="Password"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2">
<Entry x:Name="txtPassword" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Password" IsPassword="True" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Button x:Name="btnlogin" Grid.Row="4" Grid.Column="0" Text="LOGIN" WidthRequest="100" HeightRequest="40" ></Button>
<Button x:Name="btnCancel" Grid.Row="4" Grid.Column="1" Text="CANCEL" WidthRequest="100" HeightRequest="40" ></Button>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="image4.png" Margin="0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="400" WidthRequest="250" />
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="year "/>
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="company name goes here"/>
</Grid>
</StackLayout>
<StackLayout Grid.RowSpan="1" Grid.Column="1" InputTransparent="True">
<Image Source="image5.png" Margin="0"
/>
</StackLayout>
</Grid >
</StackLayout>
but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
I test you code, and find you put the following code in wrong place.
<StackLayout Grid.Row="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
You just define 3 RowDefinitions, but you use Grid.Row="3" above code.
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
please take a look the following code, I use my image source.
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c1.png"
WidthRequest="200" />
<Image
Grid.Row="0"
Grid.Column="1"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c10.png"
WidthRequest="200" />
<Label
x:Name="lblTitle"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="22"
HorizontalTextAlignment="Center"
Text="Title goes here"
TextColor="Blue"
VerticalOptions="Center" />
<Image
Grid.Row="2"
Grid.Column="0"
HeightRequest="500"
HorizontalOptions="StartAndExpand"
Source="c11.png"
WidthRequest="500" />
<StackLayout
Grid.Row="2"
Grid.Column="1"
InputTransparent="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="User Name"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtUsername"
FontSize="15"
HorizontalOptions="FillAndExpand"
Placeholder="Enter Username"
Text="" />
</Frame>
<Label
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="Password"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtPassword"
FontSize="15"
HorizontalOptions="FillAndExpand"
IsPassword="True"
Placeholder="Enter Password"
Text="" />
</Frame>
<Button
x:Name="btnlogin"
Grid.Row="4"
Grid.Column="0"
HeightRequest="40"
Text="LOGIN"
WidthRequest="100" />
<Button
x:Name="btnCancel"
Grid.Row="4"
Grid.Column="1"
HeightRequest="40"
Text="CANCEL"
WidthRequest="100" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout
Grid.RowSpan="1"
Grid.Column="1"
InputTransparent="True">
<Image Margin="0" Source="image5.png" />
</StackLayout>
</Grid>
</StackLayout>

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>

set border to listview Xamarin form

I made a table with xamarin forms, but I would like the headers not to have blank spaces and also put borders, use table-striped, have the basic characteristics of a bootstrap table for example. Could you help me?. Thank you for you help.
Here my code.
<StackLayout BindingContext="{Binding OpportunityListViewModel}" Padding="8">
<ListView x:Name="ProposalListProduct"
ItemsSource="{Binding ProposalView}"
IsRefreshing="{Binding IsRefreshing}"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
Margin="0">
<ListView.Header>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Item" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="Cant." FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="Precio" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="Total" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Margin="0" x:Name="Nombre" Text="{Binding Nombre}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="Start" />
<Label Grid.Column="1" Margin="0" x:Name="Cantidad" Text="{Binding Cantidad}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Margin="0" x:Name="Precio" Text="{Binding Precio,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
<Label Grid.Column="3" Margin="0" x:Name="Total" Text="{Binding Total,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
you can do it like this:
<ListView ItemsSource="{Binding People}"
HasUnevenRows="True"
SeparatorVisibility="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Text="Name"
HorizontalOptions="Center"
FontSize="Large"/>
<Label Grid.Column="1"
Text="Description"
HorizontalOptions="Center"
FontSize="Large"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="2"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="20,10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label Grid.Column="1"
Text="{Binding Description}"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="2"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

xamarin forms: the page becomes extremely large and I am not sure why

<ContentPage.Content>
<ScrollView>
<StackLayout HorizontalOptions="FillAndExpand" Padding="0">
<Label FontSize="Large" Margin="6" HorizontalTextAlignment="Center" Text="Revisión Técnica" HorizontalOptions="Center"></Label>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="3" Color="Black"></BoxView>
<StackLayout IsVisible="True" Orientation="Horizontal" Padding="0" x:Name="ContainerSec" HorizontalOptions="FillAndExpand">
<StackLayout Padding="0" Spacing="0">
<StackLayout BackgroundColor="LightGray" Padding="0">
<Label Margin="8" VerticalOptions="Center" VerticalTextAlignment="Center" Text="Lista de detalles"></Label>
</StackLayout>
<StackLayout Padding="0" Spacing="0" x:Name="VisualColumnWRP" WidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}" MinimumWidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}">
</StackLayout>
</StackLayout>
<BoxView WidthRequest="3" VerticalOptions="FillAndExpand" Color="{StaticResource type2-color}"></BoxView>
<StackLayout Padding="0" Spacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid x:Name="ElGrid" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition x:Name="row1" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row2" Height="Auto"/>
<RowDefinition x:Name="row3" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row4" Height="Auto"/>
<RowDefinition x:Name="row5" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row6" Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Garantía"></Label>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Garantia"></Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Descripción"></Label>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Description"></Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Detalle"></Label>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Detail"></Label>
<StackLayout Orientation="Horizontal" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Estado"></Label>
<suave:MaterialPicker x:Name="Picker" HorizontalOptions="FillAndExpand" Margin="5"></suave:MaterialPicker>
</StackLayout>
<StackLayout Orientation="Horizontal" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Nota"></Label>
<Editor x:Name="EditorWRP" HeightRequest="100" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="5">
<suave:MaterialButton Clicked="MaterialButton_Clicked" BackgroundColor="LightGray" Text="Agregar evidencia" Margin="5"></suave:MaterialButton>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
<Image x:Name="GalleryImage"></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
the previous code generate the next screen but is height is a lot bigger than the height of the tablet emulator and I don't know why.
The only way that I solved it was declaring the grid with fix height, but even when the window is big and I checked its height value, turns out to be small. Thank you for your help
You can put your scroll view into absolute layout and set bounds and flags - it should work