Xamarin Forms introduces VSM, we will now try to extend the features of VSM to be more useful.
-
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 builtinAdaptiveTrigger
where we activate a state depending on features like screen size or orientation, or aEventStateTrigger
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 existingEventTigger
andTriggerbase
.
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 likeStoryboard
(similar to Animation but for XAML usage)
It's important this works with OnPlatform also.
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
- We already track device orientation changes, we should track screen size too
- We already track device orientation changes, we should track screen size too
- We already track device orientation changes, we should track screen size too
- We need to track the hover state on a button
- We should track screen size
- We need to track the hover state on a button
- We should track screen size too
- We need to track the hover state on a button
We could try to map media queries to AdaptiveTriggers
but I think this is out of the scope for this spec.
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.
Please include a XAML sample