Home » Windows Apps » How to set XAML ListView size to 100% in Windows universal application.

How to set XAML ListView size to 100% in Windows universal application.

We have a ListView with ItemTemplate. In each item We use a Grid with two rows and two columns.
We want 1st column have 80% and 2nd column 20% of the total container size (in my case it is a HubSection).

To make design based on percentage
1. We should add style to ListViewItem :

<ListView.ItemContainerStyle>
    <Style TargetType=”ListViewItem”>
       <Setter Property=”HorizontalContentAlignment” Value=”Stretch”/>
    </Style>
</ListView.ItemContainerStyle>

GridStrechPourcentage1

 

2. We should change Grid columns width and use “*” as percentage:
(8* = 80% and 2* = 20%)

<Grid.ColumnDefinitions>
    <ColumnDefinition Width=”8*” />
    <ColumnDefinition Width=”2*” />
</Grid.ColumnDefinitions>

 

GridStrechPourcentage2

XAML does not support percentage directly but 8* and 2* works as ratio.

About

Informatics - my job & my passion.