Why .NET-Maui Global Styles are not working?

Issue

I have declared global styles in .Net Maui and trying to access it from one of the pages but it's throwing exceptions

Microsoft.Maui.Controls.Xaml.XamlParseException: Position 10:37. Type converter failed: Exception has been thrown by the target of an invocation. Microsoft.Maui.Controls.Xaml.XamlParseException: Position 8:34. StaticResource not found for key Primary.

App.xaml code

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:MyApp"
         x:Class="MyApp.App">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
    <Style x:Key="redLabelStyle"
           TargetType="Label">
        <Setter Property="TextColor"
                    Value="Red"/>
        <Setter Property="FontSize"
                    Value="Small"/>
        <Setter Property="FontAttributes"
                    Value="Bold"/>
    </Style>

    <Style TargetType="Label">
        <Setter Property="TextColor"
                    Value="Green"/>
        <Setter Property="FontSize"
                    Value="Small"/>
        <Setter Property="FontAttributes"
                    Value="Bold"/>
    </Style>
</Application.Resources>

MainPage.xaml code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         NavigationPage.HasNavigationBar="False"
         x:Class="MyApp.MainPage">

<VerticalStackLayout HorizontalOptions="CenterAndExpand"
                     VerticalOptions="CenterAndExpand">
    <Label Style="{StaticResource redLabelStyle}"
           Text="Global Style Red Label"/>
    <Label Text="GLobal Style Green Label"/>
    <Label Text="GLobal Style Green Label"/>

</VerticalStackLayout>

</ContentPage>

Note: This is the default app created by .Net Maui.

Solution

This is the wrong place i think </ResourceDictionary>

Try this :

 <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
        </ResourceDictionary.MergedDictionaries> 
    <Style x:Key="redLabelStyle"
           TargetType="Label">
        <Setter Property="TextColor"
                    Value="Red"/>
        <Setter Property="FontSize"
                    Value="Small"/>
        <Setter Property="FontAttributes"
                    Value="Bold"/>
    </Style>
    <Style TargetType="Label">
        <Setter Property="TextColor"
                    Value="Green"/>
        <Setter Property="FontSize"
                    Value="Small"/>
        <Setter Property="FontAttributes"
                    Value="Bold"/>
    </Style>
  </ResourceDictionary>
</Application.Resources>

Also give the second style a name. <Style TargetType="Label"> a name in x:Key=""

Like

x:Key="greenLabelStyle"

Answered By - Bas H