Setting the background of a MasterDetailPage to be transparent

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))

Answers

  • ChaseFlorellChaseFlorell CAInsider, University mod

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

  • Daniel.LochnerDaniel.Lochner ZAMember ✭✭
    edited January 2018

    @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?

  • System.AshSystem.Ash AUMember ✭✭
    edited May 2018

    @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.

  • larsvlarsv Member ✭✭
    edited April 1

    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.

  • Mohamed_MagdyMohamed_Magdy Member ✭✭

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

  • larsvlarsv Member ✭✭

    @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.

  • Mohamed_MagdyMohamed_Magdy Member ✭✭

    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

  • larsvlarsv Member ✭✭

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

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

Sign In or Register to comment.