Back to Devexpress

DXDockLayout.VerticalSpacing Property

maui-devexpress-dot-maui-dot-core-dot-dxdocklayout-f29e2b07.md

latest2.9 KB
Original Source

DXDockLayout.VerticalSpacing Property

Gets or sets the vertical spacing between the DXDockLayout‘s docked children. This is a bindable property.

Namespace : DevExpress.Maui.Core

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

csharp
public double VerticalSpacing { get; set; }

Property Value

TypeDescription
Double

The vertical spacing between the DXDockLayout‘s docked children.

|

Remarks

The following image shows how the VerticalSpacing property affects the resulting item layout within DXDockLayout:

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:DXDockLayout VerticalSpacing="30">

    <dx:DXStackLayout dx:DXDockLayout.Dock="Top" Orientation="Horizontal" ItemAlignment="Fill">
        <dx:DXBorder Content="1" ContentTemplate="{StaticResource contentTemplate}" HeightRequest="100"/>
        <dx:DXBorder Content="2" ContentTemplate="{StaticResource contentTemplate}" HeightRequest="100"/>
        <dx:DXBorder Content="3" ContentTemplate="{StaticResource contentTemplate}" HeightRequest="100"/>
    </dx:DXStackLayout>

    <dx:DXBorder dx:DXDockLayout.Dock="Bottom" Content="4" ContentTemplate="{StaticResource contentTemplate}" HeightRequest="100"/>
    <dx:DXBorder dx:DXDockLayout.Dock="Bottom" Content="5" ContentTemplate="{StaticResource contentTemplate}" HeightRequest="100"/>

    <dx:DXBorder dx:DXDockLayout.Dock="Left" Content="6" ContentTemplate="{StaticResource contentTemplate}" WidthRequest="100"/>
    <dx:DXBorder dx:DXDockLayout.Dock="Left" Content="7" ContentTemplate="{StaticResource contentTemplate}" WidthRequest="100"/>
    <dx:DXBorder dx:DXDockLayout.Dock="Right" Content="8" ContentTemplate="{StaticResource contentTemplate}" WidthRequest="100"/>
    <dx:DXBorder dx:DXDockLayout.Dock="Right" Content="9" ContentTemplate="{StaticResource contentTemplate}"/>

</dx:DXDockLayout>

See Also

DXDockLayout Class

DXDockLayout Members

DevExpress.Maui.Core Namespace