[Enhancement] AdaptiveTriggers

[jsuarezruiz]

Description of Change

An AdaptiveTrigger provides an easy way to set the threshold (also called 'breakpoint') where a state is applied. A VisualState defines property values that are applied to an element when it’s in a particular state. You group visual states in a VisualStateManager that applies the appropriate VisualState when the specified conditions are met.

Example:

<VisualStateGroupList>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Blue" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1000" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Green" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

Issues Resolved

• fixes Spec: Visual State Manager Improvements #4232
• fixes i wish some day you add “AdaptiveTrigger” of UWP Visual states to xamarin forms too #9189

API Changes

Added:

public class StateTriggerBase
{
    public void SetActive(bool active);
    public bool IsActive { get; }
}

public class AdaptiveTrigger : StateTriggerBase
{
    public double MinHeight { get; set; }
    public double MinWidth { get; set; }
}

public class OrientationStateTrigger : StateTriggerBase
{
    public DeviceOrientation Orientation { get; set; }
}

public class DeviceStateTrigger : StateTriggerBase
{
    public string Device { get; set; }
}

public class CompareStateTrigger : StateTriggerBase
{
    public object Property { get; set; }
    public object Value { get; set; }
}

In Xamarin.Forms.DualScreen:

public class DualScreenSpanModeStateTrigger : StateTriggerBase
{
    public TwoPaneViewMode SpanMode { get; set; }
}

Platforms Affected

• Core/XAML (all platforms)
• iOS
• Android
• UWP

Behavioral/Visual Changes

None

Before/After Screenshots

AdaptiveTrigger

DeviceStateTrigger

<VisualStateGroupList>
    <VisualStateGroup>
        <VisualState
            x:Name="Android">
            <VisualState.StateTriggers>
                <DeviceStateTrigger Device="Android" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Blue" />
            </VisualState.Setters>
        </VisualState>
        <VisualState
            x:Name="iOS">
            <VisualState.StateTriggers>
                <DeviceStateTrigger Device="iOS" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Red" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

Running on Android

Running on iOS

OrientationStateTrigger

<VisualStateGroupList>
        <VisualStateGroup>
        <VisualState
            x:Name="Landscape">
            <VisualState.StateTriggers>
                <OrientationStateTrigger Orientation="Landscape" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Blue" />
            </VisualState.Setters>
        </VisualState>
        <VisualState
            x:Name="Portrait">
            <VisualState.StateTriggers>
                <OrientationStateTrigger Orientation="Portrait" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Red" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

CompareStateTrigger

<VisualStateGroupList>
    <VisualStateGroup>
        <VisualState x:Name="Wide">
            <VisualState.StateTriggers>
                <CompareStateTrigger Property="{Binding IsChecked, Source={x:Reference CheckBox}}" Value="True" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Green" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Narrow">
            <VisualState.StateTriggers>
                <CompareStateTrigger Property="{Binding IsChecked, Source={x:Reference CheckBox}}" Value="False" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Red" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

DualScreenStateTrigger

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Normal">
                <VisualState.StateTriggers>
                    <dualScreen:DualScreenSpanModeStateTrigger SpanMode="SinglePane"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Spanned">
                <VisualState.StateTriggers>
                    <dualScreen:DualScreenSpanModeStateTrigger SpanMode="Wide" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Green" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Testing Procedure

Launch Core Gallery and navigate to the VisualStateManager samples. Here, can find new samples related with Adaptive Triggers.

PR Checklist

• Targets the correct branch
• Tests are passing (or failures are unrelated)

[PureWeen]

DeviceInfo implements INPC so you can just subscribe to that and watch for Orientation changes

[PureWeen]

Can you add some Core.UnitTests as well?

[jsuarezruiz]

@PureWeen I have added some unit tests.

[dotMorten]

Thank you for making IsActive a public getter instead of protected. I'd like to propose you also add an event for when it changes. The reason for that is to be able to make composite state triggers. I state my case for that in this design issue:
microsoft/microsoft-ui-xaml#1460