Problems with global styles on Android, iOS working fine (Xamarin)

Question

I'm facing some strange behaviour in my Xamarin App. In the shared project I separated all control based styles in single xaml files.

All styles are combined in the DefaultTheme.xaml file.

Then, the DefaultTheme.xaml will be used by the LightTheme.xaml and DarkTheme.xaml.

That's how my styles are managed. Then, depending on "Darkomde on/off" I either load the LightTheme.xaml or the DarkTheme.xaml in the iOS and Android project.

On Android I set the themes like this in the MainActivity.cs (I'm using a SplashActivity.cs as well, should it be set there already?)

protected override void OnCreate(Bundle savedInstanceState)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    LoadApplication(new App());

    SetAppTheme();
}

void SetAppTheme()
{
    if (Resources.Configuration.UiMode.HasFlag(UiMode.NightYes))
        SetTheme(RemoteControlRepetierServer.Theme.Dark);
    else
        SetTheme(RemoteControlRepetierServer.Theme.Light);
}

public void SetTheme(Theme theme)
{
    switch (theme)
    {
        case RemoteControlRepetierServer.Theme.Light:
            // Night mode is not active, we're using the light theme
            if (App.AppTheme == "light")
                return;
            App.Current.Resources = new LightTheme();
            App.AppTheme = "light";

            break;
        case RemoteControlRepetierServer.Theme.Dark:
            // Night mode is active, we're using dark theme
            if (App.AppTheme == "dark")
                return;
            //Add a Check for App Theme since this is called even when not changed really
            App.Current.Resources = new DarkTheme();
            App.AppTheme = "dark";
            break;
    }
    App.CurrentAppTheme = theme;
}

So far so good. Now, if I start my Android app, it seems that not all styles are loaded. For instance the Gauge. While the Gauge on the first tab looks like it should, the Gauge on the second tab doesn't.

Both are using the same XAML for the styling.

<gauge:Scale.Pointers>
    <gauge:NeedlePointer Value="{Binding SelectedExtruder.TempRead}" Color="{DynamicResource Gray-Black}" 
                        KnobColor="{DynamicResource Gray-Black}" KnobStrokeColor="{DynamicResource Gray-Black}"/>
    <gauge:RangePointer Value="{Binding SelectedExtruder.TempRead}" Color="{DynamicResource PrimaryColor}"
                    RangeCap="Both"
                    />
    <gauge:MarkerPointer Value="{Binding SetExtruderTemp}" Color="{DynamicResource Red}"/>
</gauge:Scale.Pointers>

Also the Style of the NumericUpDown control is not set on the second tab. This only happens on Android, iOS looks fine all tabs. I'm not sure what's causing this issue. Any help is appreciated. If you need further information or code snippets, just let me know.

Answer 1

Just figured out that using the SyncfusionTheme was causing this behaviour. Once I removed it from the MergedDictionaries, it worked.