'I would like to change my Items Page from using CollectionView to ListView in xamarin.forms but I am having issues?
The above header refers.
I would like to make this change so I can implement expanding lists (whereby my some of my list of items could have sub-items that can appear and disappear when you tap on their parent item).
But, when I am trying to test the app, a hitherto hidden page appeared with several new errors. I now know this file is auto-generated.
How do I successfully convert a working collectionview code to listview?
The collection View code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Abuse_Alert.Views.ItemsPage"
Title="{Binding Title}"
xmlns:local="clr-namespace:Abuse_Alert.ViewModels"
xmlns:model="clr-namespace:Abuse_Alert.Models"
x:Name="BrowseItemsPage">
<ContentPage.ToolbarItems>
<!--
<ToolbarItem Text="Add" Command="{Binding AddItemCommand}" />
-->
</ContentPage.ToolbarItems>
<!--
x:DataType enables compiled bindings for better performance and compile time validation of binding expressions.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/data-binding/compiled-bindings
-->
<RefreshView x:DataType="local:ItemsViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
SelectionMode="None" IsGrouped="False">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:Item">
<Label Text="{Binding Text}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding Description}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource
AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</ContentPage>
This is the ListView Code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Abuse_Alert.Views.ItemsPage"
Title="{Binding Title}"
xmlns:local="clr-namespace:Abuse_Alert.ViewModels"
xmlns:model="clr-namespace:Abuse_Alert.Models"
x:Name="BrowseItemsPage">
<ContentPage.ToolbarItems>
<!--
<ToolbarItem Text="Add" Command="{Binding AddItemCommand}" />
-->
</ContentPage.ToolbarItems>
<!--
x:DataType enables compiled bindings for better performance and compile time validation of binding expressions.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/data-binding/compiled-bindings
-->
<Grid>
<StackLayout x:Name="local:ItemsViewModel" Padding="1,0,1,0">
<ListView x:Name="ItemsListView"
BackgroundColor="White"
IsGroupingEnabled="True"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
ItemsSource="{Binding Items}"
RefreshCommand="{Binding LoadItemsCommand}"
SelectionMode="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" x:DataType="model:Item">
<Label Text="{Binding Text}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding Description}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
This is the correct auto-generated file (with CollectionView):
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by a tool.
// Runtime Version:4.0.30319.42000
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
[assembly: global::Xamarin.Forms.Xaml.XamlResourceIdAttribute("AbuseAlert.Views.ItemsPage.xaml", "Views/ItemsPage.xaml", typeof(global::Abuse_Alert.Views.ItemsPage))]
namespace Abuse_Alert.Views {
[global::Xamarin.Forms.Xaml.XamlFilePathAttribute("Views\\ItemsPage.xaml")]
public partial class ItemsPage : global::Xamarin.Forms.ContentPage {
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private global::Xamarin.Forms.ContentPage BrowseItemsPage;
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private global::Xamarin.Forms.CollectionView ItemsListView;
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private void InitializeComponent() {
global::Xamarin.Forms.Xaml.Extensions.LoadFromXaml(this, typeof(ItemsPage));
BrowseItemsPage = global::Xamarin.Forms.NameScopeExtensions.FindByName<global::Xamarin.Forms.ContentPage>(this, "BrowseItemsPage");
ItemsListView = global::Xamarin.Forms.NameScopeExtensions.FindByName<global::Xamarin.Forms.CollectionView>(this, "ItemsListView");
}
}
}
This is the auto-generated file (with listview):
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by a tool.
// Runtime Version:4.0.30319.42000
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
[assembly: global::Xamarin.Forms.Xaml.XamlResourceIdAttribute("AbuseAlert.Views.ItemsPage.xaml", "Views/ItemsPage.xaml", typeof(global::Abuse_Alert.Views.ItemsPage))]
namespace Abuse_Alert.Views {
[global::Xamarin.Forms.Xaml.XamlFilePathAttribute("Views\\ItemsPage.xaml")]
public partial class ItemsPage : global::Xamarin.Forms.ContentPage {
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private global::Xamarin.Forms.ContentPage BrowseItemsPage;
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private global::Xamarin.Forms.StackLayout local:ItemsViewModel;
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private global::Xamarin.Forms.ListView ItemsListView;
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "2.0.0.0")]
private void InitializeComponent() {
global::Xamarin.Forms.Xaml.Extensions.LoadFromXaml(this, typeof(ItemsPage));
BrowseItemsPage = global::Xamarin.Forms.NameScopeExtensions.FindByName<global::Xamarin.Forms.ContentPage>(this, "BrowseItemsPage");
local:ItemsViewModel = global::Xamarin.Forms.NameScopeExtensions.FindByName<global::Xamarin.Forms.StackLayout>(this, "local:ItemsViewModel");
ItemsListView = global::Xamarin.Forms.NameScopeExtensions.FindByName<global::Xamarin.Forms.ListView>(this, "ItemsListView");
}
}
}
These are the errors when i changed the code to listview:
Severity Code Description Project File Line Suppression State Error CS1003 Syntax error, ',' expected AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 23 Active Error CS1002 ; expected AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 23 Active Error CS1519 Invalid token ';' in class, record, struct, or interface member declaration AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 23 Active Error CS1519 Invalid token ';' in class, record, struct, or interface member declaration AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 23 Active Error CS0006 Metadata file 'D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\ref\AbuseAlert.dll' could not be found AbuseAlert.Android D:\MobileApps\SVr\SVReporting - Backup\SV Reporting.Android\CSC 1 Active Error IDE1007 The name 'ItemsViewModel' does not exist in the current context. AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 23 Active Error CS0103 The name 'ItemsViewModel' does not exist in the current context AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 32 Active Warning CS0164 This label has not been referenced AbuseAlert D:\MobileApps\SVr\SVReporting - Backup\SV Reporting\obj\Debug\netstandard2.0\Views\ItemsPage.xaml.g.cs 32 Active
This is the ListView code that is not properly displaying the Item & its related description. But if I reduce Item to size 10 & Description to size 8, both will appear correctly but will appear too small.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Abuse_Alert.Views.ItemsPage"
Title="{Binding Title}"
xmlns:local="clr-namespace:Abuse_Alert.ViewModels"
xmlns:model="clr-namespace:Abuse_Alert.Models"
x:Name="BrowseItemsPage">
<ContentPage.ToolbarItems>
<!--
<ToolbarItem Text="Add" Command="{Binding AddItemCommand}" />
-->
</ContentPage.ToolbarItems>
<!--
x:DataType enables compiled bindings for better performance and compile time validation of binding expressions.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/data-binding/compiled-bindings
-->
<RefreshView x:DataType="local:ItemsViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<ListView x:Name="ItemsListView"
BackgroundColor="White"
IsGroupingEnabled="false"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
ItemsSource="{Binding Items}"
HasUnevenRows="True"
RowHeight="48"
SelectionMode="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" x:DataType="model:Item" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Text="{Binding Text}" TextColor="Black"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding Description}" TextColor="Black"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RefreshView>
</ContentPage>
Solution 1:[1]
this should not be difficult
<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
.. StackLayout goes here ..
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jason |