title: Xamarin Forms Popup Page Button Command Called when Page Appears
body: <p>I'm using Rg.Plugins.Popup, and I have a popup page with a button that I want to use to dismiss the popup. The popup displays just fine, and I can dismiss it at the moment with background select. But for good UX wanted a button too. The button is wired up like this:</p>
  
  <p>In my XAML:
  </p>
  
  <pre><code>&lt;Button BackgroundColor="#2B653E"
                  Margin="0,20,0,0"
                  Padding="10,10,10,10"
                  Command="{Binding OnBtnOkTapped}"
                  Text="OK"
                  TextColor="White"
                  x:Name="btnOk"/&gt;
  </code></pre>
  
  <p>And in my ViewModel:</p>
  
  
  
  <pre><code>public ICommand OnBtnOkTapped = new Command(async () =&gt; { await PopupNavigation.Instance.PopAllAsync(); });
  </code></pre>
  
  <p>I've confirmed the binding is working (other properties are working fine). But nothing was happening when I tap the button. So I put a breakpoint on this line, and found it was getting called <em>when the popup appears.</em></p>
  
  <p>It then doesn't get called (i.e. I don't hit the breakpoint) when I tap this button in the popup.</p>
  
  <p>Can anyone tell me why this is happening?</p>
  
  <p><strong>EDIT</strong>: Did some further testing, changing from a Command to a Clicked and handling in the code behind rather than the ViewModel produces the expected result. Just don't understand why the ICommand is called when the page loads and not when the button is clicked.</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>As requested by @G.hakim, here is the full XAML for this page:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
               xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
               xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
               x:Class="MyApp.PopUpPages.ReservationResult"
               BackgroundColor="Transparent"&gt;
      &lt;pages:PopupPage.Animation&gt;
          &lt;animations:ScaleAnimation
              PositionIn="Center"
              PositionOut="Center"
              ScaleIn="1.2"
              ScaleOut="0.8"
              DurationIn="400"
              DurationOut="300"
              EasingIn="SinIn"
              EasingOut="SinOut"
              HasBackgroundAnimation="false"/&gt;
      &lt;/pages:PopupPage.Animation&gt;
      &lt;StackLayout
          HorizontalOptions="Center"
          VerticalOptions="Center"
          WidthRequest="300"
          HeightRequest="400"
          BackgroundColor="White"
          Padding="30"&gt;
          &lt;lottie:AnimationView x:Name="ResultAnimation"
               Animation="{Binding AnimationRef}"
               AutoPlay="true"
               Loop="false"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               HeightRequest="200"
               WidthRequest="200"
               Scale="1"/&gt;
          &lt;Label Text="{Binding ResponseTitle}"
             Margin="0,20,0,0"
             HorizontalOptions="Center"
             VerticalOptions="Start"
             TextColor="#2B653E"
             FontAttributes="Bold"
             FontSize="Large"/&gt;
  
          &lt;Label Text="{Binding ResponseMessage}"
             HorizontalOptions="Center"
             VerticalOptions="End"
             TextColor="#2B653E"/&gt;
  
          &lt;Button BackgroundColor="#2B653E"
                  Margin="0,20,0,0"
                  Padding="10,10,10,10"
                  Clicked="Handle_Clicked"
                  Text="OK"
                  TextColor="White"
                  x:Name="btnOk"/&gt;       
      &lt;/StackLayout&gt;
  &lt;/pages:PopupPage&gt;
  </code></pre>
  
  <p>And here is the ViewModel:</p>
  
  <pre class="lang-cs prettyprint-override"><code>using System;
  using System.Windows.Input;
  using Rg.Plugins.Popup.Services;
  using MyApp.Models;
  using Xamarin.Forms;
  
  namespace MyApp.ViewModels
  {
      public class ReservationResultViewModel : ViewModel
      {
          public string ResponseTitle { get; set; }
          public string ResponseMessage { get; set; }
          public string AnimationRef { get; set; }
  
          public ICommand OnBtnOkTapped = new Command(async () =&gt; { await PopupNavigation.Instance.PopAllAsync(); });
  
          public ReservationResultViewModel(ReservationStatus status)
          {
              switch (status.status)
              {
                  case ReservationStatus.Status.Booked:
                      //
                      ResponseTitle = "Booked!";
                      ResponseMessage = "We've received your reservation, see you then!";
                      AnimationRef = "1166-tick.json";
                      break;
                  case ReservationStatus.Status.Full:
                      //
                      ResponseTitle = "Well this is embarrassing...";
                      ResponseMessage = "Looks like this is a really popular time and we're full. Head over to the Contact page though, we still might be able to help!";
                      AnimationRef = "4284-notification.json";
                      break;
                  case ReservationStatus.Status.HttpError:
                      //
                      ResponseTitle = "Hmmm...";
                      ResponseMessage = "Something went wrong, but we're pretty sure its our fault. Can you check your form and try again?";
                      AnimationRef = "3932-error-cross.json";
                      break;
                  case ReservationStatus.Status.ServerUnavailable:
                      //
                      ResponseTitle = "It's not you, it's me...";
                      ResponseMessage = "So sorry, it looks like the reservation service is down! Please head over to the Contact page, or try again later.";
                      AnimationRef = "4386-connection-error.json";
                      break;
              }
  
          }
      }
  }
  </code></pre>
  
  <p>Code behind for the view:</p>
  
  <pre class="lang-cs prettyprint-override"><code>using System;
  using System.Collections.Generic;
  using Rg.Plugins.Popup.Pages;
  using Rg.Plugins.Popup.Services;
  using MyAPp.Models;
  using MyApp.ViewModels;
  using Xamarin.Forms;
  
  namespace MyApp.PopUpPages
  {
      public partial class ReservationResult : PopupPage
      {
          public ReservationResultViewModel viewModel { get; set; }
  
          public ReservationResult(ReservationResultViewModel vm)
          {
              InitializeComponent();
              viewModel = vm;
              BindingContext = viewModel;
          }
  
          async void Handle_Clicked(object sender, System.EventArgs e)
          {
              await PopupNavigation.Instance.PopAllAsync();
              //throw new NotImplementedException();
          }
      }
  }
  </code></pre>