My xaml has 6 labels that display data. I'm trying to set them, but I'm having trouble doing so. This is how the form should be rendered:
Here's what I've tried so far. Here's the xaml:
<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:local="clr-namespace:GasStations"
x:Class="GasStations.MainPage">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="200"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1">
<Button Text="Show list" x:Name="Button_DisplayList"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
</StackLayout>
<StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
<ListView x:Name="ListView_Pets">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="300"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="0" HeightRequest="300" WidthRequest="200">
<Label Text="{Binding Name}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding Description}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding Lon}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding Lat}" FontSize="16" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
This is the result. It clearly doesn't look anything like the image above:
Besides all the issues with the labels, what doesn't seem to change is the row height: <RowDefinition Height="300"> doesn't change anything, and neither does HeightRequest="200".
Any help is appreciated.
The ViewCell definition you have defines a Grid with a single cell inside it (one row and one column. From the UI example you have, it looks more like what you want is 2 columns and 3 rows, something like this:
<ViewCell>
<Grid Padding="10,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
<Label Text="{Binding Description}" FontSize="15" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
<Label Text="{Binding Lon}" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="1"/>
<Label Text="{Binding Lat}" FontSize="16" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="1"/>
</Grid>
</ViewCell>
This is based on the code sample you have, so won't completely implement the UI design, but should get closer. The key is to have the Labels in their own cell in the Grid rather than having them all in a single StackLayout.
You will also likely need to set the RowHeight (as Jason noted) or set HasUnevenRows="true" on the ListView.
Related
I have a Xamarin project with a view of a product's details. I have two buttons which can increase or decrease the quantity of the product. To show how it changes I have a label named lblQuantity which shows the quantity and it's updated if you tap on the remove or add button.
To have some context here's the view
The issue is that the lblQuantity isn't updating itself. I had previously another view with a stacklayout and the gesture recognizers worked fine. Now it doesn't even go inside the method.
Here's the xaml
<?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:controls="clr-namespace:AppCrijoya.Controls"
x:Class="AppCrijoya.Views.ProductDetailPage">
<ScrollView>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White" Spacing="0" Margin="0" Padding="0">
<Grid BackgroundColor="White" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- 1. Profile picture-->
<Frame HasShadow="True" Margin="10" CornerRadius="20">
<Image x:Name="ProductImage" Aspect="AspectFit" Grid.Row="0" Margin="0" VerticalOptions="Start" HeightRequest="230"/>
</Frame>
<!-- Here add the code that is being explained in the next block-->
<StackLayout HeightRequest="90" Grid.Row="1" BackgroundColor="Transparent" VerticalOptions="Start">
<StackLayout Padding="20" BackgroundColor="Transparent">
<!-- Here add the code that is being explained in the next block-->
<!-- Blocks: 3 and 4 -->
<Grid Padding="25,5,25,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!-- Here add the code that is being explained in the next block-->
<!-- 4. Contact information-->
<Label x:Name="txtName" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontAttributes="Bold" FontSize="30" TextColor="Black"/>
<Label x:Name="txtDescription" Grid.Row="1" Grid.ColumnSpan="4" TextColor="Black" FontSize="16"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Padding="0,10,0,0" FontSize="16">
<Label.FormattedText>
<FormattedString>
<Span Text="Stock: " FontAttributes="Bold" TextColor="Black"/>
<Span x:Name="txtDetails" TextColor="black"/>
</FormattedString>
</Label.FormattedText>
</Label>
<!--4. Contact information: Board inforation-->
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" Text="Quantity" FontAttributes="Bold" Style="{StaticResource stlBoardTitle}" />
<Frame Grid.Column="2" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="RemoveTap" Tapped="RemoveTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="-" Style="{StaticResource lblCart}"/>
</Frame>
<StackLayout Grid.Column="3" Grid.Row="3" HeightRequest="40" VerticalOptions="Center" >
<Label
x:Name="lblQuantity"
Text="1"
FontSize="17"
TextColor="Black"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="40"/>
</StackLayout>
<Frame Grid.Column="4" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="AddTap" Tapped="AddTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="+" Style="{StaticResource lblCart}"/>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Grid>
<controls:MyFrame HasShadow="true" HeightRequest="80" BackgroundColor="#e5d3c2" VerticalOptions="EndAndExpand">
<StackLayout WidthRequest="20" VerticalOptions="Center">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label
x:Name="txtPrice"
Grid.Column="0"
HorizontalTextAlignment="End"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="25"
/>
<Button CornerRadius="30"
x:Name="btnAddToCart"
Clicked="BtnAddToCart_Clicked"
Grid.Column="2"
TextColor="Black"
Text="Añadir al carrito"
BackgroundColor="White"
Style="{StaticResource btn}"
FontAttributes="Bold"
/>
</Grid>
</StackLayout>
</controls:MyFrame>
</StackLayout>
</ScrollView>
</ContentPage>
Here's the Add and Remove method that I know work fine
private void RemoveTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
if (quantity > 1)
{
quantity -= 1;
}
lblQuantity.Text = quantity.ToString();
}
private void AddTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
quantity += 1;
lblQuantity.Text = quantity.ToString();
}
The text of the label is supossed to be changed but it isn't. And as I said it doesn't even enter on the method.
I don't know what's the issue. Please help and thanks.
EDIT
I have tried changing it for a Button but still doesn't work. I thought it might be a problem with the grid but I still don't know.
I fixed the issue by making sure the frames where inside the StackLayout as they weren't before
Here is an image to explain it
The frames to add or remove weren't inside the red StackLayout so the tap gesture recognizer wouldn't do anything. I just gave it more height and set the Aspect to FillAndExpand
I need to alternate my ListView columns color so it looks like this.
I was searching Google for any help, and found out that i can put BoxView in the same column with my Label and color that BoxView
My result:
As you can see, i have this annoying white line above BoxViews, which i was not able to remove. My question is how do i remove them? i havent set any paddings and margins, have no clue what is problem.
<ListView x:Name="ListView" ItemTapped="ListView_OnItemTapped" ItemsSource="{Binding FilteredReports, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="#F7FAFC" Grid.Column="0"/>
<Label Grid.Column="0" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding ClientPhone}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Grid.Column="1" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding OfficeName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<BoxView Color="#F7FAFC" Grid.Column="2"/>
<Label Grid.Column="2" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding BranchName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You are using a StackLayout and by default it has a Spacing property with a value of 6.
You should set it to 0
<ViewCell>
<StackLayout Spacing = "0" >
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
....
</StackLayout>
</ViewCell>
I am building an app for a course that uses CollectionView's Grid, and on one screen, the grid is not filling the entire screen, as shown in the screenshot below. The XAML is nearly identical in all screens, with the exception of this one. Looking through the documentation at https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout, I'm not seeing anything that will force the table to fill. I have tried adding HorizontalOptions="FillAndExpand" and HorizontalOptions="CenterAndExpand" in the CollectionView declaration, but am seeing the same thing when I run the debugger. How can I make this stretch across the screen using CollectionView instead of ListView?
XAML Code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Project.TermPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Save"
Clicked="SaveButton_Clicked"/>
</ContentPage.ToolbarItems>
<NavigationPage.TitleView>
<Label Text="Edit Term Information"
HorizontalTextAlignment="Center"
FontFamily="{StaticResource FuturaStdMedium}"
TextColor="White"
FontSize="Title"/>
</NavigationPage.TitleView>
<StackLayout>
<CollectionView x:Name="TermsList"
ItemSizingStrategy="MeasureAllItems">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Text="Term Name:"
TextColor="{StaticResource PrimaryBlue}"
FontFamily="{StaticResource FuturaStdMedium}"/>
<Entry Grid.Column="1"
Grid.Row="0"
Text="{Binding TermName}"
TextColor="{StaticResource SecondaryBlue}"
FontFamily="{StaticResource FuturaStdMedium}"/>
<Label Grid.Column="0"
Grid.Row="1"
Text="Start Date:"
TextColor="{StaticResource PrimaryBlue}"
FontFamily="{StaticResource FuturaStdMedium}"/>
<DatePicker MinimumDate="01/01/2020"
MaximumDate="12/31/2050"
Date="{Binding StartDate}"
DateSelected="OnDateSelected"
Grid.Column="1"
Grid.Row="1"
TextColor="{StaticResource SecondaryBlue}"
FontFamily="{StaticResource FuturaStdBook}">
<DatePicker.Format>MM/dd/yyyy</DatePicker.Format>
</DatePicker>
<Label Grid.Column="0"
Grid.Row="2"
Text="End Date:"
TextColor="{StaticResource PrimaryBlue}"
FontFamily="{StaticResource FuturaStdMedium}"/>
<DatePicker MinimumDate="02/01/2020"
MaximumDate="01/01/2051"
Date="{Binding EndDate}"
DateSelected="OnDateSelected"
Grid.Column="1"
Grid.Row="2"
TextColor="{StaticResource SecondaryBlue}"
FontFamily="{StaticResource FuturaStdBook}">
<DatePicker.Format>MM/dd/yyyy</DatePicker.Format>
</DatePicker>
<Button Text="View Courses for Term"
Grid.ColumnSpan="2"
Grid.Row="3"
x:Name="CoursesButton"
Clicked="CoursesButton_Clicked"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Button Text="Delete Term"
BackgroundColor="Red"
Margin="30"
TextColor="Black"
x:Name="DeleteTermButton"
Clicked="DeleteTermButton_Clicked"/>
</StackLayout>
</ContentPage>
Screenshot:
You could set the width of each Column as 1/2 of screen width
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
add HorizontalOptions="FillAndExpand" in the <Grid>Element inside your collectionView
I am working in xamarin.forms. I am facing the very silly issue and already wasted 5 hours on it. It's designing issue.
<Grid x:Name="MaingrdForms">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" x:Name="lstLatestProducts" HasUnevenRows="True"
ItemAppearing="LstLoadmore"
IsPullToRefreshEnabled="true"
Refreshing="LstPulled"
CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" HeightRequest="100" WidthRequest="100"
Source="{Binding ProductImg}" Margin="5" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding ProductName}" Style="{StaticResource LabelHeaderStyle}"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding ProductDesc}" Style="{StaticResource LabelDescStyle}"/>
<StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal">
<Image Source="icon_password.png"/>
<Label Text="{Binding SubscriptionCategory}" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="icon_password.png"/>
<Label Text="{Binding CreatedDate}" VerticalOptions="Center" HorizontalOptions="Start"/>
</StackLayout>
<Image Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" VerticalOptions="Start" Source="erecall.png"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Grid.Row="0" x:Name="lblNoRecordFound" Text="No Record found" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
</Grid>
In List, I am taking HasUnevenRow=true to set row height but in every row, there is some space after the last row. the height of that space is also different. I can't figure out where is the actual issue.
How would I append a stack layout ontop of a listview so that it scrolls with the listview?
I have tried putting the stack layout and listview inside a scroll view, but im getting a wierd overlap depending on where I scroll. (See below)
I want the stack layout to be stuck to the listview and have them scroll together!
before scrolling:
after scrolling:
CODE:
<!-- Scrollview-->
<ScrollView Grid.Row="2" Grid.Column="0" BackgroundColor="#4D148C">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="150"/> <!--detail -->
<RowDefinition Height="*"/> <!--related videos listview -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--detail -->
<StackLayout x:Name="VideoDetail" BackgroundColor="White" Grid.Row="0" Grid.Column="0" Padding="10, 10, 10, 10" Margin=" 0,0,0,3">
<Label Text ="{Binding Title}" FontAttributes="Bold"/>
<Label Text ="{Binding View_Count}" TextColor="Gray"/>
<Label Text ="{Binding Author_By}" TextColor="Gray" />
<Label Text ="{Binding Uploaded}" TextColor="Gray"/>
</StackLayout>
<!--related videos listview -->
<ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked" BackgroundColor="#4D148C" Grid.Row="1" Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid RowSpacing="0" ColumnSpacing="10" BackgroundColor="White" Padding="10,10,10,10" Margin="0,0,0,3">
<!-- "left, top, right, bottom" -->
<!-- "left, top, right, bottom" -->
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!-- Image Container -->
<!-- NOTE: youtube thumnail dimensions are 128x72-->
<Grid Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="Black">
<Grid.RowDefinitions>
<RowDefinition Height="72"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="128"/>
</Grid.ColumnDefinitions>
<Image
Source="{Binding Thumbnail}"
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
<Label
Text="{Binding Title}"
FontAttributes="Bold"
Grid.Row="0" Grid.Column="1"
VerticalTextAlignment="Center"/>
<Label
Text="{Binding Author_Views}"
TextColor="Gray"
Grid.Row="1" Grid.Column="1"
VerticalTextAlignment="Center"/>
<Label
Text="{Binding Uploaded}"
TextColor="Gray"
Grid.Row="2" Grid.Column="1"
VerticalTextAlignment="Center"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid> <!-- inner grid -->
</ScrollView>
If you want to add a Layout as part of the top of the ListView you can always use the ListView Header.
In your case just do the following:
<ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked" BackgroundColor="#4D148C" Grid.Row="1" Grid.Column="0">
<ListView.Header>
<StackLayout x:Name="VideoDetail" BackgroundColor="White" Grid.Row="0" Grid.Column="0" Padding="10, 10, 10, 10" Margin=" 0,0,0,3">
<Label Text ="{Binding Title}" FontAttributes="Bold"/>
<Label Text ="{Binding View_Count}" TextColor="Gray"/>
<Label Text ="{Binding Author_By}" TextColor="Gray" />
<Label Text ="{Binding Uploaded}" TextColor="Gray"/>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid RowSpacing="0" ColumnSpacing="10" BackgroundColor="White" Padding="10,10,10,10" Margin="0,0,0,3">
<!-- "left, top, right, bottom" -->
<!-- "left, top, right, bottom" -->
<!-- I omitted the ListView Item implementation -->
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This way the StackLayout will be part of the ListView and as this will always scroll with it.
Note: Avoid using a ListView inside a ScrollView or you will run into a lot of issues.