UWP Multiple VisualState Triggers in VisualStateManager

Question

I'm creating a Windows Universal App

I want to do layout combined with 3 columns. Each column is showing different informations.

First column contains ListView. If you select an item, the Second column should show up.

Second column contains also ListView. If you select an item, the Third solumn should show up.

In Third column are shown some informations.

I need to show up only columns, that showing some informations (blank column hide). Also I want to add responsive feature. So on mobile should be shown only one column with the biggest priority.

Here is an example

Desktop (start):

| 1 |

Desktop (click on first ListView):

| 1 | 2 |

Desktop (click on the second ListView):

| 1 | 2 | 3 |

Mobile(start):

| 1 |

Desktop (click on first ListView):

| 2 |

Desktop (click on the second ListView):

| 3 |

So I want to create VisualState with two StateTriggers.

Something like this:

<VisualState x:Name="VSShowThird">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
        <StateTrigger IsActive="{Binding Path=ShowThirdColumn}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Visible" />
        <Setter Target="ThirdColumn.Visibility" Value="Visible" />
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="VSShowSecond">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
        <StateTrigger IsActive="{Binding Path=ShowSecondColumn}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Visible" />
        <Setter Target="ThirdColumn.Visibility" Value="Collapsed" />
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="VSShowFirst">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Collapsed" />
        <Setter Target="ThirdColumn.Visibility" Value="Collapsed" />
    </VisualState.Setters>
</VisualState>

But it isn't working properly.

Can You suggest me any solution for this?

Many thanks.

i achieve this im my app, extending the adaptive trager and adding a property is Active, but i'm having some problems wiht binding — Astolfo Hoscher

Astolfo Hoscher Astolfo Hoscher · Accepted Answer · 2016-04-27T20:54:57

I create this trigger and me

public class AdaptiveTriggerWithState : AdaptiveTrigger
{
    private double _minWindowHeightProperty;
    private double _minWindowWidthProperty;
    private const int INACTIVE_STATE_SIZE = 10000;

    public static DependencyProperty IsActiveProperty = 
        DependencyProperty.Register(
                                "IsActive", 
                                typeof(bool), 
                                typeof(AdaptiveTriggerWithState), 
                                new PropertyMetadata(default(bool), OnIsActive_Changed));

    private static void OnIsActive_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var instance = (AdaptiveTriggerWithState)d;
        instance.IsActive = (bool)e.NewValue;
    }

    public bool IsActive
    {
        get { return (bool)GetValue(IsActiveProperty); }
        set
        {
            SetValue(IsActiveProperty, value);
            SetValue(MinWindowHeightProperty, (IsActive ? this._minWindowHeightProperty : INACTIVE_STATE_SIZE));
            SetValue(MinWindowWidthProperty, (IsActive ? this._minWindowWidthProperty : INACTIVE_STATE_SIZE));
        }
    }

    public new System.Double MinWindowHeight
    {
        get { return (Double)GetValue(MinWindowHeightProperty); }
        set
        {
            this._minWindowHeightProperty = value;
            SetValue(MinWindowHeightProperty, (IsActive ? this._minWindowHeightProperty : INACTIVE_STATE_SIZE));
        }
    }
    public new System.Double MinWindowWidth
    {
        get { return (Double)GetValue(MinWindowWidthProperty); }
        set
        {
            this._minWindowWidthProperty = value;
            SetValue(MinWindowWidthProperty, (IsActive ? this._minWindowWidthProperty : INACTIVE_STATE_SIZE));
        }
    }


}

UWP Multiple VisualState Triggers in VisualStateManager

1 Answers