Winrt & Xaml: Grid with Scrollbar ... 试过 Stackpanel、Scrollviewer，看不到让它工作答案

【问题标题】：Winrt & Xaml: Grid with Scrollbar ... tried Stackpanel, Scrollviewer, can't see to get it to workWinrt & Xaml: Grid with Scrollbar ... 试过 Stackpanel、Scrollviewer，看不到让它工作
【发布时间】：2013-02-05 03:14:41
【问题描述】：

我正在尝试使用 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     |                      |
| |===============|                      |
|========================================|

【问题讨论】：

您是否有机会发布/上传您想要实现的 UI 模型？我无法按照说明进行操作。
我同意吉姆的观点。我稍微清理了你的代码，但它没有多大意义。值得注意的一件事是，与带有大量TextBlocks 的ScrollViewer 相比，使用ListView 之类的东西几乎总是更好，这将启用列表虚拟化，因此不需要加载所有这些TextBlocks同时也让你的代码更干净。请尝试绘制您想要的设计并将其添加到已编辑的问题中以获得更多帮助。
无法放入样品。粗略地说，我正在寻找这个。想象一个用于 Windows 应用商店应用的 XAML 页面。左侧包含一个边框区域，占屏幕的 1/3 左右。里面包含一张照片以及 30 多行信息。该区域在边界区域内是可滚动的，供用户上下滚动以查看该区域的任何部分。屏幕的其余部分是瓦片的网格视图，用户可以单击这些瓦片来执行某种或另一种操作。让我看看是否可以插入基于文本的模型。

标签： xaml windows-runtime winrt-xaml scrollviewer stackpanel

【解决方案1】：

从您提供的 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>

【讨论】：

这行得通，但我需要整个第 1 列区域周围的边框和每行两个文本块。这就是为什么我在边界内制作了一个网格以在边界区域布置我需要的东西。图片 colspan 2，所有其他信息 2 每 ro1，每列 1。我尝试了 listview，但是，每个 listview 的两个文本块必须布置在水平堆栈面板中，然后每个条目的边距都必须弄乱。似乎应该有一种方法可以做边框滚动视图堆栈面板网格堆栈面板/滚动查看器/边框/ ...。我编辑了我的原始帖子以列出此代码...原样

【解决方案2】：

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

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

【讨论】：