UWP如何使Grid在XAML中可滚动

Kicker 发表于 Dev

踢球者

我需要使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上方添加MainGrid->时，它将可滚动，但响应性不起作用（<VisualState x:Name="WideState">）

您有什么想法可以使此Grid滚动显示吗？谢谢。

thang2410199

您需要具有VisualStateGroups作为根容器的成员的权限。

结构如下：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。