I have a SwipeCardView and I want to get the id of the user that I've just swiped.
<swipeCardView:SwipeCardView
x:Name="SwipeView1" ItemsSource="{Binding Profiles}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Padding="10" >
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Frame CornerRadius="10"
Padding="8"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<AbsoluteLayout>
<AbsoluteLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Command="{Binding LeftCommand}"
CommandParameter="{Binding nome}" />
</AbsoluteLayout.GestureRecognizers>
<Image Source="{Binding foto_perfil}"
Aspect="AspectFill"
AbsoluteLayout.LayoutBounds=".5,0.5,1,1"
AbsoluteLayout.LayoutFlags="All" />
<Label FontSize="Large"
WidthRequest="30"
FontAttributes="Bold"
TextColor="White"
BackgroundColor="Black"
AbsoluteLayout.LayoutBounds="0.1,0.95,250,30"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding nome}" />
<Span Text=", " />
<Span Text="{Binding data_nasc}" />
</FormattedString>
</Label.FormattedText>
</Label>
</AbsoluteLayout>
</Frame>
</StackLayout>
</DataTemplate>
</swipeCardView:SwipeCardView.ItemTemplate>
</swipeCardView:SwipeCardView>
In the C# I created a command but it never enter i the void:
public Command LeftCommand => new Command<string>(LeftSwipe);
void LeftSwipe(string parameter)
{
var variable = parameter; //= breed_Name
DisplayAlert("", variable.ToString(), "ok");
}
I donĀ“t know what I've done wrong because it still swipes
If your LeftCommand is in the ViewModel of your page, you can specify a source just as Jason said.
You can refer to the folloing code:
<swipeCardView:SwipeCardView x:Name="mCardView"
ItemsSource="{Binding CardItems}"
VerticalOptions="FillAndExpand">
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Label Text="{Binding Name}" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Beige" />
<StackLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left"
Command="{Binding Path=BindingContext.LeftCommand, Source={x:Reference mCardView}}"
CommandParameter="{Binding .}" >
</SwipeGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</swipeCardView:SwipeCardView.ItemTemplate>
</swipeCardView:SwipeCardView>
Note:
1.mCardView is the x:Name="mCardView" of your SwipeCardView;
2.In your viewModel, you can get the Binded Item as follows:
public Command LeftCommand => new Command(LeftSwipe);
void LeftSwipe(Object parameter)
{
//You can change `Profile ` to your Item Model
Profile variable = parameter as Profile;
System.Diagnostics.Debug.WriteLine("-----------> " + variable.Name +"<---> Id = "+ variable.ProfileId);
}
Related
Screen
On the picture above you can see where the ImageButton sometimes activates. When I spam clicking in the blue area the counter sometimes increases. I think there might be another Layer on top of the ImageButton but I dont know how to fix it. Below there is the XAML code. Hopefully somebody can help. Thanks!
<StackLayout>
<Label Text="Discover" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="15" />
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.8" Clicked="ImageButton_Clicked"/>
</StackLayout>
<StackLayout Margin="0,10" >
<Image Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,-15"/>
<Label Text="{Binding name_norm}" TextColor="Black" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit"/>
<Label Text="{Binding name_lat}" TextColor="Black" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Label x:Name="label" Text="0 ImageButton clicks"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Here the C# Code:
namespace PlantBase
{
public partial class MainPage : ContentPage
{
int clickTotal;
public MainPage()
{
InitializeComponent();
}
private void ImageButton_Clicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
}
Check VisualElement.InputTransparent Property.
false if the element and its children should receive input; true if neither the element nor its children should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. Default is false.
What you need is to set InputTransparent to true on the text stackLayout .
<StackLayout InputTransparent="True" Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold" Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua">
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15" Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
Okay I found the Problem. It was that before I put the red Flag on the Top and the text at the bottom in one Stacklayout which expanded from top to bottom. Now that i put them in seperate StackLayouts it works and the ImageButton is free.
Pictures before/after.
old StackLayout
new Stacklayout
The new XAML is:
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.9" Clicked="ImageButton_Clicked" />
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="Aqua">
<ImageButton Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,0" BackgroundColor="Transparent" Clicked="ImageButton_Clicked_1" />
</StackLayout>
<StackLayout Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
New Question now. Since at the bottom there is the Text StackLayout, where the Text is I cant press the ImageButton. How can I put the ImageButton as top "layer" so I can also press it while pressing on the text.
I'm using a Telerik RadPopup composed with an entry and checkbox's.
When I open the popup, the focus is directly is the entry. But I dont want a focus in any component.
It is possible using this type of popup ?
There is the code
<telerikPrimitives:RadPopup.Popup>
<telerikPrimitives:RadPopup Placement="Center" IsModal="False" OutsideBackgroundColor="#6F000000" IsOpen="{Binding WantSendEmail}">
<telerikPrimitives:RadBorder CornerRadius="8" BackgroundColor="{StaticResource Key=LightBackgroundColor}">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0" WidthRequest="250">
<StackLayout Orientation="Vertical" >
<StackLayout BackgroundColor="{StaticResource Key=MainButtonPrimaryColor}"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="Envoi par Email" HorizontalOptions="CenterAndExpand" FontSize="{Binding FontSizeXSmall}"
Padding="10"
TextColor="White" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<CheckBox IsChecked="{Binding SaisieLibre, Converter={StaticResource cnvInverseBoolConverter}}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<ContentView Focused="ContentView_Focused" Content="{Binding EntrySearchTiers}" Padding="10,10,10,0"
IsEnabled="{Binding SaisieLibre, Converter={StaticResource cnvInverseBoolConverter}}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<CheckBox IsChecked="{Binding SaisieLibre}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<Label Text="Saisie Libre" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"
IsEnabled="{Binding CurrentUserHasContact}">
<CheckBox IsChecked="{Binding CCEnable}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<Label Text="Recevoir une copie" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Padding="10,0,10,10">
<Button Style="{StaticResource Key=BtnFlex}" Text="Envoyer"
WidthRequest="100" HeightRequest="30"
Command="{Binding SendMailCommand}"/>
</StackLayout>
</StackLayout>
</Frame>
</telerikPrimitives:RadBorder>
</telerikPrimitives:RadPopup>
</telerikPrimitives:RadPopup.Popup>
And the contentView :
EntrySearchTiers = new SearchableEntry()
{
Style = (Xamarin.Forms.Style)Application.Current.Resources["MainEntryStyle"],
FontSize = FontSizeMedium,
Placeholder = "Liste des tiers"
};
EntrySearchTiers.Behaviors.Add(new Prism.Behaviors.EventToCommandBehavior
{
//EventName = "Completed", --> Jamais triggered
EventName = "TextChanged",
Command = TiersSelectedCommand
});
EntrySearchTiers.SetBinding(Entry.TextProperty, new Binding("CodeTiersSelected", BindingMode.TwoWay, null));
Base.Views.Popups.ChoicesPopup popup = new Base.Views.Popups.ChoicesPopup(_serviceTiers, null, Guid.Empty, EntrySearchTiers, "code tiers :", this, serviceHistoChoice: _serviceHistoChoice, groupChoice: Enums.enumGroupChoice.Tiers);
await popup.ActivateSearchEntryBehavior();
enter code here
I wish to get selected item for the GroupHeaderTemplate in ExpandableListView. But How to catch ExpandableListView group click event in Xamarin Forms , I am finding Solutions for Xamarin Android but none for the Forms . Moreover List item selection only works for child , How to get clicked event for Group Items. Any Link or Reference would be helpful.
My updated Xaml
<ListView VerticalOptions="FillAndExpand"
x:Name="HotelsList" SeparatorColor="Black"
BackgroundColor="Transparent" ItemSelected="HotelsList_ItemSelected"
IsGroupingEnabled="True"
IsPullToRefreshEnabled="true"
ItemsSource="{Binding StaffLoansList}"
RefreshCommand="{Binding LoadHotelsCommand}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="StartAndExpand" Margin="10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Aspect="AspectFit" HeightRequest="20" WidthRequest="30"
HorizontalOptions="StartAndExpand" Margin="5"
VerticalOptions="CenterAndExpand">
<Image.Source>
<FileImageSource File="{Binding ImageStatus}" />
</Image.Source>
</Image>
<Label Grid.Column="1" Text="{Binding actionName}" FontSize="15" HorizontalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="CenterAndExpand" />
<Label Grid.Column="2" Text="{Binding actionDate}" FontSize="15"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label
FontSize="16"
Text="{Binding Name}"
TextColor="Gray"
VerticalOptions="Center">
</Label>
<Image x:Name="ImgA" Source="{Binding StateIcon}" Margin="0,0,5,0" HeightRequest="20" WidthRequest="20" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.DummyCommand, Source={x:Reference HotelsList}}" NumberOfTapsRequired="1" CommandParameter="{Binding .}"/>
</Image.GestureRecognizers>
</Image>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.ShowDetailCommand, Source={x:Reference HotelsList}}" CommandParameter="{Binding .}"/>
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
ViewModel
In Constructor:
ShowDetailCommand = new Command<StaffLoanPageViewModel>(Showdetail);
ViewModel Class
public ICommand ShowDetailCommand { get; set; }
public void Showdetail(object obj)
{
NavigationService.NavigateTo(ViewModelLocator.StaffLoanDetailPopupPage, Staffloans);
}
That's easy in your first child of ViewCell just add a GestureRecognizor
<ViewCell>
<Grid>
.
.
.
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.DoSomethingCommand, Source={x:Reference HotelsList}}"
CommandParameter="{Binding .}"/>
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
Then in your command receive this tap event
DoSomethingCommand= new Command(DoSomething);
And your Commands receiver would look something like this:
private void DoSomething(object obj)
{
}
And in this obj object you will get your clicked item's details of the type which is bonded to the ListView, Note this will be a single object and not a collection
Update:
The command property would look something like this:
public ICommand DoSomethingCommand{ get; set; }
I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>
I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>
Does anyone know if it's possible to create a CardView style (scrollable) list using Xamarin.Forms? We need it to render same on both iOS and Android. Also need to tweak properties like the shadow (to slightly raise each card)
Here is a nuget: https://github.com/tiger4589/Xamarin.Forms-CardView
Cardview control in Xamarin.Froms.
Install it in your shared project only and use the following import in your page's xaml:
xmlns:cardView="clr-namespace:CardView;assembly=CardView"
Just use the control in viewcell of your listview.
Example screenshot: each card is a row in listview
Following code is an usage example of above control:
<ListView
x:Name="listView"
Margin="0,8,0,0"
HasUnevenRows="True"
ItemTapped="Handle_ItemTapped"
ItemsSource="{Binding HouseholdDetail}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="8,8,8,8" Orientation="Vertical">
<cardView:CardView
BackgroundColor="White"
CardViewHasShadow="True"
HeightRequest="220">
<cardView:CardView.CardViewContent>
<StackLayout
Padding="10"
HorizontalOptions="Center"
Spacing="10"
VerticalOptions="Center">
<Image HeightRequest="96" Source="{Binding Image}" />
<BoxView
HeightRequest="1"
WidthRequest="275"
Color="LightGray" />
<Grid>
<Label
Grid.Row="0"
Grid.Column="0"
Margin="15,0,0,0"
FontSize="Medium"
Text="{Binding FullName}" />
<Label
Grid.Row="0"
Grid.Column="1"
Margin="0,0,15,0"
FontSize="Medium"
HorizontalTextAlignment="End"
Text="{Binding Relation}" />
</Grid>
<BoxView
HeightRequest="1"
WidthRequest="275"
Color="LightGray" />
<Grid>
<Label
Grid.Row="0"
Grid.Column="0"
Margin="15,0,0,0"
FontSize="Medium"
Text="{Binding LeavesAt}" />
<Label
Grid.Row="0"
Grid.Column="1"
Margin="0,0,15,0"
FontSize="Medium"
HorizontalTextAlignment="End"
Text="{Binding ArrivesAt}" />
</Grid>
</StackLayout>
</cardView:CardView.CardViewContent>
</cardView:CardView>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here you may notice the freedom you have such as you can define to have shadow or not and design the whole layout of cardview using Xamarin default layouts.
Why not use a frame? i am put inside at the listview, a frame with grid.
and do something like this to get the style cardview you like.
public class CardView : Frame
{
public CardView()
{
if (Device.OS == TargetPlatform.iOS)
{
HasShadow = false;
OutlineColor = Color.Transparent;
BackgroundColor = Color.Transparent;
}
if (Device.OS == TargetPlatform.Android)
{
HasShadow = true;
OutlineColor = Color.Transparent;
BackgroundColor = Color.Transparent;
}
}
}
No need Third party library
it is support scrollable and pullrefresh
<StackLayout>
<ListView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Frame HasShadow="True" >
<StackLayout>
<Label Text="{Binding Text}"
LineBreakMode="NoWrap"
FontSize="16" />
<Label Text="{Binding Description}"
LineBreakMode="NoWrap"
FontSize="16" />
</StackLayout>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>