XAML:如何直接设置用户控件的属性

kuuvgm7e  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(182)

我在MAUI中创建了一个新的类库,其中定义了一个用户控件。它是一个简单的用户控件,由一个复选框和一个标签组成。应该注意的是,在MAUI中,复选框只有框,而没有关联的标签。下面是XAML代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiLib_CustomControls.CheckBoxExt">
    <HorizontalStackLayout>
        <CheckBox x:Name="myCheckBox"/>
        <Label 
            x:Name="myLabel"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </HorizontalStackLayout>
</ContentView>

下面是相关的c#代码:

namespace MauiLib_CustomControls;

public partial class CheckBoxExt : ContentView
{
    public CheckBoxExt()
    {
        InitializeComponent();
    }

    public CheckBox CheckBox => myCheckBox;
    public Label Label => myLabel;

}

我编译了这个项目并生成了dll,它被导入到我的主项目中。

xmlns:MauiLib_CustomControls = "clr-namespace:MauiLib_CustomControls;assembly=MauiLib_CustomControls"

并在网格中使用用户控件

<MauiLib_CustomControls:CheckBoxExt x:Name="myCheckBoxExt"/>

目前,如果我想设置一些属性或事件,我必须将它们写入C#文件,因为它们在xaml中不可用。

this.myCheckBoxExt.Label.Text = "FROM";
this.myCheckBoxExt.CheckBox.CheckedChanged += myCheckBoxExt_CheckedChanged;

那么,我如何直接从xaml代码中设置这个用户控件的属性,就像对于本机控件一样?考虑到我想让与两个子控件(复选框和标签)关联的所有属性和事件都可用。

7xzttuei

7xzttuei1#

执行此操作的一种方法是使用BindableProperty,如下所示。您可以修改自定义控件,如下所示:

代码隐藏

public partial class CheckBoxExt : ContentView
{
    public bool Checked
    {
        get => (bool)GetValue(CheckedProperty);
        set => SetValue(CheckedProperty, value);
    }

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

    public event EventHandler<CheckedChangedEventArgs> CheckedChanged;

    public static readonly BindableProperty CheckedProperty = BindableProperty.Create(nameof(Checked), typeof(bool), typeof(CheckBoxExt), propertyChanged: OnCheckedPropertyChanged);

    private static void OnCheckedPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((CheckBoxExt)bindable).CheckedChanged?.Invoke((CheckBoxExt)bindable, new CheckedChangedEventArgs((bool)newValue));
    }

    public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(CheckBoxExt));

    public CustomCheckBox()
    {
        InitializeComponent();
    }
}

XAML格式

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:customControls="clr-namespace:MauiLib_CustomControls"
             x:Class="MauiLib_CustomControls.CheckBoxExt">
  <HorizontalStackLayout>

    <CheckBox
      IsChecked="{Binding Checked, Source={RelativeSource AncestorType={x:Type customControls:CustomCheckBox}}}"/>

    <Label 
      Text="{Binding Text, Source={RelativeSource AncestorType={x:Type customControls:CustomCheckBox}}}"
      VerticalOptions="Center" 
      HorizontalOptions="Center" />

  </HorizontalStackLayout>
</ContentView>

用法

在使用XAML的程式码中,您只需加入控件:

<MauiLib_CustomControls:CheckBoxExt 
  Text="My Text"
  CheckedChanged="OnCheckedChanged"/>

然后添加事件处理程序:

private async void OnCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    await DisplayAlert("Checkbox changed", $"new value: {e.Value}", "OK");
}

**注意:**根据您正在开发的控件类型,可能需要为您的控件注册MAUI处理程序。如果您需要这方面的帮助,请告诉我。

相关问题