Xamarin 将选取器绑定到标签绑定答案

【问题标题】：Xamarin Forms Picker Binding to Label BindingXamarin 将选取器绑定到标签绑定
【发布时间】：2021-08-17 02:58:45
【问题描述】：

我设法将 Picker 绑定到我需要的列表中的值。在与选择器相同的页面上，我想要一个标签来显示我从选择器中选择的内容。我在选择器中有一个显示文本，还有一个“id”，它是一个字符。

这是 XAML：

<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding Source={x:Reference AVPUPicker}, Path=SelectedItem}" FontAttributes="Bold" FontSize="10" TextColor="LightBlue" Padding="0,0,0,0"/>
            <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding Source={x:Reference AVPUPicker}, Path=ItemDisplayBinding}" FontAttributes="Bold" FontSize="16" TextColor="LightBlue" Padding="0,0,0,0"/>
            <Picker x:Name="AVPUPicker" Title="Vælg tilstand" SelectedItem="{Binding KarakterId}" ItemDisplayBinding="{Binding ForklarendeTekst}" ItemsSource="{Binding AVPUListe}" IsVisible="True"/>

Picker 上的数据绑定按预期工作。我已经测试了“KarakterId”和“ForklarendeTekst”，当 Picker 被激活时，它确实显示了正确的值。因此数据似乎已加载到选择器中。我正在使用 x:Reference, Path 来访问选择器上的属性。然而，这就是它失败的地方。我确实得到了标签中两个 X:Ref 绑定的输出：

EWSMonitor.Models.AVPU 

Xamarin.Forms.Binding

如果我删除了SelectedItem 属性上的绑定，并手动输入一些文本值，则标签上的绑定有效。所以选择器工作，并且对属性的引用似乎工作，当手动输入一些东西时，但是当有界时，它会中断。我错过了什么？

更新：

我想我的列表中缺少INotifyOnChange 部分。但我怎样才能做到这一点？我正在 ViewModel 中创建列表：public IList<AVPU> AVPUListe { get; }，它引用了我在 Model 文件夹中创建的类 AVPU：

public class AVPU
    {
        public char KarakterId { get; set; }
        public string ForklarendeTekst { get; set; }

}

然后我将我的选择添加到 AVPUListe：

AVPUListe = new ObservableCollection<AVPU>();
            AVPUListe.Add(new AVPU { KarakterId = 'A', ForklarendeTekst = "Alert - Vågen" });
            AVPUListe.Add(new AVPU { KarakterId = 'V', ForklarendeTekst = "Verbal - Tiltale" });
            AVPUListe.Add(new AVPU { KarakterId = 'P', ForklarendeTekst = "Pain - Smertestimuli" });
            AVPUListe.Add(new AVPU { KarakterId = 'U', ForklarendeTekst = "Unresponsive - Ukontaktbar" });

【问题讨论】：

您应该将标签绑定到与 SelectedItem 绑定的 VM 的同一属性，而不是直接绑定到 Picker
我用新信息更新了我的问题。我想我缺少在这个上实现 INotifyPropertyChanged，但我不知道是需要处理的 AVPUListe 还是 AVPU 类中的字符和字符串？
SelectedItem 必须是您的虚拟机上的 AVPU 类型的属性
我想我明白了，但这怎么可能呢？ new AVPU 表示它来自一个新类，我似乎无法在 ViewModel 中找到它。是否可以通过绑定以另一种方式创建列表？或者也许只有我不知道如何达到它。其他绑定工作得很好。

标签： xamarin xamarin.forms

【解决方案1】：

作为jason的回复，你需要通过ViewModel绑定Picker的SelectedItem，我做了一个简单的例子你可以看看：

 <Label
            Padding="0,0,0,0"
            FontAttributes="Bold"
            FontSize="10"
            HorizontalTextAlignment="Center"
            Text="{Binding Source={x:Reference AVPUPicker}, Path=SelectedItem.KarakterId}"
            TextColor="LightBlue"
            VerticalTextAlignment="Center" />
        <Label
            Padding="0,0,0,0"
            FontAttributes="Bold"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Source={x:Reference AVPUPicker}, Path=SelectedItem.ForklarendeTekst}"
            TextColor="LightBlue"
            VerticalTextAlignment="Center" />
        <Picker
            x:Name="AVPUPicker"
            Title="Vælg tilstand"
            IsVisible="True"
            ItemDisplayBinding="{Binding ForklarendeTekst}"
            ItemsSource="{Binding AVPUListe}"
            SelectedItem="{Binding selecteditem}" />

SelectedItem 需要实现INotifyPropertyChanged 以在您更改选择器选定索引时通知数据更改。

 public class avpuviewmodel:ViewModelBase
{
    public ObservableCollection<AVPU> AVPUListe { get; set; }
    private AVPU _selecteditem;
    public AVPU selecteditem
    {
        get { return _selecteditem; }
        set
        {
            _selecteditem = value;
            RaisePropertyChanged("selecteditem");
        }
    }
    public avpuviewmodel()
    {
            AVPUListe = new ObservableCollection<AVPU>();
            AVPUListe.Add(new AVPU { KarakterId = 'A', ForklarendeTekst = "Alert - Vågen" });
            AVPUListe.Add(new AVPU { KarakterId = 'V', ForklarendeTekst = "Verbal - Tiltale" });
            AVPUListe.Add(new AVPU { KarakterId = 'P', ForklarendeTekst = "Pain - Smertestimuli" });
            AVPUListe.Add(new AVPU { KarakterId = 'U', ForklarendeTekst = "Unresponsive - Ukontaktbar" });
        selecteditem = AVPUListe[0];          
    }
}
public class AVPU
{
    public char KarakterId { get; set; }
    public string ForklarendeTekst { get; set; }

}

 public class ViewModelBase : INotifyPropertyChanged
{   
    public event PropertyChangedEventHandler PropertyChanged;       
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

最后，将视图模型绑定到当前内容页面。

 public partial class Page3 : ContentPage
{
    public Page3()
    {
        InitializeComponent();
        this.BindingContext = new avpuviewmodel();
    }          
}

【讨论】：

即使我肯定会完全按照这种方式完成，但从头再来，还是成功了。谢谢你。我不知道为什么我不能让它第一次工作。

【解决方案2】：

你的虚拟机需要有一个属性来绑定到SelectedItem

ObservableCollection<AVPU> AVPUListe { get; set; }

AVPU Selected { get; set; }

那么您的Picker 将是

<Picker SelectedItem="{Binding Selected}" ... />

还有你的Label

<Label Text="{Binding Selected.ForklarendeTekst" ... />

【讨论】：