將ScrollViewer添加到它時，網格更改寬度

Question

我是Windows商店應用程序的絕對初學者，今天我試圖在我嘗試創建的應用程序中添加ScrollViewer。所以，當我運行下面的代碼左欄中需要90％的屏幕寬度，右列將寬度的10％：

<Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="9*"/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Column="0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="0.2*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <Grid Grid.Row="0"> 
        <TextBlock Text="Header" FontFamily="Segoe UI" FontSize="50" VerticalAlignment="Center" FontStyle="Italic"/> 
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="SubHeader :" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="30" FontStyle="Italic"/> 
       </Grid> 

       <Grid Grid.Row="1" Background="Transparent" HorizontalAlignment="Left" Height="526" Margin="90,60,0,0" VerticalAlignment="Top"> 
        <TextBlock FontSize="50" Text="This is left Column"/> 
       </Grid> 
      </Grid> 
      <Grid Grid.Column="1"> 
       <Grid Width="800"> 
        <Grid.Background> 
         <SolidColorBrush Color="Gray" /> 
        </Grid.Background> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="0.2*"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 

        <TextBlock Grid.Row="0" Text="Heading" FontFamily="Segoe UI" FontSize="40" Margin="80,36,0,0" FontStyle="Italic" Foreground="Black"/> 
        <Grid Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"> 
         <TextBlock FontFamily="Segoe UI" FontSize="30" Text="This is Right Column" Margin="60,0,0,0" Foreground="Black"/> 

        </Grid> 
       </Grid> 
      </Grid> 

     </Grid> 

但是當我添加的ScrollViewer它左邊的列的寬度減小和右寬度列增加。

<ScrollViewer HorizontalAlignment="Left" Margin="0" HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="9*"/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Column="0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="0.2*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <Grid Grid.Row="0"> 
        <TextBlock Text="Header" FontFamily="Segoe UI" FontSize="50" VerticalAlignment="Center" FontStyle="Italic"/> 
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="SubHeader :" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="30" FontStyle="Italic"/> 
       </Grid> 

       <Grid Grid.Row="1" Background="Transparent" HorizontalAlignment="Left" Height="526" Margin="90,60,0,0" VerticalAlignment="Top"> 
        <TextBlock FontSize="50" Text="This is left Column"/> 
       </Grid> 
      </Grid> 
      <Grid Grid.Column="1"> 
       <Grid Width="800"> 
        <Grid.Background> 
         <SolidColorBrush Color="Gray" /> 
        </Grid.Background> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="0.2*"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 

        <TextBlock Grid.Row="0" Text="Heading" FontFamily="Segoe UI" FontSize="40" Margin="80,36,0,0" FontStyle="Italic" Foreground="Black"/> 
        <Grid Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"> 
         <TextBlock FontFamily="Segoe UI" FontSize="30" Text="This is Right Column" Margin="60,0,0,0" Foreground="Black"/> 

        </Grid> 
       </Grid> 
      </Grid> 

     </Grid> 
    </ScrollViewer> 

我想我添加scrollviewer的方式是錯誤的。任何人都可以請指導我如何在這段代碼中添加水平scrollviewer？

Answer 1

當然，添加滾動查看器時，列寬將發生變化。這是因爲您的專欄正在嘗試適應其中的任何內容，以便滾動查看器可以向其滾動滾動。 嘗試從內部網格中移除內容，您將看到列寬保留。如果要列寬度保持爲9：1的比例，你將不得不宣佈的ScrollViewer爲每一列，如這樣：

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="9*" /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
        HorizontalScrollMode="Auto" 
        VerticalScrollBarVisibility="Disabled" 
        VerticalScrollMode="Disabled"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="0.2*" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Grid> 
       <TextBlock VerticalAlignment="Center" 
          FontFamily="Segoe UI" 
          FontSize="50" 
          FontStyle="Italic" 
          Text="Header" /> 
       <TextBlock HorizontalAlignment="Left" 
          VerticalAlignment="Bottom" 
          FontFamily="Segoe UI" 
          FontSize="30" 
          FontStyle="Italic" 
          Text="SubHeader :" 
          TextWrapping="Wrap" /> 
      </Grid> 

      <Grid Grid.Row="1" 
        Height="526" 
        Margin="90,60,0,0" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Background="Transparent"> 
       <TextBlock FontSize="50" Text="This is left Column" /> 
      </Grid> 
     </Grid> 
    </ScrollViewer> 
    <ScrollViewer Grid.Column="1" 
        HorizontalScrollBarVisibility="Auto" 
        HorizontalScrollMode="Auto" 
        VerticalScrollBarVisibility="Disabled" 
        VerticalScrollMode="Disabled"> 
     <Grid> 
      <Grid> 
       <Grid.Background> 
        <SolidColorBrush Color="Gray" /> 
       </Grid.Background> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="0.2*" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 

       <TextBlock Margin="80,36,0,0" 
          FontFamily="Segoe UI" 
          FontSize="40" 
          FontStyle="Italic" 
          Foreground="Black" 
          Text="Heading" /> 
       <Grid Grid.Row="1" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"> 
        <TextBlock Margin="60,0,0,0" 
           FontFamily="Segoe UI" 
           FontSize="30" 
           Foreground="Black" 
           Text="This is Right Column" /> 

       </Grid> 
      </Grid> 
     </Grid> 
    </ScrollViewer> 
</Grid> 

在一個旁註，沒有必要明確設置Grid.Row或Grid.Column至，因爲這是它們的默認值。