Winrt＆Xaml：网格与滚动条...尝试Stackpanel，滚动查看器，看不到它的工作

我想在XAML的WinRT应用程序的网格上获得滚动条。基本的页面设置为顶部和中间部分提供了一个整体网格。在中间部分里面，我放了另一个2行2列的网格。在该网格的第1行第1列中，我想将边框与另一个网格放在数据内部进行显示，并在边框区域内有滚动条。Winrt＆Xaml：网格与滚动条...尝试Stackpanel，滚动查看器，看不到它的工作

我都绞尽脑汁在此进行，大约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>

下一个方法我试过的东西简化成一个更合乎逻辑的网格，但是，仍然无法得到它的工作。想象一下有30行的TextBlock。在这里，当运行时，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  |      | 
| |===============|      | 
|========================================|

来源

2013-02-05 RallyRabbit

你有可能发布/上传你想要实现的UI模型吗？描述后我遇到了麻烦。 –

我同意吉姆的说法。我清理了一下你的代码，但它没有什么意义。值得注意的一件事是，不是'ScrollViewer'具有大量的'TextBlock's，使用类似于ListView的东西几乎总是更好 - 它将启用列表虚拟化，因此所有这些TextBlocks不需要加载同时也为了让你的代码更清洁。请尝试勾画您想要的设计并将其添加到编辑的问题中以获得更多帮助。 –

无法取得样品。粗略地说，我正在寻找这个。想象一下Windows应用商店的XAML页面。左侧包含占据屏幕1/3左右的边界区域。里面包含一张照片以及30多行信息。该区域在边界区域内可滚动以供用户上下滚动以查看希望的那个区域的任何部分。屏幕的其余部分是tile的gridview，用户可以点击它来执行某种或另一种操作。让我看看是否可以插入基于文本的模型。 – RallyRabbit

从您提供的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-05 23:06:15

工作，但我需要整个列1区域和每行两个文本块的边框。这就是为什么我在边界内制作网格来布局我在边界地区需要的东西。图片colspan 2，所有其他信息2每ro1，每列1。我尝试了listview，但是，每个listview必须在一个水平的堆栈面板中放置两个文本块，然后每个条目的边距都必须弄乱。似乎应该有办法做边界scrollview stackpanel网格stackpanel/scrollviewer/border/....我编辑我原来的帖子，以列出此代码... as is – RallyRabbit

那么它原来，这是没有什么我做错了特别。它更多的是我使用的行/列的Auto属性。它使行离开屏幕（不知道为什么），因此滚动条相对毫无意义。

基本上，重新做你的整个拍摄对齐没有不同，并有所有的对齐照顾。

来源

2013-02-07 13:24:43 RallyRabbit

Winrt＆Xaml：网格与滚动条...尝试Stackpanel，滚动查看器，看不到它的工作

回答

相关问题