Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spec: Visual State Manager Improvements #4232

Open
davidortinau opened this issue Oct 26, 2018 · 1 comment

Comments

@davidortinau
Copy link
Contributor

commented Oct 26, 2018

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

@pauldipietro pauldipietro added this to New in Triage Oct 26, 2018
@davidortinau davidortinau changed the title Spec: Visual State Manager Spec: Visual State Manager Improvements Oct 26, 2018
@samhouts samhouts removed this from New in Triage Oct 26, 2018
@davidortinau

This comment has been minimized.

Copy link
Contributor Author

commented Jan 21, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Enhancements
  
Ready for Implementation
3 participants
You can’t perform that action at this time.