Я использую VisualStateManager
в XAML, чтобы указать изменение ширины / высоты столбца / строки сетки, используя свойства ColumnDefinition
и RowDefinition
x:Name
. Я прочитал здесь , что это возможно ... но Visual Studio сообщает «Не удалось найти элемент с именем _____» с предупреждением, и изменение состояния для строки сетки не работает (установщики для изменения строки / назначения столбцов запускаются правильно, поэтому я знаю, что VisualStateManager
работает в целом).
Предполагаемый эффект состоит в том, чтобы контент занимал вертикально весь экран (без вертикальной прокрутки) в широком состоянии, причем каждый блок находится в отдельном столбце. Затем в узком состоянии содержимое будет перекомпоновано, вместо этого все будет находиться в одном и том же столбце, но в разных строках (таким образом, вертикально сложенных), и, таким образом, будет необходима вертикальная прокрутка (содержимое также изменится с фиксированной ширины в широком состоянии, растянуть, чтобы занять ширину окна в узком состоянии).
Мой код выглядит примерно так:
<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>