What's wrong with my Xamarin.Forms project?

Question

I'm trying to make a Xamarin.Forms project where I have a BoxView and an Entry field and a Button. I want to enter the name of a color into my Entry field, press the button, and have my BoxView change to the color that I input. Here is the code I have written till now:

Views/MainView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="TestGround.MainView">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center">
                <Label
                    Text="Enter a color:"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                />
                <BoxView 
                    Color="{Binding Color}"
                />
                <Entry
                    Text="{Binding Name}"
                />
                <Button
                    Text="Enter"
                    Command="{Binding SetColorCommand}"
                />
            </StackLayout>
        </ContentPage.Content>
</ContentPage>

ViewModels/MainViewModel.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;


namespace TestGround
{
    public class MainViewModel :INotifyPropertyChanged
    {
        private string _color; //backing field for Greeting

        public string Color //implementation for Greeting method
        { 
            get { return _color; } 

            set 
            { 
                _color = value;
                OnPropertyChanged ("Color"); //Notify view that change has taken place

            }
        }


        public string Name { get; set; } //Name method for Entry field

        public ICommand SetColorCommand { get; set; } //ICommand binds to buttons in XAML

        public void SetColor() //Need a regular method to add to ICommand
        {
            Color = Name;
        }


        //Main VIEW MODEL
        public MainViewModel ()
        {
            //Color = Name;
            Name = "Enter color here";

            SetColorCommand = new Command(SetColor); //Regular command added to ICommand
        }



        #region PropertyChangedRegion

        public void OnPropertyChanged (string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged (this, new PropertyChangedEventArgs (propertyName));
        }

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

    }
}

Here is the error I get:

Java.Lang.RuntimeException: java.lang.reflect.InvocationTargetException

I want to know if my approach is wrong and how can I go about fixing it and making this pretty simple program.

Answer 1

According to the BoxView Documentation , the property "Color" must actually be a color... where as you have it defined as a string named color. Your types are mixed up. It should be something like Colors.Blue .

Answer 2

You can use class ColorTypeConverter for change string to Color. I 've simplified your problem to this source code

//You simplified model
    public class bModel : BindableObject
    {
        private Color _realColor;
        public  Color Color 
        { 
            get { return _realColor; } 

            set 
            {   
                _realColor = value;
                OnPropertyChanged ("Color"); 

            }
        }

        public string _stringColor;
        public string StringColor {
            get {
                return _stringColor;
            }
            set {
                _stringColor = value;
                Color = (Color)(new ColorTypeConverter ()).ConvertFrom (_stringColor);
            }
        }

        public bModel ()
        {
            StringColor = "Blue";
        }
    }
}

//Your simplified page xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="s2c.MyPage">
    <ContentPage.Content>
        <BoxView x:Name="box" Color="{Binding Color}"/>
    </ContentPage.Content>
</ContentPage>

//Your simplified page csharp
public partial class MyPage : ContentPage
{
    public MyPage ()
    {
        InitializeComponent ();
        this.BindingContext = new bModel ();
    }
}