wpf響應列表框/網格

Question

我想在WPF中重新創建以下響應網格（請參閱下面的'期望行爲'鏈接）。但是，我正在努力尋找實現這一目標的最佳方式。

理想情況下，我想要一個水平的瓷磚大小的列表和大小縮小以適應可用空間。作爲一個起點，我有一個包裝的列表框，但在重新調整大小時，我留下了空白區域。任何指針將不勝感激。

當前畫布面板：

：

Desired behavior

我當前的代碼：

<Window x:Class="WrappingListbox.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    Title="Wrapping Listbox" 
    Width="525" 
    Height="350" 
    mc:Ignorable="d"> 
<Grid> 

    <ListBox x:Name="listbox1" ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel IsItemsHost="True" Orientation="Vertical" /> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Margin="20" HorizontalAlignment="Center"> 
        <Viewbox> 
         <Grid x:Name="backgroundGrid" 
           Width="60" 
           Height="60"> 
          <Rectangle x:Name="Rect" Fill="green" /> 
         </Grid> 
        </Viewbox> 
       </StackPanel> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 


    <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" /> 


</Grid> 

Answer 1

這將解決大小你的問題（由項目的尺寸綁定到列表框的尺寸，但我認爲你需要更多的工作就可以了，但這裏僅僅是個開始）

// add this in your window definition 
xmlns:Local="clr-namespace:WpfApplication2" 
//then here is your listbox 
<ListBox x:Name="listbox1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" 
       ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
      <ListBox.Resources> 
       <Local:DimentionConverter x:Key="Converter" /> 
      </ListBox.Resources> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel IsItemsHost="True" Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Margin="20" HorizontalAlignment="Center" VerticalAlignment="Center" > 
         <Viewbox> 
          <Grid x:Name="backgroundGrid" 
          Height="{Binding RelativeSource={RelativeSource AncestorType=ListBox},Path=ActualWidth,Converter={StaticResource ResourceKey=Converter},ConverterParameter=5}" 
          Width="{Binding RelativeSource={RelativeSource AncestorType=ListBox},Path=ActualWidth,Converter={StaticResource ResourceKey=Converter},ConverterParameter=5}" > 
           <Rectangle x:Name="Rect" Fill="green" /> 
          </Grid> 
         </Viewbox> 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 

public class DimentionConverter : IValueConverter 
    { 
     public object Convert(object value, Type targetType, 
       object parameter, CultureInfo culture) 
     { 
      return (double)value/double.Parse(parameter as string); 
     } 

     public object ConvertBack(object value, Type targetType, 
      object parameter, CultureInfo culture) 
     { 
      return null; 
     } 
    } 

重要通知：你不能做它沒有轉換器，你必須用它來決定你想要你的物品有多大，相比你的物品託管列表框你可以根據需要更改值我以5作爲例子