CODEWITHSUNDEEP
c#xamlwin-universal-app
Vasile Doe
Vasile Doe

Reputation: 1754

Custom xaml layout using RowDefinitions and ColumnDefinitions

I am new in UWP and I get some misunderstanding grid RowDefinitions and ColumnDefinitions as is mentioned in oficial doc. I have to make a custom list element, something like this: enter image description here

but I can't handle it. In fact the main problem is how to set fill_parent property for a child view.

Upvotes: 0

Views: 65

Answers (2)

Choletski
Choletski

Reputation: 7515

You can use this method like it's indicated in your mentioned docs. As is described in your img the last element it's in the middle vertically, so this layout will be: enter image description here

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition
                Height="24" />
            <RowDefinition
            Height="20" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition
            Width="44" />
        <ColumnDefinition
            Width="*" />
        <ColumnDefinition
            Width="10" />
    </Grid.ColumnDefinitions>

    <Rectangle
        Fill="Red"
        Grid.RowSpan="2" 
        Grid.Column="0"/>

    <Rectangle
        Fill="Green"
        Grid.Row="0"
        Grid.Column="1" />

    <Rectangle
        Fill="Yellow"
        Grid.Row="1"
        Grid.Column="1" />

    <Grid
        Grid.RowSpan="2"
        Grid.Column="2">

        <Grid.RowDefinitions>
            <RowDefinition
                Height="*" />
            <RowDefinition
                Height="*" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <Rectangle
            Fill="Gray"
            Grid.Row="1"/>

    </Grid>

</Grid>

For simplicity and clarity I was using Rectangle

Upvotes: 2

Hyukchan Kwon
Hyukchan Kwon

Reputation: 392

Filling the space can be done with

width="*"

And the small complexity in your layout could be handled with nested grid system. Here is the beginning, not the complete solution for your layout.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="24"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

Upvotes: 0

Related Questions