均一なグリッドのアイテムを「内部的に」均等に配置する方法（画像参照）

Question

私はトリッキーな状況を解決するためにtriyngです。 リストボックスはgrid.rowdefinitionとgrid.columnの定義に制約されています。 このリストボックスは、ItemsPanelとしてUniformGridを使用しています。私が得たい効果は、このリストボックスのアイテムは等間隔に表示されますが、ItemsPanelの内側だけで、外側にも表示されないことです。画像の黒い枠線はリストボックスの境界です。アイテムが静的に配置されている場合は、余白を使用して、右、下、左の上余白を設定することができます。しかし、彼らはデータバインディングを使用してdinamically配置されています。私はこのレイアウトをどのように入手するかアイディアを持っていません。 追加情報として、uniformGridはディナム的に配置されていても、常に8つのアイテムを表示することができます。

あなたはどんな考えを持っていますか？ ありがとう！ :)ここで

Answer 1

は、負のマージンを使用してハックソリューションのようになります。

<ListBox ItemsSource="12345678" HorizontalAlignment="Left"> 
    <ListBox.Template> 
     <ControlTemplate TargetType="ListBox"> 
      <Border BorderBrush="Black" BorderThickness="1" ClipToBounds="True"> 
       <!-- Cut off the outer 10 pixels --> 
       <ScrollViewer Margin="-10"> 
        <ItemsPresenter /> 
       </ScrollViewer> 
      </Border> 
     </ControlTemplate> 
    </ListBox.Template> 
    <ListBox.ItemContainerStyle> 
     <!-- Might want to port some selection triggers from the default template --> 
     <Style TargetType="ListBoxItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
         <!-- Default margin --> 
         <ContentPresenter Margin="10"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ListBox.ItemContainerStyle> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Columns="2"/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="Green" BorderThickness="1" Width="100"> 
       <Image Source="http://www.gravatar.com/avatar/c35af79e54306caedad37141f13de30c?s=128&amp;d=identicon&amp;r=PG"/> 
      </Border> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 2

はあなたの問題を解決するためのコンテナとしてItemControlを使用して試してみて、ストレッチイメージクラスで= "UniformToFillの" プロパティ：

<Border Grid.Row="1" Margin="0,5,0,0" BorderThickness="1" BorderBrush="Black"> 
     <ItemsControl ItemsSource="{Binding AvailableImages}">    
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Image Source="{Binding Path=.}" Stretch="UniformToFill"/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Border>