w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Make a StackPanel Orientation Horizontal in WPF

To change the layout of a ListView, 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 also may want to use a VirtualizingStackPanel instead of StackPanel, it may improve performance (if you have lot of items to show).

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

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 ListView has 3 interesting properties to define how it is rendered:

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>




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.