选择器文本从选择器框中移出

Question

我在Xamarin.Forms工作，我有一个像这样的选择器：

 <Picker Grid.Row="1" Grid.Column="1" x:Name="pickerForSearchMode"  
   Title="Search Mode" BackgroundColor="White" >
    <Picker.Items>
       <x:String>Mode 1</x:String>
       <x:String>Mode 2</x:String>
       <x:String>Mode 3</x:String>
       <x:String>Mode 4</x:String>
    </Picker.Items>

它在iOS和Android上显示完美，但在UWP应用中它有一个问题。文本显示在选择器之外，如下所示：

Answer 1

您需要使用自定义渲染器see the official Xamarin documentation。

呈现元素后，您需要使用Title属性的值并将其设置为基础UWP ComboBox的{​​{3}}。

检查Xamarin表单中的PlaceholderText，您可以看到UpdateTitle方法设置Header的{​​{1}}属性。您需要做的就是将其替换为您自己的渲染器中的ComboBox属性。

必修步骤

首先在PCL项目中创建自定义PlaceholderText：

Picker

将XAML中的public class PlaceholderPicker : Picker { } 引用替换为Picker：

PlaceholderPicker

您必须将命名空间导入添加到页面元素 - <local:PlaceholderPicker VerticalOptions="Center" x:Name="PickerForSearchMode" Title="Search Mode" BackgroundColor="White" > <Picker.Items> <x:String>Mode 1</x:String> <x:String>Mode 2</x:String> <x:String>Mode 3</x:String> <x:String>Mode 4</x:String> </Picker.Items> </local:PlaceholderPicker> 。

现在，在UWP项目中，您现在可以为控件创建自定义渲染器，并为程序集添加xmlns:local="clr-namespace:NamespaceWithTheCustomControl"属性，以指示Xamarin Forms在UWP中使用此渲染器。

ExportRenderer

请注意，我们先设置[assembly: ExportRenderer( typeof( PlaceholderPicker ), typeof( PlaceholderPickerRenderer ) )] namespace FormsApp.UWP { public class PlaceholderPickerRenderer : PickerRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) { base.OnElementChanged(e); if (Control != null) { Control.PlaceholderText = Element.Title; Control.Header = null; } } } } ，然后清除PlaceholderText，它已由默认渲染器设置。

我已使用此official renderer here创建了一个示例解决方案，您可以克隆它并自行尝试:-)。