2

の画像ScrollViewerを含む がGridあります。グリッドを使用することが正しい選択であるかどうかはわかりません。これは、私がそれをどのように見せたいかのモックアップ画像です:

モックアップ

赤いボックスは を表しますScrollViewer。その中には、 2 行の画像 (緑色の四角形) を持つある種のレイアウト コンテナー (Grid現時点では) がありますが、実行時に変化し、スクロールできる動的な量の列があります。もう 1 つの条件は、6 つの画像 (そして 6 つだけ!) が常に表示されるようにサイズを変更することです。

したがって、XAML では次のようになります。

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

次に、C# を使用して、列を動的に追加する必要があると思います。次に、scrollViewer1のSizeChangedイベントを聞いて、行と列のサイズを動的に計算して、3 つの画像が常に表示されるようにする必要があります。例えば：

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

問題 #1:列を動的に追加すると、グリッド セルがどんどん小さくなり、ScrollViewer10 列以上になるまでスクロールしません。

期待される結果:最終結果は、外側のコンテナーまたはウィンドウのサイズが変更されるとサイズが変更される、一度に 6 つの画像が表示される水平方向のストリームである必要があります。幅を動的に変更しようとしていますが、コンテナ幅の 1/3 に設定してもうまくいきません。

質問:これは正しいアプローチですか? Gridの中で使用する必要がありScrollViewerますか？サイズを手動で計算する必要がありますか、それともコンテナーを満たす方法はありますか?

4

1 に答える 1

2

グリッド幅は次のように計算する必要があります

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;        
    }
于 2013-07-11T20:23:03.403 に答える