18

項目 (すべて同じサイズ) を垂直に (ScrollViewer を使用して) リストする必要があります。コンテナーがx列を表示するのに十分な大きさの場合、項目をx列に広げたい

私は最初にそれを試しました：

<ScrollViewer>
    <toolkit:WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="100">
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="5" />
    </toolkit:WrapPanel>
</ScrollViewer>

結果- WrapPanel は希望どおりに機能しますが、アイテムは「左から右」(垂直方向ではありません) に並べられています

次に、WrapPanel の方向を「垂直」に設定しようとしました。

結果- 項目が縦に並べられていますが、複数の列に分散されていません。

アイテムをレンダリングする方法は次のとおりです。

コントロールのサイズに応じて列を作成/削除するために、コントロールのサイズを監視するコードを作成する必要はありません。

4

5 に答える 5

10

に設定OrientationするVertical場合は、レンダリングの高さも設定する必要があります。たとえば、WrapPanel、Height="150"。

于 2012-07-05T13:18:25.633 に答える
3

ついに機能するものを手に入れましたが、コードが必要です。それを機能させるには、WrapPanelの高さのサイズを変更する必要があるとあなたが言うとき、私は皆さんに同意します。これが私の解決策です：

<ScrollViewer x:Name="scroll1" SizeChanged="ScrollViewer_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <toolkit:WrapPanel x:Name="wp1" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" ItemHeight="30" ItemWidth="250" >
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="5" />
        <Button Content="6" />
        <Button Content="7" />
        <Button Content="8" />
    </toolkit:WrapPanel>
</ScrollViewer>

これがCodeBehindです：

private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
{
    // Stupid magical number because ViewPortHeight is sometimes not accurate
    Double MAGICALNUMBER = 2;

    // Ensure ViewPortSize is not 0
    if (scroll1.ViewportWidth <= MAGICALNUMBER || scroll1.ViewportHeight <= MAGICALNUMBER)
        return;

    Size contentSize = new Size(scroll1.ViewportWidth - MAGICALNUMBER, scroll1.ViewportHeight - MAGICALNUMBER);
    Size itemSize = new Size(wp1.ItemWidth, wp1.ItemHeight);

    Size newSize = CalculateSizeBasedOnContent(contentSize, wp1.Children.Count, itemSize);

    wp1.Width = newSize.Width;
    wp1.Height = newSize.Height;
}


private Size CalculateSizeBasedOnContent(Size containerSize, int itemsCount, Size itemSize)
{

    int iPossibleColumns = (int)Math.Floor(containerSize.Width / itemSize.Width);
    int iPossibleRows = (int)Math.Floor(containerSize.Height / itemSize.Height);

    // If all items can fit in first column without scrolling (or if container is narrow than the itemWidth)
    if (itemsCount <= iPossibleRows || containerSize.Width < itemSize.Width)
    return new Size(itemSize.Width, (itemsCount * itemSize.Height));

    // If all items can fit in columns without scrollbar
    if (iPossibleColumns * iPossibleRows > itemsCount)
    {
    int columnsNeededForDisplay = (int)Math.Ceiling((itemsCount/(Double) iPossibleRows));
    return new Size(columnsNeededForDisplay * itemSize.Width, containerSize.Height);
    }

    // Here scrolling is needed even after spreading in columns
    int itemsPerColumn = (int)Math.Ceiling(wp1.Children.Count / (Double)iPossibleColumns);
    return new Size(containerSize.Width, itemsPerColumn * itemSize.Height);

}
于 2012-07-06T12:49:00.033 に答える
2

WrapPanelその種の動作は、その定義なしでは不可能ですHeight

使用できる代替手段の 1 つは、とGridで、適合する列の数を計算し、グリッドの行/列の定義と各オブジェクトの/をコード ビハインドに設定します。きれいではありませんが、組み立てるのがかなり簡単で、うまくいくはずです。OnLoadedOnSizeChangedGrid.RowGrid.Column

もう 1 つのオプションは、必要に応じて項目を配置する独自のカスタム パネルを作成することです。すでにそれを行っているオンラインで入手可能なものを見つけることができるかもしれません

于 2012-07-05T18:03:06.870 に答える
1

でこれを行う唯一の方法WrapPanelは、 を明示的に設定することHeightです。

左側の列が右側の列よりも多くの項目を持つように、項目を列全体に均等に分散させたいようです。それが必要な場合は、独自のカスタム パネルを作成する必要があります。これを見て、開始方法を確認してください。ItemWidth および ItemHeight 依存関係プロパティが必要であり、ItemWidth と使用可能な幅を使用して、使用できる列の数を計算します。

于 2012-07-05T17:54:26.743 に答える