Maui.Markup way to define VisualStates in Styles

[devonuto]

Working with the new Maui.Markup way of defining style setters:

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

It would be nice if we could extend it for adding 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, Color.Black)
    });

May obviously need to change, if multiple state groups are required, but this method would assume all visual states are within the same visual state group.

Currently, the only method I have found to define these state setters is by creating my own Grid type like this which is a little convoluted:

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 = Color.Black }
                            }
                        }
                    }
                }
            }
        );
    }
}

Related origin: #61

[mrlacey]

This would be very helpful.

As a reference, also look at VincentH-Net/CSharpForMarkup#22

[YourAppNerds-Admin]

I agree, this would be very helpful. Do we create an issue from this to hopefully get it worked on?

[TheCodeTraveler]

Agreed! The next step is to create a New Feature Proposal outlining the new detailed API Design.

[VinMorEpsilog]

Hello, any news about this question? Thanks.

[JoeVoo]

this works:

     new Style<Button>()
    .Add(VisualStateManager.VisualStateGroupsProperty, new VisualStateGroupList
      {
          new VisualStateGroup
          {
              Name = "CommonStates",
              States =
              {
                  new VisualState
                  {
                      Name = "Normal",
                  },
                  new VisualState
                  {
                      Name = "Pressed",
                      Setters =
                      {
                          new Setter { Property = Button.OpacityProperty, Value = 0.7 },
                          new Setter { Property = Button.BackgroundColorProperty, Value = darkOrange }
                      }
                  }
              }
          }
      })

[ArkasisProjects]

but how would i set theme bindings now in the visualstate?

[JoeVoo]

new Setter { 
Property = Button.BackgroundColorProperty, 
Value = Application.Current.UserAppTheme == AppTheme.Dark ? Colors.DarkGray : Colors.Gray }

this ist static, for dynamic theme switching - you have to use xaml styles. C# style does not support dynamic resources as i know

[Ghostbird]

By sheer coincidence I wrote a set of extensions yesterday, before I learned of the Style<T>() and it's Add() function. It turned out that they had exactly the same signature. However I also wrote the visual state extension. I've updated my code to work with the new Style<T> and its Add.

DISCLAIMER: Not rigorously tested yet!

static class ResourceDictionaryExtensions
{
	public static Style<T> AddStyle<T>(this ResourceDictionary self)
		where T : BindableObject => self.AddNamedStyle<T>(typeof(T).FullName!);

	public static Style<T> AddNamedStyle<T>(this ResourceDictionary self, string key)
		where T : BindableObject
	{
		var style = new Style<T>();
		self.Add(key, style.MauiStyle);
		return style;
	}
}

static class StyleExtensions
{
	public static Style<T> WithVisualStates<T>(this Style<T> self, params IEnumerable<VisualStateSetters> stateConfigs)
		where T : BindableObject => WithNamedVisualStates(self, "CommonStates", stateConfigs);

	public static Style<T> WithNamedVisualStates<T>(
		this Style<T> self,
		string stateGroupName,
		params IEnumerable<VisualStateSetters> stateConfigs
	)
		where T : BindableObject
	{
		if (
			self.MauiStyle.Setters.FirstOrDefault(setter => setter.Property == VisualStateManager.VisualStateGroupsProperty)
			is not { Value: VisualStateGroupList groupList }
		)
		{
			self.MauiStyle.Setters.Add(
				new() { Property = VisualStateManager.VisualStateGroupsProperty, Value = groupList = [] }
			);
		}
		var group = new VisualStateGroup { Name = stateGroupName };
		foreach (var (stateName, setters) in stateConfigs)
		{
			var state = new VisualState { Name = stateName };
			foreach (var (property, value) in setters)
			{
				state.Setters.Add(new Setter { Property = property, Value = value });
			}
			group.States.Add(state);
		}
		groupList.Add(group);
		return self;
	}

	public sealed record VisualStateSetters(
		string StateName,
		params IEnumerable<(BindableProperty Property, object Value)> Setters
	);
}

[Ghostbird]

I've updated my code above, as I claimed to have solved the dynamic resource problem. I hadn't and it turns out that the dynamic resource problem is easily solvable in code, but we're forbidden from doing so by MAUI. They've made all relevant classes sealed and / or internal so we can't solve the issue. Bah!