Fixed size modal

I've been playing around with modals and they work quite well, however what I want is to display a modal on tablets which behaves similarly to modal dialogs found on websites.

I have tried using WidthRequest and HeightRequest but to no avail.

Has anyone tried creating something like this?

I have attached a screenshot of the sort of functionality I am after.

This application will only be available on tablets.

Posts

  • CraigDunnCraigDunn USXamarin Team Xamurai

    When you call PushModalAsync the page will take up the entire screen.

    An alternative might be to use relative or absolute layout and float a view (with subviews) above the existing content (ie. not use a modally presented page at all).

  • MitchMilamMitchMilam USMember ✭✭✭

    The XFLabs project has a new pop up control.

    https://github.com/XForms/Xamarin-Forms-Labs/blob/master/src/Xamarin.Forms.Labs/Xamarin.Forms.Labs/Controls/PopupLayout.cs

    You'll need to download the source and compile it. The pop up has not yet made it into the nuget package.

  • SKallSKall USMember ✭✭✭✭

    Take a look at the PopupLayout control on Xamarin.Forms.Labs. I designed it for presenting views inside a layout without pushing through navigation. Currently it supports presenting the view centered and also from top or botton of another view.

    I have not updated the sample yet to include the top/bottom features but centered is part of the sample:

    https://github.com/XForms/Xamarin-Forms-Labs/blob/master/samples/Xamarin.Forms.Labs.Sample/Pages/Controls/PopupPage.xaml

    https://github.com/XForms/Xamarin-Forms-Labs/blob/master/samples/Xamarin.Forms.Labs.Sample/Pages/Controls/PopupPage.xaml.cs

  • Wow thanks for the ultra fast replies guys.

    I'll have a look at the Popup control. :)

  • SmartNetSmartNet USMember

    Is it possible to add scrollView in popup layout? I'm getting this error: Java.Lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
    mainStackLayout = new StackLayout()
    {
    Orientation = StackOrientation.Vertical,

                };
                mainStackLayout.Children.Add(medicineName);
                mainStackLayout.Children.Add(medicineAlias);
                mainStackLayout.Children.Add(updateButton);
                mainStackLayout.Children.Add(descriptionListView);
                mainScrollView = new ScrollView()
                {
                    Content = mainStackLayout
                };
                PopupLayout p = new PopupLayout();
                p.Content = mainScrollView;
                Content = p;
    ....
                      var list = new ListView()
                            var popupLayout = this.Content as PopupLayout;
                    popupLayout.ShowPopup(list);
    
  • SKallSKall USMember ✭✭✭✭

    This seems like an Android bug on Xamarin.Forms. The problem is I was not able to make the popup view to come up front on Android (while iOS & WP8 did it automatically). If you comment out the below lines on the ShowPopup methods it will not error out anymore but the popup will most likely receive any user inputs. If you can resolve how to make the popup to come front and/or the base content to go rear that would solve the issue on Android.

            if (Device.OS == TargetPlatform.Android)
            {
                this.Children.Remove(this.content);
                this.Children.Add(this.content, () => this.Bounds);
            }
    
            //this.LowerChild(this.Content);
    
  • M2MM2M USMember ✭✭

    I have the same error "The specified child already has a parent. You must call removeView() on the child's parent first" when adding a scrollview to the Page content.
    Is there anyone has a solution?

  • DanVanderboomDanVanderboom USUniversity ✭✭

    I've been getting the same error. It happens when I call RaiseChild or LowerChild, or when I remove a child view from a parent and add it back to the same parent (even if I set .Parent = null before adding it back), and IsVisible is ignored in some cases frequently.

    I've tried a dozen different approaches to switching which view in a space is on top and visible. Finally, in implementing my own tab control I can make smaller than a whole tablet screen, I finally had some luck with setting the Opacity of each panel to either 0 or 1.

    This worked for me on Android. If you're still having this problem, give this a shot and let me know if it worked for you.

  • SKallSKall USMember ✭✭✭✭

    I just pushed in a fix for Android.

  • MazharLatifMazharLatif USMember

    Can I display contectPage as a popup? following is my XAML









  • MazharLatifMazharLatif USMember









  • CraigDunnCraigDunn USXamarin Team Xamurai

    @MazharLatif‌ instructions for using Markdown are also linked at the top-right of the input box when you are typing your post.

    To show code (including XAML) you'll need to follow those instructions (or just select the entire code block and click the C formatting icon at the top of the input box). Either way, text indented with four spaces (with leading and trailing blank lines) should be rendered as code.

  • MazharLatifMazharLatif USMember
    edited November 2014

    ****`







    `

  • MikeBell789MikeBell789 USMember ✭✭
    edited December 2014

    Hi @SKall‌,

    You wouldn't happen to have any sample code on how to display a new PopupLayout in C# code instead of XAML would you? I've tried it myself but getting quite a few errors flagging up with Content being null.

    Thanks

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    C# code for that would be great @SKall :smile:

  • SKallSKall USMember ✭✭✭✭

    Here is a simple example that opens up a label and then disappears by itself after ~5s.

        public App()
        {
            var button = new Button
            {
                Text = "Open popup"
            };
    
            var popup = new PopupLayout
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children =
                    {
                        button
                    }
                }
            };
    
            var label = new Label()
            {
                HeightRequest = 100, WidthRequest = 200
            };
    
            button.Clicked += async (sender, e) => 
                {
                    button.IsEnabled = false;
                    popup.ShowPopup(label);
                    for (var i = 0; i < 5; i++)
                    {
                        label.Text = string.Format("Disappearing in {0}s...", 5 - i);
                        await Task.Delay(1000);
                    }
                    popup.DismissPopup();
                    button.IsEnabled = true;
                };
    
            // The root page of your application
            MainPage = new ContentPage
            {
                    Content = popup
            };
        }
    
  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    @SKall I've tested your code and I have a problem on Android and maybe you can help me.
    So this is my code:

    public class WorkShopView : ContentPage
    {
        private readonly WorkShopModel _workShopModel = new WorkShopModel();
    
        private readonly List<mCRMWebService.Models.WorkshopModel> _workShopItems;
    
        private PopupLayout _popupLayout;
    
        public WorkShopView(List<mCRMWebService.Models.WorkshopModel> workShopItems)
        {
            Title = "Seminare";
            _workShopItems = workShopItems;
        }
    
        protected override void OnAppearing()
        {
            InitView();
        }
    
        private void InitView()
        {
            _workShopModel.HeaderLabel = new Label
            {
                Text = "Anstehende Seminare"
            };
    
            _workShopModel.HeaderLabel.SetDynamicResource(StyleProperty, "LabelStyle");
    
            _workShopModel.WorkShopListView = new ListView
            {
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                HasUnevenRows = true,
                ItemTemplate = new DataTemplate(typeof (TextCell)),
                ItemsSource = _workShopItems,
            };
    
            _workShopModel.WorkShopListView.ItemTemplate.SetBinding(TextCell.TextProperty, "Description");
            _workShopModel.WorkShopListView.ItemTemplate.SetBinding(TextCell.DetailProperty, "Date");
            _workShopModel.WorkShopListView.ItemTapped += WorkShopListViewOnItemTapped;
    
            _popupLayout = new PopupLayout
            {
                Content = new StackLayout
                {
                    Orientation = StackOrientation.Vertical,
                    Children =
                    {
                        _workShopModel.HeaderLabel,
                        _workShopModel.WorkShopListView
                    }
                }
            };
    
            Content = _popupLayout;
        }
    
        private void WorkShopListViewOnItemTapped(object sender, ItemTappedEventArgs itemTappedEventArgs)
        {
            var label = new Label
            {
                Text = "Test"
            };
    
            var button = new Button
            {
                Text = "Close"
            };
            button.Clicked += (s, e) =>
            {
                if (_popupLayout.IsPopupActive)
                {
                    _popupLayout.DismissPopup();
                }
            };
    
            var popLayout = new StackLayout
            {
                WidthRequest = 250,
                HeightRequest = 400,
                BackgroundColor = Color.White,
                Children =
                {
                    button,
                    label
                }
            };
    
            _popupLayout.ShowPopup(popLayout);
        }
    }
    

    When _popupLayout.ShowPopup(popLayout) is called the "Popup" is drawn on the background. As you can see in the attached Screenshot. On iOS it works as expected and the "Popup" is drawn in the foreground.
    image

  • SKallSKall USMember ✭✭✭✭

    This might be due to Xamarin.Forms bug fix on Android child lower/raise. I will have to look closer as it seemed to work correctly earlier.

  • SKallSKall USMember ✭✭✭✭

    @RaphaelSchindler can you test the latest code from GitHub (you can just drop in the source file):

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/PopupLayout.cs

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    @SKall Tested on Android 4.2.2 and 5.0.2 it works. iOS 8.1 and iOS 7.1 are working too. Thank you for the fast help :)

  • JoshWallaceJoshWallace USMember

    @SKall have those changes pushed through to Nuget?

  • SKallSKall USMember ✭✭✭✭

    2.0.5520 is now in NuGet.

  • MachbahUddinMachbahUddin USMember
    edited May 2015

    Hi Sami ( @SKall ). I find the issue @RaphaelSchindler raised is still there. I am using latest stable version of Xamarin Forms and your PopupLayout class. The popup appears behind other controls in the content.

  • road_to_deenroad_to_deen USMember

    I faced the same issue and I had to undo one change that Sami made to resolve the issue of Raphael Schindler. That is calling layout.LowerChild(this.popup) inside ShowPopup().

  • AndreasMReiffAndreasMReiff DKUniversity ✭✭

    Button click does not appear to work on iOS using "PopupLayout".

    Anyone else facing this issue?

  • NMackayNMackay GBInsider, University mod
    edited February 2016

    There's a class here for Popups, I haven't tried it myself but maybe worth a look.

    https://github.com/dbagno/PopupLayouts

  • VictorArce.8951VictorArce.8951 MXMember ✭✭

    @AndreasMReiff said:
    Button click does not appear to work on iOS using "PopupLayout".

    Anyone else facing this issue?

    Im also facing the same problem.

  • VictorArce.8951VictorArce.8951 MXMember ✭✭

    @AndreasMReiff

    I figure out an easy workaround, works pretty well.

    In the PopupLayout Class, inside the ShowPopup Method, change to false these two lines:

            this.layout.InputTransparent = false;
            this.content.InputTransparent = false; 
    

    InputTransparent, when true, user input is dissabled. For more info go to:

    https://developer.xamarin.com/api/property/Xamarin.Forms.VisualElement.InputTransparent/

Sign In or Register to comment.