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 .
Related
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
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}}"
/>
I've been going trhough all the articles and codes i found here, but most of them seem to be outdated, or make use of external tools.
I'd need to create a miniature gallery, with two columns, and scrollable.
my aproach would be to use a collectionview, or a listview with a grid in each element.
But not sure that this is the proper aproach.
What would a current good solution be to create a 2 column scrollable miniature gallery with the current tools available in xamarin?
You can only use CollectionView to implement it.
There is a layout property of CollectionView : Span
Span, of type int, that represents the number of columns or rows to display in the grid. The default value of this property is 1, and its value must always be greater than or equal to 1.
You can follow the bellow code :
Vertical list : CollectionView can display its items in a vertical grid by setting its ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Vertical:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<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>
The model binded in ContentPage :
public partial class VerticalGridPage : ContentPage
{
public VerticalGridPage()
{
InitializeComponent();
BindingContext = new MonkeysViewModel();
}
}
About the MonkeysViewModel.cs , you can havev a look at this official sample link .
The effect :
I have a collection of objects that has a property like "ValueType", based on this property I invoke a DataTemplateSelector class that would return type of control to be displayed for that object.
<control:ControlDataTemplateSelector x:Key="personDataTemplateSelector"
RangeTemplate="{StaticResource rangeControl}"
EnumTemplate="{StaticResource pickControl}"
DateTemplate="{StaticResource dateControl}"/>
<DataTemplate x:Key="rangeControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Entry Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="dateControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<DatePicker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"></DatePicker>
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="pickControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Picker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
I am having issue displaying these in grid with two column format, for example if there are 9 objects in the collection need to display a tabular view with 4 rows of 2 columns each and a 5th row that has one column.
With my current code, i get a zig zag kind of layout. But I need Like thisNeed some suggestions
Am looking for solution that would need to work in iOS and Droid
I would use StackLayouts instead of Grids inside of your ViewCells.
You can do:
<StackLayout VerticalOptions="FillAndExpand" >
<control:ScreenLabel Text="{Binding Path=TraitDescription}" />
<Entry />
</StackLayout>
Are you sure your Bindings are coming back properly? I haven't seen a comma separated Markup Extension setting on attribute.
Any one looking for answer, we resolved it by using FLowlist view control. It provides options to have side-by-side view
I am trying to display a CarouselView inside a TabbedPage. I already added the (prerelease-)packages to the Project. Here is my xaml file:
<control:CarouselView x:Name="CVMain"
HeightRequest="150" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Label HorizontalOptions="Center"
Text="Just a test :)"
VerticalOptions="Center" />
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
(control: xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView")
The label doesn't show up when I launch my app. The carousel still exists tho, I can confirm that by adding the BackgroundColor="Green"attribute to the CarouselView.
What am I missing?
Edit: As suggested, I placed the Label inside a Grid, but without any success (I also added an Image):
<control:CarouselView x:Name="CVMain" HeightRequest="150">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.RowSpan="2"
Aspect="AspectFill"
Source="{Binding ImageBase64,
Converter={StaticResource Base64ToImageConverter}}" />
<StackLayout Grid.Row="1">
<Label Text="Test123" />
</StackLayout>
</Grid>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>