sosumi
Reputation: 67
Xamarin use one view on another view using grid
I am trying to combine two Views to create a credit card payment system. I followed this blog Credit Card Payment and ran into an error.
My Payment page (where all of it comes together) code:
<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>
Where I run into the error is here:
<local:CreditCardDisplayView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"/>
The error says: A value of type 'CreditCardDisplayView' Cannot be added to a collection or dictionary of type 'IGridList`1'.
My CreditCardDisplayView 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"
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>
In the blog doing it this way worked. I am assuming it was a previous version or I am missing a crucial piece.
Upvotes: 0
Views: 266
Answers (1)
FreakyAli
Reputation: 16449
The reason this is happening is quite simple you are trying to add a content page into a view which is not possible.
ContentPage is of Type Page whereas UI items are supposed to be of type View so it is not possible to add ContentPage there.
But there is a quick fix that you can do if you do not have any page level dependency in your CreditCardDisplayViewwhich is just replacing ContentPage with ContentView.
Which will, in turn, make it a View and hence reusable.
<?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>
And in your other partial class
public partial class CreditCardDisplayView: ContentView
Check the link for information on ContentView: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/contentview
Goodluck feel free to ask any questions!
Upvotes: 2
Related Questions
- How to use a Grid with Bindable Layout (more than one column)
- How to design the following grid view in Xamarin form in Xamarin iOS,Android
- Xamarin Android Grid control
- Xamarin Binding Grid to ViewModel
- xamarin how to show multiple column grid which support both andriod and iOS
- Android (Xamarin) gridlayout in linearlayout
- Two XAML GridViews in a StackPanel
- XAML GridView in GridView with different orientation
- Xamarin: Create a custom grid View
- How to use grid view and list view in monodroid?