Develop Reference

Xamarin ListView alternate column color

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>

ListView with Grid containing 2 objects for each column

In my application, I would like to display a ListView, with a vertical scroll. Inside the ListView, I would like to insert a Grid divided into two columns. Each column would like to have a list of objects in Binding, so 2 objects for each row. I thought of creating 2 ListView, with simultaneous scrolling, so that when I scroll on the left one, it also happens on the right one, as if it were a single. But the work is longer. Is there anything simpler than being able to use only a ListView with two objects for each row, one for each column?
This is my code XAML:
<ListView x:Name="CategorySx"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=55}"
WidthRequest="130" HasUnevenRows="True" ItemsSource="{Binding listSx}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="SX" Grid.Row="0" Grid.Column="0" Source="{Binding ImageSx}"/>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding TitoloSx}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="CategoryDx"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=200}"
WidthRequest="130" HasUnevenRows="True" ItemsSource="{Binding listDx}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="SX" Grid.Row="0" Grid.Column="0" Source="{Binding ImageDx}"/>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding TitoloDx}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>

Use a collectionView with Vertical grid would achieve the result easily:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

How to display ListView on top of (over the) other items in Xamarin Forms?

I have a ListView that displays recent Search items. I have added it in the Stack Layout of my Main page. I want to show ListView over the other UI elements just like this: How can it be done.
I am currently using a new Page just for SearchBar and ListView. On the mainpage I have just a Search Button, when I click on that button, app navigates to the new Page that contains SearchBar and ListView. But I want it done on the same page. When Search button is clicked, SearchBar and ListView show become visible over the other UI elements.
Here is my code:
On MainPage.xaml
<Button Text="Search" Clicked="SearchButtonPressed" />
C# Code
void SearchButtonPressed(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
SearchPage.xaml Code
<StackLayout>
<SearchBar x:Name="SearchBar"
TextChanged="Handle_SearchButtonPressed"
Placeholder="Search places..."
CancelButtonColor="Red" />
<ListView x:Name="ListView" ItemsSource="{Binding Source=list}" RowHeight="50" IsVisible="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped">
<Label Text="{Binding}" TextColor="Black" VerticalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>

you can do it with a grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0"
Placeholder="SearchItem"
TextChanged="Entry_TextChanged"/>
<Image Grid.Row="1"
Aspect="Fill"
Source="testImage.png"/>
<ListView x:Name="ListView"
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="Fill"
IsVisible="False"
HeightRequest="300"
BackgroundColor="White"
Opacity="0.8">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
if the text of the search entry changed, show the listview:
private void Entry_TextChanged(object sender, TextChangedEventArgs e)
{
ListView.IsVisible = e.NewTextValue.Length > 0;
}

If you put the list which you will use for suggestion to the bottom of xaml hierarchy, you will resolve it without navige to another page. In addition, if you use the searchbar and listview in the grid and give a same row, they will overlap. Ex:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="350" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar
Grid.ColumnSpan="3"
BackgroundColor="White"
CancelButtonColor="Red"
IsSpellCheckEnabled="False">
<SearchBar.Margin>
<OnPlatform Android="0,0,0,-5" />
</SearchBar.Margin>
</SearchBar>
<Label
Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="Gray" />
<Frame
Grid.Row="3"
Grid.Column="1"
Margin="0,21,0,21"
Padding="8"
BackgroundColor="White"
BorderColor="Red"
CornerRadius="20"
HasShadow="False"
VerticalOptions="End">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label
Margin="5,0,0,0"
Text="Test"
TextColor="Red" />
</Grid>
</Frame>
<StackLayout
Grid.Row="2"
Grid.ColumnSpan="3"
BackgroundColor="White"
Opacity="0.8"
VerticalOptions="End">
<Label
x:Name="LabelDescription"
Grid.Row="1"
Grid.ColumnSpan="3"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Test 2"
TextColor="Red" />
</StackLayout>
<BoxView
Grid.Row="2"
Grid.ColumnSpan="3" />
<ListView
Grid.RowSpan="3"
Grid.ColumnSpan="3"
Margin="0,50.5,0,0"
BackgroundColor="White"
HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding SuggestionItems}"
RowHeight="42"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Never">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="58" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item1}"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item2}"
VerticalOptions="Center" />
<Label
Grid.Row="2"
Grid.ColumnSpan="2"
BackgroundColor="Gray" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Xamarin.Forms: issues positioning labels and setting row height?

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.

Uneven space after last row of the grid inside listview in xamarin.forms

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.