TextField styling in resource dictionary does not get applied

[lamotuab]

My App.xaml file contains the following:

     <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary x:Name="appColors" Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary x:Name="appConverters" Source="Resources/Styles/Converters.xaml" />
                <ResourceDictionary x:Name="appFonts" Source="Resources/Styles/Fonts.xaml" />
                <ResourceDictionary x:Name="appSizes" Source="Resources/Styles/Sizes.xaml" />
                <ResourceDictionary x:Name="appStyles" Source="Resources/Styles/Styles.xaml" />
                <material:StyleResource 
                    BasedOn="{x:Reference appStyles}"
                    ColorsOverride="{x:Reference appColors}" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

My Styles.xaml file contains the following:

    <Style TargetType="material:TextField" CanCascade="true">
        <Setter Property="AllowClear" Value="true" />
        <Setter Property="AccentColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity12}, Dark={StaticResource OnSurfaceDarkOpacity12}}" />
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity87}, Dark={StaticResource OnSurfaceDarkOpacity87}}" />
        <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity60}, Dark={StaticResource OnSurfaceDarkOpacity60}}" />
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Opacity" Value="1"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Opacity" Value="0.6" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <Style TargetType="material:PickerField" CanCascade="true">
        <Setter Property="AllowClear" Value="false" />
        <Setter Property="AccentColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity12}, Dark={StaticResource OnSurfaceDarkOpacity12}}" />
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity87}, Dark={StaticResource OnSurfaceDarkOpacity87}}" />
        <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource OnSurfaceOpacity60}, Dark={StaticResource OnSurfaceDarkOpacity60}}" />
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Opacity" Value="1"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Opacity" Value="0.6" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

On a xaml page I then have the following two controls for example:

    xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material"

        <material:PickerField 
            x:Name="baseCurrencySelection"
            ItemDisplayBinding="{Binding Symbol}"
            ItemsSource="{Binding CurrencyList}"
            SelectedItem="{Binding BaseCurrency}"
            Title="Base currency" />

            <material:TextField
                Text="{Binding ItemToEdit.Name}"
                Title="Name" />

The colours for the PickerField styling are applied but the TextField colours do not get applied. I can get round it by applying the same styling directly to xaml page TextField properties. Is this an issue or have I improperly applied cascading/styling?

[enisn]

Can you define your styles inside Overrides instead of BasedOn ?

https://enisn-projects.io/docs/en/uranium/latest/themes/material/ColorsAndStyles#overriding-styles

    <m:StyleResource>
        <m:StyleResource.Overrides>
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
        </m:StyleResource.Overrides>
    </m:StyleResource>

Otherwise uraniumui styles will override your styles.

Since uraniumui uses static resources instead dynamic resources for performance, you need to pass your styles as override into StyleResource

[lamotuab]

I did a combination of based on and overrides otherwise those in my styles that are not overrides did not make it through.

Thanks.

[enisn]

I'll investigate this problem, there should be a bug in the styling.

If you have completely different styles, can you try loading your styles after the uranium styles?

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary x:Name="appColors" Source="Resources/Styles/Colors.xaml" />
                <!-- 👇 try moving it here -->
                <material:StyleResource ColorsOverride="{x:Reference appColors}" />
                <ResourceDictionary x:Name="appConverters" Source="Resources/Styles/Converters.xaml" />
                <ResourceDictionary x:Name="appFonts" Source="Resources/Styles/Fonts.xaml" />
                <ResourceDictionary x:Name="appSizes" Source="Resources/Styles/Sizes.xaml" />
                <ResourceDictionary x:Name="appStyles" Source="Resources/Styles/Styles.xaml" />
                <material:StyleResource
                    ColorsOverride="{x:Reference appColors}" />
            </ResourceDictionary.MergedDictionaries>

[lamotuab]

Yes that works.

FYI it was the following style defined in appStyles that wasn't being applied

    <Style TargetType="VerticalStackLayout" CanCascade="true" >
        <Setter Property="Margin" Value="0,10,0,0" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Spacing" Value="20" />
    </Style>