如何在 Xamarin Picker 中设置项目列表的样式(在 Android 中)
How do I style the items list in a Xamarin Picker (in Android)
我有一个 Xamarin Android 应用程序,它使用选择器从值列表中 select。我一直在更改应用程序的样式,但是 运行 Picker 出现问题。
虽然我可以设置TextColor,但我无法设置占位符文本的颜色。
在搜索 SO 寻求帮助后,我实现了一个自定义渲染器,现在我可以在正确的文本中显示文本和占位符。然而,以前当我触摸占位符文本时,子对话框出现并显示所有项目,允许用户 select 一个。现在我实现了自定义渲染器,子对话框只显示最上面的两个项目,用户必须滚动浏览它们才能点击确定。
我有两个问题:
- 至少,我怎样才能让子对话框再次显示完整列表?
- 是否可以为项目列表对话框设置背景和文本颜色?
XAML 看起来像这样:
<c:CustomPicker x:Name="DivisionList" Title="{x:Static prop:Resources.PickerDivision}"
SelectedIndexChanged="DivisionList_SelectedIndexChanged">
<Picker.Behaviors>
<b:RequiredPickerValidator x:Name="DivValidator" IsValid="{Binding Path=BindingContext.IsDivisionValid, Mode=OneWayToSource, Source={x:Reference contentPage}}" />
</Picker.Behaviors>
</c:CustomPicker>
CustomPickerclass如下:
namespace <myapp>.Portable.Controls
{
public class CustomPicker : Picker
{
public Color PlaceholderColour
{
get { return (Color)App.Current.Resources["PlaceholderTextColour"]; }
}
public Color TextColour
{
get { return (Color)App.Current.Resources["LabelTextColour"]; }
}
public Color BackgroundColour
{
get { return (Color)App.Current.Resources["PaneBackgroundColour"]; }
}
}
}
客户渲染器是这样的:
[assembly: ExportRendererAttribute(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace <myapp>.Droid.Controls.Renderers
{
public class CustomPickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
Control?.SetPadding(20, 20, 20, 20);
if (e.OldElement != null || e.NewElement != null)
{
var customPicker = e.NewElement as CustomPicker;
Android.Graphics.Color phCol = customPicker.PlaceholderColour.ToAndroid();
Android.Graphics.Color textCol = customPicker.TextColour.ToAndroid();
Android.Graphics.Color bgCol = customPicker.BackgroundColour.ToAndroid();
Control.SetBackgroundColor(bgCol);
Control.SetHintTextColor(phCol);
Control.SetTextColor(textCol);
}
}
}
}
非常感谢!
自定义渲染器之前的选择器弹出窗口:
自定义呈现器后的选择器弹出窗口:
你可以在Control
上添加点击事件,然后你可以自定义一个对话框,在这个对话框中,你可以自定义任何你想要的东西,背景,项目文本颜色等
在你的 CustomPickerRenderer
中,这样做:
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
Control?.SetPadding(20, 20, 20, 20);
if (e.OldElement != null || e.NewElement != null)
{
var customPicker = e.NewElement as CustomPicker;
...
// add click event
Control.Click += Control_Click;
}
}
您可以显示一个 Dialog
,并自定义其布局,例如,在其布局中添加一个 ListView
,这样您将获得显示完整列表的子对话框:
private void Control_Click(object sender, EventArgs e)
{
Toast.MakeText(Xamarin.Forms.Forms.Context,"111111",ToastLength.Short).Show();
dialog = new Dialog(Forms.Context);
dialog.SetContentView(Resource.Layout.dialog);
Android.Widget.Button b1 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button1);
Android.Widget.Button b2 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button2);
Android.Widget.ListView listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.lv);
listView.Adapter=new ArrayAdapter<String>(Forms.Context, Android.Resource.Layout.SimpleExpandableListItem1,
new List<String>() { "111","222","333", "444", "555", "666", "777", "888", "999", });
b1.Click += B1_Click;
b2.Click += B2_Click;
dialog.Show();
}
下面是dialog
布局,您可以为项目列表对话框设置背景和文本颜色:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="123456"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ok" />
</LinearLayout>
</LinearLayout>
似乎有 2 个选择器渲染器。
Xamarin.Forms.Platform.Android.PickerRenderer&
Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
确保你使用最后一个,你的布局将和以前一样!!!
渲染器(没有实际迹象表明有 2 个):
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers
要在不修改自定义渲染器的情况下删除这些行并恢复到默认的选择器视图,只需扩展此 class
Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
看起来应该有点像这样;
public class CustomPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
{
[logic]
}
而不是
public class CustomPickerRenderer : PickerRenderer
{
[logic]
}
您似乎默认扩展了 Xamarin.Forms.Platform.Android
,Class 似乎添加了不同的选择器视图。
我有一个 Xamarin Android 应用程序,它使用选择器从值列表中 select。我一直在更改应用程序的样式,但是 运行 Picker 出现问题。 虽然我可以设置TextColor,但我无法设置占位符文本的颜色。
在搜索 SO 寻求帮助后,我实现了一个自定义渲染器,现在我可以在正确的文本中显示文本和占位符。然而,以前当我触摸占位符文本时,子对话框出现并显示所有项目,允许用户 select 一个。现在我实现了自定义渲染器,子对话框只显示最上面的两个项目,用户必须滚动浏览它们才能点击确定。
我有两个问题:
- 至少,我怎样才能让子对话框再次显示完整列表?
- 是否可以为项目列表对话框设置背景和文本颜色?
XAML 看起来像这样:
<c:CustomPicker x:Name="DivisionList" Title="{x:Static prop:Resources.PickerDivision}"
SelectedIndexChanged="DivisionList_SelectedIndexChanged">
<Picker.Behaviors>
<b:RequiredPickerValidator x:Name="DivValidator" IsValid="{Binding Path=BindingContext.IsDivisionValid, Mode=OneWayToSource, Source={x:Reference contentPage}}" />
</Picker.Behaviors>
</c:CustomPicker>
CustomPickerclass如下:
namespace <myapp>.Portable.Controls
{
public class CustomPicker : Picker
{
public Color PlaceholderColour
{
get { return (Color)App.Current.Resources["PlaceholderTextColour"]; }
}
public Color TextColour
{
get { return (Color)App.Current.Resources["LabelTextColour"]; }
}
public Color BackgroundColour
{
get { return (Color)App.Current.Resources["PaneBackgroundColour"]; }
}
}
}
客户渲染器是这样的:
[assembly: ExportRendererAttribute(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace <myapp>.Droid.Controls.Renderers
{
public class CustomPickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
Control?.SetPadding(20, 20, 20, 20);
if (e.OldElement != null || e.NewElement != null)
{
var customPicker = e.NewElement as CustomPicker;
Android.Graphics.Color phCol = customPicker.PlaceholderColour.ToAndroid();
Android.Graphics.Color textCol = customPicker.TextColour.ToAndroid();
Android.Graphics.Color bgCol = customPicker.BackgroundColour.ToAndroid();
Control.SetBackgroundColor(bgCol);
Control.SetHintTextColor(phCol);
Control.SetTextColor(textCol);
}
}
}
}
非常感谢!
自定义渲染器之前的选择器弹出窗口:
自定义呈现器后的选择器弹出窗口:
你可以在Control
上添加点击事件,然后你可以自定义一个对话框,在这个对话框中,你可以自定义任何你想要的东西,背景,项目文本颜色等
在你的 CustomPickerRenderer
中,这样做:
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
Control?.SetPadding(20, 20, 20, 20);
if (e.OldElement != null || e.NewElement != null)
{
var customPicker = e.NewElement as CustomPicker;
...
// add click event
Control.Click += Control_Click;
}
}
您可以显示一个 Dialog
,并自定义其布局,例如,在其布局中添加一个 ListView
,这样您将获得显示完整列表的子对话框:
private void Control_Click(object sender, EventArgs e)
{
Toast.MakeText(Xamarin.Forms.Forms.Context,"111111",ToastLength.Short).Show();
dialog = new Dialog(Forms.Context);
dialog.SetContentView(Resource.Layout.dialog);
Android.Widget.Button b1 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button1);
Android.Widget.Button b2 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button2);
Android.Widget.ListView listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.lv);
listView.Adapter=new ArrayAdapter<String>(Forms.Context, Android.Resource.Layout.SimpleExpandableListItem1,
new List<String>() { "111","222","333", "444", "555", "666", "777", "888", "999", });
b1.Click += B1_Click;
b2.Click += B2_Click;
dialog.Show();
}
下面是dialog
布局,您可以为项目列表对话框设置背景和文本颜色:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="123456"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ok" />
</LinearLayout>
</LinearLayout>
似乎有 2 个选择器渲染器。
Xamarin.Forms.Platform.Android.PickerRenderer& Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
确保你使用最后一个,你的布局将和以前一样!!!
渲染器(没有实际迹象表明有 2 个): https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers
要在不修改自定义渲染器的情况下删除这些行并恢复到默认的选择器视图,只需扩展此 class
Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
看起来应该有点像这样;
public class CustomPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
{
[logic]
}
而不是
public class CustomPickerRenderer : PickerRenderer
{
[logic]
}
您似乎默认扩展了 Xamarin.Forms.Platform.Android
,Class 似乎添加了不同的选择器视图。