绑定属性在 Xamarin 中不起作用

Question

我正在尝试创建一个自定义ContentView ，可以在我的Xamarin.Froms应用程序中使用 de xaml 视图。 IconColor上的绑定不起作用。 我遵循了文档ContentView但它似乎不起作用。 FontImageSource的颜色永远不会设置。 我在这里想念什么？

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="Peripass.Mobile.Framework.UIControls.PeripassIcon"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
  <ContentView.Resources>
  </ContentView.Resources>
  <ContentView.Content>
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
      <Image>
        <Image.Source>
          <FontImageSource x:Name="_icon" Glyph="" Color="{Binding IconColor}" Size="20" FontFamily="{OnPlatform  Android=PeripassIcon.ttf#}" />
        </Image.Source>
      </Image>
    </StackLayout>
  </ContentView.Content>
</ContentView>

using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Peripass.Mobile.Framework.UIControls {
  [XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class PeripassIcon : ContentView {

    public static readonly BindableProperty IconSizeProperty = BindableProperty.Create(nameof(IconSize), typeof(double), typeof(PeripassIcon), 26.0);
    public static readonly BindableProperty IconColorProperty = BindableProperty.Create(nameof(IconColor), typeof(Color), typeof(PeripassIcon), Color.White);
    public static readonly BindableProperty IconNameProperty = BindableProperty.Create(nameof(IconName), typeof(IconType?), typeof(PeripassIcon));

    public PeripassIcon() {
      InitializeComponent();
    }

    public IconType IconName {
      get => (IconType)GetValue(IconNameProperty);
      set => SetValue(IconNameProperty, value);
    }

    public double IconSize {
      get => (double)GetValue(IconSizeProperty);
      set => SetValue(IconSizeProperty, value);
    }

    public Color IconColor {
      get => (Color)GetValue(IconColorProperty);
      set => SetValue(IconColorProperty, value);
    }

    protected override void OnPropertyChanged(string propertyName = null) {
      base.OnPropertyChanged(propertyName);
      if (propertyName == IconNameProperty.PropertyName) {
        _icon.Glyph = $"&#x{(int)IconName:X4};";
      }
    }
  }
}

<StackLayout Grid.Row="1" Grid.Column="0">
    <uiControls:PeripassIcon IconName="{Binding Model.Icon}" IconColor="#EE4022" IconSize="85.5"/>
</StackLayout>

Answer 1

我需要像这样设置 BindingContext：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="Peripass.Mobile.Framework.UIControls.PeripassIcon"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Name="this">
  <ContentView.Resources>
  </ContentView.Resources>
  <ContentView.Content>
    <StackLayout BindingContext="{x:Reference this}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
      <Image>
        <Image.Source>
          <FontImageSource x:Name="_icon" Glyph="" Color="{Binding IconColor}" Size="{Binding IconSize}" FontFamily="{OnPlatform  Android=PeripassIcon.ttf#}" />
        </Image.Source>
      </Image>
    </StackLayout>
  </ContentView.Content>
</ContentView>

Answer 2

MVVM 中的一个最佳实践是将 Views 与 ViewModels 分开，因此最好的方法是将 BindingContext 设置为 ViewModel（不是 View via {x:Reference this} ）。

确保在 Code behind 或 Xaml 中将页面绑定上下文设置为您的 ViewModel，正确定义 rest。