Using multiple ControlWidthTrigger

[jasonwurzel]

Hi, I think I'm missing something fundamental here but how could I use multiple ControlWidthTrigger on the same TargetElement? Let's say I have a control X that should have the color green when width >= 200, red when width >= 300 and blue when width >= 400. If I just use 3 Triggers, all of them fire when the width is >= 400 as they function independently of each other. The UWP AdaptiveTrigger (relating to Window Size) works exclusively though (having 3 triggers for three window states, they seem to exclude one another). How can we implement this behavior without adding a "Start" AND an "End" property ("from width 200 to width 300")?

[Herdo]

@jasonwurzel It is ok for them to fire at the same time. The integrated AdaptiveTrigger in UWP works the same way. If you have multiple, they all fire. The StateTriggerBase class has a method SetActive, which actually causes the trigger / state to (de)activate.

I'm guessing here, but I think you might have missunderstood the concept of visual states and their groups.

You put states that are mutually exclusive to each other in the same VisualStateGroup.

Therefore, if you have multiple triggers that rely on the same "trigger", you need to put them into the same group, e.g.:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="WindowWidthGroup">
        <VisualState x:Name="FullHD">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowHeight="1080"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="myPanel.Background" Value="Blue"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="CloseEnough">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowHeight="720"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="myPanel.Background" Value="Red"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="SD"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

The first state that is active will be applied. Therefore, put the "FullHD" trigger first. Further triggers won't be evaluated for the VisualStateGroup. If the '1080' trigger doesn't match, the '720' trigger will be applied, if the condition matches. If neither of them matches, the 'SD' state will be entered.

[jasonwurzel]

Thanks for the explanation. It was the part about the sequence of triggers I was missing.