UWP Visual State Manager Change Grid Row Height

I am using a VisualStateManager in the XAML to specify a change in the width/height of a grid column/row by using the ColumnDefinition and RowDefinition x:Name properties. I read here that this is possible... but Visual Studio says "Failed to find element named _____" with a warning, and the state change for the grid row does not work (the setters for changing row/column assignments trigger correctly, so I know the VisualStateManager is working overall).

The intended effect is to have the content vertically take up exactly the screen (with no vertical scrolling) in the wide state, with each block being in a different column. Then in the narrow state, the content will reflow to instead be all in the same column but different rows (thus vertically stacked), and thus vertical scrolling will be necessary (the content will also change from having a fixed width in the wide state, to stretching to take up the window width in the narrow state).

My code looks something like this:

<Page>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentBlockA.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockB.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockC.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockA.(Grid.Row)" Value="2"></Setter>
                        <Setter Target="ContentBlockB.(Grid.Row)" Value="1"></Setter>
                        <Setter Target="ContentBlockC.(Grid.Row)" Value="0"></Setter>
                        <Setter Target="ContentRowZero.Height" Value="Auto"></Setter>
                        <Setter Target="ContentColumnZero.Width" Value="*"></Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!-- Empty setters defaults to the layout specified in XAML below. -->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="ContentColumnZero"
                                      Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="ContentRowZero"
                                   Height="*"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>

                <Grid Name="ContentBlockA"
                      Grid.Column="0">
                    <!-- Content here -->
                </Grid>

                <Grid Name="ContentBlockB"
                      Grid.Column="1">
                    <!-- Content here -->
                </Grid>

                <Grid Name="ContentBlockC"
                      Grid.Column="2">
                    <!-- Content here -->
                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</Page>

Upvotes: 1

Views: 608

Answers (0)

Related Questions