如何在Xamarin Forms中制作圓角編輯器控件

Question

我正在使用xamarin表單制作跨平台應用程序（Android，WinPhone）。 我需要創建一個圓形文本框，就像Whatsapp聊天窗口中的輸入框一樣。 文本框控件在Xamarin Forms中稱為編輯器。

有誰知道如何創建圓角編輯器？ 我嘗試在兩個平台上實現渲染器，但沒有找到我想要的東西。

編輯

在嘗試您的方法后，編輯器在未單擊時看起來像這樣：

單擊時看起來像這樣：

由於某種原因，背景形狀是矩形，我更喜歡它只在編輯器的邊框中。 有什么想法？

Answer 1

有誰知道如何創建圓角編輯器？ 我嘗試在兩個平台上實現渲染器，但沒有找到我想要的東西。

你的方向是正確的。 您需要為每個平台創建自定義渲染。 請按照以下步驟在兩個平台中創建一個舍入的編輯器：

1. PCL中的自定義控件RoundedEditor ：

    public class RoundedEditor:Editor { //empty or define your custom fields } 

對於Android平台（在YourProject.Android ）：

2. 在Resources/Drawable/創建一個xml RoundedEditText.xml ：

    <?xml version="1.0" encoding="utf-8" ?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp" > <!--solid defines the fill color of the Editor--> <solid android:color="#FFFFFF"/> <!--stroke defines the border color--> <stroke android:width="2dp" android:color="#FF0000" /> <!--the corner radius--> <corners android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/> </shape> 

3. 像這樣創建自定義渲染器：

    [assembly:ExportRenderer(typeof(RoundedEditor), typeof(RoundedEditorRenderer))] namespace RoundedEditorDemo.Droid { public class RoundedEditorRenderer:EditorRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Editor> e) { base.OnElementChanged(e); if (Control != null) { Control.Background = Xamarin.Forms.Forms.Context.GetDrawable(Resource.Drawable.RoundedEditText); } } } } 

對於Windows平台（在YourProject.UWP ）：

2. 通過right click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml創建ResourceDictionary文件，並將完整的TextBox默認樣式添加到資源字典中。

3. 編輯Border元素（添加CornerRadius="15"並將BorderThickness="{TemplateBinding BorderThickness}"更改為TextBox的默認樣式的BorderThickness="2" ）並為該樣式添加一個鍵：

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RoundedEditorDemo.UWP"> ... <Border CornerRadius="15" BorderThickness="2" x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/> ... </ResourceDictionary> 

4. 創建自定義渲染器：

    [assembly: ExportRenderer(typeof(RoundedEditor), typeof(RoundedEditorRenderer))] namespace RoundedEditorDemo.UWP { public class RoundedEditorRenderer:EditorRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Editor> e) { base.OnElementChanged(e); if (Control != null) { Windows.UI.Xaml.ResourceDictionary dic = new Windows.UI.Xaml.ResourceDictionary(); dic.Source = new Uri("ms-appx:///RoundedEditorRes.xaml"); Control.Style = dic["RoundedEditorStyle"] as Windows.UI.Xaml.Style; } } } } 

這是完整的演示： RoundedEditorDemo 。

更新：

我無法重現背景問題，我正在使用Windows更新15063.所以我認為如果您更新到最新更新將修復它。

對於Android部分：請注意我使用的是Xamarin.Forms.Forms.Context.GetDrawable ，它由Xamarin.Forms提供。 請嘗試在您的計算機上運行我的完整演示，以檢查是否收到錯誤。

如果仍然出現錯誤。 你能指出，你在哪收到錯誤？

Answer 2

除非我遺漏了什么，否則你不需要自定義渲染器或類似的東西。 你需要的只是一個框架。

我是這樣做的：

<Grid>
     <Frame IsClippedToBounds="true">
          <Editor />
     </Frame>
</Grid>

為我工作！