Question

我正在建立一些表格（使用TableView），并注意到我正在对单元格进行相同的样式设计。我决定将这些重复的代码重构为一个通用控件。

我正在努力使绑定正确地在选择器上工作。我的自定义控件如下所示：

我的控件是ViewCell，因此我可以在TableView中显示它：

public partial class PickerCell : ViewCell
{
...
}

我已经可以设置选择器ItemSource，但是我无法使用SelectedItem或DisplayItemBinding属性。

我见过this post from 2015（现在很古老），但是我尝试过，这些方法被标记为过时并且仍然无法正常工作。

我也尝试过控制ctor：

ItemPicker.SetBinding(Picker.ItemsSourceProperty, "ItemSource");
ItemPicker.SetBinding(Picker.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);

但是那也不起作用。

我基本上只是想添加一种方法，以便可以将xaml中的选择器绑定到控件。我真的希望这是可能的，因为我在应用程序周围使用了这个确切的视图单元，可能有9/10次。我真的不想重复很多，通常我会在这种情况下创建控件。例如，我有一个样式相似的单元格用于输入，并且效果很好。...

这是我用来设置商品来源的代码：

public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
    nameof(ItemsSource),
    typeof(IList),
    typeof(PickerCell)
    propertyChanged: (bindable, oldVal, newVal) => ((PickerCell) bindable).OnItemsSourceChanged((IList) newVal)
);

public IList ItemsSource
{
    get { return (IList)GetValue(ItemsSourceProperty); }
    set { SetValue(ItemsSourceProperty, value); }
}

private void OnItemsSourceChanged(IList list)
{
    ItemPicker.ItemsSource = list;
}

我尝试为选择器from Xamarin实现一些代码，但无济于事。

有什么想法吗？

Answer 1

我的自定义选择器也有类似的情况，我想为选定项的更改实现一个事件处理程序。以下是我的操作方法。

在您的自定义选择器的后台代码中，实现EventHandler属性和私有变量：

private EventHandler onIndexChanged = null;
...
public event EventHandler OnIndexChangedEvent
{
    add
    {
        onIndexChanged = null;
        onIndexChanged = value;
    }
    remove
    {
        onIndexChanged = null;
    }
}

在自定义选择器的XAML中，将处理程序添加到SelectedIndexChanged属性中：

<Picker
    x:Name="MyPicker"
    SelectedIndexChanged="Handle_SelectedIndexChanged"/>

然后在您的代码后面，实现此处理程序：

void Handle_SelectedIndexChanged(object sender, System.EventArgs e)
{
    // Trigger the implemented event, if not null.
    onIndexChanged?.Invoke(sender, e);
}

以上内容不可绑定，因此要实现此目的，您必须：

在主视图中设置处理程序：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="MyApp.MyPage"
    xmlns:controls="clr-namespace:MyApp.Controls">
    <ContentPage.Content>
        <StackLayout
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
             <controls:CustomPicker
                ItemSource="{Binding SelectionList}"
                OnIndexChangedEvent="Handle_PickerIndexChangedEvent"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在视图代码的后面实现处理程序，以调用视图模型的处理程序：

private void Handle_PickerIndexChangedEvent(object sender, System.EventArgs e)
{
    viewModel.HandlerIndexChanged(); // or whatever
}

执行此操作可能有更好的方法，即实现Command和CommandParameter。但是，即使我不得不稍微调整MVVM规则，以上内容也对我有用。

Answer 2

这是自定义选择器单元的实现。香草xamarin的唯一变化是绑定显示必须以string而不是binding: property的形式输入。

这是所有重要的代码：

可绑定的财产声明

/// <summary>
/// The placeholder property.
/// </summary>
public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(
    nameof(Placeholder),
    typeof(string),
    typeof(CustomPickerCell),
    propertyChanged: (bindable, oldVal, newVal) => ((CustomPickerCell)bindable).OnPlaceholderChanged((string)newVal)
);

/// <summary>
/// The items source property.
/// </summary>
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
    nameof(ItemsSource),
    typeof(IList),
    typeof(CustomPickerCell),
    propertyChanged: (bindable, oldVal, newVal) => ((CustomPickerCell)bindable).OnItemsSourceChanged((IList)newVal)
);

/// <summary>
/// The selected item property.
/// </summary>
public static readonly BindableProperty SelectedItemProperty = BindableProperty.Create(
    nameof(SelectedItem),
    typeof(object),
    typeof(CustomPickerCell),
    defaultBindingMode: BindingMode.TwoWay,
    propertyChanged: (bindable, oldVal, newVal) => ((CustomPickerCell)bindable).OnSelectedItemChanged((object)newVal)
);

/// <summary>
/// The item display binding property
/// NOTE: Use the name of the property, you do not need to bind to this property.
/// </summary>
public static readonly BindableProperty ItemDisplayBindingProperty = BindableProperty.Create(
    nameof(ItemDisplayBinding),
    typeof(string),
    typeof(CustomPickerCell),
    defaultBindingMode: BindingMode.TwoWay,
    propertyChanged: (bindable, oldVal, newVal) => ((CustomPickerCell)bindable).OnItemDisplayBindingChanged((string)newVal)
);

可绑定属性

/// <summary>
/// The cell's placeholder (select a ....).
/// </summary>
/// <value>The placeholder.</value>
public string Placeholder
{
    get { return (string)GetValue(PlaceholderProperty); }
    set { SetValue(PlaceholderProperty, value); }
}

/// <summary>
/// The cell's picker item source.
/// </summary>
/// <value>The items source.</value>
public IList ItemsSource
{
    get { return (IList)GetValue(ItemsSourceProperty); }
    set { SetValue(ItemsSourceProperty, value); }
}

/// <summary>
/// Gets or sets the selected item.
/// </summary>
/// <value>The selected item.</value>
public object SelectedItem
{
    get { return GetValue(SelectedItemProperty); }
    set { SetValue(SelectedItemProperty, value); }
}

/// <summary>
/// Gets or sets the item display binding.
/// </summary>
/// <value>The item display binding.</value>
public string ItemDisplayBinding
{
    get { return (string)GetValue(ItemDisplayBindingProperty); }
    set { SetValue(ItemDisplayBindingProperty, value); }
}

属性更改方法

/// <summary>
/// Called when PlaceholderProperty changes.
/// </summary>
/// <param name="newVal">New value.</param>
private void OnPlaceholderChanged(string newVal)
{
    ItemPicker.Title = newVal;
}

/// <summary>
/// Called when ItemSourceProperty changes.
/// </summary>
private void OnItemsSourceChanged(IList list)
{
    ItemPicker.ItemsSource = list;
}

/// <summary>
/// Called when SelectedItemProperty changes.
/// </summary>
/// <param name="obj">Object.</param>
private void OnSelectedItemChanged(object obj)
{
    ItemPicker.SelectedItem = obj;
}

/// <summary>
/// Called when ItemDisplayBindingProperty changes.
/// </summary>
/// <param name="newvalue">Newvalue.</param>
private void OnItemDisplayBindingChanged(string newvalue)
{
    ItemPicker.ItemDisplayBinding = new Binding(newvalue);
}

初始化

public CustomPickerCell()
{
    InitializeComponent();

    ItemPicker.ItemsSource = this.ItemsSource;
    ItemPicker.SelectedItem = this.SelectedItem;

    ItemPicker.SelectedIndexChanged += OnSelectedIndexChanged;
}

/// <summary>
/// Calle when ItemPicker's SelectedIndexChanged event fires.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="e">E.</param>
void OnSelectedIndexChanged(object sender, EventArgs e)
{
    this.SelectedItem = (ItemPicker.SelectedIndex < 0 || ItemPicker.SelectedIndex > ItemPicker.Items.Count - 1) ? null : ItemsSource[ItemPicker.SelectedIndex];
}

现在您所要做的就是将此单元格添加到您的xaml中，您就可以开始了！

用法

<!-- Where controls is a namespace defined in your xaml -->
<!-- Not not to bind ItemDisplayBinding, you only need the property name as a string-->
<controls:CustomPickerCell Title="Type" Placeholder="Select an ice cream" 
                        ItemsSource="{Binding IceCreamList}" 
                        SelectedItem="{Binding SelectedIceCream, Mode=TwoWay}" 
                        ItemDisplayBinding="Name"/>

自定义控件中的选取器

2 个答案: