I'm looking for a way to dynamically generate card-like controls that look like these:
I have been doing some search and have found this article that shows you how to implement CardView on a Xamarin.Android project. But I'm using Xamarin.Forms so I can compile for iOS as well.
I also tried to use a ListView with ViewCells and a couple StackLayout tags, but wasn't able to even get close to that, here is the code:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm pretty new to Xamarin, so if I'm missing something basic, please let me know guys.
You are on the right track. Use a ListView, with a Frame as the root element and a margin, and set the background color of the ListView as appropriate. This should give you the card look. Then you fill in the card as you require.
<ListView x:Name="listView" BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<Frame HasShadow="true" Margin="5">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
collectionview contains a label and StackLayout and its contents. The label is showing but StackLayout contents not showing and only if maximizes the windows it appears in UWP.this strange behaviour only occurring in uwp, not happening with ios or android. used xamarin.forms 5.0.0.2337
<CollectionView
ItemsSource="{Binding Details}"
SelectionMode="None"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="20,0"
RowDefinitions="auto,auto">
<Label Text="DateTime" IsVisible="{Binding IsDateVisible}" />
<StackLayout Orientation="Horizontal"
Grid.Row="1"
IsVisible="{Binding IsDateVisible}">
<DatePicker Date="{Binding DateValue, Mode=TwoWay}"
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}"
/>
<TimePicker Time="{Binding TimeValue, Mode=TwoWay}"
IsVisible="{Binding IsDateVisible}"
HorizontalOptions="Start"
/>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
StackLayout and its contents not showing inside a collectionview if maximizes the windows it appears in UWP with Xamarin.Forms
It looks know issue for CollectionView, please vote up this report and Keep an eye on the following update, currently the workaround is use listview to replace.
<ListView SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20,0" RowDefinitions="auto,auto">
<Label IsVisible="true" Text="DateTime" />
<StackLayout
Grid.Row="1"
IsVisible="true"
Orientation="Horizontal">
<DatePicker
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}" />
<TimePicker HorizontalOptions="Start" IsVisible="true" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView ItemsSource="{Binding SaleProperties}" CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding ImageUrl}"
HeightRequest="500"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
i'm trying to change the size of my image but it can't exceed this size
Can somebody help me please?
I am trying to build Xaml for Xamarin , I am able to get the UI But the label is not getting binded. (Android Platform)
Also tried Text="{Binding Name}" for label. But not getting any labels rendered. Do i need to write up any additional code ?
<ContentPage.Content>
<ListView SelectedItem="{Binding SelectedResult}" x:Name="listview1" ItemsSource="{Binding QueryResults}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,10">
<Frame.Content>
<Frame Padding="15,15,15,15" HeightRequest="36" OutlineColor="Aqua" BackgroundColor="Blue">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text="label text for test" TextColor="Yellow">
</Label>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
It worked for me.
Here is the code:
`
<Frame Padding="15,15,15,15" HeightRequest="36" OutlineColor="Aqua" BackgroundColor="Blue">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text="{Binding Name}" TextColor="Yellow">
</Label>
</StackLayout>
</Frame.Content>
</Frame>
`
There was frame inside frame so it was overlapping.
Hope this helps!
Even though very late reply after 3 months :p
How do I implement an ItemTemplate within a ListView using XAML?
If I do not use ItemTemplate, then my binding works and I receive no errors.
However, I want to format my list view.
As a result, I am attempting to use ItemTemplate but continue to hit a runtime exception:
Xamarin.Forms.Xaml.XamlParseException: Position 30:30. Cannot assign property "View": type mismatch between "Xamarin.Forms.TextCell" and "X…
I receive a runtime exception with the following XAML:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<TextCell Text="{Binding Name}" Detail="{Binding Description}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestions?
ViewCell is a class which you can use to create custom cells layouts
TextCell is a predefined cell with predefined layout.
You cannot use a Cell inside another Cell (eg. TextCell in a ViewCell).
You can create a custom cell like this:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" />
<Label Text="{Binding Description}" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
OR use a predefined one:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Description}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A list of predefined cells is here: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/cells/
In this StackLayout content for ViewCell if I put FontSize="Large" attribute for first label it is rendered on top of label two.
Looks like it's changed height is not taken into account when sizing whole ViewCell.
Problem exists on Android, layout works OK on Windows Phone Emulator, or when used without ListView.
<ListView x:Name="listView" BackgroundColor="Red">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="LABEL ONE" FontSize="Large" BackgroundColor="Green" />
<Label Text="LABEL TWO" BackgroundColor="Yellow" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Am I missing something or is it a bug in layouting of Xamarin.Forms generated content?
Try with this. You forgot the ViewCell.View mark.
<ListView x:Name="listView" BackgroundColor="Red">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label Text="LABEL ONE" FontSize="Large" BackgroundColor="Green" />
<Label Text="LABEL TWO" BackgroundColor="Yellow" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>