0

我正在尝试使用 Xaml 在网格上为 WinRT 应用程序获取滚动条。基本页面设置有一个用于顶部和中间部分的整体网格。在中间部分，我放置了另一个 2 行 2 列的网格。在该网格的第 1 列第 1 行内，我想在要显示的数据内放置一个带有另一个网格的边框，并在边框区域内有一个滚动条。

我已经为此绞尽脑汁了大约 3 天，断断续续地在网上搜索

我粗略地尝试了这两种方法，我认为应该可以，但不行。简化了，但文本框的网格有大约 30 个文本框网格要显示。

<Grid x:Name="PersonViewContent" Grid.Row="1">
    <ScrollViewer
        x:Name="MainScrollViewer"
        Grid.Row="1"
        ZoomMode="Disabled"
        IsTabStop="False"
        VerticalScrollBarVisibility="Auto"
        HorizontalScrollBarVisibility="Auto"
        Padding="0,0,0,20">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="Auto" />
                <RowDefinition
                    Height="*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="Auto" />
                <ColumnDefinition
                    Width="*" />
            </Grid.ColumnDefinitions>

            <Border
                BorderBrush="Black"
                BorderThickness="5"
                HorizontalAlignment="Left"
                Width="500"
                Margin="10,10,10,10"
                VerticalAlignment="Top">
                <ScrollViewer
                    x:Name="PersonScroller"
                    Margin="0"
                    FontFamily="Segoe UI"
                    FontSize="20"
                    IsHorizontalRailEnabled="true"
                    IsHorizontalScrollChainingEnabled="False"
                    IsDoubleTapEnabled="False"
                    IsHoldingEnabled="False"
                    IsRightTapEnabled="False"
                    IsTapEnabled="False">
                    <StackPanel
                        Margin="0"
                        Width="490"
                        HorizontalAlignment="Left">
                        <Grid
                            Height="250"
                            Margin="10,10,10,10"
                            VerticalAlignment="Bottom">
                            <Image
                                Source="{Binding Image}"
                                AutomationProperties.Name="{Binding ImageSourceSubtitle}"
                                ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Stretch="{Binding ImageStretch}" />
                            <TextBlock
                                Text="{Binding Subtitle}"
                                Margin="0,180,0,0"
                                TextWrapping="Wrap"
                                Style="{StaticResource SubheaderTextStyle}"
                                MaxHeight="60"
                                FontSize="20"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock"
                                Margin="5,10,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20"
                                FontWeight="Bold" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>

                        <Grid
                            Height="Auto">
                            <TextBlock
                                Text="Textblock: "
                                Margin="5,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                MaxHeight="60"
                                FontSize="20" />
                            <TextBlock
                                Text="{Binding Name}"
                                Margin="152,0,0,0"
                                Style="{StaticResource BasicTextStyle}"
                                FontSize="20" />
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
            </Border>
        </Grid>
    </ScrollViewer>
</Grid>

我尝试的下一种方法将事物简化为更合乎逻辑的网格，但是仍然无法使其正常工作。想象一下TextBlocks 有 30 行。在这里，当运行时，ScrollBar显示，但没有做任何事情，即使文本明显离开边框区域的底部并且您看不到边框区域的底部。

现在这是直接来自我的代码的示例代码，从页面顶部到相关网格的底部： 

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="text" Style="{StaticResource PageHeaderTextStyle}" />
    </Grid>

    <Grid x:Name="PersonViewContent" Grid.Row="1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="5" Width="500" Margin="10,10,10,10">
                <ScrollViewer>
                    <StackPanel>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="270" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Grid Grid.Row="0" Grid.ColumnSpan="2" Margin="10,10,10,10" VerticalAlignment="Bottom">
                                <Image Source="text" AutomationProperties.Name="text" ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="text"/>
                                <TextBlock Text="text" Margin="0,180,0,0" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                <TextBlock Text="text" Margin="0,215,0,0" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Grid>
                            <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="text" Margin="5,0,18,10" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="30"/>
                            <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="text" Margin="5,10,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
                            <TextBlock Grid.Row="3" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="3" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="4" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="4" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="5" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="5" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="6" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="6" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="7" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="7" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="8" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="8" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="9" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="9" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="10" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="10" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="11" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="11" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="12" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="12" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="13" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="13" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="14" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="14" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="15" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="15" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="16" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="16" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="17" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
                            <TextBlock Grid.Row="18" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="18" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="19" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="19" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="20" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="20" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="21" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="21" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="22" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="22" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="23" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
                            <TextBlock Grid.Row="24" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="24" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="25" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="25" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="26" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="26" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="27" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="27" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
                            <TextBlock Grid.Row="28" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
                            <TextBlock Grid.Row="29" Grid.ColumnSpan="2" Text="text" Margin="5,0,0,0" Style="{StaticResource BasicTextStyle}" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" FontSize="16"/>
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
</Border>

无论如何，在这上面旋转我的轮子......希望有一个建议

编辑：这是我想要实现的布局的大致草图：

|=========================================
|back button and title area              |
|                                        |
| |===============|                      |
| |               | Grid View here for   |
| | Picture area  | other stuff that the |
| |               | User can click on    |
| | Start of text |                      |
| | data of all   |                      |
| | textblocks    |                      |
| | 30+ rows      |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| | textblock     |                      |
| |===============|                      |
|========================================|
4

2 回答 2

0

从您提供的 ASCII 图像来看，您似乎可以使用 Grid、StackPanel 和 ScrollViewer 的组合来实现所需的布局。

<Page
x:Class="App15.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App15"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Gray">
    <Grid.RowDefinitions>
        <RowDefinition Height="140" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.ColumnSpan="2" Orientation="Horizontal" Background="DarkCyan">
        <Button Style="{StaticResource BackButtonStyle}" />
        <TextBlock Text="Go Back" Style="{StaticResource PageHeaderTextStyle}" />
    </StackPanel>

    <ScrollViewer Background="DarkOrange" Grid.Row="1">
        <StackPanel Margin="20">
            <Border Background="Crimson" Height="100">
                <TextBlock Foreground="Black">Put picture here</TextBlock>
            </Border>
            <TextBlock>tb1</TextBlock>
            <TextBlock>tb2</TextBlock>
            <TextBlock>tb3</TextBlock>
            <TextBlock>...</TextBlock>
            <TextBlock>tb28</TextBlock>
            <TextBlock>tb29</TextBlock>
            <TextBlock>tb30</TextBlock>
        </StackPanel>
    </ScrollViewer>
    <GridView Background="DarkViolet" Grid.Row="1" Grid.Column="1">
        <GridViewItem>gvi1</GridViewItem>
        <GridViewItem>gvi2</GridViewItem>
        <GridViewItem>gvi3</GridViewItem>
    </GridView>
</Grid>

于 2013-02-05T23:06:15.557 回答
0

好吧，事实证明这并不是我做错了什么。它更多的是我使用的行/列的 Auto 属性。它使该行离开屏幕（不知道为什么），因此滚动条相对没有意义。

基本上，重新做了整个你的做快照和不快照的不同，并且所有的对齐都得到了照顾。

于 2013-02-07T13:24:43.557 回答