如何使用 xaml 设置类属性的子级？ （Xamarin.forms）

Question

我正在使用 xamarin.forms 制作应用程序。

我有一个名为 AAStackLayout 的类，它内部有一个 Image。

我使用 xaml 在名为 AAContentPage 的页面上添加 AAStackLayout。

那么，如何使用 xaml 从 AAContentPage 访问布局的图像，以便我可以更改其可绑定属性？

类似的东西：

AAContentPage.xaml

<ContentPage>
  <local:AAStackLayout>
    <local:AAStackLayout.MyImage>
      <source="AAA.jpg"/>
    </local:AAStackLayout.MyImage>
  </local:AAStackLayout> 
</ContentPage>

AAStackLayout.xaml

<StackLayout>
  <Image x:Name="MyImage"/>
</StackLayout>

我想要的是编辑已经添加的 Image 的可绑定属性。我没有尝试添加新图片。

另外，我知道我可以添加与 Image 相同的可绑定属性并将其应用于 Image。但我认为这不是最好的方法。

谢谢。

Answer 1

您可以在您的自定义AAStackLayout 中使用BindableProperty 参数之一BindableProperty.BindingPropertyChangedDelegate

private static void OnImageChanged(BindableObject bindable, object oldValue, object newValue)
{
    var yourStack = bindable as AAStackLayout;
    yourStack.MyImage = // use newValue
    // or
    yourStack.MyImage.Source = // use newValue
    // Don't know the type of your BindableProperty
}

我的意思：

public partial class AAStackLayout : StackLayout
{
    public static readonly BindableProperty MyImageProperty =
            BindableProperty.Create(nameof(MyImage),
                                    typeof(ImageSource),
                                    typeof(AAStackLayout),
                                    default(ImageSource),
                                    propertyChanged: OnImageChanged);

    public ImageSource MyImage
    {
        get { return (ImageSource)GetValue(MyImageProperty); }
        set { SetValue(MyImageProperty, value); }
    }

    public AAStackLayout()
    {
        InitializeComponent();
    }

    private static void OnImageChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var stack = bindable as AAStackLayout;
        stack.Image.Source = (ImageSource)newValue;
    }
}


<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CommonSample.AAStackLayout">
  <Image x:Name="Image" />
</StackLayout>


<?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:local="clr-namespace:CommonSample;assembly=CommonSample"
             x:Class="CommonSample.Page1">
  <local:AAStackLayout MyImage="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcReayFrJYeKHSMTsZcp4GA78zygyG7SBColupjra_YVLhznN2tx" />
</ContentPage>

我不确定您是否可以从 XAML 联系到 <Image x:Name="Image" />，但您可以做下一件事：

public partial class AAStackLayout : StackLayout
{
    public Image MyImage
    {
        get
        {
            return this.Image;
        }
    }

    public AAStackLayout()
    {
        InitializeComponent();
    }
}

以及来自代码后面的AAStack 的工作：

var stack = new AAStackLayout();
stack.MyImage