Search code examples
c#google-mapsxamarin.formspopupwindow

How to pass values from a PopupWindow to my "PageViewModel" and update CustomPin properties


I am learning Xamarin Forms with C# and I downloaded the TK.CustomMap example that I want to extend with new features. One of them is dragging a CustomPin at a Map and at end of the drag I open a PopupWindow where the user choose a Date and a Picker item. With these values I want to update the CustomPin properties as you can see at PseudoCode I inserted at C# method I put below. My difficulty is that the example is based at "Command" action so after few days searching I did not find any solution. Thks

Here the Popup Window Xaml

<?xml version="1.0" encoding="UTF-8" ?>
<pages:PopupPage x:Name="popupage"
    x:Class="WorkingWithMaps.PopupNewTaskView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
    <pages:PopupPage.Animation>
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation></animations:ScaleAnimation>

    </pages:PopupPage.Animation>
    <StackLayout
        Margin="12" Padding="24" BackgroundColor="WhiteSmoke" HorizontalOptions="Center" VerticalOptions="Center">
        <StackLayout>
            <Label Text="what's up?" />
            <Entry
                x:Name="TaskEntry"
                Placeholder="write them here"
                TextChanged="TaskEntry_OnTextChanged" />
        </StackLayout>
        <StackLayout>
            <Label Text="Introduza uma data correcta " />
            <DatePicker x:Name="dtevento" />
            <Picker x:Name="local"
                Title="Width"
                Grid.Row="0"
                Grid.Column="1">
                <Picker.Items>
                    <x:String>Casa</x:String>
                    <x:String>Farmacia</x:String>
                    <x:String>MerceMercado</x:String>
                    <x:String>Talho</x:String>
                    <x:String>Banco</x:String>
                    <x:String>Padaria</x:String>
                    <x:String>Outra</x:String>
                </Picker.Items>

                <Picker.SelectedIndex>
                    0
                </Picker.SelectedIndex>
            </Picker>
        </StackLayout>
        <Button
            x:Name="TaskButton" BackgroundColor="Crimson" Clicked="Button_OnClicked" CornerRadius="10"  FontSize="Large"
            IsEnabled="False" Text="Add this task now"  TextColor="White" />
    </StackLayout>
</pages:PopupPage>

Here is my Popup Window c#

using Rg.Plugins.Popup.Services;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace WorkingWithMaps
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PopupNewTaskView
    {
        public PopupNewTaskView()
        {
            InitializeComponent();
        }

        private void TaskEntry_OnTextChanged(object sender, TextChangedEventArgs e)
        {
            if (!string.IsNullOrEmpty(TaskEntry.Text))
                TaskButton.IsEnabled = true;
            else if (string.IsNullOrEmpty(TaskEntry.Text))
                TaskButton.IsEnabled = false;
        }

        private async void Button_OnClicked(object sender, EventArgs e)
        {
            await PopupNavigation.PopAsync();
        }
    }
}

finally the method (with 2 lines of pseudocode) I want to implement in C# where DatePicker "dtevento" and Picker "local" are used inside the PopupWindow

  public Command<TKCustomMapPin> PinNovaCommand
        {
            get
            {
                return new Command<TKCustomMapPin>(async (TKCustomMapPin pin) =>
                {
                    pin.Title = string.Format("Pin {0}, {1}", pin.Position.Latitude, pin.Position.Longitude);
///*****************************************************************************************************
                    // open (PopupNewTaskView) and get values to update the pin properties
                                             |
                   //   need something here                     V
                    await PopupNavigation.PushAsync(new PopupNewTaskView());

                    pin.DataEvento = dtevento.SelectedDate; // pseudocode
                    pin.Subtitle = local.selectedItem; // pseudocode    
                    *********************************************************************************************************************************


                });

            }

        }

Solution

  • I used this as advised (instead messenger) at the thread Leon mentioned and is working. Anyway I am using a counter to get the parameters. Not sure if it is the best way

      public Command<TKCustomMapPin> PinNovaCommand
            {
                get
                {
                    return new Command<TKCustomMapPin>(async (TKCustomMapPin pin) =>
                    {
                        pin.Title = string.Format("Pin {0}, {1}", pin.Position.Latitude, pin.Position.Longitude);
                        ///********************************************************************************************************************************
                        string param = String.Empty;
                        int conta = 0;
                        var page = new PopupNewTaskView();
                        page.Action += async (sender, stringparameter) =>
                        {
                            param = stringparameter; // Here you can get your data from popup, if you'll use this data for run some 
    
                            if (conta == 0)
                            {
                                pin.Subtitle = param;
    
                            }
                            else
                                if(conta == 1)
                            {
                                pin.DataEvento = param;
    
                            }
                            conta++;
                            // here you can handle the parameter and do your stuff
                        };
                        await PopupNavigation.Instance.PushAsync(page);
                     });
               }
            }
    

    The Popup Window C# was modified as suggested. At button_Onclicked I invoked twice because I have 2 parameters. Here it goes the code for it

    using Rg.Plugins.Popup.Services;
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace WorkingWithMaps
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class PopupNewTaskView
        {
            public PopupNewTaskView()
            {
                InitializeComponent();
            }
    
            private void TaskEntry_OnTextChanged(object sender, TextChangedEventArgs e)
            {
                if (!string.IsNullOrEmpty(TaskEntry.Text))
                    TaskButton.IsEnabled = true;
                else if (string.IsNullOrEmpty(TaskEntry.Text))
                    TaskButton.IsEnabled = false;
            }
            public EventHandler<string> Action;  //you can change "string" to any parameter you want to pass back.
    
            private async void Button_OnClicked(object sender, EventArgs e)
            {
                string parameter = local.SelectedItem.ToString();
                string parameter2 = dtevento.Date.ToString();
                Action?.Invoke(this, parameter); // don't forget to invoke the method before close the popup. (only invoke when you want to pass the value back).
                Action?.Invoke(this, parameter2);
                await PopupNavigation.PopAsync();
            }
        }
    }