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

Question

我正在尝试结合两个视图来创建信用卡支付系统。我关注了此博客Credit Card Payment，并遇到了错误。

[我的付款]页面（所有内容均放在此处）代码：

<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'的集合或字典中。

我的CreditCardDisplayView代码：

    <?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属于页面类型，而UI项应该属于View类型，因此无法在其中添加ContentPage。

但是，如果您的CreditCardDisplayView中没有任何页面级别的依赖性，您可以执行快速修复，这只是将ContentPage替换为ContentView。

依次将其设为View并因此可重用。

 <?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://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/contentview

Goodluck随时提出任何问题！