Search code examples
c#uwpvisualstatesadaptive-layout

Visual state not firing when reducing window


I have 3 visual states , with adaptivetrigger. When windows is increasing they firing well. But if window is reducing from biggest state to smaller , setters not working and elements reset they style to defaut like they dont have visualstates.

<Grid x:Name="mainGrid" Style="{StaticResource mainGridStyle}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="largeSize">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1520"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mainGrid.Background" Value="{StaticResource lgBrush}"/>
                        <Setter Target="LogoImage.Style" Value="{StaticResource lgLogoStyle}"/>
                        <Setter Target="TxbClienForStreaming.FontSize" Value="60"/>
                        <Setter Target="TxbAddText.FontSize" Value="42"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="mediumSize">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mainGrid.Background" Value="{StaticResource mdBrush}"/>
                        <Setter Target="LogoImage.Style" Value="{StaticResource mdLogoStyle}"/>
                        <Setter Target="TxbClienForStreaming.FontSize" Value="45"/>
                        <Setter Target="TxbAddText.FontSize" Value="28"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="smallSize">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mainGrid.Background" Value="{StaticResource smBrush}"/>
                        <Setter Target="TxbClienForStreaming.FontSize" Value="36"/>
                        <Setter Target="TxbAddText.FontSize" Value="24"/>
                        <Setter Target="BtnGetNow.FontSize" Value="34"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Solution

  • Visual state not firing when reducing window

    The problem is you have placed three VisualState in the different groups, please integrate three VisualState in one group like the following.

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="smallSize">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="mainGrid.Background" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="mediumSize">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="665" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="mainGrid.Background" Value="Green" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="largeSize">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1520" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="mainGrid.Background" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>