Блог

Я пытаюсь создать contentView, содержащий CheckBox и Label . При нажатии на ярлык флажок должен быть установлен.

Теперь проблема, с которой я сталкиваюсь в своем коде, заключается в том, что каждый раз, когда вы хотите использовать флажок, вам нужно перебазировать 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 свойство на моем флажке вместо моей viewmodel (почему?).

Как я могу переписать это, чтобы мне не приходилось указывать источник каждый раз, когда я использую свой флажок?

Я создал репозиторий здесь

Код

Код, лежащий в основе:

 [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>
  

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" />

Кстати, немного переработайте проверенную область.

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