VisualStates not working inside UWP FlipView

Question

In my FlipView, I have VisualState triggers set up in the DataTemplate to show/hide Grids based on window width. The triggers inside the DataTemplate work fine when outside of the FlipView, but when I put the Grid inside of the FlipView DataTemplage, the triggers never fire. I've used this technique in ListView without issue, so not sure what's different here.

<FlipView>
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="View1.Visibility" Value="Collapsed" />
                                <Setter Target="View2.Visibility" Value="Visible" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="700" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="View1.Visibility" Value="Visible" />
                                <Setter Target="View2.Visibility" Value="Collapsed" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid x:Name="View1"></Grid>
                <Grid x:Name="View2"></Grid>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Can you post correct FlipView, I see the code is missing tags. This is basically incomplete xaml code. — AVK, Sep 08 '17 at 18:03

score 1 · Accepted Answer · answered Sep 09 '17 at 01:58

Visual states don't work inside a DataTemplate unless the top level container is a Control(Check out the first parameter in VisualStateManager.GoToState() which is called under the hood). In your case, it's a Grid so it won't work.

An easy workaround is to wrap your Grid inside a UserControl, or a ContentControl with an empty style (see my other answer here).

If you already have this set of visual states defined at your Page level and would like the same rules applied to some DataTemplates within the page. Have a look at this answer where I used a Behavior to pass the VisualStateGroup reference down instead of duplicating them in order to keep all MinWindowWidth settings in one place.

VisualStates not working inside UWP FlipView

1 Answers1