CODEWITHSUNDEEP
maui
Sean Bennington
Sean Bennington

Reputation: 31

Customizing MAUI XAML Entry Control Size for Single Digit Display

I'm working on a .NET MAUI application and am facing a challenge with the UI customization of XAML Entry controls. I aim to create a digital clock display where each digit is rendered in an individual Entry control, as shown in the reference image.

enter image description here

The design goal is for each Entry control to be just wide enough to comfortably display a single digit, centered both horizontally and vertically within the view.

However, I'm encountering an issue where setting the width of the Entry control to be smaller than a default minimum seems to cause the digit to render partially "off screen". It appears there are inherent paddings or margins that dictate this minimum size, and any attempt to set a smaller size results in the control only rendering the visible part, thus clipping the content.

Here's what I have tried so far:

Setting the WidthRequest property to a value that would ideally fit a single digit. Adjusting the padding and margin properties to 0, or even negative values. Experimenting with HorizontalOptions and VerticalOptions to center the text. Unfortunately, none of these methods have resolved the issue. The text still appears to be pushed to the edge of the control, as if there's an invisible boundary preventing it from being fully centered when the size is reduced.

Could anyone provide insight into how to override this minimum size constraint for Entry controls in MAUI XAML? Or is there a better approach to creating such a UI element that would serve as a digital clock digit display?

I'm specifically looking for a solution that aligns with MAUI best practices and avoids custom renderers if possible.

Here is the XAML that I am trying to use

<ContentView
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:local="clr-namespace:XTConnect.Core.CustomControls.CompositeNumericEntry.Views"
  x:Class="XTConnect.Core.CustomControls.CompositeNumericEntry.Views.CompositeNumericEntryView"
  xmlns:u="clr-namespace:XTConnect.Core.Utilities;assembly=XTConnect.Core"
  x:DataType="local:CompositeNumericEntryView">

  <Grid
    ColumnDefinitions="30,30,30,30,30,30,30,30,30,30"
    HorizontalOptions="Center"
    BackgroundColor="White"
    ColumnSpacing="0">
    <Grid.Resources>
      <Style
        x:Key="SingleDigitEntryStyle"
        TargetType="u:SingleDigitEntry">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="CornerRadius" Value="0"/>
        <Setter Property="HorizontalTextAlignment" Value="Start"/>
        <Setter Property="VerticalTextAlignment" Value="End"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="TextColor" Value="Black"/>
        <Setter Property="BackgroundColor" Value="White"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontFamily" Value="Monofonto"/>
        <Style.Triggers>
          <Trigger TargetType="u:SingleDigitEntry" Property="IsFocused" Value="True">
            <Setter Property="BackgroundColor" Value="Gray"/>
            <Setter Property="TextColor" Value="Red"/>
          </Trigger>
        </Style.Triggers>
      </Style>
    </Grid.Resources>
    <u:SingleDigitEntry Grid.Column="0" x:Name="Entry0" AutomationId="Entry0" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="1" x:Name="Entry1" AutomationId="Entry1" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="2" x:Name="Entry2" AutomationId="Entry2" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="3" x:Name="Entry3" AutomationId="Entry3" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="4" x:Name="Entry4" AutomationId="Entry4" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="5" x:Name="Entry5" AutomationId="Entry5" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="6" x:Name="Entry6" AutomationId="Entry6" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="7" x:Name="Entry7" AutomationId="Entry7" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="8" x:Name="Entry8" AutomationId="Entry8" Style="{StaticResource SingleDigitEntryStyle}"/>
    <u:SingleDigitEntry Grid.Column="9" x:Name="Entry9" AutomationId="Entry9" Style="{StaticResource SingleDigitEntryStyle}"/>
  </Grid>
</ContentView>

SingleDigitEntry is derived from a Telerik RadEntry control but it could just as easily be the standard Entry, they behave in exactly the same way.

The closest I have been able to get to this layout with just the available sizing is shown below... enter image description here

If I reduce the width any further, the controls visible area starts to clip, and the text becomes off center.

Upvotes: 0

Views: 221

Answers (1)

Yerik Avalos
Yerik Avalos

Reputation: 31

I tried to replicate the error you're experiencing on android using the following values and in fact I did find that the entries have a default padding that can be disabled (at least in android):

<Entry
    BackgroundColor="#80000000"
    HorizontalOptions="Center"
    HorizontalTextAlignment="Center"
    Text="0"
    TextColor="White"
    VerticalOptions="Center"
    VerticalTextAlignment="Center"
    WidthRequest="10" />

To disable it, I had to put the following line in app.xaml.cs

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
{
#if ANDROID

    handler.PlatformView.SetPadding(0, 0, 0, 0);

#endif
});

Regular Entry:

Regular entry

No padding Entry:

No Padding Entry

There's likely a way to do the same on all other platforms

Upvotes: 0

Related Questions