Настройка размера элемента управления записью MAUI XAML для однозначного отображения
Я работаю над приложением .NET MAUI и столкнулся с проблемой настройки пользовательского интерфейса элементов управления записью XAML. Я стремлюсь создать дисплей цифровых часов, где каждая цифра отображается в отдельном элементе управления Entry, как показано на эталонном изображении.
Целью дизайна является то, чтобы каждый элемент управления Entry был достаточно широким, чтобы удобно отображать одну цифру, центрированную как по горизонтали, так и по вертикали в представлении.
Однако я столкнулся с проблемой, из-за которой установка ширины элемента управления Entry меньше минимального значения по умолчанию приводит к тому, что цифра частично отображается «за кадром». Похоже, что существуют внутренние отступы или поля, определяющие этот минимальный размер, и любая попытка установить меньший размер приводит к тому, что элемент управления отображает только видимую часть, тем самым обрезая содержимое.
Вот что я пробовал до сих пор:
Установка для свойства WidthRequest значения, которое в идеале соответствует одной цифре.
Настройка свойств отступов и полей на 0 или даже на отрицательные значения.
Экспериментируйте с HorizontalOptions и VerticalOptions, чтобы центрировать текст.
К сожалению, ни один из этих методов не помог решить проблему. Текст по-прежнему кажется сдвинутым к краю элемента управления, как будто существует невидимая граница, которая не позволяет ему полностью центрироваться при уменьшении размера.
Может ли кто-нибудь дать представление о том, как переопределить это ограничение минимального размера для элементов управления Entry в MAUI XAML? Или есть лучший подход к созданию такого элемента пользовательского интерфейса, который будет служить цифровым дисплеем цифровых часов?
Я специально ищу решение, которое соответствует лучшим практикам MAUI и по возможности избегает использования пользовательских средств визуализации.
Вот XAML, который я пытаюсь использовать
<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 является производным от элемента управления Telerik RadEntry, но с тем же успехом может быть и стандартным Entry, они ведут себя точно так же.
Самый близкий к этому макету, который мне удалось подобрать, используя только доступные размеры, показан ниже...
Если я еще уменьшу ширину, видимая область элементов управления начнет обрезаться, а текст станет не по центру.
Я пробовал оба Лиюнь. Кажется, что сетка работает лучше всего, но ее недостаточно для воссоздания существующего пользовательского интерфейса. Возможно, нам удастся его купить, но было бы неплохо, чтобы он выглядел точно так же, как оригинал, который мы имитируем.
Вы также можете попытаться установить заполнение собственного представления равным 0, как это было сделано в ответе ниже.
Ответы 1
Я попытался воспроизвести ошибку, с которой вы столкнулись на Android, используя следующие значения, и на самом деле я обнаружил, что записи имеют заполнение по умолчанию, которое можно отключить (по крайней мере, в Android):
<Entry
BackgroundColor = "#80000000"
HorizontalOptions = "Center"
HorizontalTextAlignment = "Center"
Text = "0"
TextColor = "White"
VerticalOptions = "Center"
VerticalTextAlignment = "Center"
WidthRequest = "10" />
Чтобы отключить его, мне пришлось поместить следующую строку в app.xaml.cs
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
{
#if ANDROID
handler.PlatformView.SetPadding(0, 0, 0, 0);
#endif
});
Обычный вход:
Без заполнения. Запись:
Вероятно, есть способ сделать то же самое на всех других платформах.
Вы пытались установить Минимальную ширину запроса для записи? Или вы пытались использовать сетку для размещения записи?