Spec: Visual State Manager Improvements

[davidortinau]

Drafted by @rmarinho

Rationale

Xamarin.Forms 3.0 introduced VisualStateManager. This proposal is to add support for states, triggers, and provide a foundation for animations.

• VSM should make easy to activate states from XAML, for this we could introduce the concept of a StateTrigger, a state trigger activates the attached state depending of a number conditions, we could have builtin AdaptiveTrigger where we activate a state depending on features like screen size or orientation, or a EventStateTrigger that could activate a state when a event is fired and deactivate when other event is fired. We already have this kind of concept and a existing EventTigger and Triggerbase .
  That way the user doesn't have to call the GoToState on code behind. A StateTrigger should only apply when all conditions are met, if any of the conditions isn't met all the modifications to the properties made by the corresponding VisualState are automatically removed and the values provided initally take effect.

• VSM should support more out of the box states for each of the Views like Button, Entry, Editor, ListView

• VisualState should provide a way to execute animations instead of just setting properties on the elements. We should consider extend Animation or to introduce the a new api like Storyboard(similar to Animation but for XAML usage)

It's important this works with OnPlatform also.

Implementation

public class StateTrigger : TriggerBase
{
    public void SetActive(bool active);
    public bool IsActive { get; }
}

public class AdaptiveTrigger : StateTrigger
{
    public double MinHeight { get; set; }
    public double MinWidth { get; set; }
    public Orientation CurrentOrientation { get; set; }
}

public class EventStateTrigger : StateTrigger
{
    public string ActivateEvent { get; set; }
    public string DeactivateEvent { get; set; }
}


public class VisualState
{
    public IList<StateTrigger> StateTriggers { get; }
}

public class VisualStateManager
{
    public static bool GoToState(VisualElement visualElement, string name, bool useTransition = false)
}

internal class CommonStates
{
    ...
    public const string Pressed = "Pressed";
    public const string Released = "Released";
    public const string Hovered = "Hovered";
    public const string Selected = "Selected";
    public const string UnSelected = "UnSelected";
    public const string Toggled = "Toggled";
    public const string Running = "Running";
}

XAML Sample

<ContentPage.Content>
		<StackLayout Orientation="Vertical"
			<VisualStateManager.VisualStateGroups>
				<VisualStateGroup>
					<VisualState x:Name="Orientation">
						<VisualState.StateTriggers>
							<AdaptiveTrigger MinWidth="640" />
						</VisualState.StateTriggers>

						<VisualState.Setters>
							<Setter Property="Orientation" Value="Horizontal" />
						</VisualState.Setters>
					</VisualState>
				</VisualStateGroup>
			</VisualStateManager.VisualStateGroups>

			<Label Text="Welcome to Xamarin.Forms!">
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup>
						<VisualState x:Name="Focused">
							<VisualState.StateTriggers>
								<EventTrigger Event="Focused" />
							</VisualState.StateTriggers>

							<VisualState.Setters>
								<Setter Property="TextColor" Value="Red" />
							</VisualState.Setters>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
			</Label>
			<Label Text="Welcome to Xamarin.Forms!" />
		</StackLayout>
	</ContentPage.Content>

• Need to track Toogled state on Switch
• Need to track Running state on ActivityIndicator
• Need to track state Selected / UnSelected on ListView

Android

• We already track device orientation changes, we should track screen size too

iOS

• We already track device orientation changes, we should track screen size too

UWP

• We already track device orientation changes, we should track screen size too
• We need to track the hover state on a button

MacOS

• We should track screen size
• We need to track the hover state on a button

GTK

• We should track screen size too
• We need to track the hover state on a button

Implications for CSS

We could try to map media queries to AdaptiveTriggersbut I think this is out of the scope for this spec.

Backward Compatibility

There should be no changes to the existing usage of VSM without triggers, transitions or animations.
Using none of the new features should just work as before.

Difficulty : Medium

[davidortinau]

We should consider #4924 with this as well to add Target support.

[samhouts]

closed by #9422