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>
Related
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?
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>
In the DataTemplate of a CollectionView I have a Grid, and inside it a Row to which I insert the Height value in Auto. I associate a Label with that Row, but it is not displayed, while if I insert an absolute value in the Row then the text is visible. How could I solve?
<CollectionView
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=140}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"
Margin="10,0">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="9"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<yummy:PancakeView CornerRadius="5">
<RelativeLayout>
<Grid BackgroundColor="LightGray" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="1"/>
<RowDefinition Height="16"/>
<RowDefinition Height="16"/>
<RowDefinition Height="25"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2" Grid.Row="0" BackgroundColor="{Binding ColoreUmore}"/>
<Image Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="8" Source="{Binding Umore}" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Orario}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding DescrizioneUmore}" FontSize="16" TextColor="{Binding ColoreUmore}" HorizontalTextAlignment="Start"/>
<FlexLayout
Grid.Row="4"
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="17"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Black" Opacity="0.4" Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="5" />
<Image Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="3"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding id}" TextColor="{Binding ColoreUmore}" FontSize="12" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<BoxView Grid.Row="5" Grid.Column="1" CornerRadius="7" BackgroundColor="Black" Opacity="0.2" Margin="0,0,4,4"/>
THIS-----> <Label Grid.Row="5" Grid.Column="1" TextColor="White" FontSize="16" Text="{Binding Nota}" Margin="5,0,9,0" />
<Image Source="rightArrowB" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" Margin="0,0,10,0" Rotation="90" Opacity="0.4"/>
<Button Grid.Row="1" Grid.Column="1" WidthRequest="70" HeightRequest="21" BackgroundColor="Transparent" Clicked="BtOperazioni"/>
</Grid>
<StackLayout
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=8}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=200}"
HeightRequest="72"
WidthRequest="90"
IsVisible="{Binding Edit}">
<Button Text="Modifica" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" HeightRequest="37" />
<Button Text="Elimina" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" Clicked="EliminaDiario" HeightRequest="37" />
</StackLayout>
</RelativeLayout>
</yummy:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
why does the below code have the picture and the labels on different rows...I want them all on the same row in different columns...so keeping the labels where they are in horizontal order ...and moving the image down to the same level
Desired:
Vodka
700ml
Image 13.99
current:
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CarouselView ItemsSource="{Binding OffersList}" PeekAreaInsets="20">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Image Grid.Column="1" Grid.Row="1" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="2" Grid.Row="1" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
you are not actually using a Grid, you are using a StackLayout
<Grid>
<Grid.ColumnDefintions>
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
</Grid.ColumnDefintions>
<Image Grid.Column="0" Grid.Row="0" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="3" Grid.Row="0" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</Grid>
If you want to achieve the layout you want above,you should move the Grid into your <CarouselView.ItemTemplate>,like:
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Source="{Binding Img}" WidthRequest="100" Aspect="AspectFit" HorizontalOptions="Start" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="2" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
</Grid>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
<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