trying to use a custom XAML page and it's code behind as a popup for modifying data.

[Jesse Knott]

Hello, I am trying to use a pop up as a tool for a custom view to modify some data on a form, then return the value on closing.

Basic rundown.

User has a field with a value they need to edit,

they click a button, and a pop up is displayed using a custom XAML (view/page) as an interface.

when the popup is loaded, the value on the page is copied to the popup for editing. (probably passed as an argument in it's constructor?)

the user uses this interface popup to modify the field.

user clicks accept button and the popup closes returning the newly modified value to the originating form.

I hope this makes sense.

Any guidance on how to do the following would be greatly appreciated.

1) how to specify the XAML page as the data template for the popupview? (Does page/view matter? View seems more appropriate)

2) how to return the value from the popup back to the originating form

    if it is too difficult, I can simply save the value to the database from the pop up then requery it when the popup closes, but I would prefer to avoid extra database calls.

I have multiple (5 or 6) locations I need to do this, so I am trying to use the view.xaml / view.xaml.cs as the interface, rather than rebuilding the whole thing x number of times in y number of pages.

Thanks in advance! I hope this all makes sense LOL!

[Karthikraja Kalaimani]

Hi Jesse,

Thanks for contacting Syncfusion support.

We have prepared sample for your requirement. In that sample we have used ObservableCollection to store the entry values on popup closing event. We have attached the sample for your reference. Please follow the below code snippet and sample link.

 

[XAML] 

<ContentPage.Content> 

        <sfPopupLayout:SfPopupLayout x:Name="popupLayout" Closing="PopupLayout_Closing"> 

            <sfPopupLayout:SfPopupLayout.PopupView> 

                <sfPopupLayout:PopupView AnimationMode="None" AcceptButtonText="Submit"> 

                    <sfPopupLayout:PopupView.ContentTemplate> 

                        <DataTemplate x:Name="template"> 

                            <StackLayout> 

                                <border:SfBorder HorizontalOptions="FillAndExpand" HasShadow="True" ShadowColor="Gray" 

                                                BorderColor="LightGray"  Margin="5,5,5,0" BorderWidth="1" 

                                                BackgroundColor="White" 

                                                CornerRadius="9,9,9,9"> 

                                    <StackLayout Padding="10,10,10,10"> 

                                        <Entry  x:Name="firstName" Text="{Binding labelFirstName}" Placeholder="Enter First Name" TextChanged="FirstName_TextChanged"> 

                                        </Entry> 

                                        <Entry  x:Name="lastName" Text="{Binding labelLastName}"  Placeholder="Enter Last Name" TextChanged="LastName_TextChanged"></Entry> 

                                    </StackLayout> 

                                </border:SfBorder> 

                            </StackLayout> 

                        </DataTemplate> 

                    </sfPopupLayout:PopupView.ContentTemplate> 

                </sfPopupLayout:PopupView> 

            </sfPopupLayout:SfPopupLayout.PopupView> 

 

            <sfPopupLayout:SfPopupLayout.Content> 

                <StackLayout> 

                    <Button BackgroundColor="Gray" Text="ClickToShow" Grid.Row="0" Clicked="Button_Clicked"></Button> 

                    <Button Text="ClickToNavigate" Clicked="Button_Clicked_1"></Button> 

                </StackLayout> 

            </sfPopupLayout:SfPopupLayout.Content> 

        </sfPopupLayout:SfPopupLayout> 

    </ContentPage.Content>

[CS] 

ViewModel viewModel; 

        private StackLayout stack; 

        public RootViewPopup() 

        { 

            InitializeComponent(); 

            viewModel = new ViewModel(); 

            this.BindingContext = viewModel; 

            stack = popupLayout.PopupView.ContentTemplate.CreateContent() as StackLayout; 

        } 

 

        private void PopupLayout_Closing(object sender, Syncfusion.XForms.Core.CancelEventArgs e) 

        { 

            viewModel.labelFirstName = (stack as StackLayout).FindByName<Xamarin.Forms.Entry>("firstName").Text; 

            viewModel.labelLastName = (stack as StackLayout).FindByName<Xamarin.Forms.Entry>("lastName").Text; 

        } 

 

        private async void Button_Clicked(object sender, EventArgs e) 

        { 

            if (popupLayout.PopupView.ContentTemplate != template) 

            { 

                popupLayout.PopupView.ContentTemplate = template; 

            } 

            popupLayout.PopupView.HeaderTitle = "First Popup"; 

            popupLayout.Show(); 

        } 

 

        private void FirstName_TextChanged(object sender, TextChangedEventArgs e) 

        { 

            (stack as StackLayout).FindByName<Xamarin.Forms.Entry>("firstName").Text = e.NewTextValue; 

        } 

 

        private void LastName_TextChanged(object sender, TextChangedEventArgs e) 

        { 

            (stack as StackLayout).FindByName<Xamarin.Forms.Entry>("lastName").Text = e.NewTextValue; 

        } 

 

        private async void Button_Clicked_1(object sender, EventArgs e) 

        { 

            await Navigation.PushAsync(new SecondPagePopup(popupLayout,stack)); 

        } 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo1005202589353021935.zip 

 

 

Regards, 

Karthik Raja

[Jesse Knott]

You guys rock! The sample is great! I just have one more question if I may...

In my application I am trying to use the Popup as an independent display for multiple pages. One of the implementations I am working on is as a popup progressbar.

Can I create a dynamic instance of the popup like the following pseudo code?

     public async void Somefunc()

     {

          SfPopupLayout popup = new SfPopupLayout();

          //Fill the popup with my page that is either a ContentView or ContentPage (whichever can work but Page is preferred)

          popup.content = new MyProgressBarViewPage();

          popup.Show();

          //Run a long function that takes forever to finish

          await SomeLongRunningOperation();

          popup.Close();

     }

Then the constructor for my ProgressBarViewPage

      public ProgressBarUpdates()
      {
            BindingContext = viewModel = new ProgressBarUpdatesViewModel();
            InitializeComponent();

              

              //I am using the messaging center to pass the progress updates to fill the progress bar cumulatively

            MessagingCenter.Subscribe<ProgressBarUpdates, int>(this, "InitializingStepper",
                (progressb, x) =>
                {
                    viewModel.ProgressValue += x;
                });

       }

Then in the XAML file, here is an excerpt from the code you provided me with. I simply replaced your entries with my progressbar code...

 <sfPopupLayout:SfPopupLayout.PopupView>
                <sfPopupLayout:PopupView ShowCloseButton="False" AnimationMode="Fade">
                    <sfPopupLayout:PopupView.ContentTemplate>
                        <DataTemplate x:Name="template">
                            <StackLayout>
                                <Label x:Name="ProgressLabel" Text="{Binding Path=LabelText}"/>

                                <progressBar:SfCircularProgressBar
                                    x:Name="ProgressWheel"
                                    EndAngle="30"
                                    StartAngle="120"
                                    Progress="{Binding Path=ProgressValue}"/>
                            </StackLayout>
                        </DataTemplate>
                    </sfPopupLayout:PopupView.ContentTemplate>
                </sfPopupLayout:PopupView>
            </sfPopupLayout:SfPopupLayout.PopupView>

Then while in my long running code I call this periodically to update the progressbar.

          public void SomeCrazyLongRunningFunc()

          {

               ...

               MessagingCenter.Send<ProgressBarUpdates, int>(this, "InitializingStepper", 2);

               ...

          }

From my understanding, the code you provided would have to be copied into each page I wish to implement this feature in (the XAML page would need to have the layout and template in it and I would need to encapsulate my page within the content section.

Can I instance my class using the popup as a container?

Please forgive me if I am being dense, I'm working on multiple things at once, and think I am starting to lose my mind! LOL

Thanks again! your controls are amazing! and your patience and support is unparalleled!!

[Karthikraja Kalaimani]

Hi Jesse,

 

Thanks for the update.

We have achieved your requirement by deriving SfPopupLayout and we have attached sample for the same. In that sample we have used PopupPage as SfPopupLayout in three places.

Please follow the below code example,


 

[XAML]
<sfPopup:SfPopupLayout  

        xmlns="http://xamarin.com/schemas/2014/forms"           

        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             

        xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"              

        x:Class="Popup_Demo.PopupPage"> 

    <sfPopup:SfPopupLayout.PopupView> 

        <sfPopup:PopupView> 

            <sfPopup:PopupView.ContentTemplate> 

                …… 

            </sfPopup:PopupView.ContentTemplate> 

        </sfPopup:PopupView> 

    </sfPopup:SfPopupLayout.PopupView> 

</sfPopup:SfPopupLayout>
[.CS] 

    public partial class PopupPage : SfPopupLayout 

    { 

        ……. 

    } 

 

    public partial class MainPage : ContentPage 

    { 

        PopupPage popuppage; 

        public MainPage() 

        { 

            InitializeComponent(); 

        } 

 

        private void Button_Clicked(object sender, EventArgs e) 

        { 

            popuppage.Show(); 

        } 

           ……. 

    } 

 
Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SinglePopupInMultiplePlaces-794532954.zip

We hope this helps. Please let us know, if need any further assistance. 

Regards, 

Karthik Raja

[Jesse Knott]

You guys Rock!!

Thank you! and thank you for developing such an awesome API set!

[Farjana Parveen Ayubb]

Hi Jesse, 

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A 

[Jesse Knott]

Hi there! I am having an interesting problem trying to work with an Entry field on a form.

What I am trying to do is,

[XAML]

                              LT Entry

                               x:Name="UsedCount"
                                Grid.Row="0"
                                Grid.Column="3"
                                FontSize="14"
                                Placeholder="Used"
                                Text="{Binding Path=ReturnValue, Mode=TwoWay}" />

[CS]

              

             public ConsumeInventoryPopup(ConsumeViewModel vm)
             {
                      BindingContext = viewModel = vm;
                      InitializeComponent();

                     

                       //This line will not compile, it claims that the UsedCount entry field is not in the form

                      UsedCount.Unfocused += (s, e) => MyValue = Convert.ToInt32(UsedCount.Text);

             }

In order to access the fields I am using this code.

          private StackLayout stack;

          stack = popupView.ContentTemplate.CreateContent() as StackLayout;
         (stack as StackLayout).FindByName("UsedCount").Unfocused += (s, e) => MyValue = Convert.ToInt32(((Entry)s)?.Text);

The form is supposed to allow me to enter a number in the entry field and update a number of items consumed. But for some reason I cannot enter anything in the entry field. No matter what I do, the field wont accept any data entry, the cursor flashes in the field for a moment, then disappears.

Is there something I am doing wrong? Is there some other part to accessing this entry field I am getting wrong?

Anyhow, I hope this is indeed something simple that I am overlooking.

UPDATE: Every time I click in the Entry field, I get this in my output window. (I've copied several of the entries here)

10-13 02:48:04.080 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:04.086 W/View    ( 8108): requestLayout() improperly called by md58432a647068b097f9637064b8985a5e0.NavigationPageRenderer{41103ac V.E...... ........ 0,0-1440,1475 #25} during second layout pass: posting in next frame
10-13 02:48:04.226 W/View    ( 8108): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{9fb2100 I.E...... ......ID 0,997-1242,997} during layout: running second layout pass
10-13 02:48:04.226 W/View    ( 8108): requestLayout() improperly called by android.widget.TextView{ece7cdf VFED..C.. ......ID 983,-75-1202,65 #1} during layout: running second layout pass
10-13 02:48:05.407 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:05.492 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:05.518 W/View    ( 8108): requestLayout() improperly called by md51558244f76c53b6aeda52c8a337f2c37.ScrollViewContainer{f555ec2 V.E...... ......I. 0,0-1440,2310} during layout: running second layout pass
10-13 02:48:05.518 W/View    ( 8108): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{9fb2100 I.E...... ......ID 0,997-1242,997} during layout: running second layout pass
10-13 02:48:05.518 W/View    ( 8108): requestLayout() improperly called by android.widget.TextView{ece7cdf VFED..C.. ......ID 983,-75-1202,65 #1} during layout: running second layout pass
10-13 02:48:05.528 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:05.535 W/View    ( 8108): requestLayout() improperly called by md58432a647068b097f9637064b8985a5e0.NavigationPageRenderer{41103ac V.E...... ........ 0,0-1440,1475 #25} during second layout pass: posting in next frame
10-13 02:48:05.639 W/View    ( 8108): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{9fb2100 I.E...... ......ID 0,997-1242,997} during layout: running second layout pass
10-13 02:48:05.639 W/View    ( 8108): requestLayout() improperly called by android.widget.TextView{ece7cdf VFED..C.. ......ID 983,-75-1202,65 #1} during layout: running second layout pass
Thread finished: #8
The thread 0x8 has exited with code 0 (0x0).
10-13 02:48:11.346 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:11.435 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:11.456 W/View    ( 8108): requestLayout() improperly called by md51558244f76c53b6aeda52c8a337f2c37.ScrollViewContainer{f555ec2 V.E...... ......I. 0,0-1440,2310} during layout: running second layout pass
10-13 02:48:11.456 W/View    ( 8108): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{9fb2100 I.E...... ......ID 0,997-1242,997} during layout: running second layout pass
10-13 02:48:11.456 W/View    ( 8108): requestLayout() improperly called by android.widget.TextView{ece7cdf VFED..C.. ......ID 983,-75-1202,65 #1} during layout: running second layout pass
10-13 02:48:11.470 D/EGL_emulation( 8108): eglMakeCurrent: 0x734005237c20: ver 3 0 (tinfo 0x7340052e3200)
10-13 02:48:11.476 W/View    ( 8108): requestLayout() improperly called by md58432a647068b097f9637064b8985a5e0.NavigationPageRenderer{41103ac V.E...... ........ 0,0-1440,1475 #25} during second layout pass: posting in next frame
10-13 02:48:11.594 W/View    ( 8108): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{9fb2100 I.E...... ......ID 0,997-1242,997} during layout: running second layout pass
10-13 02:48:11.595 W/View    ( 8108): requestLayout() improperly called by android.widget.TextView{ece7cdf VFED..C.. ......ID 983,-75-1202,65 #1} during layout: running second layout pass

I will post my XAML in an attached file.

Cheers!

Jesse Knott

[Jesse Knott]

here's my XAML for this issue.

thanks again!

Attachment: ConsumePopup_47ad5907.zip

[Balasubramani Sundaram]

Hi Jesse,

Thank you for the update.

Based on your provided details we get to know you're trying to access the view inside the data template and it is not possible to access the DataTemplate elements hosted in Xaml. You must need to derive in code behind to access the DataTemplate elements. When we trying to call CreateContent() helper that will require renderer to create the view so that only every time it's showing the message in the outbox.

We hope this helps. Please let us know if you need any further assistance.

Regards,
Balasubramani Sundaram.

[Jesse Knott]

Hello! Sorry for the delay with this response, I've been buried with other tasks recently.

Here, is the final issue I am having in better detail with code examples.

My hope is to use this popup window to manage quantities of supplies on hand. When the user clicks a button, it opens this popup, and via it's viewmodel popuates the initial quantity on hand of the supply. This part is working fine, and it's returning the new modified value at the end. But my Entry field in the display wont allow me to take focus.

I have edited and spliced my code into the popup_demo you sent me, so you can see what is happening with my code.

For some reason I cannot type in the entry field, and the label I use to display the inventory quantity on the popup never updates.

Thanks again! I really appreciate the support and help!

Attachment: Popup_DemoModified_2b2d0511.zip

[Farjana Parveen Ayubb]

Hi Jesse, 

 

Thank you for your update. 

 

Currently we are checking on your query with high priority and we will provide the further details on 24^th October 2019. 

 

We appreciate your patience until then. 

 

Regards, 

Farjana Parveen A 

[Jesse Knott]

Excellent! No worries! I appreciate your looking into this. Take the time you need.

Cheers!

[Farjana Parveen Ayubb]

Hi Jesse, 

 

Thank you for your update. 

 

We have analyzed your application, we are little bit unclear about your requirement. Could you please confirm you need to set the focus in entry when open the Manage Supplies popup. Otherwise you need to revert the changes in entry in Mange Supplies popup to Invetory entry after close the popup. Could you please confirm your requirement that will help us to provide the better solution? 

 

Regards,
Farjana Parveen A 

[Jesse Knott]

Hello. sorry for the delay in my response.

Yes, I am trying to allow the user to either use the increment buttons on the sides, or manually enter a number in the entry field (Alternately I tries the syncfusion Numeric Entry element with the same result)

When ever I attempt to click in the entry field, I get the keyboard for a moment, but immediately lose focus to the element and catch the following in the debug log.

Thread finished: <Thread Pool> #5
The thread 0x5 has exited with code 0 (0x0).
10-28 20:47:22.975 W/View    ( 7633): requestLayout() improperly called by md51558244f76c53b6aeda52c8a337f2c37.ScrollViewContainer{c89d964 V.E...... ......I. 0,0-1440,2599} during layout: running second layout pass
10-28 20:47:22.975 W/View    ( 7633): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{dba6559 V.E...... ......ID 0,863-1295,945} during layout: running second layout pass
10-28 20:47:22.975 W/View    ( 7633): requestLayout() improperly called by android.widget.TextView{ab02bcc VFED..C.. ......ID 1065,-34-1255,106 #1} during layout: running second layout pass
10-28 20:47:22.997 W/View    ( 7633): requestLayout() improperly called by md58432a647068b097f9637064b8985a5e0.NavigationPageRenderer{d1ae7df V.E...... ........ 0,0-1440,1475 #7} during second layout pass: posting in next frame
10-28 20:47:23.071 W/View    ( 7633): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{dba6559 V.E...... ......ID 0,863-1295,945} during layout: running second layout pass
10-28 20:47:23.071 W/View    ( 7633): requestLayout() improperly called by android.widget.TextView{ab02bcc VFED..C.. ......ID 1065,-34-1255,106 #1} during layout: running second layout pass
10-28 20:47:24.095 W/View    ( 7633): requestLayout() improperly called by md51558244f76c53b6aeda52c8a337f2c37.ScrollViewContainer{c89d964 V.E...... ......I. 0,0-1440,2599} during layout: running second layout pass
10-28 20:47:24.095 W/View    ( 7633): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{dba6559 V.E...... ......ID 0,863-1295,945} during layout: running second layout pass
10-28 20:47:24.095 W/View    ( 7633): requestLayout() improperly called by android.widget.TextView{ab02bcc VFED..C.. ......ID 1065,-34-1255,106 #1} during layout: running second layout pass
10-28 20:47:24.127 W/View    ( 7633): requestLayout() improperly called by md58432a647068b097f9637064b8985a5e0.NavigationPageRenderer{d1ae7df V.E...... ........ 0,0-1440,1475 #7} during second layout pass: posting in next frame
10-28 20:47:24.231 W/View    ( 7633): requestLayout() improperly called by md57d4df95920e1b92b576a6dd2b1e30bab.PopupFooter{dba6559 V.E...... ......ID 0,863-1295,945} during layout: running second layout pass
10-28 20:47:24.231 W/View    ( 7633): requestLayout() improperly called by android.widget.TextView{ab02bcc VFED..C.. ......ID 1065,-34-1255,106 #1} during layout: running second layout pass

Thanks for your continued assistance with this issue!

[Karthikraja Kalaimani]

Hi Jesse,

Thanks for the update.

Currently we don’t have the support for your requirement “Support to focus on loaded element on PopupView when keyboard is shown”. We have already considered to implement this feature and logged feature report for the same.

We will implement this feature in our upcoming Volume 4 release which is scheduled to be rolled out by mid of December 2019. 

You can now track the status of this feature request here, 

https://www.syncfusion.com/feedback/4387/support-to-adjust-the-position-of-the-popup-when-keyboard-is-shown-in-view


Regards,
Karthik Raja

[Jesse Knott]

I appreciate that, but what I can't figure out, is why in my sample, I cannot enter anything in the Entry field, but the sample you provided, it can be used as a login page, where a user enters the username and other information in the field.

I will continue to tinker to try to figure it out. I appreciate the assistance.

Cheers!

Jesse

[Jesse Knott]

I've figured out why I was seeing this behavior, it has to do with the keyboard setting. I misunderstood what you meant by displaying the keyboard.

The code works perfectly as long as I am using the default keyboard, but if I use the `keyboard="Numeric"` setting in the XAML I get the error.

I've simply added code on the value changed event to constrain entries to numbers, and it's working fine now.
Thanks again!

[Karthikraja Kalaimani]

Hi Jesse,

Thanks for the update.

As of now you can use default keyboard for entries and as mentioned earlier we will provide support for this on December 2019.

Regards,
Karthik Raja