Question

我绝对是Windows商店应用程序的初学者，今天我试图在我试图创建的应用程序中添加ScrollViewer。因此，当我运行以下代码时，左列占据90％的屏幕宽度，而右列占据宽度的10％：

ob_start();
include($_SERVER['DOCUMENT_ROOT'] . 'Events.php');
$list = ob_get_clean();

但是当我向其添加ScrollViewer时，左列的宽度减小，右列的宽度增加。

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.2*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <TextBlock Text="Header" FontFamily="Segoe UI" FontSize="50" VerticalAlignment="Center" FontStyle="Italic"/>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="SubHeader :" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="30" FontStyle="Italic"/>
                </Grid>

                <Grid Grid.Row="1" Background="Transparent" HorizontalAlignment="Left" Height="526" Margin="90,60,0,0" VerticalAlignment="Top">
                    <TextBlock FontSize="50" Text="This is left Column"/>
                </Grid>
            </Grid>
            <Grid Grid.Column="1">
                <Grid Width="800">
                    <Grid.Background>
                        <SolidColorBrush Color="Gray" />
                    </Grid.Background>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="Heading" FontFamily="Segoe UI" FontSize="40" Margin="80,36,0,0" FontStyle="Italic" Foreground="Black"/>
                    <Grid Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
                        <TextBlock FontFamily="Segoe UI" FontSize="30" Text="This is Right Column" Margin="60,0,0,0" Foreground="Black"/>

                    </Grid>
                </Grid>
            </Grid>

        </Grid>

我想我添加滚动查看器的方式是错误的。任何人都可以指导我如何在此代码中添加水平滚动查看器？

Answer 1

当然，添加滚动查看器时，列宽会发生变化。这是因为您的列正在尝试调整其中的任何内容，以便滚动查看器可以滚动到它们。尝试从内部网格中删除内容，您将看到列宽保留。如果要将列宽保持为9：1的比例，则必须为每列声明一个scrollviewer，如下所示：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="9*" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  HorizontalScrollMode="Auto"
                  VerticalScrollBarVisibility="Disabled"
                  VerticalScrollMode="Disabled">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid>
                <TextBlock VerticalAlignment="Center"
                           FontFamily="Segoe UI"
                           FontSize="50"
                           FontStyle="Italic"
                           Text="Header" />
                <TextBlock HorizontalAlignment="Left"
                           VerticalAlignment="Bottom"
                           FontFamily="Segoe UI"
                           FontSize="30"
                           FontStyle="Italic"
                           Text="SubHeader :"
                           TextWrapping="Wrap" />
            </Grid>

            <Grid Grid.Row="1"
                  Height="526"
                  Margin="90,60,0,0"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  Background="Transparent">
                <TextBlock FontSize="50" Text="This is left Column" />
            </Grid>
        </Grid>
    </ScrollViewer>
    <ScrollViewer Grid.Column="1"
                  HorizontalScrollBarVisibility="Auto"
                  HorizontalScrollMode="Auto"
                  VerticalScrollBarVisibility="Disabled"
                  VerticalScrollMode="Disabled">
        <Grid>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="Gray" />
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.2*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <TextBlock Margin="80,36,0,0"
                           FontFamily="Segoe UI"
                           FontSize="40"
                           FontStyle="Italic"
                           Foreground="Black"
                           Text="Heading" />
                <Grid Grid.Row="1"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Top">
                    <TextBlock Margin="60,0,0,0"
                               FontFamily="Segoe UI"
                               FontSize="30"
                               Foreground="Black"
                               Text="This is Right Column" />

                </Grid>
            </Grid>
        </Grid>
    </ScrollViewer>
</Grid>

在旁注中，无需将Grid.Row或Grid.Column明确设置为 0 ，因为这是默认值。

添加ScrollViewer时网格会更改宽度

1 个答案: