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")]
public class SafeKeyboardAreaView :
DXViewBaseRemarks
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.
<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:
- Pass the content that you want to display in the keyboard area to the KeyboardAreaContent property.
- Set the IsOpened property to
trueto hide a keyboard and display the specified content. - Set the IsOpened property to
falseto display a keyboard and hide the keyboard area content.
<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>
void OpenPanel(Object sender, EventArgs e){
panel.IsOpened = !panel.IsOpened;
}