在ScrollViewer中用於動態網格圖像的佈局

Question

我有一個ScrollViewer，其中包含一個Grid圖像。我不確定使用網格是否是正確的選擇。這裏是什麼，我希望它看起來像一個樣機圖片：

紅色方框表示ScrollViewer。裏面是一些佈局容器的類型（Grid此刻）有兩行圖像（綠色正方形），但動態數量的列可以在運行時更改，可以滾動到。另一個條件是我想調整它們的大小，以便6張圖片（只有6張！）始終可見。

所以在XAML：

<ScrollViewer Name="scrollViewer1"> 
     <Grid Name="grid1"></Grid> 
    </ScrollViewer> 

然後用C＃我想我需要動態地添加列。然後收聽scrollViewer1的SizeChanged事件我需要動態計算行和列的大小，以便始終可以看到3個圖像。例如：

ColumnDefinition gridColN = new ColumnDefinition(); 
grid1.ColumnDefinitions.Add(gridColN); 

問題1：動態添加更多的列，使細胞保持越來越小和ScrollViewer內從未滾動，直到有10+列格。

預期結果：最終結果應該是一個水平的圖像流，一次可見6個，當outter容器或窗口調整大小時將調整大小。我試圖動態調整它們的寬度，但將它們設置爲容器寬度的1/3不起作用。

問題：這是正確的方法嗎？我應該在ScrollViewer內使用Grid嗎？我是否必須手動計算尺寸或有沒有辦法讓他們填充容器？

Answer 1

網格寬度應計算爲

grid1.Width = (scrollViewer1.ViewportWidth/3) * grid1.ColumnDefinitions.Count; 
grid1.Height = (scrollViewer1.ViewportHeight/2) * grid1.RowDefinitions.Count; 

這似乎爲我工作：

XAML：

<DockPanel> 
    <ListBox Width="150" DockPanel.Dock="Left" BorderBrush="AliceBlue" BorderThickness="2"> 
     <Button Name="AddColumn_Button" Width="100" Height="25" Content="Add Column" Click="AddColumn_Button_Click" Margin="5"/> 
     <Button Name="AddRow_Button" Width="100" Height="25" Content="Add Row" Margin="5" Click="AddRow_Button_Click" /> 
    </ListBox> 
    <ScrollViewer Name="scrollViewer1" BorderBrush="AliceBlue" BorderThickness="2" SizeChanged="scrollViewer1_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="1"> 
     <Grid Name="grid1" ShowGridLines="True" > 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 
     </Grid> 
    </ScrollViewer> 
</DockPanel> 

後面的代碼：

private void scrollViewer1_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     SizeGrid(); 
    } 

    private void AddColumn_Button_Click(object sender, RoutedEventArgs e) 
    { 
     ColumnDefinition gridColN = new ColumnDefinition(); 
     grid1.ColumnDefinitions.Add(gridColN); 
     SizeGrid(); 
    } 

    private void AddRow_Button_Click(object sender, RoutedEventArgs e) 
    { 
     RowDefinition row = new RowDefinition(); 
     grid1.RowDefinitions.Add(row); 
     SizeGrid(); 
    } 

    private void SizeGrid() 
    { 
     grid1.Width = (scrollViewer1.ViewportWidth/3) * grid1.ColumnDefinitions.Count; 
     grid1.Height = (scrollViewer1.ViewportHeight/2) * grid1.RowDefinitions.Count;   
    }