11

私はWindows8タイルのようなものを試していて、さまざまな幅や高さのタイルを表示したいと思っています。WrapPanel各列の幅と高さを等しくし、小さいアイテムの周囲に空白を残します。StackPanel各アイテムが個別の寸法を持ち、のように折り返されるようなアイテムを表示する方法やパネルはありWrapPanelますか？

編集：これは私のItemsControlです。TileDataTemplateを単純なBorderとに置き換えましたTextBlock。幅はautoで、タイルはWrapPanel同じサイズのセルを作成する以外は問題なく表示されます。

            <ItemsControl ItemsSource="{Binding Path=Contents}" HorizontalContentAlignment="Left">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Background="#B1DBFC" Height="200px" BorderBrush="#404648" Margin="5">
                        <TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

WrapPanel

画像から、width各列のが最も幅の広いアイテムの幅であることがわかります。

境界線に幅を明示的に設定すると、状況はさらに醜くなります。 幅が設定されているアイテム

4

1 に答える 1

10

次のサンプルからわかるように、探している動作はのデフォルトの動作です。WrapPanel

<WrapPanel >
    <WrapPanel.Resources>  
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Width"
                    Value="80" />
            <Setter Property="Height"
                    Value="80" />
            <Setter Property="Margin"
                    Value="3" />
            <Setter Property="Fill"
                    Value="#4DB4DD" />
        </Style>
    </WrapPanel.Resources>

    <Rectangle Width="150" />
    <Rectangle />
    <Rectangle />
    <Rectangle />
    <Rectangle Width="200"/>
    <Rectangle />
    <Rectangle />
    <Rectangle />
    <Rectangle  Width="220"/>
    <Rectangle />
    <Rectangle />

</WrapPanel>

これにより、次の結果が生成されます。

ここに画像の説明を入力してください

ご覧のとおり、各アイテムの幅は尊重されています。

問題は、テンプレートでの方向WrapPanelを設定することによって発生します。Verticalこれは、アイテムを左から右ではなく上から下にHeightレイアウトすることです。つまり、設定する必要があるのはプロパティです（または、私の例のように水平レイアウトに戻すことができます）。

出力を、パネルが水平方向に設定されているスクリーンショットと比較します。各行は、最も高いサイズですRectangle。私を信じないの？プロパティの1つをより大きな値に設定してみてくださいRectangle's Height。行のサイズが大きくなり、Rectangles垂直方向に整列しなくなることがわかります。

コメントを読む始めるための最良の方法は、次のことを行うことだと思います。

  • WrapPanelコンテンツを水平方向にレイアウトするを用意します。
  • アイテムは均一でなければなりませんHeight。
  • Heightのを特定のサイズに制限して、WrapPanel垂直スクロールバーが表示されないようにします。

あなたの身長はWrapPanel、次の式を使用して計算する必要があります。

（（アイテムの高さ+上マージン+下マージン）x行数））

パネルがメトロインターフェースのようにアイテムを水平に配置するように（千鳥ではなく並べて）、各アイテムの幅にも少し注意が必要です。

2つのタイルサイズがあります。小さい方は幅80px、大きい方は幅166pxです。大きなタイルの幅は次のように計算されます。

（アイテム幅* 2）+（左マージン+右マージン）

これにより、タイルが正しく整列します。

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

<ScrollViewer HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Disabled">
    <StackPanel Orientation="Horizontal"
                Margin="10,0">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Rectangle}">
                <Setter Property="Width"
                        Value="80" />
                <Setter Property="Height"
                        Value="80" />
                <Setter Property="Margin"
                        Value="3" />
                <Setter Property="Fill"
                        Value="#4DB4DD" />
            </Style>
            <Style TargetType="{x:Type WrapPanel}">
                <Setter Property="Margin"
                        Value="0,0,25,0" />
                <Setter Property="MaxWidth"
                        Value="516" />
            </Style>
        </StackPanel.Resources>
        <WrapPanel Height="258">
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
        </WrapPanel>
        <WrapPanel Height="258">
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
        </WrapPanel>
    </StackPanel>
</ScrollViewer>

これにより、次の結果が生成されます。

ここに画像の説明を入力してください

これにより、これを完全な制御にリファクタリングし始めるのに十分な情報が得られるはずです。これを行う場合は、次の点に注意してください。

  • レイアウトプロパティ（小さいアイテムサイズ、大きいアイテムサイズ、ギャップなど）は、ハードコーディングするのではなく計算する必要があります。これにより、マージンなどを変更する場合でも、レイアウトは正しく機能します（つまり、タイルは引き続き整列します）。 ）。
  • 表示できる「タイル」の数を制限します（現在の例では、タイルがレイアウトに収まらない場合は、単に非表示になっているため、おそらく必要なものではありません）。
于 2012-10-28T07:48:34.543 に答える