SafeKeyboardAreaView Class

A container that shrinks vertically when you open a device keyboard to avoid content overlap. Also allows you to display custom content in the keyboard area.

Namespace : DevExpress.Maui.Core

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

[ContentProperty("Content")]
[DXLicenseMAUI]
public class SafeKeyboardAreaView :
    DXViewBase

Remarks

Some controls display a DXToolbar component at the page’s bottom (for example, HtmlEdit). If you use such a control, put it inside a SafeKeyboardAreaView so that device keyboard and the toolbar don’t overlap. SafeKeyboardAreaView decreases the height of HTML Edit when you open the device keyboard and keeps the toolbar visible. After the keyboard is hidden (for example, when the HTML Edit control is no longer focused), HTML Edit once again occupies all available height.

• XAML

<ContentPage ...
             xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <dx:SafeKeyboardAreaView>
        <dxhtml:HtmlEdit>
            <dxhtml:HtmlEdit.HtmlSource>
                  <dxhtml:UriHtmlEditSource Uri="index.html" />
            </dxhtml:HtmlEdit.HtmlSource>
        </dxhtml:HtmlEdit>
    </dxhtml:SafeKeyboardAreaView>
</ContentPage>

Display Custom Content in the Keyboard Area

The SafeKeyboardAreaView container also allows you to display custom content in the keyboard area to add more space for UI elements:

Follow the steps below to do it:

1. Pass the content that you want to display in the keyboard area to the KeyboardAreaContent property.
2. Set the IsOpened property to true to hide a keyboard and display the specified content.
3. Set the IsOpened property to false to display a keyboard and hide the keyboard area content.

• MainPage.xaml

<ContentPage ...
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core"
             xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <dx:SafeKeyboardAreaView x:Name="panel">
        <dx:DXDockLayout StretchLastItem="False">
            <dxc:DXToolbar x:Name="toolbar" dx:DXDockLayout.Dock="Bottom">
                <dxc:ToolbarButton Icon="gotoimage" Content="Go To Page" Placement="FixedLeft" Clicked="OpenPanel"/>
            </dxc:DXToolbar>
            <dx:TextEdit/>
        </dx:DXDockLayout>
        <dx:SafeKeyboardAreaView.KeyboardAreaContent>
                <dx:DXColorSelector/>
        </dx:SafeKeyboardAreaView.KeyboardAreaContent>
    </dx:SafeKeyboardAreaView>
</ContentPage>

• MainPage.xaml.cs

void OpenPanel(Object sender, EventArgs e){
    panel.IsOpened = !panel.IsOpened;
}

Related Example

View Example: DevExpress .NET MAUI HTML Edit - Replicate a Built-In Toolbar

Implements

Show 14 items

INotifyPropertyChanged

IAnimatable

Microsoft.Maui.Controls.ITabStopElement

IViewController

IVisualElementController

IElementController

IGestureController

IGestureRecognizers

IPropertyMapperView

IHotReloadableView

IView

Microsoft.Maui.IFrameworkElement

ITransform

IReplaceableView

Inheritance

System.Object BindableObject Element NavigableElement VisualElement View DevExpress.Maui.Core.Internal.DXViewElement DevExpress.Maui.Core.Internal.DXViewBaseCore DXViewBase SafeKeyboardAreaView

Extension Methods

Yield<SafeKeyboardAreaView>()

YieldIfNotNull<SafeKeyboardAreaView>()

See Also

SafeKeyboardAreaView Members

DevExpress.Maui.Core Namespace