我有一个 WrapPanel，我想指定它的最大列数。因此，例如，当我的集合“ObjectCollection”（绑定到此 WrapPanel）仅包含 4 个元素时，WrapPanel 将只有一行。但是，当“ObjectCollection”有 5 个元素时，wrapPanel 将创建另一行来放置第五个元素。（在这种情况下，我的 Max_Columns_Number 是 4）。
问问题
19827 次
4 回答
44
我很确定你不能用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>
于 2013-09-05T12:40:59.163 回答
8
基本上你需要Panel为自己创建一个自定义......现在不要沮丧......这并不难。首先，请查看我提供链接的帖子，这些帖子解释了如何创建自定义Panel：
好的，现在您对创建 custom 有了更多了解Panel，我们可以继续……这就是您需要的：
private int columnCount;
private double leftColumnEdge, rightColumnEdge, columnWidth;
public int ColumnCount
{
get { return columnCount; }
set
{
if (value < 1) value = 1;
columnCount = value;
}
}
此属性将在您声明您Panel的地方使用Resources：
<ItemsPanelTemplate x:Key="AnimatedPanel">
<Controls:AnimatedColumnWrapPanel ColumnCount="3" ... />
</ItemsPanelTemplate>
请注意，您需要在对象中声明它，ItemsPanelTemplate因为这是ItemsPanel属性所期望的：
<ListBox ItemsPanel="{StaticResource AnimatedPanel}" ... />
现在回到Panel... 这是我从MeasureOverrideand方法调用的辅助ArrangeOverride方法：
private void UpdateColumns(int currentColumn, Size finalSize)
{
leftColumnEdge = (finalSize.Width / ColumnCount) * currentColumn;
rightColumnEdge = (finalSize.Width / ColumnCount) * (currentColumn + 1);
columnWidth = rightColumnEdge - leftColumnEdge;
}
不幸的是，我无法为您提供完整的示例，因为我的 customPanel都绑定到AnimatedPanel具有许多附加功能的基类中。但是，您只需要创建MeasureOverride和ArrangeOverride方法即可完成此操作Panel。如果你只是从逻辑上考虑它，它真的没有那么难。
于 2013-09-05T12:46:10.733 回答
1
您可以通过设置环绕面板的宽度来控制列数。我将包装面板的宽度绑定到像 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>
于 2015-08-24T16:13:11.043 回答
1
有时UniformGrid是不够的：
- 当物品的尺寸非常不同时，或
- 当您想要垂直放置项目并且不想使用其他解决方法时
在这个 stackoverflow 帖子中可以找到带有您正在搜索的内容的WrapPanel 。
xml:
<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>
结果：
于 2017-01-31T09:24:04.440 回答