DXStackLayout.ItemAlignment Property

Gets or sets how the layout control aligns its child items. This is a bindable property.

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

csharp

public LayoutItemAlignment ItemAlignment { get; set; }

Property Value

Type	Description
LayoutItemAlignment

Specifies the alignment of items within the layout.

Available values:

Name	Description	Image
Start

Items are aligned at the start.

| | Center |

Items are centered.

| | SpaceAround |

Items are evenly distributed; the first and last items have a half-size space.

| | SpaceBetween |

Items are evenly distributed. The first item is positioned at the start and the last item at the end.

| | SpaceEvenly |

Items are evenly distributed; items have equal space around them.

| | Fill |

Items occupy all available space; original item size proportions are saved.

| | FillUniform |

Items occupy all available space; original item size proportions are kept.

Remarks

The following animation illustrates different item alignments:

To replicate the app in the image above, use the following markup:

XAML

xaml

<ContentPage.Resources>
    <Style TargetType="dx:DXBorder">
        <Setter Property="BorderColor" Value="DarkGray"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="BackgroundColor" Value="#FDF8FD"/>
    </Style>
    <DataTemplate x:Key="contentTemplate">
        <Label Text="{Binding}" Padding="2" FontSize="Medium"/>
    </DataTemplate>
</ContentPage.Resources>
<dx:DXStackLayout ItemAlignment="Fill">
    <Grid RowDefinitions="*,*,*,*,*,*,*" ColumnDefinitions="100, *" RowSpacing="10" Margin="4" WidthRequest="{Binding Source={x:Reference slider}, Path=Value}">
        <Label Text="Center" Grid.Row="0" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="Center" Grid.Row="0" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="Fill" Grid.Row="1" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="Fill" Grid.Row="1" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="FillUniform" Grid.Row="2" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="FillUniform" Grid.Row="2" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="SpaceAround" Grid.Row="3" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="SpaceAround" Grid.Row="3" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="SpaceBetween" Grid.Row="4" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="SpaceBetween" Grid.Row="4" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="SpaceEvenly" Grid.Row="5" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="SpaceEvenly" Grid.Row="5" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>

        <Label Text="Start" Grid.Row="6" Grid.Column="0"/>
        <dx:DXStackLayout Orientation="Horizontal" ItemAlignment="Start" Grid.Row="6" Grid.Column="1">
            <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="40"/>
            <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="140"/>
            <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" MinimumWidthRequest="100"/>
        </dx:DXStackLayout>
    </Grid>
    <Slider x:Name="slider" Minimum="390" Maximum="800" Value="800" HeightRequest="40" WidthRequest="200"/>