Make StackPanel Orientation Horizontal in WPF

Question

I have this xaml code in 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> 

ItemSource ListView bound to a List in my ViewModel (as shown in the code)

When I launch the application, all my TextBlocks displayed vertically, although I set the Orientation internal StackPanel to Horizontal .

Answer 1

To change the ListView layout, use the ItemsControl.ItemsPanel property:

 <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 can also use VirtualizingStackPanel instead of StackPanel , this can improve performance (if you have many items for the show).

Update

If you want to add a list to each element of the stack panel, you can do this by changing the ItemTemplate (which represents how each element is displayed).

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 summarize, ListView has 3 interesting properties for determining how it is displayed:

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

Here is the code using all of 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> 

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

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>