レスポンスグリッドとしてItemsControlに動的データを表示

Question

私はビジネスとクライアントがサイト上でまともな稼働時間を維持するためにホストしているウェブサイトの動作状況を監視することができるアプリを書いています。

私が行っアプリのほとんどを持っているが、私は、私はItemsControlにしてやっているUI上で、各サイトのステータスをレンダリングする際にレイアウト暗礁のビットをヒットしました：

<ItemsControl ItemsSource="{Binding Sites, UpdateSourceTrigger=PropertyChanged}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <materialDesign:Card Margin="5" Width="220" Padding="5"> 
       <StackPanel> 
        <TextBlock HorizontalAlignment="Center" 
         FontSize="20" 
         Style="{DynamicResource MaterialDesignHeadlineTextBlock}" 
         Text="{Binding Name}" 
         TextWrapping="WrapWithOverflow"/> 
        <materialDesign:PackIcon 
         HorizontalAlignment="Center" Kind="Web" 
         Visibility="{Binding OkayIconVisibility}" 
         Height="50" Width="50" /> 
        <materialDesign:PackIcon 
         HorizontalAlignment="Center" Kind="Alert" 
         Visibility="{Binding AlertIconVisibility}" 
         Height="50" Width="50" /> 
        <TextBlock HorizontalAlignment="Center" 
         Text="{Binding Status}" 
         TextWrapping="WrapWithOverflow"/> 
       </StackPanel> 
      </materialDesign:Card> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

これは、それらが互いに重なり合うだけであることを除いて、機能します。

私が好むのは、オーバーフローでラップする水平スタックです。

ウィンドウはMinWidth="450"です。少なくとも2つのサイトが並んでいる可能性があり、サイト3と4がそれらの下に移動する可能性があります。

カスタムItemsControlを作成する、またはItemsControlのテンプレートとしてグリッドを設定する方法については、いくつかの記事を見てきましたが、ほとんどの場合、固定された数の項目で作業しやすくなっています。

私はここでどのように進むべきかについて非常に迷っています。 ItemsControl内のアイテムのコンテナをセットアップすることができれば、少なくとも私はそれに対応できるので、私には完全に合っています。それは、私はこれについてどうやって行くのか分かりません。

Answer 1

あなたはこのようItemsControl.ItemsPanelとしてWrapPanelを使用することができます。

<ItemsControl ItemsSource="{Binding Sites, UpdateSourceTrigger=PropertyChanged}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel></WrapPanel> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    ... 
</ItemsControl> 

これは、水平にあなたのSiteのアイテムをスタックし、あなたがそれを好むよう、それがオーバーフローしたときにアイテムをラップします。