Transparent Page and AppCompat

MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

I have to display a popup. So I want to show a new page in the middle of the screen with a semi transparent background.
In the old Android apps this used to work if you just set your Page.Background to Color.Transparent and you showed the page modally with PushModalAsync. Then the previous page shone through.

However, this approach does not work anymore when you convert your app to use AppCompat. I followed this article by @JamesMontemagno to change to Material Design, but now all my pages have a white background - even if I set the BackgroundColor to Transparent.

The attached sample project demonstrates the problem. If you set AndroidTransparentPage.Droid as startup project, then the background shines through. If you set AndroidTransparentPage.Material as startup project, then it is white.

Does anybody know, how to get this working? I already have a custom page renderer on iOS for this functionality, so I'm not afraid of doing the same on Android. It should also not scroll the background page up to remove the ToolBar.

Best Answers

Answers

  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited April 2016

    Interesting trick, I never thought of doing that. Whenever I needed something like that, I wrapped my view in an AbsoluteLayout and then attached a semi-transparent BoxView and a Frame centered both horizontally and vertically. Then I adjust both the "InputTransparent" and the "IsVisible" properties through binding to a boolean.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    The problem is, that I need different popups on different pages. I don't want to attach all popups on all pages and make them invisible until I need them. Rendering the page is already too slow.

  • Maharshi.5212Maharshi.5212 USMember ✭✭

    Why does not xamarin just use the page.background concept(making it transparent) in all platforms, it reduces a lot of headache

  • MichaelRidlandMichaelRidland AUInsider, University ✭✭✭

    Hey, I'm wondering if SlideOverKit could solve your issues or be adapted to solve them.

    The reason I open sourced is so that we as a community could use it and make it better.

    http://www.michaelridland.com/xamarin/slideoverkit-is-now-free-and-open-source/

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @MichaelRidland As I understood it, SlideOverKit displays different kind of menus. I don't need menus. My popups show messages, textboxes, checkboxes, dropdownlists, you name it.
    But I can look at your code to get an idea how to implement my renderer.

    I'm thinking more and more of kicking Forms out.

  • MichaelRidlandMichaelRidland AUInsider, University ✭✭✭

    You can put anything you like in the popover. There should be a popover sample in the repository.

  • Maharshi.5212Maharshi.5212 USMember ✭✭

    @MichaelRumpler
    If you figure out any best approach, please provide your input to others also.

  • Maharshi.5212Maharshi.5212 USMember ✭✭

    But that does not support windows phone and rt

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @MichaelRidland

    I checked SlideOverKit. You initialize IMenuContainerPage.ShowMenuAction in SlideOverKitiOSHandler.ViewDidLayoutSubviews and SlideOverKitDroidHandler.OnElementChanged. Both check IMenuContainerPage.SlideMenu before they do anything. But this is too early for me.

    I want to set the SlideMenu when I want to display the popup. But I don't know on page load, which popup that might be.
    So I'd use MenuOrientation.PopUpViewFrom* and therefore PopUpNoGestures. When no gesture handling is needed, then you only have to check SlideMenu when ShowMenu() is called and not before.

    Ideally I'd expect code like this to work:

    public void ShowPasswordPopup(IMenuContainerPage page)
    {
        page.SlideMenu = new PasswordPopupView();
        page.ShowMenuAction?.Invoke();
    }
    
    public void ShowCredentialPickerPopup(IMenuContainerPage page)
    {
        page.SlideMenu = new CredentialPickerPopupView();
        page.ShowMenuAction?.Invoke();
    }
    
    ...
    

    Maybe that initialization code can be done in the SlideMenu setter?

    Is there a chance to center the popup in the middle of the screen based on SlideMenuView.WidthRequest and SlideMenuView.HeightRequest? Currently it looks like I have to set LeftMargin, UseLeftMargin and TopMargin.

    BTW: in your MoreSample projects you reference SlideOverKit from ../packages but the packages.config files don't include SlideOverKit, so the package restore doesn't download it. The references should be changed to project references.

  • MichaelRidlandMichaelRidland AUInsider, University ✭✭✭

    @MichaelRumpler

    We've added the feature to support multiple popups.

    // we can add two more Popup control in this way
    this.PopupViews.Add (nameof(PopOverView), new PopOverView ());
    this.PopupViews.Add (nameof(PopOverWithTriangleView), new PopOverWithTriangleView ());
    
    this.ShowPopup (nameof(PopOverView));
    

    It's not on nuget yet but we will put it up there soon.

    https://github.com/XAM-Consulting/SlideOverKit/blob/master/SlideOverKitMoreSamples/SlideOverKit.Sample/Pages/PopOverPage.cs

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @MichaelRidland

    I have a MasterDetailPage with MasterBehavior=Split on an Android tablet. I.e. Master and Detail are always visible side by side.
    I implemented IPopupContainerPage in my custom MasterDetailPage and am trying to display a popup there. But it seems like the Master always stays on top. The _backgroundOverlay and the popup itself are below it.

    Any idea how to get that working?

Sign In or Register to comment.