如何在Xamarin表单中的CollectionView中显示ContentView_Xamarin_Xamarin.forms_Collectionview

如何在Xamarin表单中的CollectionView中显示ContentView

xamarin xamarin.forms

如何在Xamarin表单中的CollectionView中显示ContentView,xamarin,xamarin.forms,collectionview,Xamarin,Xamarin.forms,Collectionview,我试图在CollectionView中使用一个可观察的控件集合（ContentView）。当前正在我的ContentPage的ctor中创建和填充ContentView集合。然后，我将CollectionView的ItemSource设置为保存ObservableCollection的页面上的属性。我的问题是ContentView根本不显示以下是ContentPage中的XAML代码： <ContentPage.Content> <StackLayou

我试图在CollectionView中使用一个可观察的控件集合（ContentView）。当前正在我的ContentPage的ctor中创建和填充ContentView集合。然后，我将CollectionView的ItemSource设置为保存ObservableCollection的页面上的属性。我的问题是ContentView根本不显示

以下是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>

                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <cards:ThreeLineCardView />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

以下是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);
        }
    }

公共部分类TestCollectionView:ContentPage { public observeCollection MyPolicies{get；private set；}=null；公共TestCollectionView（） { IList SourcePolicys=新列表（）； CreateMyPolicys（SourcePolicys）；初始化组件（）； } 私有void createMyPolicys（IList SourcePolicys） { // 添加（新的ThreeLineThreeColumnCardView（））；添加（新的ThreeLineThreeColumnCardView（））；添加（新的ThreeLineThreeColumnCardView（））； // MyPolicys=新的ObservableCollection（SourcePolicys）； } } 这是我正在使用的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在其原始状态下的外观：

所以，我的问题是如何让“卡片”集合显示在我的内容页面上的CollectionView中

更新添加到内容页：

    <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>

                    <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之外的网格中

    <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代码与您的共享代码相同

然后在ContentPage的Xaml中使用，如下所示：

<CollectionView x:Name="collectionView"
                ItemsLayout="VerticalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <appentrytest:CardView />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

<?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>

public class CardViewModle
{
    public string CardTitle { set; get; }
    public string CardAmount { set; get; }

    public List<CardCommentModel> CommetList { 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;

    }
}

并修改CardViewModle，如下所示：

<CollectionView x:Name="collectionView"
                ItemsLayout="VerticalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <appentrytest:CardView />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

<?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>

public class CardViewModle
{
    public string CardTitle { set; get; }
    public string CardAmount { set; get; }

    public List<CardCommentModel> CommetList { set; get; }
}

其效果是：

您尚未为CollectionView提供任何模板OK<但是如果我提供完整的对象以在CollectionView中使用，为什么我需要模板？例如，在文档中，CollectionView的ItemsForce被设置为一个字符串数组，这些字符串在没有模板的情况下输出。因为在一个简单的情况下，它将只使用ToString（）生成输出，但这不是一个简单的情况。您似乎让它变得过于复杂了—我认为ContentView中的数据绑定不会像您所希望的那样工作。更好的方法是使用ContentView作为模板，使用数据作为项目源我添加了一个项目模板（请参阅我问题的更新），但它仍然不显示。应该有一种方法可以做到这一点，而不必在ItemTemplate中包含ContentView的完整布局。您是否更改了ItemsSource？如果你是新手，我建议你从更简单的事情开始，让它开始工作，然后从那里开始建立。