Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF - stretch listview over multiple grid columns

I have UserControl with a Grid that is divided into rows and columns. Something like this:

Table with 3 columns and 3 rows

how can I add ListView on multiple rows and columns? For example:

Table with 3 columns and 3 rows with the last row circled roughly

Part of my xaml:

<Grid Margin="30,0,30,0" Background="#00000000">
    <Grid.RowDefinitions>
        <RowDefinition Height="80" />
        <RowDefinition Height="60" />
        <RowDefinition  Height="160"/>
        <RowDefinition  Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="0.4*"/>
         <ColumnDefinition Width="0.4*"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0" Grid.Column="0">
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="0.5*"></ColumnDefinition>
            <ColumnDefinition Width="0.5*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="1"
               FontSize="28"
               FontFamily="../Fonts/#GeForce-Bold"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Foreground="White">
            <TextBlock Text="Deploy" TextDecorations="Underline"/>
        </Label>
        ... 
        ...
    </Grid>
    <Grid Grid.Row="2" Grid.Column="0">
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="0.5*"></ColumnDefinition>
            <ColumnDefinition Width="0.5*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="2" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.3*"></RowDefinition>
                <RowDefinition Height="0.7*"></RowDefinition>
            </Grid.RowDefinitions>
...
...

My goal is to display ListView at rows 0-3 and columns 0-2.

like image 510
Adi1992 Avatar asked Mar 07 '26 07:03

Adi1992


1 Answers

Mark already gave the hint in the comments, but for the sake of having an answer including an example, here it is:

You are locking for the Grid.ColumnSpan (or Grid.RowSpan) property.

The following code will place the list view starting in column 1 and extending over a total of 2 columns:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="10"/>
    </Grid.ColumnDefinitions>
    <ListView Grid.Column="1" Grid.ColumnSpan="2">
        <ListViewItem>item 1</ListViewItem>
        <ListViewItem>item 2</ListViewItem>
    </ListView>
</Grid>
like image 80
Felix Avatar answered Mar 08 '26 21:03

Felix



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!