Styling Shell with C# (No XAML) -- How to?

[devonuto]

Hi everyone, started building a MAUI app in straight C#, and running into styling issues. Specifically using Microsoft.Maui.Controls.Shell, I'm having trouble getting the styling of the flyoutitem labels, and tabs on the shell. They also appear in different colours depending on whether the Maui app is run on Android, or in Windows. I can seem to make sense of it.

I've been trying to find how to write my own default style and apply it to my own extended flyoutitem class for the labels/background etc, but can't see how to apply setters to the style. I also need to have visual state setters etc.

Has anyone got any demo apps in github that do this?

[bijington]

We don't have any styling set around Shell in a non-XAML application but we do have a sample non-XAML application. Take a look at our Markup sample and let me know if that helps:

https://github.com/CommunityToolkit/Maui.Markup/tree/main/samples

[devonuto]

Also can't figure out how to add a class for overriding flyout styles in this method?

<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">

[devonuto]

This is the only way I have found that works for adding setters so far (by defining my own Grid type).

public class MyGrid : Grid
{
    public MyGrid()
    {
        VisualStateManager.SetVisualStateGroups(
            this,
            new VisualStateGroupList()
            {
                new VisualStateGroup()
                {
                    States =
                    {
                        new VisualState()
                        {
                            Name = "Selected",
                            Setters =
                            {
                                new Setter { Property = Grid.BackgroundColorProperty, Value = ColourConstants.Primary }
                            }
                        }
                    }
                }
            }
        );
    }
}

[pictos]

@devonuto can you show the code that you would like to write in order to define the VisualStateManager?

[devonuto]

@pictos Well if you have this for adding setters:

public static readonly Style<Grid> GridSyle = new Style<Grid>()
    .ApplyToDerivedTypes(true)
    .Add(Grid.BackgroundColorProperty, ColourConstants.BackgroundColour);

Extending it to add visual states, if possible maybe something simple like this:

public static readonly Style<Grid> GridSyle = new Style<Grid>()
    .ApplyToDerivedTypes(true)
    .Add(Grid.BackgroundColorProperty, ColourConstants.BackgroundColour)
    .Add(VisualStateManager.VisualStateGroups, new VisualState(VisualStateType.Selected)
    {
        Setters.Add(Grid.BackgroundColorProperty, ColourConstants.Primary)
    });

But I don't know if that would be too simplified. i.e do we need to define groups first, or just assume all setters are added to the same group etc

[pictos]

@devonuto do you mind opening a discussion asking for that extension and using the API that you showed here as a reference?

You just did an API design for us, thanks <3

[TheCodeTraveler]

Just FYI - since this is focused on C# + MAUI, I transferred this Discussion to the CommunityToolkit/Maui.Markup repo 👍

[CliffAgius]

Closed and answered