Why .NET-Maui Global Styles are not working?

Viewed 229

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.

2 Answers

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"

You can also add global styles to the Styles.xaml file referenced in your MergedDictionaries

Please note the location of file

<ResourceDictionary Source="Resources/Styles/Styles.xaml" />

You can copy your styles directly into there instead, allowing you to keep all of your global styles in one central place. This helps keep your App.xaml nice and tidy.

Related