ContentView -> 自定义框架绑定不起作用

ContentView -> Custom Frame Binding Not Working

I copied/wrote 继承自 Frame

的 class
public class Circle : Frame
{
    //private double _radius;

    public static readonly BindableProperty RadiusProperty = BindableProperty.Create(nameof(Radius), typeof(double), typeof(Circle), 126.0, BindingMode.TwoWay);
    public double Radius
    {
        get => (double)GetValue(RadiusProperty); //_radius;
        set
        {
            SetValue(RadiusProperty, value);
            OnPropertyChanged();
            AdjustSize();
        }
    }

    private void AdjustSize()
    {
        HeightRequest = Radius;
        WidthRequest = Radius;
        Margin = new Thickness(0,0,0,0);
        Padding = new Thickness(0, 0, 0, 0);
        CornerRadius = (float) (Radius / 2);
    }

    public Circle()
    {
        HorizontalOptions = LayoutOptions.Center;
    }
}

消费页面定义了这些 BinadableProperties

    public static readonly BindableProperty InnerColorProperty = BindableProperty.Create("InnerColor", typeof(Color), typeof(CircleProgressView), defaultValue: Color.FromHex("#34495E"), BindingMode.TwoWay);
    public Color InnerColor
    {
        get => (Color)GetValue(InnerColorProperty);
        set => SetValue(InnerColorProperty, value);
    }

    public static readonly BindableProperty InnerRadiusProperty = BindableProperty.Create("InnerRadius", typeof(double), typeof(CircleProgressView), 126.0, BindingMode.TwoWay);
    public double InnerRadius
    {
        get => (double)GetValue(InnerRadiusProperty);
        set => SetValue(InnerRadiusProperty, value);
    }

并像这样使用

<components:Circle Grid.Row="0" BackgroundColor="{Binding InnerColor}" Radius="{Binding InnerRadius}" >

唉,bindable 的 setter 和 AdjustSize() 从未被调用,也没有使用默认值。我最终得到了一个矩形,而不是一个圆圈。 BackgroundColor,它是 Frame 的 属性,绑定并工作正常。

如果我删除 BindableProperty 并留下常规 INotify 属性

public class Circle : Frame
{
    private double _radius;

    public double Radius
    {
        get => _radius;
        set
        {
            _radius = value;
            OnPropertyChanged();
            AdjustSize();
        }
    }

    private void AdjustSize()
    {
        HeightRequest = Radius;
        WidthRequest = Radius;
        Margin = new Thickness(0,0,0,0);
        Padding = new Thickness(0, 0, 0, 0);
        CornerRadius = (float) (Radius / 2);
    }

    public Circle()
    {
        HorizontalOptions = LayoutOptions.Center;
    }
}

如果我保留 InnerRadius 绑定

,编译器会报错

Severity Code Description Project File Line Suppression State Error Position 17:92. No property, bindable property, or event found for 'Radius', or mismatching type between value and property. ...\Components\CircleProgressView.xaml 17

我可以用硬编码值替换 Radius 绑定,它运行良好,出现一个圆圈。

<components:Circle Grid.Row="0" BackgroundColor="{Binding InnerColor}" Radius="126" >

常规 C# 中的 BindableProperty 有什么问题 class?

首先,我们需要在可绑定 属性 的 属性 更改事件中处理数据,而不是普通 属性 的 setter 方法。所以修改你的 Circle class 像:

public static readonly BindableProperty RadiusProperty = BindableProperty.Create(nameof(Radius), typeof(double), typeof(Circle), 125.0, BindingMode.TwoWay, propertyChanged: RadiusChanged);
public double Radius
{
    get => (double)GetValue(RadiusProperty); //_radius;
    set => SetValue(RadiusProperty, value);
}
static void RadiusChanged(BindableObject bindableObject, object oldValue, object newValue)
{
    Circle circle = bindableObject as Circle;
    circle.HeightRequest = (double)newValue;
    circle.WidthRequest = (double)newValue;
    circle.CornerRadius = (float)((double)newValue / 2);
}

这是因为我们在 XAML 中绑定数据,我们应该直接操作可绑定 属性 的更改事件。

其次,我看到您使用父页面的可绑定 属性 绑定了 属性。通常,我们不会那样做。我们将使用一个视图模型作为页面的绑定上下文,然后将 属性 绑定到绑定上下文。但是,如果您确实想使用父页面的可绑定 属性 作为 Circle 的绑定上下文,请尝试以下方式:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Sample.SecondPage"
             xmlns:components="clr-namespace:Sample"
             x:Name="Page">
    <ContentPage.Content>
        <StackLayout>
            <components:Circle BackgroundColor="{Binding InnerColor, Source={x:Reference Page}}" Radius="{Binding InnerRadius, Source={x:Reference Page}}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

首先命名您的父页面并将圈子的来源更改为该页面。

在这里,我使用了与 InnerRadius 不同的默认 Radius 值,因此 属性 更改事件将在初始时间调用。