I am using the swipe card in the Xamarin form.
The Problem is i am unable to execute the tap event inside the card.
This is my Xaml code --
<swipecards:CardStackView
Grid.Row="0"
x:Name="CardStackView"
ItemsSource="{Binding Cards[0]}"
Swiped="CardStackView_Swiped"
StartedDragging="CardStackView_dragged"
Margin="20"
BackgroundColor="#E0E0E0"
Focused="CardStackView_Focused">
<swipecards:CardStackView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0"
Grid.ColumnSpan="2">
<Label
Text="{Binding .FullJobName}"
HorizontalOptions="Start"
Style="{StaticResource TitleLabel}"/>
<Grid VerticalOptions="Start">
<Image
x:Name="MyImage"
Source="{Binding .CompanyProfImg}"
HorizontalOptions="FillAndExpand"
Aspect="AspectFit" />
<ActivityIndicator
BindingContext="{x:Reference MyImage}"
IsRunning="{Binding IsLoading}}"/>
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2">
<Label
Text="{Binding .LocationName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
<Label
Text="{Binding .TotalSalary }"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="2" Grid.ColumnSpan="2">
<Label
Text="Comapny Name"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .CompanyName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2">
<Label
Text="Key Skills"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Skills}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="4" Grid.ColumnSpan="2">
<Label
Text="Job Description"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Description}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="5" Grid.ColumnSpan="2">
<BoxView Color="#DCDCDC" HeightRequest="2" />
<StackLayout Orientation="Horizontal">
<Label
Text="{Binding .Postedby}"
HorizontalOptions="Start"
Style="{StaticResource label_med}"/>
<Image x:Name="More_Option" Source="more.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand}"
CommandParameter="Image1"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</swipecards:CardStackView.ItemTemplate>
</swipecards:CardStackView>
and ViewModel looks like this--
private ICommand tapCommand;
public ICommand TapCommand
{
get { return tapCommand; }
set
{
OnTapped(this.tapCommand);
}
}
void OnTapped(object s)
{
}
what is wrong with my code?I have also tried the normal approach the normal tap event.but that was not also working.
i am refering this link -- Link
Thank you guys.
Related
Uisng the carsoule view I am trying to list planes for the msfs community however the image is very small.
<CollectionView x:Name="addOnList" Margin="0,40,0,0" Grid.Row="1" SelectionMode="Single"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" VerticalItemSpacing="20" HorizontalItemSpacing="20" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="{Binding ThumbNail}" Margin="10" WidthRequest="200" HeightRequest="200"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="{Binding Name}" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="{Binding Version}" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<Button Grid.Row="3" x:Name="btnSetReminder" Text="Add to Favourites"></Button>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<Grid HeightRequest="0"/>
</CollectionView.Footer>
</CollectionView>
What I want is Image Name over the image then I want a button to say add to favourites which would be a heart and then a the version number to the right something like this but I would like the title to be over the image and the image to be slightly bigger
The whole Grid has a HeightRequest 160 and you image can't get the HeightRequest="200".
Also the Button should in Grid.Row 2.
I would recommend you to layout this way:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="sample.jpg"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<Button Grid.Row="2" x:Name="btnSetReminder" Text="Add to Favourites"></Button>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
Here is the result:
Update:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="sample.jpg"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<StackLayout Grid.Row="2" Orientation="Horizontal">
<Button Text="left" FontSize="8" HorizontalOptions="Start" WidthRequest="50"></Button>
<Button x:Name="btnSetReminder" FontSize="8" Text="Add to Favourites" HorizontalOptions="FillAndExpand"></Button>
<Button Text="right" FontSize="8" HorizontalOptions="End" WidthRequest="50"></Button>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
To enlarge the image and make the text and button overlay:
<Image Grid.RowSpan="3" ... />
For a heart-favourite button, please try ImageButton:
<ImageButton Source="heart.png" ... />
I'm facing issue in CommandParameter which is in DataTemplate for the listView.
I have separate DataTemplate for ListView and i am not able to pass the imagepath in the commandParameter when click on image in the listView.
<?xml version="1.0" encoding="utf-8" ?>
xmlns:local="clr-namespace:RCBazaar.Localization"
xmlns:template="clr-namespace:RCBazaar.Views.Templates"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
x:Class="RCBazaar.Views.HomeView" Padding="0" x:Name="HomePage">
</Style>
</ResourceDictionary>
</ContentPage.Resources>-->
<ContentPage.Content>
<Grid Style="{StaticResource MainGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="140"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<cards:CarouselView Margin="0" x:Name="carousel" Grid.Row="0" ItemsSource="{Binding ProductImage,Mode=TwoWay}" >
<cards:CarouselView.ItemTemplate>
<DataTemplate>
<ffimageloading:CachedImage HorizontalOptions="FillAndExpand" Source="{Binding ImageName}" Style="{StaticResource CachedImageStyle}">
</ffimageloading:CachedImage>
</DataTemplate>
</cards:CarouselView.ItemTemplate>
<controls:IndicatorsControl ToFadeDuration="1500" BackgroundColor="Gray"/>
<controls:LeftArrowControl ToFadeDuration="2500" BackgroundColor="Gray" />
<controls:RightArrowControl ToFadeDuration="2500" BackgroundColor="Gray"/>
</cards:CarouselView>
<Image Grid.Row="1" Margin="0,0,10,0" Source="ic_sort.png" HeightRequest="30" WidthRequest="30" HorizontalOptions="EndAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SortPopupCommand}"/>
</Image.GestureRecognizers>
</Image>
<ListView IsEnabled="True" HeightRequest="{Binding ListHeight}" CachingStrategy="RecycleElement" x:Name="mylist" Style="{StaticResource ListviewStyle}" Grid.Row="2" SelectedItem="{Binding SelectedProduct,Mode=TwoWay}" ItemsSource="{Binding HomeProducts}" >
<ListView.Behaviors>
<behaviors:EventToCommandBehavior EventName="ItemSelected" Command="{Binding HomeProductSelectedCommand}"></behaviors:EventToCommandBehavior>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<template:ProductCell ParentBindingContext="{Binding Source={x:Reference mylist}, Path=BindingContext}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator Grid.Row="2" VerticalOptions="Start" IsVisible="{Binding IsBusy,Mode=TwoWay}" IsRunning="{Binding IsBusy,Mode=TwoWay}" Color="Blue"/>
</Grid>
</ContentPage.Content>
ProductCell
<ViewCell.View>
<Grid RowSpacing="5" Style="{StaticResource ProductTemplateGrid}" >
<Grid.RowDefinitions>
<RowDefinition Height="28*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="60*"/>
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage x:Name="img" VerticalOptions="FillAndExpand" Style="{StaticResource CachedImageStyle}" Aspect="AspectFit" Grid.Row="0" Source="{Binding PictureBinary,Converter={StaticResource Base64StringToImageConverter}}" Grid.RowSpan="5" Grid.Column="0">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}" Command="{Binding ViewImageCommand}" CommandParameter="{Binding PictureBinary}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Grid.Row="0" Grid.Column="1" MaxLines="2" LineBreakMode="TailTruncation" Style="{StaticResource lblDarkBody}" Text="{Binding Name}" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="{local:Translate SKU}" Style="{StaticResource lblNormal}"></Label>
<Label Margin="35,0,0,0" Grid.Row="1" Grid.Column="1" Text="{Binding upc}" Style="{StaticResource lblNormal}" />
<Label Grid.Row="2" Grid.Column="1" Text="{local:Translate Stock}" Style="{StaticResource lblNormal}" VerticalOptions="Center" ></Label>
<Image Margin="45,0,0,0" Grid.Row="2" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Source="{Binding qtyonhand,Converter={StaticResource QuantityToColorConverter}}" />
<uc:CustomRatingBar Grid.Row="3" Grid.Column="1" Style="{StaticResource RatingsStyle}" x:Name="CusRatingBar" Rating="{Binding RatingSum}" />
<Image Grid.Row="4" Grid.Column="1" Source="in.png" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label Margin="30,0,0,0" Grid.Row="4" Grid.Column="1" VerticalOptions="Center" Style="{StaticResource lblEmphasis}" Text="{Binding pricelist,StringFormat='Rs {0:#,0.#0}'}" ></Label>
<Image Grid.Row="4" Grid.Column="1" Margin="0,0,10,0" WidthRequest="30" HeightRequest="30" VerticalOptions="Center" Style="{StaticResource StockCachedImageStyle}" Source="heartdark.png" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}" Command="{Binding AddtoWishlistCommand}" CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell.View>
If you give the page in question an x:Name in your XAML you can then refer to the origional BindingContext (should be your ViewModel) while also having access to the item itself as BindingContext for the commandparameter. Looks something like this:
<ContentPage x:Name="MyContentPage"
....
<!--inside your DataTemple you can now reference the BindingContext of your page-->
Command="{Binding Path=BindingContext.HomeProductSelectedCommand, Source={x:Reference MyContentPage}} CommandParameter="{Binding .}"
…
This example passes the bindingcontext of the item (by default that's the item itself) to the command parameter
I' m working in Xamarin forms application ,I'm currently implementing a form contains two parts one is data entering part and other part is a list view Afetr i entered data and saved it should appear in list view ,In debug i checked ListViewUsers.ItemsSource count is not 0 it has values , but listView is not showing in the form .
<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="labelName" Grid.Row="0" Grid.Column="0" Margin="10" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" Text="Name"/>
<Entry x:Name="textName" Grid.Row="0" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Name}" />
<Label x:Name="labelAge" Grid.Row="1" Grid.Column="0" Margin="10" FontSize="6" Text="Age" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAge" Grid.Row="1" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Age}" />
<Label x:Name="labelAddress" Grid.Row="2" Grid.Column="0" Margin="10" FontSize="6" Text="Address" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAddress" Grid.Row="2" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Address}" />
<Label x:Name="labelNICNumber" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textNIC" Grid.Row="3" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding NIC}" />
<Button Grid.Row="4" Grid.Column="1" HeightRequest = "30" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" FontSize="6" Text="Save" Clicked="UserSaveClick" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0">
<Label x:Name="labelNICNumber2" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<ListView x:Name="ListViewUsers" SeparatorColor="Transparent" HasUnevenRows="True" IsVisible="True" IsEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="6"
Text="{Binding Name}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="1"/>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Age}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="2" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Address}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="3" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding NIC}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="4"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</StackLayout>
Its hard to see whats going on here, however
I have removed the redundant column definition
I have removed the highest level stacklayout, and just used a grid
I have removed the second nested stacklayout and left the grid
I have set both Rows to * in the main grid, just to make sure
Note : if this doesn't work, remove everything except the ListView, just as a sanity check
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="grid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
x:Name="labelName"
Grid.Row="0"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Name"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textName"
Grid.Row="0"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Name}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAge"
Grid.Row="1"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Age"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAge"
Grid.Row="1"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Age}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAddress"
Grid.Row="2"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Address"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAddress"
Grid.Row="2"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Address}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelNICNumber"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textNIC"
Grid.Row="3"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding NIC}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Button
Grid.Row="4"
Grid.Column="1"
Clicked="UserSaveClick"
FontSize="6"
HeightRequest="30"
HorizontalOptions="Start"
Text="Save"
VerticalOptions="CenterAndExpand" />
</Grid>
<StackLayout Grid.Row="1">
<Label
x:Name="labelNICNumber2"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<ListView
x:Name="ListViewUsers"
HasUnevenRows="True"
IsEnabled="True"
IsVisible="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="Open Sans"
FontSize="6"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Name}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="2"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Age}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="3"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Address}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="4"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding NIC}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
I'm writing an xamarin forms app. I have A ListView with custom cell (xaml):
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170" HeightRequest="170" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Btn_fullscr_Clicked" />
</Image.GestureRecognizers>
</Image>
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" BackgroundColor="#44104e8b" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
As you can see, I have ContextActions and a TapGestureRecognizer for my Image.
A have a bug on android: if you click on a view cell, the contextaction appears. ContextAction has to be done only on long press, as you know. But when I remove gesturerecognizer from Image, everything works fine.
Does anybody know how to workaround this issue? Thanks in advance.
Finally I've found a workaround for this issue. I added a transparent button in the same row where my image is and deleted tapgesturerecognizer. So the final code is:
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170">
</Image>
<Button Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" Clicked="Btn_fullscr_Clicked"
WidthRequest="170" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" BorderColor="Transparent" />
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
Hope maybe it helps someone in future!
here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin