How to set default NON-transparent background in Xamarin Forms? - xaml

Question

I just started developing with Xamarin Forms and facing a rather simple problem, but I could not find a solution:
I have some UI elements stacked over each other like the following:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="LabelLeft" Grid.Column="0" Text="LEFT" />
<Label x:Name="LabelRight" Grid.Column="2" Text="RIGHT" />
<Grid x:Name="GridMain" Grid.Column="0" Grid.ColumnSpan="3" Margin="0"
BackgroundColor="Default">
<Grid.GestureRecognizers>
<PanGestureRecognizer PanUpdated="PanGestureRecognizer_OnPanUpdated"/>
</Grid.GestureRecognizers>
<Grid Margin="10">
<Label Text="MAIN"/>
</Grid>
</Grid>
</Grid>
The GridMain can then be "panned away" to "show" the two labels.
But now I have the problem that the grids background color Default is not the target systems default background color, but Transparent -> I can "see" the labels underneath the grid. Also I can only pan the grid when I click/touch the string inside the grid and not anywhere inside the grid.
How can I set the background to use the "non-transparent" default background?
I do not want to use hard-coded White as I also want to support e.g. the dark theme for UWP and there it should be Black.
For now I used Accent to continue working, but that is not what I actually want.

Answer 1

As a workaround you could create a dependency service that would return the color you want to use for the given OS.
First create a IColorService interface in the shared project:
public interface IColorService
{
Color SystemBackgroundColor { get; }
}
Then implement it on each platform:
[assembly: Xamarin.Forms.Dependency(typeof(ColorService))]
namespace App.UWP
{
public class ColorService : IColorService
{
public Color SystemBackgroundColor =>
Application.Current.RequestedTheme == ApplicationTheme.Dark ?
Color.Black : Color.White;
}
}
Next, create a static class in the shared project, that will allow easy access to the color:
public static class Colors
{
public static Color SystemBackgroundColor =>
DependencyService.Get<IColorService>().SystemBackgroundColor;
}
Finally use the color as the BackgroundColor of your Grid:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App"
x:Class="App.MainPage">
<Grid BackgroundColor="{x:Static local:Colors.SystemBackgroundColor}" />
</Grid>
</ContentPage>
Notice the added xmlns:local pointing to the namespace where the Colors class is defined.