2016-06-30 4 views
0

、私はこの画像に例示されているものを達成しようとしています:グループ項目

enter image description here

しかし、現在WrapPanelは次のようにラップ: enter image description here

基礎となるモデルは次のようになります。

public class ViewModel 
{ 
    public ObservableCollection<IRectangle> Rectangles { get; set; }; 
} 

public class GreenRectangle : IRectangle 
{ 

} 

public class BlueRectangle : IRectangle 
{ 

} 

public interface IRectangle 
{ 

} 

XAMLの外観

<ListBox ItemsSource="{Binding Rectangles}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel IsItemsHost="True" Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.Resources> 
     <DataTemplate DataType="{x:Type GreenRectangle}"> 
      <Border Background="Green" Height="100px" Width="100px" /> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type BlueRectangle}"> 
      <Border Background="Green" Height="100px" Width="20px" /> 
     </DataTemplate> 
    </ListBox.Resources> 
</ListBox> 

アプリケーションは、WPF、PRISM、C#6.0、.NET 4.0、およびMVVMパターンで構築されています。

  • WrapPanelの幅と高さは、実行時に変更することがあります。ここでは

    は、いくつかの追加要件/情報です。

  • 長方形の幅と高さは固定されています。
  • 基本モデルは、Rectangleコレクションのアイテムが常に交互になること、コレクションが常にGreenRectangleで始まり、すべてのGreenRectangleの直後に必ず1つのBlueRectangleが続くことを保証します。
  • GreenRectangleとBlueRectangleは別々に選択する必要があります。

最初の画像に描かれていることを達成する方法はありますか? WrapPanelに、BlueRectangleの後、または偶数項目のインデックスの後に常に折り返すように何とか伝えることはできますか?または何らかの形で「グループ化」するか、GreenRectangleとBlueRectangleをペアにしますか?私はCollectionViewを使用するように見ましたが、私が達成しようとしているものは解決していないようです。

ご意見やご提案は大歓迎です。

+2

緑色+青色はこのための単一項目でなければなりません。そうでなければ、[独自のパネル](http://www.wpftutorial.net/CustomLayoutPanel.html)で項目ペアのレイアウトを調整したり、 winforms ['FlowLayoutPanel' break](http://stackoverflow.com/q/5054622/1997232)に似ています。 – Sinatr

+0

あなたが本当に安い解決策を見つけたら、WrapPanelにMaxWidthが2つの青と緑の四角形の幅であることを伝えてください。それから、あなたが望むようにラップする必要があります。 – Logan

+0

答えがあなたを助けてくれたと思えば、[その答えを受け入れる]ことができます(http://meta.stackexchange.com/a/5235)。 – lokusking

答えて

2

あなたが探している影響を一貫して達成するには、WrapPanelの代わりにUniformGridに切り替えます。

そこには、私は同様の問題を持つ複数の記事が同じことUniformGridを指していることを発見した行の量とColumns

関連する問題