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，滾動查看器，看不到它的工作

回答

相關問題