Почему WrapPanel оборачивает TextBlocks горизонтально, а UserControls - вертикально? - PullRequest
Новая
       11

Почему WrapPanel оборачивает TextBlocks горизонтально, а UserControls - вертикально?

4 голосов
/ 15 мая 2009

правильно оборачивает текстовые блоки по горизонтали: 

<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 вертикально , сложенными друг на друга ( Я хочу, чтобы они были горизонтально обернуты, как TextBlock выше ): 

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

Ответы [ 2 ]

9 голосов
/ 15 мая 2009

Во втором примере попробуйте использовать WrapPanel внутри ItemsPanelTemplate для ItemsControl, в противном случае ItemsControl использует StackPanel по умолчанию, а ваша WrapPanel ничего не делает, поскольку нечего переносить. 

   <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>
3 голосов
/ 15 мая 2009

Это происходит потому, что ItemsControl по умолчанию использует StackPanel в вертикальной ориентации для размещения дочерних объектов. Таким образом, панель обертки фактически выкладывает только одного дочернего элемента, который является ItemsControl. То, что вы не хотите делать, это установить свойство ItemsPanel ItemsControl, чтобы оно использовало 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>
...