温特& Xaml:Grid with Scrollbar ...试过Stackpanel,Scrollviewer,看不到让它工作

时间:2013-02-05 03:14:42

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

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

下一个方法我尝试将简化的东西简化成更逻辑的网格,但仍然无法使其正常工作。想象一下TextBlock那里有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     |                      |
| |===============|                      |
|========================================|

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

事实证明,特别是我做错了。它更像我正在使用的行/列的Auto属性。它使行离开屏幕(不确定原因)因此滚动条相对没有意义。

基本上,重新做了整个你的快照而不是啪啪啪啪不同,并且已经完成所有的对齐。