CODEWITHSUNDEEP
xamluwpuwp-xaml
Scott
Scott

Reputation: 1021

VisualStates not working inside UWP FlipView

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>

Upvotes: 1

Views: 133

Answers (1)

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 1

Related Questions