4

这正确地包裹了 TextBlocks水平：

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <TextBlock Text="one"/>
        <TextBlock Text="two"/>
        <TextBlock Text="thee"/>
        <TextBlock Text="four"/>
    </WrapPanel>
</StackPanel>

但这错误地将我的 UserControls 垂直堆叠在彼此之上（我希望它们像上面的 TextBlocks 一样水平包装）：

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:CustomerSimpleItemView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </WrapPanel>
</StackPanel>

CustomerSimpleItemView：

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>

我必须在我的 UserControl 中做什么才能使它们水平包装？

补充：即使我将用户控件中的所有宽度和高度都更改为自动，它仍然垂直堆叠......：

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>
4

2 回答 2

9

In your second sample, try to use the WrapPanel inside a ItemsPanelTemplate for the ItemsControl, otherwise the ItemsControl uses a StackPanel by default and your WrapPanel doesn't do anything as there is nothing to wrap.

   <StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
        <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
            <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:CustomerSimpleItemView />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
    </StackPanel>
于 2009-05-15T14:57:59.777 回答
3

发生这种情况是因为 ItemsControl 默认使用垂直方向的 StackPanel 对其子对象进行布局。因此，换行面板实际上只布置了一个子项，即 ItemsControl。您不想做的是设置 ItemsControl 的 ItemsPanel 属性，以便使用 WrapPanel 进行布局。您的代码如下所示：

<StackPanel DockPanel.Dock="Top"
            Margin="10"
            HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:"
               Margin="0 0 0 5" />          
    <!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
    <ItemsControl ItemsSource="{Binding CustomerViewModels}"
                  Width="Auto"
                  BorderThickness="0">
        <!-- This is the important part.  Here we set the ItemsPanel template -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <views:CustomerSimpleItemView />
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>            
</StackPanel>
于 2009-05-15T15:01:10.630 回答