I have a Content View in my .NET MAUI application which uses a Picker control like this:

<Picker Title="{Binding Path=Caption}"
    TextColor="{Binding Path=PickerTextColor}"
    TitleColor="{StaticResource Key=SubTitleHeaderColor}"
    BackgroundColor="Transparent"
    FontFamily="OpenSansRegular"
    FontSize="14"
    MinimumWidthRequest="44"
    MinimumHeightRequest="44"
    IsEnabled="{Binding Path=IsEnabled}"
    ItemsSource="{Binding Path=Items}"
    ItemDisplayBinding="{Binding Path=DisplayName}"
    SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
    <Picker.Triggers>
        <DataTrigger TargetType="Picker" Binding="{Binding Path=IsEnabled}" Value="False">
            <Setter Property="TextColor" Value="Red" />
            <Setter Property="TitleColor" Value="Red" />
            <Setter Property="BackgroundColor" Value="Yellow" />
        </DataTrigger>
    </Picker.Triggers>
</Picker>

What I am struggling with the styling of the disabled state. The background of the control is yellow when disabled - as expected - but the text color remaing unchanged. I have checked the Styles.xaml and I did not not find any Picker styles in there.

I am not sure whether the text colors are not handled in the disabled state or if there is something that is overwriting the colors. Anyone any idea?

I have a Content View in my .NET MAUI application which uses a Picker control like this:

<Picker Title="{Binding Path=Caption}"
    TextColor="{Binding Path=PickerTextColor}"
    TitleColor="{StaticResource Key=SubTitleHeaderColor}"
    BackgroundColor="Transparent"
    FontFamily="OpenSansRegular"
    FontSize="14"
    MinimumWidthRequest="44"
    MinimumHeightRequest="44"
    IsEnabled="{Binding Path=IsEnabled}"
    ItemsSource="{Binding Path=Items}"
    ItemDisplayBinding="{Binding Path=DisplayName}"
    SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
    <Picker.Triggers>
        <DataTrigger TargetType="Picker" Binding="{Binding Path=IsEnabled}" Value="False">
            <Setter Property="TextColor" Value="Red" />
            <Setter Property="TitleColor" Value="Red" />
            <Setter Property="BackgroundColor" Value="Yellow" />
        </DataTrigger>
    </Picker.Triggers>
</Picker>

What I am struggling with the styling of the disabled state. The background of the control is yellow when disabled - as expected - but the text color remaing unchanged. I have checked the Styles.xaml and I did not not find any Picker styles in there.

I am not sure whether the text colors are not handled in the disabled state or if there is something that is overwriting the colors. Anyone any idea?

• maui

• TextColor is already binded to PickerTextColor can you give a static value and check? – Bhavanesh N Commented Jan 17 at 18:08

1 Answer 1

I'm always interested in "getting to the bottom of it" when code like yours that looks as though it should work doesn't. When I tried to reproduce your issue, I was only able to identify a very narrow misbehavior that was specific to the Android platform. Actually, even more specific than that, because on Android, iOS, and Windows once an item is selected from the picker the data trigger seemed to work as intended. If looked like your code was working great at that point.

You asked whether:

anyone [has] any idea.

That's pretty broad; I might have "some" idea but you'll have to clone it and see if it works on your end . What it looks like to me is that Android (pathologically) is not applying any visual style when the Picker is 1. disabled and 2. has no item selected. My reason for saying this is that I can supply a non-styled color value that can be shown to have effect when those conditions on the Android platform are met.

Now I will share a workaround that seemed to make the Android deliver the intended result. First, since it seemed that main objective is to modify the default Style for Picker in its various visual states, so I made a custom style in Styles.xaml to take control of that:

<Style TargetType="Picker" x:Key="PickerWithDisable">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" >
                    <VisualState.Setters>
                        <Setter Property="TitleColor" Value="{StaticResource SubTitleHeaderColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="Red" />
                        <Setter Property="TitleColor" Value="Red" />
                        <Setter Property="BackgroundColor" Value="Yellow" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Next, assign this style to the Picker and remove any other colors or triggers that would affect the display colors.

<Picker 
    Style="{StaticResource PickerWithDisable}"
    Title="{Binding Caption}"
    BackgroundColor="Transparent"
    FontFamily="OpenSansRegular"
    FontSize="14"
    MinimumWidthRequest="44"
    MinimumHeightRequest="44"
    IsEnabled="{Binding IsEnabled}"
    ItemsSource="{Binding Items}"
    ItemDisplayBinding="{Binding DisplayName}"
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</Picker>

Finally, add an Android-specific value in case for when the VisualStateManager fails to identify a valid state. Again, this is a workaround for something I believe the Android native control is rendering incorrectly. At the same time, it is benign and would not interfere e.g. if a One UI update makes this behave the same way the other platform controls do with respect to visual styles.

<Picker 
    Style="{StaticResource PickerWithDisable}"
    TitleColor="{OnPlatform Android=Red}"
    .
    .
    .
</Picker>