BindingContext 在 MAUI 中失败

Question

我不完全理解绑定上下文在毛伊岛是如何工作的。我有使用此数据网格的主页：

<dataGrid:DataGridView Grid.Row="0" Grid.RowSpan="2"
                       ItemsSource="{Binding Expenses}"
                       SelectionMode="None"
                       IndicatorColor="Transparent"
                       IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
                       IsLoadMoreEnabled="{Binding IsLoadMore}"
                       LoadMoreCommand="{Binding LoadMoreCommand}"
                       BackgroundColor="{StaticResource White}"
                       IsColumnHeaderVisible="False">
    <dataGrid:DataGridView.Columns>
        <dataGrid:TemplateColumn AllowSort="False">
            <dataGrid:TemplateColumn.DisplayTemplate>
                <DataTemplate x:DataType="models:CategoryModel">
                    <templates:ExpenseCategoryListItemTemplate />
                </DataTemplate>
            </dataGrid:TemplateColumn.DisplayTemplate>
        </dataGrid:TemplateColumn>
    </dataGrid:DataGridView.Columns>
</dataGrid:DataGridView>

当我写 x:DataType 时，我认为它应该将 BindingContext 更改为该模型。然后在模板内：

<Grid Padding="16,16,16,0" ColumnSpacing="16" BackgroundColor="{StaticResource White}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="85*" />
    </Grid.ColumnDefinitions>
    <local:RoundIconComponent Grid.Column="0"
                              HeightRequest="32"
                              WidthRequest="32"
                              IconBackgroundColor="{Binding Item.IconColor}"
                              IconName="{Binding Item.IconName}"
                              DefaultIconName="ic_arrow_up_red_small"
                              IconHeightRequest="20"/>

Item.IconColor 或 Item.IconName 不为 null 并且值正确。这是我的 RoundIconComponent.xaml：

<Border 
        BackgroundColor="{Binding IconBackgroundColor}"
        StrokeShape="RoundRectangle 50"
        StrokeThickness="0">
    <Image Source="{Binding IconName}"
               Aspect="AspectFit"
               HeightRequest="{Binding IconHeightRequest}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
</Border>

这是 xaml.cs：

public partial class RoundIconComponent : ContentView {
    public static readonly BindableProperty IconBackgroundColorProperty =
        BindableProperty.Create(nameof(IconBackgroundColor), typeof(string), typeof(RoundIconComponent), string.Empty);
    public static readonly BindableProperty DefaultIconBackgroundColorProperty =
        BindableProperty.Create(nameof(DefaultIconBackgroundColor), typeof(string), typeof(RoundIconComponent), "SteelBlue");
    public static readonly BindableProperty IconNameProperty =
        BindableProperty.Create(nameof(IconName), typeof(string), typeof(RoundIconComponent), string.Empty);
    public static readonly BindableProperty IconHeightRequestProperty =
        BindableProperty.Create(nameof(IconHeightRequest), typeof(int), typeof(RoundIconComponent), 20);
    public static readonly BindableProperty DefaultIconNameProperty =
        BindableProperty.Create(nameof(DefaultIconName), typeof(string), typeof(RoundIconComponent), "shopping_bag");

    public string IconBackgroundColor { get => (string)GetValue(IconBackgroundColorProperty); set => SetValue(IconBackgroundColorProperty, value); }
    public string DefaultIconBackgroundColor { get => (string)GetValue(DefaultIconBackgroundColorProperty); set => SetValue(DefaultIconBackgroundColorProperty, value); }
    public string IconName { get => (string)GetValue(IconNameProperty); set => SetValue(IconNameProperty, value); }
    public string DefaultIconName { get => (string)GetValue(DefaultIconNameProperty); set => SetValue(DefaultIconNameProperty, value); }
    public int IconHeightRequest { get => (int)GetValue(IconHeightRequestProperty); set => SetValue(IconHeightRequestProperty, value); }

    public RoundIconComponent() {
        this.BindingContext = this;
        InitializeComponent();
    }
}

如果有人能告诉我为什么它在这里不起作用以及我能做什么

Answer 1

这不起作用的原因实际上很简单，您在构造函数中分配自定义控件的 BindingContext，一旦您在页面中使用它，它就会被覆盖，因为页面的上下文会自动分配给属于该控件的所有控件在页面中，在使用绑定的 MAUI 中创建自定义控件的正确方法是使用绑定的源作为当前控件，因此在您的情况下，您的自定义控件将如下所示：

public partial class RoundIconComponent : ContentView 
{
    public static readonly BindableProperty IconBackgroundColorProperty =
        BindableProperty.Create(nameof(IconBackgroundColor), typeof(string), typeof(RoundIconComponent), string.Empty);
    public static readonly BindableProperty DefaultIconBackgroundColorProperty =
        BindableProperty.Create(nameof(DefaultIconBackgroundColor), typeof(string), typeof(RoundIconComponent), "SteelBlue");
    public static readonly BindableProperty IconNameProperty =
        BindableProperty.Create(nameof(IconName), typeof(string), typeof(RoundIconComponent), string.Empty);
    public static readonly BindableProperty IconHeightRequestProperty =
        BindableProperty.Create(nameof(IconHeightRequest), typeof(int), typeof(RoundIconComponent), 20);
    public static readonly BindableProperty DefaultIconNameProperty =
        BindableProperty.Create(nameof(DefaultIconName), typeof(string), typeof(RoundIconComponent), "shopping_bag");

    public string IconBackgroundColor { get => (string)GetValue(IconBackgroundColorProperty); set => SetValue(IconBackgroundColorProperty, value); }
    public string DefaultIconBackgroundColor { get => (string)GetValue(DefaultIconBackgroundColorProperty); set => SetValue(DefaultIconBackgroundColorProperty, value); }
    public string IconName { get => (string)GetValue(IconNameProperty); set => SetValue(IconNameProperty, value); }
    public string DefaultIconName { get => (string)GetValue(DefaultIconNameProperty); set => SetValue(DefaultIconNameProperty, value); }
    public int IconHeightRequest { get => (int)GetValue(IconHeightRequestProperty); set => SetValue(IconHeightRequestProperty, value); }

    public RoundIconComponent() 
    {
        InitializeComponent();
    }
}

它的 XAML 将像这样访问其背后的代码：

<ContentView
.
.
.
x:Name="this">
   <Border 
        BackgroundColor="{Binding IconBackgroundColor,Source={x:Reference this}}"
        StrokeShape="RoundRectangle 50"
        StrokeThickness="0">
       <Image Source="{Binding IconName,Source={x:Reference this}}"
               Aspect="AspectFit"
               HeightRequest="{Binding IconHeightRequest,Source={x:Reference this}}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
   </Border>
</ContentView

一旦执行此操作，您无需将 BindingContext 分配给自身，并且几乎可以在任何地方使用此控件