有沒有辦法在wpf wrappanel中顯示不同寬度的項目

Question

我想要的東西像一個Windows 8的瓷磚，並希望顯示不同寬度和/或高度的瓷磚。 WrapPanel使每列的寬度和高度相等，在較小的物品周圍留下空白區域。有沒有一種方法或面板來顯示項目很像StackPanel其中每個項目可以有單獨的尺寸和包裝像WrapPanel？

編輯： 這是我的ItemsControl。我用簡單的Border和TextBlock替換了Tile DataTemplate。寬度爲auto，除了WrapPanel之外，Tiles看起來很好，可以創建相同大小的單元格。

  <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> 

可以從圖像看到，每列的width是最寬的項目的寬度。

如果我明確地在邊框上設置寬度，事情會變得更加難看。

Answer 1

你正在尋找的行爲是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。不要相信我？嘗試將其中一個Rectangle'sHeight屬性設置爲較大的值，您將觀察到行大小將增加，並且Rectangles不再垂直排列。

讀你的意見，我覺得上手的最佳方式是做到以下幾點：

• 有一個WrapPanel在水平方向上勾畫出其內容。
• 物品應該有制服Height。
• 將WrapPanel的Height限制爲一定的大小，以便不會獲得垂直滾動條。

的高度你WrapPanel應使用下列公式計算出：

（（項目的高度+上邊距+下邊距）x行數））

每個項目的寬度也需要一些思考，以便面板將項目像地鐵界面一樣水平放置（排列而不是交錯）。

有兩種瓷磚尺寸;小的寬度是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> 

將會產生以下結果：

這應該給你足夠的信息來開始這個重新因素成完全控制。如果你這樣做，那麼請記住以下幾點：

• 佈局屬性應該被計算，而不是硬編碼（小項的大小，大項目大小，缺口等），所以，如果你想改變，例如，邊距，佈局仍然可以正常工作（IE仍然排列齊整）。
• 我會限制可以顯示的「瓷磚」的數量（在當前的例子中，如果瓷磚不適合佈局，他們只是隱藏，這可能不是你想要的）。