title: Binding property in Xamarin.Forms using MVVM
body: <p>I have a problem with making a game using Xamarin.Forms and MVVM.</p>
  <p>In the game there's a submarine which is controlled by the user and there are mines falling down so the user has to avoid these mines. The mines are generated in runtime using 2 timers, so I represent these with a CollectionView in XAML.</p>
  <p>I already made this game using WPF (and also using WinForms) and in that case I used Canvas for the game area (ItemsControl for the mines) and the bindings works well.
  Now (using Xamarin.Forms) I tried implementing the game area with AbsoluteLayout and with RelativeLayout, but always received eg. the following output (RelativeLayout):</p>
  <blockquote>
  <p>[0:] Binding: '160' cannot be converted to type
  'Xamarin.Forms.Constraint'</p>
  </blockquote>
  <p>The current XAML code:</p>
  <pre><code>&lt;ContentPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
               x:Class=&quot;SubmarineGame.View.GamePage&quot;
               Title=&quot;Submarine Game&quot;&gt;
      &lt;ContentPage.Content&gt;
          &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height=&quot;*&quot; /&gt;
                  &lt;RowDefinition Height=&quot;Auto&quot; /&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;RelativeLayout Grid.Row=&quot;0&quot;&gt;
                  &lt;Image Source=&quot;sea.png&quot; 
                         RelativeLayout.WidthConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Width, 
                      Factor=1}&quot; 
                         RelativeLayout.HeightConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Height, 
                      Factor=1}&quot; 
                         Aspect=&quot;AspectFill&quot; /&gt;
                  &lt;ImageButton Command=&quot;{Binding ExitCommand}&quot; 
                               CornerRadius=&quot;50&quot; 
                               RelativeLayout.WidthConstraint=&quot;{ConstraintExpression Constant=50}&quot; 
                               RelativeLayout.HeightConstraint=&quot;{ConstraintExpression Constant=50}&quot; 
                               RelativeLayout.XConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Width, 
                      Factor=0.9}&quot; 
                               RelativeLayout.YConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Height, 
                      Factor=0.1}&quot; 
                               Source=&quot;pausebutton.png&quot; /&gt;
                  &lt;CollectionView ItemsSource=&quot;{Binding Mines}&quot; 
                                  BackgroundColor=&quot;Transparent&quot; 
                                  RelativeLayout.WidthConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Width, 
                      Factor=1}&quot; 
                                  RelativeLayout.HeightConstraint=&quot;{ConstraintExpression 
                      Type=RelativeToParent, 
                      Property=Height, 
                      Factor=1}&quot; 
                                  FlowDirection=&quot;MatchParent&quot;&gt;
                      &lt;CollectionView.ItemTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;Image RelativeLayout.WidthConstraint=&quot;{ConstraintExpression Constant=64}&quot; 
                                     RelativeLayout.HeightConstraint=&quot;{ConstraintExpression Constant=64}&quot; 
                                     RelativeLayout.XConstraint=&quot;{Binding X}&quot; 
                                     RelativeLayout.YConstraint=&quot;{Binding Y}&quot; 
                                     Source=&quot;nuclearbomb.png&quot; /&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/CollectionView.ItemTemplate&gt;
                  &lt;/CollectionView&gt;
                  &lt;Image RelativeLayout.WidthConstraint=&quot;{ConstraintExpression Constant=64}&quot; 
                         RelativeLayout.HeightConstraint=&quot;{ConstraintExpression Constant=64}&quot; 
                         RelativeLayout.XConstraint=&quot;{Binding Submarine.X}&quot; 
                         RelativeLayout.YConstraint=&quot;{Binding Submarine.Y}&quot; 
                         Source=&quot;submarine.png&quot; /&gt;
              &lt;/RelativeLayout&gt;
  
              &lt;StackLayout Orientation=&quot;Horizontal&quot; HorizontalOptions=&quot;Start&quot; Grid.Row=&quot;1&quot;&gt;
                  &lt;Label Text=&quot;Game time: &quot; /&gt;
                  &lt;Label Text=&quot;{Binding GameTime}&quot; /&gt;
              &lt;/StackLayout&gt;
              &lt;StackLayout Orientation=&quot;Horizontal&quot; HorizontalOptions=&quot;End&quot; Grid.Row=&quot;1&quot;&gt;
                  &lt;Label Text=&quot;Destroyed mines: &quot; /&gt;
                  &lt;Label Text=&quot;{Binding DestroyedMineCount}&quot; /&gt;
              &lt;/StackLayout&gt;
          &lt;/Grid&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  <p>Submarine and Mines in the ViewModel:</p>
  <pre><code>public ObservableCollection&lt;Shape&gt; Mines { get; set; }
  public Submarine Submarine               { get; set; }
  </code></pre>
  <p>The Shape class:</p>
  <pre><code>public class Shape : ViewModelBase
  {
      private Int32 _x;
      private Int32 _y;
  
      public Int32 X 
      { 
          get { return _x; }
          set
          {
              if (_x != value)
              {
                  _x = value;
                  OnPropertyChanged();
              }
          }
      }
      public Int32 Y
      {
          get { return _y; }
          set
          {
              if (_y != value)
              {
                  _y = value;
                  OnPropertyChanged();
              }
          }
      }
      public Int32 Width  { get; set; }
      public Int32 Height { get; set; }
      public Int32 Weight { get; set; }
  </code></pre>
  <p>}</p>
  <p>The Submarine class:</p>
  <pre><code>public class Submarine : Shape
  {
      public DelegateCommand StepCommand { get; set; }
  }
  </code></pre>
  <p>So the question is how can I solve the conversion problem? Am I using a wrong layout for the game area (and even for the mines)? What method or pattern used in this case by the Xamarin developers to implement the MVVM architecture?</p>
  <p>Thanks for your time and sorry for my English!</p>