在 WPF 中使 StackPanel 方向水平

Make a StackPanel Orientation Horizontal in WPF

提问by Mehrdad Kamelzadeh

I have this xamlcode in a View

我有这个xaml代码View

<StackPanel>
    <Button Content="I am IRON" />
    <ListView ItemsSource="{Binding Path=MeasuringDeviceCommunicators}">
        <ListView.ItemTemplate>              
            <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Name}"/>
            </StackPanel>
        </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

The ItemSourceof the ListViewis bound to a Listin my ViewModel(as shown in the code)

所述ItemSource的ListView结合于List在我的ViewModel（如图所示在代码）

When I run the application all my TextBlocksare shown vertically even though I have set the Orientationof the inner StackPanel to Horizontal.

当我运行应用程序时，TextBlocks即使我已将Orientation内部 StackPanel 的 设置为Horizontal.

回答by Cédric Bignon

To change the layout of a ListView, use the ItemsControl.ItemsPanelproperty:

要更改 a 的布局ListView，请使用以下ItemsControl.ItemsPanel属性：

<StackPanel>
    <Button Content="I am IRON" />
    <ListView ItemsSource="{Binding Path=MeasuringDeviceCommunicators}"  >
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <!-- Here is the panel that will contain the items -->
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <!-- Your item Template is here -->
                <TextBlock Text="{Binding Path=Name}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

You also may want to use a VirtualizingStackPanelinstead of StackPanel, it may improve performance (if you have lot of items to show).

您可能还想使用VirtualizingStackPanel代替StackPanel，它可能会提高性能（如果您有很多项目要显示）。

Update

更新

If you want to add a list in each item of your stack panel, you can do it by modifying the ItemTemplate(which represents how each item is displayed).

如果您想在堆栈面板的每个项目中添加一个列表，您可以通过修改ItemTemplate（代表每个项目的显示方式）来实现。

For example:

例如：

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="8"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="{Binding Path=Name}"/>

             <!-- Displays the tags (or whatever you want) -->
            <ListView Grid.Column="2" ItemsSource="{Binding Tags}"/>
        <Grid>
    </DataTemplate>
</ListView.ItemTemplate>

To sum up, the ListViewhas 3 interesting properties to define how it is rendered:

总而言之，ListView有 3 个有趣的属性来定义它的呈现方式：

• ItemsControl.ItemTemplate: Represents how the items in the list are rendered
• ItemsControl.ItemsPanel: Represents the layout of the list (the position and size of the items in the list). You can use StackPanel, VirtualizingStackPanel, WrapPanel, ...
• Control.Template: Represents how the whole list is rendered

• ItemsControl.ItemTemplate: 表示列表中的项目是如何呈现的
• ItemsControl.ItemsPanel：表示列表的布局（列表中项目的位置和大小）。您可以使用StackPanel, VirtualizingStackPanel, WrapPanel, ...
• Control.Template: 表示整个列表的呈现方式

Here is a code using all these properties:

这是使用所有这些属性的代码：

<ListView>
    <ListView.Items>
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
        <Button Content="Button 3"/>
        <Button Content="Button 4"/>
    </ListView.Items>

    <!-- The layout of the list (position and size of the elements -->
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- StackPanel means : the elements are rendered in stack, either horizontally or vertically (the way it is rendered in StackPanel is defined in code -->
            <StackPanel Orientation="Vertical" Background="LightCoral"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <!-- How I want the list to look like? -->
    <ListView.Template>
        <ControlTemplate>
            <!-- A blue background with a green border -->
            <Border Background="LightBlue" BorderBrush="DarkGreen" BorderThickness="5">
                <!-- ItemsPresenter "represents" the ItemsPanel defined above -->
                <ItemsPresenter HorizontalAlignment="Right" />
            </Border>
        </ControlTemplate>
    </ListView.Template>

    <!-- How I want each item to look like? -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- A "This is an item:" label followed by the item itself --> 
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="8"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Text="This is an item : "/>
                <ContentPresenter Grid.Column="2" Content="{Binding}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView> 

Note, this part:

注意，这部分：

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical" Background="LightCoral"/>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.Template>
    <ControlTemplate>
        <Border Background="LightBlue" BorderBrush="DarkGreen" BorderThickness="5">
            <ItemsPresenter HorizontalAlignment="Right" />
        </Border>
    </ControlTemplate>
</ListView.Template>

is equivalent to:

相当于：

<ListView.Template>
    <ControlTemplate>
        <Border Background="LightBlue" BorderBrush="DarkGreen" BorderThickness="5">
            <StackPanel Orientation="Vertical" Background="LightCoral"
                        HorizontalAlignment="Right"
                        IsItemsHost="True"/>
        </Border>
    </ControlTemplate>
</ListView.Template>