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!
Related
Can I ask a little help?
I used a SfListView Control, and the ListView works, but the right swiping is not work.
I read the documentation on Syncfusion's site, but I can't find the solution.
Thanks the answers!
<sflistview:SfListView Grid.Row="1" Grid.Column="0" BackgroundColor="{StaticResource greybackground}" ItemSpacing="15" Orientation="Vertical" ItemsSource="{Binding Applications}" AllowSwiping="True" SelectionMode="Single" >
<sflistview:SfListView.RightSwipeTemplate>
<DataTemplate>
<Grid>
<Grid BackgroundColor="Red" HorizontalOptions="Fill" VerticalOptions="Fill" Grid.Column="0">
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Image Grid.Column="0"
Grid.Row="0"
BackgroundColor="Transparent"
HeightRequest="50"
WidthRequest="50"
Source="animalsafety.png"/>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</sflistview:SfListView.RightSwipeTemplate>
<sflistview:SfListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="24*"/>
<ColumnDefinition Width="92*"/>
<ColumnDefinition Width="33*"/>
</Grid.ColumnDefinitions>
<Label BackgroundColor="Orange" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"/>
<border:SfBorder Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" HorizontalOptions="Center" VerticalOptions="Center" BorderColor="Transparent" CornerRadius="30" BackgroundColor="{StaticResource headercolor}">
<Image Source="{Binding IJob.CategoryImageWhite}" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="{StaticResource headercolor}"/>
</border:SfBorder>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding IJob.Company}" HorizontalTextAlignment="Center" FontSize="Medium" Margin="0" VerticalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="2" Text="{Binding IJob.Job}" HorizontalTextAlignment="Center" FontSize="Medium" Margin="0" VerticalOptions="Center"/>
<border:SfBorder Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" BackgroundColor="{Binding StatusColor}" CornerRadius="30" BorderColor="Transparent">
<Button BackgroundColor="{Binding StatusColor}" HorizontalOptions="Center" Command="{Binding ICommandJobStatus}" Clicked="JobStatusClicked" CommandParameter="{Binding .}" VerticalOptions="Center"/>
</border:SfBorder>
</Grid>
</DataTemplate>
</sflistview:SfListView.ItemTemplate>
</sflistview:SfListView>
If you perform swiping on button or any other interaction control inside SfListView, the touch is handled by the interaction control itself and will not swipe the ListView. In order to perform swiping even on interaction control we suggest you to set InputTransparent=”True” like in the following code snippet,
<Button BackgroundColor="{Binding StatusColor}" HorizontalOptions="Center"
Command="{Binding ICommandJobStatus}" Clicked="JobStatusClicked"
CommandParameter="{Binding .}" VerticalOptions="Center"
InputTransparent="True"/>
Please find the following video sample for your reference,
Video Link : Video
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 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.
I have a WebView filled with an HTML code that came from database.
This WebView is inside a TableView.
This is the XAML code:
<TableView Intent="Form" HasUnevenRows="True" Margin="0,0,0,0">
<TableRoot>
<!--#region Nota-->
<TableSection Title="{core:Translate LblNota}">
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label BackgroundColor="Purple" Text="{Binding NotaRigaHtml}" Style="{StaticResource LblDescrizione}" />
<WebView IsEnabled="False" HeightRequest="200" Source="{Binding NotaRigaHtml}"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</TableSection>
<!--#endregion-->
<!--#region Lista Tecnici -->
<TableSection Title="{core:Translate Tecnici}">
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" Grid.Column="0" x:Name="ListaTecniciIntervento" HasUnevenRows="True" SeparatorVisibility="None" ItemsSource="{Binding ListaTecnici}" HeightRequest="{Binding AltezzaListaTecnici}">
<ListView.ItemTemplate>
<DataTemplate>
<view:TecniciInterventoViewCell Pagina="{x:Reference RigaDettaglioPage}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ViewCell.View>
</ViewCell>
</TableSection>
<!--#endregion-->
<!--#region Passaggio successivo-->
<TableSection Title="{core:Translate LblPassaggioSuccessivo}">
<ViewCell>
<ViewCell.View>
<Grid Style="{StaticResource GridPadding}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Text="{core:Translate LblProgressStatus}" Grid.Row="0" Grid.Column="0" />
<Picker Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"/>
<Label Text="{core:Translate LblProgressStatusLevel}" Grid.Row="1" Grid.Column="0" />
<Picker Grid.Row="1" Grid.Column="1" />
<Label Text="{core:Translate utente}" Grid.Row="1" Grid.Column="2" />
<Picker Grid.Row="1" Grid.Column="3" />
<Label Text="{core:Translate LblProgressStatusInstallatore}" Grid.Row="2" Grid.Column="0" />
<Picker Grid.Row="2" Grid.Column="1" />
<Label Text="{core:Translate LblProgressStatusTecnico}" Grid.Row="2" Grid.Column="2" />
<Picker Grid.Row="2" Grid.Column="3" />
</Grid>
</ViewCell.View>
</ViewCell>
</TableSection>
<!--#endregion-->
</TableRoot>
</TableView>
When the WebView go off the screen, the values disappears.
How can I avoid this behavior?
Why the WebView is cleared?
Thank you!
EDIT:
I have find that the problem is the ListView.
When an Item of the ListView is outside of the screen, this problem is triggered, but I can't solve :(
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