Xamarin使用网格在另一个视图上使用一个视图

Question

我正试图将两个视图结合起来创建一个信用卡支付系统。我关注了这个博客信用卡支付，遇到了一个错误。

我的付款页面(所有信息汇集在一起(代码：

<ContentPage 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"
xmlns:models="clr-namespace:MowSnow.Models"
xmlns:fastEntry="clr-namespace:XamarinFastEntrySample.FastEntry;assembly=XamarinFastEntry.Behaviors"
xmlns:local="clr-namespace:MowSnow.Views"
mc:Ignorable="d"
x:Class="MowSnow.Views.Payment">
<ContentPage.Resources>
<ResourceDictionary>
<models:CardNumberToImageConverter x:Key="CardConverter"
Amex="ic_amex"
Dinners="ic_dinersclub"
Discover="ic_discover" 
JCB="ic_jcb"
MasterCard="ic_mastercard" 
Visa="ic_visa"
NotRecognized="nocards"/>
<models:CardNumberToImageConverter x:Key="CardLightConverter"
Amex="americanexpresslogo"
Dinners="ic_dinersclub_white.png"
Discover="ic_discover_light" 
JCB="ic_jcb"
MasterCard="ic_mastercard_white" 
Visa="ic_visa_white"
NotRecognized="ic_chip"/>
<models:CardNumberToColorConverter x:Key="CardColorConverter"
Amex="#3177CB"
Dinners="#1B4F8F"
Discover="#E9752F" 
JCB="#9E2921"
MasterCard="#394854" 
Visa="#2867BA"
NotRecognized="#75849D"/>
<Color x:Key="Primary">#E5E9EE</Color>
<Color x:Key="PrimaryDark">#75849D</Color>
<Color x:Key="Secondary">#B5BBC2</Color>
<Color x:Key="Accent">LightGray</Color>
<Color x:Key="LightColor">LightGray</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Frame>
<ScrollView>
<Grid VerticalOptions="FillAndExpand"
ColumnSpacing="20"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<local:CreditCardDisplayView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"/>
<Frame HasShadow="false"
Padding="10"
BorderColor="{StaticResource LightColor}"
Margin="30,30,30,10"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3">
<StackLayout Orientation="Horizontal"
Spacing="20">
<Image Source="{Binding CardNumber,Converter={StaticResource CardConverter}}"
HeightRequest="30"/>
<Entry HorizontalOptions="FillAndExpand"
Keyboard="Numeric"
Text="{Binding CardNumber, Mode=TwoWay}"
Visual="Custom">
<Entry.Behaviors>
<fastEntry:XamarinFastEntryBehaviour Mask="####-####-####-####" 
MaxLength="19"/>
</Entry.Behaviors>
</Entry>
</StackLayout>
</Frame>
<Frame HasShadow="false"
Padding="10"
BorderColor="{StaticResource LightColor}"
Margin="30,0,0,0"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal">
<Image Source="ic_date"
HeightRequest="25"/>
<Entry HorizontalOptions="FillAndExpand"
Keyboard="Numeric"
Text="{Binding CardExpirationDate}"
Visual="Custom">
<Entry.Behaviors>
<fastEntry:XamarinFastEntryBehaviour Mask="##/##" 
MaxLength="19"/>
</Entry.Behaviors>
</Entry>
</StackLayout>
</Frame>
<Frame HasShadow="false"
Padding="10"
BorderColor="{StaticResource LightColor}"
Margin="0,0,30,0"
Grid.Row="2"
Grid.Column="2">
<StackLayout Orientation="Horizontal">
<Image Source="ic_cvv"
HeightRequest="25"/>
<Entry HorizontalOptions="FillAndExpand"
Keyboard="Numeric"
Text="{Binding CardCvv}"
Visual="Custom">
<Entry.Behaviors>
<fastEntry:XamarinFastEntryBehaviour Mask="###" 
MaxLength="3"/>
</Entry.Behaviors>
</Entry>
</StackLayout>
</Frame>
<CheckBox Color="LightGray"
WidthRequest="30"
HorizontalOptions="Start"
Margin="30,0,0,0"
Visual="Material"
Grid.Row="3"
Grid.Column="0"/>
<Label Text="I agree to terms and conditions."
TextColor="{StaticResource PrimaryDark}"
FontSize="16"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"/>
<Label Text="Make request for $50"
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="3"
TextColor="{StaticResource PrimaryDark}"
VerticalOptions="Center"
FontSize="18"
Padding="18"
Margin="30,0"/>
<BoxView HorizontalOptions="FillAndExpand"
Color="{StaticResource Secondary}"
Visual="Default"
HeightRequest="1"
Margin="0,30"
Grid.Row="5"
Grid.Column="0"
Grid.ColumnSpan="3"/>
<Button Text="Pay"
BackgroundColor="{Binding CardNumber, Converter={StaticResource CardColorConverter}}"
CornerRadius="26"
FontSize="18"
Grid.Row="6"
Grid.Column="0"
Grid.ColumnSpan="3"
Padding="18"
TextColor="White"
Margin="30,0,30,30"/>
</Grid>
</ScrollView>
</Frame>
</StackLayout>

我遇到错误的地方在这里：

<local:CreditCardDisplayView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"/>

错误显示："CreditCardDisplayView"类型的值无法添加到"IGridList"1"类型的集合或字典中。

我的信用卡显示视图代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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="MowSnow.Views.CreditCardDisplayView">
<ContentPage.Content>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="{StaticResource Primary}"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start">
<Frame Margin="40,10,40,30"
Padding="20"
Visual="Material"
BackgroundColor="{Binding CardNumber, Converter={StaticResource CardColorConverter}}">
<Grid ColumnSpacing="30"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding CardNumber, Converter={StaticResource CardLightConverter}}"
HeightRequest="40"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"/>
<Label Text="Card Number"
LineBreakMode="TailTruncation"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<Label Text="{Binding CardNumber}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<Label Text="Expiration"
Margin="0,20,0,0"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="3"
Grid.Column="0"/>
<Label Text="{Binding CardExpirationDate}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="4"
Grid.Column="0"/>
<Label Text="Cvv"
Margin="0,20,0,0"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="3"
Grid.Column="1"/>
<Label Text="{Binding CardCvv}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="4"
Grid.Column="1"/>
</Grid>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>

在博客中，这样做是有效的。我认为这是以前的版本，或者我错过了一个关键部分。

Answer 1

发生这种情况的原因很简单，您正试图将内容页面添加到视图中，这是不可能的。

ContentPage的类型为Page，而UI项的类型应为View，因此无法在其中添加ContentPage。

但是，如果您的CreditCardDisplayView中没有任何页面级别的依赖关系，那么有一个快速修复方法可以实现，它只是用ContentView替换ContentPage。

反过来，这将使它成为一个视图，从而可重复使用。

<?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="MowSnow.Views.CreditCardDisplayView">
<ContentView.Content>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="{StaticResource Primary}"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start">
<Frame Margin="40,10,40,30"
Padding="20"
Visual="Material"
BackgroundColor="{Binding CardNumber, Converter={StaticResource CardColorConverter}}">
<Grid ColumnSpacing="30"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding CardNumber, Converter={StaticResource CardLightConverter}}"
HeightRequest="40"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"/>
<Label Text="Card Number"
LineBreakMode="TailTruncation"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<Label Text="{Binding CardNumber}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<Label Text="Expiration"
Margin="0,20,0,0"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="3"
Grid.Column="0"/>
<Label Text="{Binding CardExpirationDate}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="4"
Grid.Column="0"/>
<Label Text="Cvv"
Margin="0,20,0,0"
FontSize="12"
TextColor="{StaticResource Accent}"
Grid.Row="3"
Grid.Column="1"/>
<Label Text="{Binding CardCvv}"
FontSize="20"
TextColor="{StaticResource Secondary}"
Grid.Row="4"
Grid.Column="1"/>
</Grid>
</Frame>
</StackLayout>
</ContentView.Content>

在你的另一个部分类

public partial class CreditCardDisplayView: ContentView

有关ContentView的信息，请查看链接：https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/contentview

祝你好运，任何问题都可以问！