Xamarin.Forms：在自定义 ContentView 的绑定中跳过源

Question

我正在尝试创建一个包含 CheckBox 和 Label 的 ContentView。当您单击标签时，应切换复选框。

现在我的代码遇到的问题是，每次要使用复选框时，都必须重新设置 BindingContext，否则它将不起作用。

您必须指定来源（= MainPage.BindingContext）：

<controls:CheckBox
    Text="Hello world"
    IsChecked="{Binding BindingContext.PanelsVisible,
                   Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type app:MainPage}},
                   Mode=TwoWay}" />

而且不能简单地写：

<controls:CheckBox
    Text="Hello world"
    IsChecked="{Binding PanelsVisible, Mode=TwoWay}" />

您会收到以下错误：

[0:] Binding: 'PanelsVisible' property not found on 'Example.Xamarin.Forms.Controls.CheckBox', target property: 'Example.Xamarin.Forms.Controls.CheckBox.IsChecked'

所以他在我的复选框上寻找PanelsVisible 属性而不是我的视图模型（为什么？）。

我怎样才能重写它，这样我就不必在每次使用我的复选框时都指定源？

我创建了一个repository here

代码

后面的代码：

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CheckBox : ContentView
{
    public CheckBox()
    {
        InitializeComponent();
        BindingContext = this;
    }

    #region IsChecked
    public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create("IsChecked", typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay, propertyChanged: (bindable, oldValue, newValue) =>
    {
        var control = (CheckBox)bindable;
        control.IsChecked = (bool)newValue;
    });

    public bool IsChecked
    {
        get => (bool)GetValue(IsCheckedProperty);
        set
        {
            SetValue(IsCheckedProperty, value);
        }
    }
    #endregion

    #region Text
    public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(CheckBox), "", BindingMode.OneWay, propertyChanged: (bindable, oldValue, newValue) =>
    {
        var control = (CheckBox)bindable;
        control.Text = (string)newValue;
    });

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }
    #endregion

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        IsChecked = !IsChecked;
    }
}

Xaml：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 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"
             xmlns:controls="clr-namespace:MintPlayer.Xamarin.Forms.Controls"
         
             mc:Ignorable="d"
             d:BindingContext="{x:Static controls:CheckBox}"
         
             x:Class="MintPlayer.Xamarin.Forms.Controls.CheckBox">
    <ContentView.Content>
        <StackLayout Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceEventName=CheckedChanged}" HorizontalOptions="Start" VerticalOptions="Start" />
            <Label Text="{Binding Text}" Padding="0,5,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="Start">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                </Label.GestureRecognizers>
            </Label>
        </StackLayout>
    </ContentView.Content>
</ContentView>

所以我可以像这样使用我的自定义复选框：

Xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:app="clr-namespace:MintPlayer.Xamarin.Forms.Controls.Demo"
             xmlns:controls="clr-namespace:MintPlayer.Xamarin.Forms.Controls;assembly=MintPlayer.Xamarin.Forms.Controls"
             x:Class="MintPlayer.Xamarin.Forms.Controls.Demo.MainPage">
    <ContentPage.BindingContext>
        <app:MainVM />
    </ContentPage.BindingContext>
    <StackLayout>
        <controls:CheckBox Text="Hello world" IsChecked="{Binding BindingContext.PanelsVisible, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type app:MainPage}}, Mode=TwoWay}" />
        <!-- I want to write this -->
        <!-- <controls:CheckBox Text="Hello world" IsChecked="{Binding PanelsVisible, Mode=TwoWay}" /> -->
        <Switch IsToggled="{Binding PanelsVisible, Mode=TwoWay}" />
        <Frame IsVisible="{Binding PanelsVisible}" BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
    </StackLayout>
</ContentPage>

视图模型：

public class MainVM : BaseModel
{
    private bool panelsVisible;
    public bool PanelsVisible
    {
        get => panelsVisible;
        set => SetProperty(ref panelsVisible, value);
    }
}

Answer 1

在您的自定义控件 XAML 文件中，记下标记 <ContentView.Content>。

所以在你的自定义控件构造函数中，请改成Content.BindingContext = this;。

然后就可以了。

<controls:CheckBox IsChecked="{Binding PanelsVisible, Mode=TwoWay}" Text="Hello world" />

---

顺便说一句，重构一下 IsChecked 区域。

1. 当您绑定到自身并且没有任何需要更改的属性时，您可以关闭该部分
2. 使用“nameof(IsChecked)”代替字符串值。

        #region IsChecked
        public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay);

        public bool IsChecked
        {
            get => (bool)GetValue(IsCheckedProperty);
            set => SetValue(IsCheckedProperty, value);
        }
        #endregion