毛伊岛：自定义条目

Question

我是毛伊岛的新手，在Xamarin上具有基本知识。Forms

我想在毛伊岛的入口控制中添加一个底部边框（和边框滴答）。

在xamarin.forms上，我们必须为每个平台创建一个自定义控件，然后为每个平台创建一个渲染器。

在发布此消息之前，我在互联网上进行了研究。它涉及处理程序，我的印象是它仅允许基本修改（更改背景的颜色等等）。

我对所有这些信息有些困惑，如果有人能启发我，我会很感激。

Answer 1

显示了自定义条目的微不足道示例，该示例仅自定义每个平台的某些属性。

我已经开始创建一个。net Maui高级自定义输入示例。到目前为止，请参阅该存储库。

状态：

• 演示窗户上的颜色和厚度下划线。
• 已经开始在Android上的下划线。

限制（当前）：

• 在Windows上，一些条目 属性需要映射到包含的文本框。
• 尚未测试条目 事件，查看它们是否需要任何特殊处理。
• Android下划线无法控制其厚度或颜色。
• 除Windows或iOS以外的平台上没有实现。

如果您想扩展此更远的，Google Xamarin表单自定义输入渲染器用于平台特定代码的示例。希望我已经表现出足够的表现，可以使如何/添加此类代码有所了解。

---

目前，做一个先进的示例似乎比相应的Xamarin表单“自定义渲染器”更多。

原因：

• 需要适应毛伊岛的处理程序映射方案。可能只需要高级文档和示例。
• 由于 iEntry 和 ientryhandler 所需的类型，因此很难扩展现有的入门手机。如何替代 PlatformView 的类型？
• 难以复制现有处理程序的作用（以进行稍作更改），因为内置处理程序使用的某些扩展是“内部”，因此必须复制这些文件。转介到其他文件。然后我复制了。并进行了一些更改，以避免与现有扩展的歧义冲突。

TBD：也许有一种方法可以避免我遇到的并发症。
另外，我可能会复制代码，可以省略。

---

这些是需要完成的步骤：

1. 定义类 myentry：entry 具有所需的其他属性。
2. 定义类 myentryhandler 渲染到本机UI对象。
3. 在Mauiprogram中的Addhandler。

---

1。定义类 myentry：entry 带有所需的其他属性。

在这里，我们添加 UnderlineColor 和 UnderlineThickness 。

public class MyEntry : Entry
{
    /// <summary>
    /// Color and Thickness of bottom border.
    /// </summary>
    public static BindableProperty UnderlineColorProperty = BindableProperty.Create(
            nameof(UnderlineColor), typeof(Color), typeof(MyEntry), Colors.Black);
    public Color UnderlineColor
    {
        get => (Color)GetValue(UnderlineColorProperty);
        set => SetValue(UnderlineColorProperty, value);
    }

    public static BindableProperty UnderlineThicknessProperty = BindableProperty.Create(
            nameof(UnderlineThickness), typeof(int), typeof(MyEntry), 0);
    public int UnderlineThickness
    {
        get => (int)GetValue(UnderlineThicknessProperty);
        set => SetValue(UnderlineThicknessProperty, value);
    }

    public MyEntry()
    {
    }
}

---

2。定义类 myentryhandler 渲染到本机UI对象。

这是通过 partial class 来完成的。一个部分是跨平台，然后需要您实现的每个平台的另一部分。

在我的存储库中，查找 myentryhandler.cs ， Windows/myentryhandler.windows.cs 和 android/myentryhandler.android.cs 。

myentryhandler.cs：

这包含Myentryhandler的“映射”。

    // Cross-platform partial of class. See Maui repo maui\src\Core\src\Handlers\Entry\EntryHandler.cs
    public partial class MyEntryHandler : IMyEntryHandler //: EntryHandler
    {
        // static c'tor.
        static MyEntryHandler()
        {
            // TBD: Fill MyMapper here by copying from Entry.Mapper, then add custom ones defined in MyEntry?
        }

        //public static IPropertyMapper<IEntry, IEntryHandler> MyMapper => Mapper;
        public static IPropertyMapper<IEntry, MyEntryHandler> MyMapper = new PropertyMapper<IEntry, MyEntryHandler>(ViewMapper)
        {
            // From Entry.
            [nameof(IEntry.Background)] = MapBackground,
            [nameof(IEntry.CharacterSpacing)] = MapCharacterSpacing,
            [nameof(IEntry.ClearButtonVisibility)] = MapClearButtonVisibility,
            [nameof(IEntry.Font)] = MapFont,
            [nameof(IEntry.IsPassword)] = MapIsPassword,
            [nameof(IEntry.HorizontalTextAlignment)] = MapHorizontalTextAlignment,
            [nameof(IEntry.VerticalTextAlignment)] = MapVerticalTextAlignment,
            [nameof(IEntry.IsReadOnly)] = MapIsReadOnly,
            [nameof(IEntry.IsTextPredictionEnabled)] = MapIsTextPredictionEnabled,
            [nameof(IEntry.Keyboard)] = MapKeyboard,
            [nameof(IEntry.MaxLength)] = MapMaxLength,
            [nameof(IEntry.Placeholder)] = MapPlaceholder,
            [nameof(IEntry.PlaceholderColor)] = MapPlaceholderColor,
            [nameof(IEntry.ReturnType)] = MapReturnType,
            [nameof(IEntry.Text)] = MapText,
            [nameof(IEntry.TextColor)] = MapTextColor,
            [nameof(IEntry.CursorPosition)] = MapCursorPosition,
            [nameof(IEntry.SelectionLength)] = MapSelectionLength,
            // From MyEntry
            [nameof(MyEntry.UnderlineThickness)] = MapUnderlineThickness
        };

        // TBD: What is this for? Cloned one on Entry.
        private static void MapUnderlineThickness(MyEntryHandler arg1, IEntry arg2)
        {
        }


        public MyEntryHandler() : base(MyMapper)
        {
        }

我尚未在所有平台文件夹中创建最小的部分类别。在Repo的跨平台myentryhandler中，您会在 #if Windows 中看到代码。目的是，这不需要包裹在 #if 中。您还会看到很多评论的代码；这样我就可以看到每个平台上都需要实现哪些方法。

myentryhandler.windows.cs：

本质是 createplatformview（）。在Windows上，我选择以 border （底部除外）为 textbox 。

        protected override PlatformView CreatePlatformView()
        {
            var myentry = VirtualView as MyEntry;

            var textbox = new MauiPasswordTextBox
            {
                // From EntryHandler.
                IsObfuscationDelayed = s_shouldBeDelayed

                // TODO: pass some entry properties through to textbox?
            };

            MauiColor color = myentry != null
                    ? myentry.UnderlineColor
                    : MyEntry.UnderlineColorProperty.DefaultValue as MauiColor;
            int thickness = myentry != null
                    ? myentry.UnderlineThickness
                    : (int)MyEntry.UnderlineThicknessProperty.DefaultValue;

            var border = new Border
            {
                Child = textbox,
                BorderBrush = color.ToPlatform(),
                BorderThickness = new Thickness(0, 0, 0, thickness)
            };


            return border;
        }

Windows处理程序还有许多其他行。这些都是从毛伊岛来源复制的。 TBD需要哪些（如果有）。如果我想出了如何简单地从毛伊岛的入口汉（Handhandler）继承，那将不需要这些。但是，当我继承时，有类型冲突。

---

3：Mauiprogram中的Addhandler。

mauiprogram.cs

    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureMauiHandlers(handlers =>
            {
                handlers.AddHandler(typeof(MyEntry), typeof(MyEntryHandler));
            })
        ...

---

您会看到其他类别添加到Repo中的MAUI项目中。这些是从毛伊岛来源复制的。

这些其他类别由上述类引用。

希望一旦更好地理解此主题，其他大多数课程都会消失。

---

在Windows上，AppShell + Mainpage带有两个Myentrys。一个是下划线和彩色的。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:myviews="clr-namespace:MauiCustomEntryHandler"
             x:Class="MauiCustomEntryHandler.MainPage">
             
    <ScrollView>
        <VerticalStackLayout 
                WidthRequest="500" HeightRequest="400"
                Spacing="25" Padding="30,0" BackgroundColor="LightBlue"
                HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="Hello, Maui!" FontSize="24" HorizontalOptions="Center" />
            <myviews:MyEntry Text="test" FontSize="20" UnderlineThickness="8"
                 UnderlineColor="Purple" BackgroundColor="HotPink" />
            <myviews:MyEntry UnderlineThickness="0" BackgroundColor="LightGray" />
        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

Answer 2

如果有人因为（看似）简单需要更改下划线颜色而降落在此页面上，请继续阅读。下面的解决方案仅需几条线条，可用于所有使用突出显示 /重音颜色的毛伊岛控件。

接受的答复似乎是关于如何自定义毛伊岛控件的通用描述的宝贵教程（这再次与原始问题的标题相对应，可能是一般性的）。但是，如果颜色行为是您唯一的目标，那将是总杀伤力。

MAUI实施基于OS个性化计划。不幸的是，对于所有平台，似乎并不能以一般的方式在一个地方以一般的方式覆盖它，而可以在平台特定的层上控制它。

我最终得到的是仅修改一个文件

    <maui:MauiWinUIApplication.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#500073</Color>
            <StaticResource x:Key="SystemAccentColorDark1" ResourceKey="Primary"/>
            <StaticResource x:Key="SystemAccentColorDark2" ResourceKey="Primary"/>
            <StaticResource x:Key="SystemAccentColorDark3" ResourceKey="Primary"/>
            <StaticResource x:Key="SystemAccentColorLight1" ResourceKey="Primary"/>
            <StaticResource x:Key="SystemAccentColorLight2" ResourceKey="Primary"/>
            <StaticResource x:Key="SystemAccentColorLight3" ResourceKey="Primary"/>
        </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>

。使用这种重音颜色。

尽管我的Windows设置设置为蓝色，如当前的重音颜色：

我最初尝试修改通用./ resources/styles/styles/colors.xaml文件，以期希望立即在所有平台上覆盖这种行为，但这似乎不起作用。希望毛伊岛团队有一天能够实施通用行为。

Answer 3

我不喜欢解决简单问题的漫长解决方案。 MAUI支持（有限的）CSS，所以这是我所做的

1. 创建stylesheet style.css （称其为您喜欢的内容），并将其放在“/资源”中位置很重要

   .bottom-border {

    边界底：1px实心黑色；
    

   }

2. 在app.xaml中添加一个条目以访问样式表

   ＆lt; application.resources＆gt;

    ＆lt; stylesheet source =“/resources/style.css”/＆gt;
    

   ＆lt;/application.resources>

您不能将其与现有资源词典混合在一起，但是无论如何，我都不需要它们，只要您对CSS不太冒险，您就可以做大多数事情，所以这不是问题。我不是毛伊岛风格的忠实拥护者，这似乎很少有所收获，但这只是我。在这里检查使用级联样式表

3. 添加此 ... styleclass =“ Bottom-Border” 到您的元素，然后！

Answer 4

尽管这个问题有些古老，但我认为对于某些.NET MAUI开发人员来说，知道 Android 的颜色强调定义可能很有用。在此特定资源目录中定义了Android颜色的重音：

这些颜色定义负责入口边框 color ，可能是其他一些颜色重音，特别是针对Android设备。不幸的是，这不会改变边界厚度，半径或任何其他形状样式。通常，改变颜色对我来说足够了。在我看来，厚边界使该条目更容易进入。

请注意：与您整个项目的颜色定义相反，Android的定义是用 soulder Case 编写的，而未大写。您还必须使用 name 而不是 x：key 属性，或者可能会引发有关不工作的值转换器的例外。

因此...

而不是 ＆lt; color x：key =“ primary”＆gt;＃00ffff＆lt;/color＆gt;

您将定义颜色，例如 ＆lt;颜色名称=“ colorprimary”＆gt;＃00ffff＆lt;/color＆gt;

Answer 5

公认的答案真的很复杂。如何使用网格， frame ，条目和 boxview yeke：

<Grid>
    <Frame Padding="0" />
    <Entry
        Margin="5,0,5,0"
        Placeholder="Put some text here..."
    />
    <BoxView
        HeightRequest="1"
        Color="LightGray"
        VerticalOptions="End"
        Margin="0,0,0,5"
    />
</Grid>

当然可以根据需要进行调整