Virtual Keyboard Quick Start Guide
Overview
The Avalonia Virtual Keyboard component provides an on-screen keyboard for Avalonia applications. It is designed for touch-based or kiosk scenarios where physical keyboards may not be available, enabling text input through touchscreens or mouse clicks.
The Virtual Keyboard component includes two main controls:
VirtualKeyboardScope
- A container that manages keyboard visibility and input methodsVirtualKeyboard
- The actual keyboard control that can be placed manually
Installation
See the Installation Guide for step-by-step instructions on how to install Accelerate components.
Add the Virtual Keyboard package to your project:
dotnet add package Avalonia.Controls.VirtualKeyboard
Add the License Key
Include your Avalonia UI license key in the executable project file (.csproj
):
<ItemGroup>
<AvaloniaUILicenseKey Include="YOUR_LICENSE_KEY" />
</ItemGroup>
For multi-project solutions, you can store your license key in an environment variable or a shared props file to avoid duplication.
Include the Control Theme
To ensure the virtual keyboard is properly styled, add the keyboard theme to your application. Open your App.axaml
file and include the following within the Application.Styles
section:
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="YourNamespace.App">
<Application.Styles>
<FluentTheme />
<!-- Include the Virtual Keyboard theme -->
<StyleInclude Source="avares://Avalonia.Controls.VirtualKeyboard/Themes/Fluent.axaml"/>
</Application.Styles>
</Application>
Requirements
- Avalonia 11.3.7 or newer
Basic Usage
Using VirtualKeyboardScope (Recommended)
The simplest way to add a virtual keyboard to your application is to use the VirtualKeyboardScope
control, which automatically shows and hides the keyboard when text input controls are focused:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="600"
Width="600" Height="600"
x:Class="YourNamespace.YourWindow"
Title="Virtual Keyboard Sample">
<VirtualKeyboardScope InputMethods="en-US:kbd:standard, de:kbd:standard, ja:ime:kana">
<StackPanel>
<TextBlock>Hello world!</TextBlock>
<TextBox Watermark="Type here"/>
</StackPanel>
</VirtualKeyboardScope>
</Window>
Using VirtualKeyboard Directly
For more control, you can also use the VirtualKeyboard
control directly and specify the target input element:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Virtual Keyboard Sample"
Width="400" Height="600">
<StackPanel>
<TextBox x:Name="InputBox" Width="300" Margin="10"/>
<VirtualKeyboard Target="{Binding ElementName=InputBox}"
InputMethods="en-US:kbd:standard, de:kbd:standard, ja:ime:kana"
Margin="10"/>
</StackPanel>
</Window>
Note, that input will be directed to the specified Target
element regardless of the current input focus.
Managing Input Methods
The virtual keyboard supports a wide range of input methods and keyboard layouts. You can specify which input methods to include:
In XAML
<VirtualKeyboardScope InputMethods="en-US:kbd:standard, de:kbd:standard, ja:ime:kana">
<!-- Your content here -->
</VirtualKeyboardScope>