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

如何解决Xamarin.Forms：在自定义ContentView的绑定中跳过源代码

我正在尝试创建一个包含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),"",BindingMode.OneWay,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" 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,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>

ViewModel：

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

解决方法

在自定义控件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