Question

我需要在XAML（在UWP应用程序中）使我的表单具有响应性和可滚动性。我有这样的代码

 <Grid x:Name="MainGrid">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="24"/>
                    <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
                    <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
                    <Setter Target="FirstGrid.Margin" Value="0 0 12 0"/>
                    <Setter Target="SecondGrid.Margin" Value="12 0 0 0"/>
                    <Setter Target="SecondGrid.(Grid.Column)" Value="1"/>
                    <Setter Target="SecondGrid.(Grid.Row)" Value="0"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="12"/>
                    <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/>
                    <Setter Target="SecondGrid.Margin" Value="0 0 0 0"/>
                    <Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/>
                    <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
                    <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
                    <Setter Target="SecondGrid.(Grid.Column)" Value="0"/>
                    <Setter Target="SecondGrid.(Grid.Row)" Value="1"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>


    <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="*" MaxWidth="500"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" />
            <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtName" />
        </Grid>

    </Grid>
    <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="*" MaxWidth="500"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" />
            <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtAge" />
        </Grid>

    </Grid>

</Grid>

这是响应式的，但不可滚动。当我在ScrollViewer - ＆gt;上方添加MainGrid时它可以滚动，但响应性不起作用（<VisualState x:Name="WideState">）

你有什么想法我怎么能让这个Grid可滚动？ THX。

Answer 1

您需要VisualStateGroups作为 root 容器的成员。

结构将如下：

<Grid Name=root>
    VisualStateGroups here....
    <ScrollViewer>
        <Grid Name=MainGrid>
            ...First and Second grid...
        </Grid>
    </ScrollViewer>
</Grid>

Answer 2

将VisualState代码放在ScrollViewer内，而不是Grid

 <ScrollViewer>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Margin" Value="24"/>
                        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
                        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
                        <Setter Target="FirstGrid.Margin" Value="0 0 12 0"/>
                        <Setter Target="SecondGrid.Margin" Value="12 0 0 0"/>
                        <Setter Target="SecondGrid.(Grid.Column)" Value="1"/>
                        <Setter Target="SecondGrid.(Grid.Row)" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Margin" Value="12"/>
                        <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/>
                        <Setter Target="SecondGrid.Margin" Value="0 0 0 0"/>
                        <Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/>
                        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
                        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
                        <Setter Target="SecondGrid.(Grid.Column)" Value="0"/>
                        <Setter Target="SecondGrid.(Grid.Row)" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    <Grid x:Name="MainGrid" Background="Green">


        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>


        <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0" Background="Yellow">

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Grid Grid.Column="0" Grid.Row="0" Height="500">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="130"/>
                    <ColumnDefinition Width="*" MaxWidth="500"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" />

            </Grid>

        </Grid>
        <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" Height="500" Background="Blue">

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Grid Grid.Column="0" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="130"/>
                    <ColumnDefinition Width="*" MaxWidth="500"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" />

            </Grid>

        </Grid>

    </Grid>
    </ScrollViewer>

UWP如何在XAML中使Grid可滚动

2 个答案: