July 2025
I have written this post as part of the MAUI UI July 2025 edition. It is my second post for MAUI UI July. Tomorrow I will add my last post. Have a look on Matt Goldman’s website to find more articles about MAUI UI and the earlier editions of MAUI UI July.
All my articles about MAUI are based around the ‘Smart Letter Board’ application that I completed last year. The application shows a keyboard with the possibility to also enter words. All the key presses are display in a readonly, disabled control on the top. But as text will extend beyond the visible view, the text display should scroll during the entering of the text to keep the last key presses and words in view.
The TextDisplay also has two modes. A Compact mode that show the text in a one-line Entry control. The Full mode shows the text in a multi-line Editor control. The Full mode makes it easier for conversation partners to read the text.
The challenge for this control was the fact that a disabled, readonly control doesn’t scroll by itself. An Entry control only scrolls when it has focus and the user is entering text.
Below is an example of how the TextDisplay works in Smart Letter Board
This control is for a very specific use case, but it might still be helpful for someone who faces the same challenge.
The source code for this control can be found on my github account: Byte217.MAUI on GitHub.
There are four part in the solution that are important for this control:
1. The TextDisplay
File: Byte217.MAUI.Application.Maui/Controls/TextDisplay.xaml
In the xaml you can see the Entry for the Compact mode and the Editor for the Full Mode. Both are readonly and disabled. In my case Full Mode is not used for entering text, because in Full Mode the on display keyboard is not available.
In Compact Mode using an Entry:
1. I placed the Entry in a ScrollView without scrollbars. When the Entry becomes wider than the ScrollView, I scroll the Entry to the end. This will show the last characters entered. This can be seen in the TextDisplay.xaml.cs file
2. However, this method has a side effect. As long as the text fits within the Entry, its border is visible on all sides. When the text doesn’t fit anymore, the Entry grows bigger than its surrounding ScrollView and the border on the right side disappears. To make up for this, I placed a Border component around the ScrollView
In Full Mode, using an Editor:
1. I placed the Editor in a ScrollView with a vertical scrollbar. The Editor resizes when the text doesn’t fit anymore. This will cause the vertical scrollbar on the ScrollView to appear. For consistency, I have added a similar Border around this ScrollView.
Be aware that the code plugin is displaying all the xaml tag in lowercase. In github all the code is as it should be.
TextDisplay.xaml
TextDisplay.xaml.cs
namespace Byte217.MAUI.Application.Maui.Controls
{
public partial class TextDisplay : ContentView
{
private async void Entry_TextChanged(object sender, TextChangedEventArgs e)
{
double scrollViewWidth = TextEntryScrollView.Width;
double textEntryWidth = TextEntry.Width;
if (textEntryWidth > scrollViewWidth)
{
InvalidateMeasure();
await Task.Delay(50);
await TextEntryScrollView.ScrollToAsync(textEntryWidth + 1000, 0, false);
await EditorScrollView.ScrollToAsync(0, 0, false);
}
}
}
}
2. The KeyProcessor
File: Byte217.MAUI.Application.Maui/ViewModels/Processors/KeyProcessor.cs
This class processes the key presses. It takes care of handling punctuations, backspace and clear. It is bound to the Text properties of the Entry and Editor controls in the TextDisplay.
3. Showing the TextDisplay in both modes
File: Byte217.MAUI.Application.Maui/Pages/MainPage.xaml
This page shows the TextDisplay in its Compact Mode, an Entry without scrollbar that scrolls horizontally when the text doesn’t fit.
File: Byte217.MAUI.Application.Maui/Pages/TextPage.xaml
This page shows the TextDisplay in Full Mode, a multiline Editor with a vertical scrollbar when the text doesn’t fit.
## How it works
1. When a user presses a key on the on-display keyboard, the key processor changes its Text property
2. As both Entry and Editor are bould to the Key Process TExt property, they get updated with the newest text.
3. A Entry_TextChanged event is triggered and when the text is longer than the scroll view, the TextEntry is scrolled to the left to keep the text in view
4. The Editor is scrolled to the top, to keep the text in view when the mode is changed.
your device. Once you have the dimensions of the drawable area you don’t have to take into account the dimensions of status, navigation and tab bars.