locked
Setting the background of a MasterDetailPage to be transparent RRS feed

  • Question

  • User362652 posted

    When I try to set the background color of the Master (of the MasterDetailPage) to transparent, it stays white.

    Basically what I would want to see, is that the color from the detail page is shown through the Master.

    FOR EXAMPLE (If the above were true, then the background color of this MasterDetailPage would be red (Yes I know I can just set the background colour as red, but I want it to be transparent))

    Wednesday, January 24, 2018 2:11 PM

All replies

  • User28549 posted

    Unless things have changed recently, I always thought you couldn't used Transparent as a background color of a Page.

    Wednesday, January 24, 2018 2:29 PM
  • User362652 posted

    @ChaseFlorell said: Unless things have changed recently, I always thought you couldn't used Transparent as a background color of a Page.

    Ah okay, do you suppose any other solution?

    Wednesday, January 24, 2018 4:05 PM
  • User323696 posted

    @ChaseFlorell said:

    Unless things have changed recently, I always thought you couldn't used Transparent as a background color of a Page.

    Haven't tried this on iOS but BackgroundColor="Transparent" does not seem to work on UWP. I'm using a ContentPage for MasterDetailPage.Master and I get a grey background.

    Tuesday, May 8, 2018 6:07 AM
  • User381871 posted

    I got transparency working for the Master page on Android. On UWP OTOH looking at the live visual tree there is a native Grid called PaneRoot that seems to have a SolidColorBrush(#FF171717) hardcoded, or perhaps it is pulled from the dark theme. EDITED: Yep changing RequestedTheme to Light in my App.xaml changed the Paneroot brush to #FFF2F2F2. Perhaps time to try making a custom transparent theme as a workaround on UWP.

    Monday, April 1, 2019 6:44 PM
  • User386300 posted

    Hi @larsv can you help me on how to changed the Paneroot brush in Xamarin.Forms UWP platform ??

    Monday, June 3, 2019 3:42 PM
  • User381871 posted

    @Mohamed_Magdy said: Hi @larsv can you help me on how to changed the Paneroot brush in Xamarin.Forms UWP platform ??

    The only control I had over that brush so far was switching between dark and light requested theme in the UWP App.xaml:

    '< Application x:Class="collude.app.uwp.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:collude.app.uwp" RequestedTheme="Dark" >

    < /Application >'

    There is of course a native way to access it but I went another direction with my design.

    Monday, June 3, 2019 5:37 PM
  • User386300 posted

    Hi @larsv thank you I Solve it by using the following

    1- Event on page loaded

    Xaml ==> Loaded="WindowsPage_Loaded"

    Code behind ==>

    private void WindowsPage_Loaded(object sender, RoutedEventArgs e) { var PaneRootGrid = ControlHelper.FindControl(this, typeof(Grid), "PaneRoot"); PaneRootGrid.Background.Opacity = 0; }

    2-

    class ControlHelper { public static T FindControl(UIElement parent, Type targetType, string ControlName) where T : FrameworkElement {

            if (parent == null) return null;
    
            if (parent.GetType() == targetType && ((T)parent).Name == ControlName)
            {
                return (T)parent;
            }
            T result = null;
    
            int count = VisualTreeHelper.GetChildrenCount(parent);
            for (int i = 0; i < count; i++)
            {
                UIElement child = (UIElement)VisualTreeHelper.GetChild(parent, i);
    
                if (FindControl<T>(child, targetType, ControlName) != null)
                {
                    result = FindControl<T>(child, targetType, ControlName);
                    break;
                }
            }
            return result;
        }
    }
    

    References : https://stackoverflow.com/questions/38110972/how-to-find-a-control-with-a-specific-name-in-an-xaml-ui-with-c-sharp-code

    Tuesday, June 4, 2019 12:42 PM
  • User386300 posted

    Hi @"Daniel.Lochner" Try this https://forums.xamarin.com/discussion/comment/377108#Comment_377223

    Tuesday, June 4, 2019 12:47 PM
  • User381871 posted

    @Mohamed_Magdy said: Hi @larsv thank you I Solve it by using the following

    Very cool, good find! I'll try it out.

    Tuesday, June 4, 2019 3:51 PM
  • User381871 posted

    I'm all in with transparency. It's a bit of a battle. Thanks for the tip above, @Mohamed_Magdy.

    Tuesday, August 18, 2020 9:07 PM