xamarin - 如何在 Xamarin 表单的 CollectionView 中显示 ContentView
问题描述
我正在尝试在 CollectionView 中使用控件的 ObservableCollection (ContentViews)。ContentView 的集合当前正在创建并填充到我的 ContentPage 的 ctor 中。然后，我将 CollectionView 的 ItemSource 设置为页面上包含 ObservableCollection 的属性。我的问题是 ContentViews 根本不显示。
这是 ContentPage 中的 XAML 代码：
<ContentPage.Content>
<StackLayout>
<CollectionView ItemsSource="{Binding MyPolicies}">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="My Policies"
FontSize="Small"
FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
</CollectionView>
</StackLayout>
</ContentPage.Content>
下面是 ContentPage 构造函数中创建 ContentView 并将它们添加到绑定到 CollectionView 的集合中的代码：
public partial class TestCollectionView : ContentPage
{
public ObservableCollection<ThreeLineThreeColumnCardView> MyPolicies { get; private set; } = null;
public TestCollectionView()
{
IList<ThreeLineThreeColumnCardView> sourcePolicies = new List<ThreeLineThreeColumnCardView>();
CreateMyPolicies(sourcePolicies);
InitializeComponent();
}
private void CreateMyPolicies(IList<ThreeLineThreeColumnCardView> sourcePolicies)
{
//
sourcePolicies.Add(new ThreeLineThreeColumnCardView());
sourcePolicies.Add(new ThreeLineThreeColumnCardView());
sourcePolicies.Add(new ThreeLineThreeColumnCardView());
//
MyPolicies = new ObservableCollection<ThreeLineThreeColumnCardView>(sourcePolicies);
}
}
这是我正在使用的 ContentView。您会注意到它的值设置为默认值：
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="NGIC_XAML.Controls.CardViews.ThreeLineThreeColumnCardView">
<Frame WidthRequest="342"
BackgroundColor="#FFFFFF"
BorderColor="LightGray"
CornerRadius="5"
HasShadow="False"
Padding="8"
VerticalOptions="Center"
HorizontalOptions="Center">
<Grid WidthRequest="311" Margin="15, 13, 16, 13">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="30" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0"
Text="{Binding CardTitle, FallbackValue='R0C0'}"
FontAttributes="None"
FontSize="14"
TextColor="{Binding CardTitleColor, FallbackValue='#333333'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start" />
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding CardAmount, FallbackValue='R0C1'}"
FontAttributes="Bold"
FontSize="16"
TextColor="{Binding CardAmountColor, FallbackValue='#53585B'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
<Label Grid.Row="0" Grid.Column="2"
Text="{Binding CardAmount, FallbackValue='R0C2'}"
FontAttributes="Bold"
FontSize="16"
TextColor="{Binding CardAmountColor, FallbackValue='#53585B'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
<Label Grid.Row="1" Grid.Column="0"
Text="{Binding CardDate, FallbackValue='R1C0'}"
FontSize="12"
TextColor="{Binding CardDateColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start" />
<Label Grid.Row="1" Grid.Column="1"
Text="{Binding CardComment, FallbackValue='R1C1'}"
FontSize="12"
TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
<Label Grid.Row="1" Grid.Column="2"
Text="{Binding CardComment, FallbackValue='R1C2'}"
FontSize="12"
TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
<Label Grid.Row="2" Grid.Column="0"
Text="{Binding CardDate, FallbackValue='R2C0'}"
FontSize="12"
TextColor="{Binding CardDateColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start" />
<Label Grid.Row="2" Grid.Column="1"
Text="{Binding CardComment, FallbackValue='R2C1'}"
FontSize="12"
TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
<Label Grid.Row="2" Grid.Column="2"
Text="{Binding CardComment, FallbackValue='R2C2'}"
FontSize="12"
TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" />
</Grid>
</Frame>
</ContentView>
这就是 ContentView 在其原始状态下的样子：
所以，我的问题是如何让“卡片”集合显示在我的 ContentPage 的 CollectionView 中？
更新添加到 ContentPage：
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<cards:ThreeLineCardView />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
UPADTE 演示预填充的卡片（一个 ContentView）可以显示在 CollectionView 之外的 Grid 中
<ContentPage.Content>
<StackLayout>
<!--<CollectionView ItemsSource="{Binding MyPolicies}">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="My Policies"
FontSize="Small"
FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<cards:ThreeLineCardView />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>-->
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<cards:ThreeLineCardView />
</Grid>
</StackLayout>
</ContentPage.Content>
解决方案
我不确定这是否是你想要的。如果没有，您可以在下面发表评论。
我创建了一个名为CardView的ContentView，xaml 代码与您的 shared 相同。
然后在ContentPage的Xaml中使用如下：
<CollectionView x:Name="collectionView"
ItemsLayout="VerticalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<appentrytest:CardView />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
CardViewModel是：
public class CardViewModle
{
public string CardTitle { set; get; }
public string CardAmount { set; get; }
public string CardDate { set; get; }
public string CardComment { set; get; }
}
在ContentPage中，为 CollectView 设置数据源：
public partial class PageFourth : ContentPage
{
public List<CardViewModle> cardViewModles { set; get; }
public PageFourth()
{
InitializeComponent();
cardViewModles = new List<CardViewModle>();
cardViewModles.Add(new CardViewModle() { CardTitle = "1", CardAmount = "2", CardComment = "one more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "2", CardAmount = "5", CardComment = "two more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "3", CardAmount = "6", CardComment = "three more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "4", CardAmount = "8", CardComment = "four more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "5", CardAmount = "12", CardComment = "five more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "6", CardAmount = "18", CardComment = "six more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "7", CardAmount = "80", CardComment = "seven more", CardDate = "2020-06-17" });
cardViewModles.Add(new CardViewModle() { CardTitle = "8", CardAmount = "20", CardComment = "eight more", CardDate = "2020-06-17" });
collectionView.ItemsSource = cardViewModles;
}
}
效果：
=======================更新===========================
如果希望CollectionView的每一项也可以包含一个 Controls 列表，可以使用Bindable Layouts来实现。
CardView的Xaml如下：
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AppEntryTest.CardView">
<ContentView.Content>
<Frame WidthRequest="342"
BackgroundColor="#FFFFFF"
BorderColor="LightGray"
CornerRadius="5"
HasShadow="False"
Padding="8"
VerticalOptions="Center"
HorizontalOptions="Center">
<Grid WidthRequest="311"
Margin="15, 13, 16, 13">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*" />
<ColumnDefinition Width="60*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Text="{Binding CardTitle, FallbackValue='R0C0'}"
FontAttributes="None"
FontSize="14"
TextColor="{Binding CardTitleColor, FallbackValue='#333333'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start" />
<Label Grid.Row="0"
Grid.Column="1"
Text="{Binding CardAmount, FallbackValue='R0C1'}"
FontAttributes="Bold"
FontSize="16"
TextColor="{Binding CardAmountColor, FallbackValue='#53585B'}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<StackLayout Grid.Row="1"
Grid.ColumnSpan="2"
Orientation="Vertical"
BindableLayout.ItemsSource="{Binding CommetList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Grid.Column="0"
Text="{Binding CardDate, FallbackValue='R1C0'}"
FontSize="12"
TextColor="{Binding CardDateColor, FallbackValue='#70777C'}"
WidthRequest="300"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start" />
<Label Text="{Binding CardComment, FallbackValue='R1C1'}"
FontSize="12"
TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
WidthRequest="900"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</Frame>
</ContentView.Content>
</ContentView>
也用于ContentPage：
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<CollectionView x:Name="collectionView"
ItemsLayout="VerticalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<appentrytest:CardView />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
这里需要创建一个CardCommentModel：
public class CardCommentModel
{
public string CardDate { set; get; }
public string CardComment { set; get; }
}
并修改CardViewModle如下：
public class CardViewModle
{
public string CardTitle { set; get; }
public string CardAmount { set; get; }
public List<CardCommentModel> CommetList { set; get; }
}
然后在ContenPage中，设置数据CollectView：
public partial class PageFourth : ContentPage
{
public List<CardViewModle> cardViewModles { set; get; }
public PageFourth()
{
InitializeComponent();
List<CardCommentModel> cardCommentModelsOne = new List<CardCommentModel>();
cardCommentModelsOne.Add(new CardCommentModel() { CardDate = "13:12:16", CardComment = "comment one" });
cardCommentModelsOne.Add(new CardCommentModel() { CardDate = "13:15:16", CardComment = "comment two" });
List<CardCommentModel> cardCommentModelsTwo = new List<CardCommentModel>();
cardCommentModelsTwo.Add(new CardCommentModel() { CardDate = "14:12:16", CardComment = "comment one" });
cardCommentModelsTwo.Add(new CardCommentModel() { CardDate = "15:22:16", CardComment = "comment two" });
cardCommentModelsTwo.Add(new CardCommentModel() { CardDate = "15:42:16", CardComment = "comment three" });
List<CardCommentModel> cardCommentModelsThree = new List<CardCommentModel>();
cardCommentModelsThree.Add(new CardCommentModel() { CardDate = "15:32:16", CardComment = "comment one" });
cardCommentModelsThree.Add(new CardCommentModel() { CardDate = "15:29:11", CardComment = "comment two" });
cardCommentModelsThree.Add(new CardCommentModel() { CardDate = "16:12:16", CardComment = "comment three" });
cardCommentModelsThree.Add(new CardCommentModel() { CardDate = "17:28:19", CardComment = "comment four" });
cardCommentModelsThree.Add(new CardCommentModel() { CardDate = "18:42:26", CardComment = "comment five" });
cardViewModles = new List<CardViewModle>();
cardViewModles.Add(new CardViewModle() { CardTitle = "First Title", CardAmount = "Count : "+cardCommentModelsOne.Count.ToString(), CommetList= cardCommentModelsOne});
cardViewModles.Add(new CardViewModle() { CardTitle = "Second Title", CardAmount = "Count : " + cardCommentModelsTwo.Count.ToString(), CommetList= cardCommentModelsTwo });
cardViewModles.Add(new CardViewModle() { CardTitle = "Third Title", CardAmount = "Count : " + cardCommentModelsThree.Count.ToString(), CommetList= cardCommentModelsThree });
collectionView.ItemsSource = cardViewModles;
}
}
效果：
推荐阅读
- c - 从文件读取到字符串数组，C
- java - 加密和解密图像时丢失图像质量
- android - 我将如何以编程方式检查我的 android 应用程序是否被篡改/修改
- amazon-web-services - 用于修改 AWS Lambda 执行角色的 IAM 权限
- wordpress - WP RSS Aggregator 不导入 WordPress RSS 源？
- sql - 如何将 PostgreSQL 中的日期四舍五入到上个月或下个月的结束日期？
- azure - 面向小租户的非托管或托管 Azure 磁盘？
- java - 用于蓝牙连接的片段与服务
- automapper - AutoMapper 为大写和下划线映射错误的字段
- python - django rest框架中的Pytest断言错误