CODEWITHSUNDEEP
c#xamarinxamarin.forms
Arslan
Arslan

Reputation: 33

Xamarin Forms Shell flyoutitem tittle color

I want to change the color of option titles and selected option how can i do that?

output

Upvotes: 0

Views: 304

Answers (1)

IV.
IV.

Reputation: 9243

The default Xamarin.Forms Project template is going to put styles like FlyoutItemLabelStyle, FlyoutItemLayoutStyle and MenuItemLayoutStyle in the Shell.Resources element of AppShell.xaml. These styles, in turn, will have many references to {StaticResource Primary} which is a color defined in the Application.Resources element of App.xaml. I would start by assessing what's happening in those places. Even if you're not using the template you can study it as an example of how to achieve your outcome.

Device Themes can adversely affect these settings

What I've noticed is that Xamarin UI elements with default transparent background color may not respond dynamically if the device is, for example, changed to dark mode. (I've definitely seen white text on an effectively-white background in dark mode). So one must pay attention to what the consequences will be when the device's visual themes change. There is an especially good training on this topic by Xamarin guru James Montemagno. I would highly recommend his YouTube video on Dynamic App Themes in Xamarin.Forms - Light, Dark, & Custom Modes

For the purpose of a basic demonstration of how to modify these themes, I have hardcoded "Magenta", "Blue" and "Green" in the default xaml which produces the colors shown in the image that follows.

<Shell.Resources>
    <ResourceDictionary>
        <Style Class="FlyoutItemLabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="Magenta"></Setter>
        </Style>
        <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
                                <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
        <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Green" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ResourceDictionary>
</Shell.Resources>

magenta blue green

Upvotes: 1

Related Questions