指定WPF中WrapPanel的最大列數

Question

我有一個WrapPanel，並且我想指定它的最大列數。因此，例如，當我的Collection「ObjectCollection」（綁定到此WrapPanel）僅包含4個元素時，WrapPanel將只有一行。但是，當「ObjectCollection」將有5個元素時，wrapPanel將創建另一行來放置第五個元素。 （在這種情況下我的Max_Columns_Number是4）。

Answer 1

我很確定你不能用WrapPanel來做，但你可以用UniformGrid來替代。

那個有屬性來指定你想要的行數和列數。

如果將Columns屬性設置爲4，它將在每行中保留4個項目，然後換行到下一個。

<UniformGrid Columns="4"> 
    <!-- In first row --> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 

    <!-- In second row --> 
    <Button Content="test"></Button> 
</UniformGrid> 

Answer 2

基本上你將需要創建一個自定義Panel留給自己......現在不要沮喪......這不是是困難。首先，請看一看，我已經提供了鏈接，該帖子介紹如何創建自定義Panel：

How to create a Custom Layout Panel in WPF

Creating Custom Panels In WPF

好了，現在你知道多一點有關創建自定義Panel S，我們可以繼續......這裏就是你接下來要做的事情：

private int columnCount; 
private double leftColumnEdge, rightColumnEdge, columnWidth; 

public int ColumnCount 
{ 
    get { return columnCount; } 
    set 
    { 
     if (value < 1) value = 1; 
     columnCount = value; 
    } 
} 

將使用這個屬性，你宣佈你PanelResources：

<ItemsPanelTemplate x:Key="AnimatedPanel"> 
    <Controls:AnimatedColumnWrapPanel ColumnCount="3" ... /> 
</ItemsPanelTemplate> 

請注意，您將需要聲明它內一個ItemsPanelTemplate對象，因爲這正是ItemsPanel屬性需要：

<ListBox ItemsPanel="{StaticResource AnimatedPanel}" ... /> 

現在回到Panel ...這裏是我從MeasureOverride和ArrangeOverride方法調用的幫助方法：

private void UpdateColumns(int currentColumn, Size finalSize) 
{ 
    leftColumnEdge = (finalSize.Width/ColumnCount) * currentColumn; 
    rightColumnEdge = (finalSize.Width/ColumnCount) * (currentColumn + 1); 
    columnWidth = rightColumnEdge - leftColumnEdge; 
} 

不幸的是，我不能爲您提供一個完整的例子，因爲我的自定義Panel s都綁在一個基地AnimatedPanel類與許多額外的功能。但是，您只需創建MeasureOverride和ArrangeOverride方法即可完成此Panel。如果你只是從邏輯上思考它，那確實是並不難。

Answer 3

您可以通過設置包裝面板的寬度來控制列數。我將包裝面板的寬度綁定到像Border這樣的容器的ActualWidth。這樣，列數是動態的，並且基於窗口的寬度。

<Border Name="DataBorder" Grid.Row="0" Grid.Column="1" 
     BorderBrush="Navy" BorderThickness="1,2,2,2" 
     Padding="4"> 
     <Grid> 
      <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="*"></RowDefinition> 
       </Grid.RowDefinitions> 

       <StackPanel> 
        <TextBlock Text="{Binding NewPictureCountDisplay}"></TextBlock> 
       </StackPanel> 

       <ListBox Name="NewFilesListBox" Grid.Row="1" 
         ItemsSource="{Binding CreatedFiles}"> 
        <ListBox.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapPanel Orientation="Horizontal" Width="{Binding ElementName=DataBorder, Path=ActualWidth}"></WrapPanel> 
         </ItemsPanelTemplate> 
        </ListBox.ItemsPanel> 
         <ListBox.ItemTemplate> 
          <DataTemplate> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*"></RowDefinition> 
             <RowDefinition Height="Auto"></RowDefinition> 
            </Grid.RowDefinitions> 

            <Image Grid.Row="0" Source="{Binding FullPath}" Width="128" Height="128" Stretch="UniformToFill"></Image> 

            <StackPanel Grid.Row="1" Orientation="Vertical"> 
             <Button Content="Import" Margin="2"></Button> 
             <Button Content="Delete" Margin="2"></Button> 
             <TextBlock HorizontalAlignment="Stretch" Text="{Binding FullPath}" Margin="2"></TextBlock> 
             <TextBlock HorizontalAlignment="Stretch" Text="{Binding ChangeType}" Margin="2"></TextBlock> 
            </StackPanel> 

           </Grid> 
          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox> 

Answer 4

有時UniformGrid是不夠的：

• 當項目有很大的不同尺寸，或當你想項垂直，並且不希望使用
• other workarounds

在this stackoverflow post可以發現一個WrapPanel與你正在尋找的東西。

的XAML：

<loc:WrapPanelWithRowsOrColumnsCount 
    xmlns:loc="clr-namespace:..." 
    Orientation="Vertical" 
    RowsOrColumnsCount="2"> 
    <TextBox Text="Andrew" Margin="2" Height="30" /> 
    <TextBox Text="Betty" Margin="2" Height="40" /> 
    <TextBox Text="Celine" Margin="2" Height="20" /> 
    <TextBox Text="Dick" Margin="2" Height="20" /> 
    <TextBox Text="Enron" Margin="2" Height="30" /> 
    <TextBox Text="Felix" Margin="2" Height="20" /> 
    <TextBox Text="Hanibal" Margin="2" Height="30" /> 
</loc:WrapPanelWithRowsOrColumnsCount> 

結果：