LayoutGroup.StretchRatio Attached Property

Gets or sets a LayoutGroup item’s stretch ratio. The property is in effect when an item’s size mode is ItemSizeMode.Stretch. This is an attached property.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v18.2.dll

Declaration

See GetStretchRatio(DependencyObject) and SetStretchRatio(DependencyObject, Double).

Returns

Type	Description
Double	A LayoutGroup item’s stretch ratio.

Remarks

Items within a LayoutGroup are either stretched or auto-sized, according to the LayoutGroupBase.HorizontalItemSizeMode, LayoutGroupBase.VerticalItemSizeMode, LayoutItem.SizeMode and LayoutGroup.SizeMode properties.

When items are stretched, each of them occupies a portion of the available space specified by the StretchRatio property. The total length of the available space is the sum of the ratios of the stretched items within the group.

Example

This example sets the LayoutGroup.StretchRatio property for three items within a group. The items are resized according to the assigned values:

XAML

xmlns:dxLayout="using:DevExpress.UI.Xaml.Layout"

<dxLayout:LayoutControl Width="300" Height="200">
    <dxLayout:LayoutGroup Header="LayoutGroup" Height="125" HorizontalItemSizeMode="Stretch">
        <Border Background="Red" dxLayout:LayoutGroup.StretchRatio="1">
            <TextBlock FontSize="18" Foreground="LightGray" Text="1x" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Background="Green" dxLayout:LayoutGroup.StretchRatio="1">
            <TextBlock FontSize="18" Foreground="LightGray" Text="1x" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Background="Blue" dxLayout:LayoutGroup.StretchRatio="2">
            <TextBlock FontSize="18" Foreground="LightGray" Text="2x" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
    </dxLayout:LayoutGroup>
</dxLayout:LayoutControl>