UWP Visual State Manager Изменение высоты строки сетки - PullRequest
Новая
       28

UWP Visual State Manager Изменение высоты строки сетки

0 голосов
/ 06 мая 2019

Я использую 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>
...