DrawerView.DrawerHeaderContent Property

Gets or sets a view displayed as a header within the drawer.

Namespace: DevExpress.Maui.Navigation

Assembly: DevExpress.Maui.Navigation.dll

Declaration

public View DrawerHeaderContent { get; set; }

Property Value

Type Description
Microsoft.Maui.Controls.View

A view that the DrawerView displays as the drawer header.

Remarks

A drawer can include a header and footer – areas fixed at the top and bottom of the drawer panel. You can use the drawer header or footer to display UI elements that allow users to access your application’s priority information or functionality (for example, a product name and logo, account switcher, application settings, and more).

DrawerView - Drawer Header and Footer

Use the DrawerHeaderContent or DrawerFooterContent property to specify a view displayed as a header or footer within the drawer.

<dxn:DrawerView DrawerHeaderHeight="100"
                DrawerFooterHeight="80">
    <dxn:DrawerView.DrawerHeaderContent>
        <StackLayout Orientation="Vertical" VerticalOptions="Center">
            <Image Source="account_circle.svg" HorizontalOptions="Center"
                   HeightRequest="65" WidthRequest="65"/>
            <Label Text="User Name"  HorizontalOptions="Center" Margin="0, 0, 0, 10" 
                   FontSize="16" TextColor="Black" />
            <BoxView BackgroundColor="#b3b3b3" HeightRequest="1"/>
        </StackLayout>
    </dxn:DrawerView.DrawerHeaderContent>
        <dxn:DrawerView.DrawerFooterContent>
            <StackLayout>
                <BoxView BackgroundColor="#b3b3b3" HeightRequest="1"/>
                <StackLayout Orientation="Horizontal" Margin="10,25">
                    <Image Source="settings.svg"/>
                    <Label Text="Settings" Padding="10, 0" FontSize="16" TextColor="Black"/>
                </StackLayout>
            </StackLayout>
    </dxn:DrawerView.DrawerFooterContent>
    <dxn:DrawerView.DrawerContent>
        <!-- ... -->
    </dxn:DrawerView.DrawerContent> 
    <dxn:DrawerView.MainContent>
        <!-- ... -->
    </dxn:DrawerView.MainContent>
</dxn:DrawerView>

The following properties allow you to specify the height of the drawer header and footer:

Properties

Description

DrawerHeaderHeight
DrawerHeaderMaxHeight
DrawerHeaderMinHeight

Gets or sets the maximum height of the drawer header.

DrawerFooterHeight
DrawerFooterMaxHeight
DrawerFooterMinHeight

Gets or sets the minimum height of the drawer footer.

See Also