Reputation: 825
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