We Keep Coding

Xamarin Forms, How to favorite Item using ListView

I am making an app I want to add an item in the list view like favorite .I was wondering if some one have an procedure that I can use o see or and example of what I need.
Thanks
Please help on this im new to Xamarin forms.

In your listview, you can use Xamarin.Forms SwipeView to achieve this function.
The SwipeView is a container control that wraps around an item of content, and provides context menu items that are revealed by a swipe gesture:
You can refer to the follownng code:
<CollectionView x:Name="collectionView"
ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItem Text="Favorite"
IconImageSource="favorite.png"
BackgroundColor="LightGreen"
Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
CommandParameter="{Binding}" />
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding}" />
</SwipeItems>
</SwipeView.LeftItems>
<Grid BackgroundColor="White"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The key code in MonkeysViewModel.cs is:
public ICommand FavoriteCommand => new Command<Monkey>(FavoriteMonkey);
void FavoriteMonkey(Monkey monkey)
{
monkey.IsFavorite = !monkey.IsFavorite;
}
Note:
Though it is used in CollectionView, but the usage in listView is similar.
You can get the full sample here:https://github.com/xamarin/xamarin-forms-samples/tree/main/UserInterface/CollectionViewDemos
Please focus on page :
VerticalListSwipeContextItemsPage.xaml .

How to turn off a Group header in SfListView?

I have a problem.I want to turn off a Group header in SfListView.I read on the forums to turn off IsStickyGroupHeader,I did it but IsStickyGroupHeader="False" does not work.Maybe I understand something wrong.Please help me.Thank you
<syncfusion:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
IsStickyGroupHeader="False"
ItemsSource="{Binding contactsinfo}"
SelectionMode="None">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Vertical"
VerticalOptions="Center">
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Text="{Binding ContactName}"
TextColor="#474747"
VerticalOptions="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</Grid>
<StackLayout BackgroundColor="LightGray" HeightRequest="1" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

You can hide the GroupHeader by using the GroupHeaderSize as 0. Please refer to the following code snippets,
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
GroupHeaderSize="0"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
You can also refer to our user guidance document regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#height-customization
Also, if you are using SfListView.AutoFitMode as Height or DynamicHeight, then the items size will be calculated based on the template elements. Hence, you can customize the GroupHeaderTemplate with Height 0.
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
AutoFitMode="DynamicHeight"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
<ListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="0"/>
</DataTemplate>
</ListView:SfListView.GroupHeaderTemplate>
Refer the following documentation regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#group-header-customization

Picker ItemSource values not binding in a XAML ListView

Hoping you can advise as I've tried all methods to bind a picker in a Listview to my item source values using both code-behind and MVVM. The picker binding works outside of the ListView, but not inside - is this out of the box or just not possible?
Please see my list below!
code
<ListView
x:Name="TypesList"
HeightRequest="53"
BackgroundColor="White"
IsGroupingEnabled="True"
IsPullToRefreshEnabled="false"
ItemsSource="{Binding Items}"
IsRefreshing="{Binding IsBusy}"
RefreshCommand="{Binding LoadTypesCommand}"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="63">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<!-- -->
<Label Grid.Column="0"
Grid.Row="0"
VerticalOptions="Center"
FontAttributes="None"
Text="{Binding .Name, Mode=TwoWay} "
TextColor="Black"
VerticalTextAlignment="Center"
Margin="0,15,0,110"
BackgroundColor="White"
Padding="20,10,0,10"
FontFamily="Hiragino Sans"
FontSize="14"
HeightRequest="53"
x:Name="userLabel"
/>
<Entry Grid.Column="1"
Grid.Row="0"
Text="{Binding .Amount, Mode=TwoWay}"
TextColor="Black"
VerticalOptions="EndAndExpand"
Margin="0,15,20,110"
BackgroundColor="White"
FontFamily="Hiragino Sans"
FontSize="14"
HeightRequest="40"
WidthRequest="55"
x:Name="userEntry"
/>
<Picker Grid.Column="2"
Grid.Row="0"
x:Name="mPicker"
ItemsSource="{Binding UserOptions}"
/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
code
Code behind
code
mPicker.ItemsSource = ViewModel.UserOptions;
code
The model allocates UserOptions and this works for a picker outside the listview so I don't believe there is anything wrong with the model or this code needs to be posted.
Any help appreciated!

List view has its own binding context. So you need to get binding context of view model and then bind to picker like this
Set a name of your view like this
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="viewName">
<Picker Grid.Column="2"
Grid.Row="0"
x:Name="mPicker"
ItemsSource="{Binding BindingContext.UserOptions, Source={x:Reference viewName}}"
/>

How to set the width of the fixed columns in xamarin

I have a ListView that shows chemical residues, the problem is that when I add a particular residue ("BORRAS") my column configuration goes to shit as shown in the following figure
I think there is a nomenclature to set the width of the columns, how can I solve this? How can I make my ListView look homogenous?
I attach my ListView.XAML:
<ListView
SelectionMode="None"
Margin="5,0,10,10"
IsRefreshing="{Binding IsRefreshing}"
HeightRequest="{Binding AltoListaResiduos}"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding ListaResiduos}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<!--NOMBRE RESIDUO-->
<ColumnDefinition Width="3*"/>
<!--CANTIDAD ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--CANTIDAD CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding NombreResiduo}"
HorizontalOptions="FillAndExpand"
MaxLines="3"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0"
Margin="4,0">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="11" Android="11" />
</Label.FontSize>
</Label>
<Label Text="{Binding formattedCantidadEstimada}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="1"
Margin="4,0">
</Label>
<Label Text="{Binding Estimado}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="2"
Margin="4,0">
</Label>
<Label Text="{Binding CantidadContenedor}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="3"
Margin="4,0">
</Label>
<Label Text="{Binding Contenedor}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="4"
Margin="4,0">
</Label>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm new to Xamarin.Forms and I hope this question helps others, how can I make my list look the same with all the waste? (independent of the name) any help for me?

You shouldn't need the StackLayout at all since you are defining a Grid with the appropriate columns.
This should help your Grid to span properly and fill the entire space

I have a feeling this is happening because you are using VerticalTextAlignment now for some reason both the TextAlignment Properties(H, V) have weird behaviors in them, even though Xamarin says for VerticalTextAlignment that it
Gets or sets the vertical alignment of the Text property.
I would rather use YAlign instead as it does not have this behavior and Xamarin says about YAling that it
Gets or sets the vertical alignment for the Text inside of the Label bound.
Secondly, when you use a grid layout a define the columns and rows you should never use AndExpand types as you have already defined the max area and it will not overlay that. Now what the LayoutOptions docs say is CenterAndExpand or FillAndExpand do is
A LayoutOptions structure that describes an element that is centered and expands.
Also, Remove the StackLayout just keep the Grid in your ViewCell.
<Label Text="{Binding Contenedor}"
XAlign="End"
FontSize="Micro"
YAlign="Center"
TextColor="{StaticResource das.color.texto}"
Grid.Column="4"
Margin="4,0"/>
Want to learn the best practices with Xamarin forms? Check my blog here: https://heartbeat.fritz.ai/techniques-for-improving-performance-in-a-xamarin-forms-application-b439f2f04156

Getting id from selected listview item

I have a ListView containing this data template:
<ListView x:Name="lvRitten" Grid.Column="0" Background="Gold" ItemsSource="{Binding ObcRitten}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="lvRitten_SelectionChanged" SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type classes:Rit}">
<Button x:Name="btnride" Height="100" Width="132" >
<StackPanel>
<Grid Height="100" Width="132">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Background="Aquamarine">
<Label Content="naam"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Background="AntiqueWhite">
<StackPanel>
<Label Content="{Binding id}" FontSize="10"/>
<Label Content="{Binding Naam}" FontSize="10"/>
<Label Content="{Binding AantalPassagiers}" FontSize="10"/>
<Label Content="{Binding TaxiNummer}" FontSize="10"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
</Grid>
</Grid>
</StackPanel>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
but now I want to get the id that's in the first label in the 3rd grid when I click on a ListViewItem.
What is the easiest way to get the id?
Can I use binding to bind the id to a other label?
Or do I need to do something else?
ObcRitten is a public ObservableCollection and is filled with Rit
example of a Rit
Rit rit1 = new Rit
{
id = 20,
AantalPassagiers = 5,
Naam = "Jan",
TaxiNummer = 1
};

all elements inside DataTemplate share the same DataContext, namely Rit item. To display id twice in different places you need to create two labels, and bind both to id
<Grid Grid.Column="1" Grid.Row="1">
<Label Content="{Binding id}" FontSize="10"/>
</Grid>
outside of ListView bind to ListView.SelectedItem:
<Label Content="{Binding SelectedItem.id, ElementName=lvRitten}" FontSize="10"/>

Create new property in your ViewModel:
public Rit SelectedRit {get; set;}
Then bind this property with ListView:
<ListView SelectedItem = "{Binding SelectedRit}"..../>

You could cast the SelectedItem property to a Rit and access the id property:
Rit rit = lvRitten.SelectedItem as Rit;
if (rit != null)
var id = rit.id;
You could also bind it directly to a TextBlock like this:
<TextBlock Text="{Binding SelectedItem.id, ElementName=lvRitten}" />