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/
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 Grid.Column="0" ItemsSource="{Binding CardItems[0]}" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CardItemTapCommand}" />
</StackLayout.GestureRecognizers>
<Image Source="{Binding Image}" HeightRequest="64"/>
<Label Text="{Binding Text}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My view has its binding context set to the corresponding viewmodel.
My CardItemTapCommand doesn't work.(i think this is happening because the binding context of each viewcell is the cardItem[0] list). Is setting the binding context of the cell to the viewmodel again a bad idea?
You can try this
<ContentPage ...
x:Name="PageName">
<ContentPage.Content>
...
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand,
Source={x:Reference PageName}}"/>
</StackLayout.GestureRecognizers>
...
</ContentPage.Content>
</ContentPage>
In my Xamarin.Forms app, I have a ListView:
<ListView ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="ABC" FontSize="Large" TextColor="Black" BackgroundColor="Red" Margin="20" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Where the "ABC" should appear, is only a thin red line for the background of the label. I don't see the actually letters. I've made many ListView before with no problem, I don't know what I'm doing wrong here?
ViewCell needs to contain a layout control, otherwise it will not render correctly.
For simplicity, you could implement a StackLayout:
<ListView
ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
HorizontalOptions="FillAndExpand"
Margin="0"
Padding="0"
Spacing="0"
VerticalOptions="Fill">
<Label
BackgroundColor="Red"
FontSize="Large"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Margin="20"
Text="ABC"
TextColor="Black"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView ItemsSource="{Binding Details}"ItemSelected="ListViewSample_OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<stacklayout>
<Label x:Name="Number" Text="{Binding Number}"/>
<html:HtmlLabel x:Name="Text" Text="{Binding Text}"/>
</stacklayout>
</ViewCell>
</DataTemplate>
<ListView.ItemTemplate>
when we click on number label the "ListViewSample_OnItemSelected" is firing but when we click on Text label the event is not firing
Jason answer worked for me too:
<html:HtmlLabel x:Name="Text" Text="{Binding Text}" InputTransparent="True"/>
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>