Develop Reference

Why other fields are not displayed in the listview using XAMARIN

I am trying to display items, but only {Binding Peso} is displayed.
If you change {Binding Peso} and use{Binding Contenido} you can see that it is displayed OK
Any Help Pls?
`
<ListView x:Name="PaqueteList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame BorderColor="Black">
<StackLayout Margin="5" Grid.Column="0" Orientation="Vertical"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
<Label Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White"
/>
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have changed the {Binding Peso} to {Binding Contenido} and so on, and it is works.
I just need to display something like this
Peso Tracking Contenido
xx yyyyy zzzz
xx yyyyy zzzz
xx yyyyy zzzz

Try this for your ViewCell:
<ViewCell>
<Frame BorderColor="Black">
<Grid
Margin="5"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center"
ColumnDefinitions="*, *, *">
<Label
BackgroundColor="White"
Text="{Binding Peso}"
TextColor="Blue" />
<Label
Grid.Column="1"
BackgroundColor="White"
Text="{Binding TrackingNumber}"
TextColor="Blue" />
<Label
Grid.Column="2"
BackgroundColor="White"
Text="{Binding Contenido}"
TextColor="Blue" />
</Grid>
</Frame>
</ViewCell>

You should add the children views into a ListView like the pattern below:
<ListView>
<ViewCell>
<StackLayout>
<Frame>
<Grid>
</Grid>
<Frame/>
</StackLayout>
</ViewCell>
</ListView>
Below is the code snippet for your reference:
<ListView x:Name="PaqueteList" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="5" Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<Frame BorderColor="Black">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White" />
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Xamarin - Frame.GestureRecognizers doesn't work when tapped

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

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>

CollectionView ItemTemplate with much text

To display some text and an image I use the following Collectionview ItemTemplate.
Unfortunately, elements with much text inside the Message property will overflow the template.
The result looks like the image below.
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds=".0,.0,1,1"
Padding="0"
VerticalOptions="StartAndExpand">
<Grid Padding="2" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Padding="1" Grid.Column="0">
<templates:DisplayCircleImageTemplate .../>
</StackLayout>
<StackLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="StartAndExpand">
<Label Text="{Binding MessageHeader}" FontAttributes="Bold" FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame HasShadow="True"
Padding="0"
HorizontalOptions="Center">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="Center"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<StackLayout HorizontalOptions="End">
<Label Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}" Style="{DynamicResource LabelGeneralText}"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</custom:CustomFrame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
T
Is there a way to avoid this text-overflow?

Not super framilair with Xamarin but you can try this to shorten your Binding Message text (LineBreakMode="TailTruncation").
<Label
Text="This is a very long text"
LineBreakMode="TailTruncation"
WidthRequest="50">
</Label>
From here: https://forums.xamarin.com/discussion/20509/truncate-long-texts-with-ellipsis-on-label-control

Thanks for your suggestions, I will certainly use the LineBreakMode in the future!
I was able to solve the question by removing the AbsoluteLayout and replaced it with a GridLayout.
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<StackLayout Padding="0"
VerticalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<StackLayout Padding="1">
<templates:DisplayCircleImageTemplate
CircleBackgroundColor="{DynamicResource ColorPrimary}"
ImageSource="{Binding Stable.Image}"
ImageBorderThickness="1.2"
FrameBorderColor="{DynamicResource ColorPrimary}"
ImageBackgroundColor="{DynamicResource ColorPrimary}"
ImageBorderColor="{DynamicResource ButtonColor}"
HeightWidthOuterImage="{DynamicResource ProfileImageSize}"
CornerRadiusOuterImage="{DynamicResource ProfileImageSizeRadius}"
HeightWidthInnerImage="{DynamicResource ProfileImageSizeInsideSize}"/>
</StackLayout>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackLayout>
<Label Text="{Binding MessageHeader}"
FontAttributes="Bold"
FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame Grid.Row="1"
Grid.ColumnSpan="2"
HasShadow="True"
Padding="0"
HorizontalOptions="Center"
IsVisible="{Binding HasImage}">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="CenterAndExpand"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}"
Style="{DynamicResource LabelGeneralText}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
</custom:CustomFrame>
</ContentView>

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>