.NET MAUI iOS平台Telerik DataGrid内ImageButton失效问题

问题现象 #

• Android平台测试正常，iOS平台中Telerik DataGrid内的ImageButton点击无响应
• 界面可见按钮，但绑定的Command完全不触发
• 绑定诊断警告：Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics: Warning: 'BindingContext' property not found on 'formaciones.ViewModels.Formacion.ActoViewModel', target property: 'Microsoft.Maui.Controls.ImageButton.Command'
• 将按钮移至<Shell.TitleView>中可正常工作

相关代码 #

单个ImageButton所在列代码 #

<telerik:DataGridTemplateColumn HeaderText="" IsVisible="True">
    <telerik:DataGridTemplateColumn.CellContentTemplate>
        <DataTemplate x:DataType="vmodels:ActoViewModel">
            <ImageButton x:Name="elimina" Command="{Binding BindingContext.SelectionCommand, Source={x:Reference ActosL}}"
                CommandParameter="{Binding IdActo}"
                WidthRequest="26" HeightRequest="26"
                IsEnabled="True">
                <ImageButton.Source>
                    <FontImageSource FontFamily="Iconsj" Glyph="" Color="LightCoral"/>
                </ImageButton.Source>
            </ImageButton>
        </DataTemplate>
    </telerik:DataGridTemplateColumn.CellContentTemplate>
</telerik:DataGridTemplateColumn>

视图后台代码 #

public ActoView() {      
    InitializeComponent();
    vm = new ActoViewModel(this, new LocalDbService());
    BindingContext = vm; 
}

ViewModel代码 #

public ICommand SelectionCommand { get; }
public ActoViewModel()
{
}

public ActoViewModel(Page currentPage, LocalDbService dbService)
{
    database = dbService;
    _currentPage = currentPage;
    LoadData();
    CargaTitulo();
    SelectionCommand = new Command(async (idActo) => await GuardarIdAc(idActo));
}

public async Task GuardarIdAc(object idActo)
{
    IdActo = int.Parse(idActo.ToString());
}

完整Grid布局代码 #

<Grid>
<Grid RowDefinitions="*">
    <Grid ColumnDefinitions="*,*,*,*" Margin="10">
    </Grid>
    <Grid Grid.Row="0">
        <telerik:RadDataGrid x:Name="dataGrid"
            ItemsSource="{Binding Source}"
            AutoGenerateColumns="False"
            BackgroundColor="AliceBlue"
            SelectionMode="None">
            <telerik:RadDataGrid.Columns>
                <telerik:DataGridDateColumn PropertyName="FechaInicio" HeaderText="Fecha" CanUserFilter="False"/>
                <telerik:DataGridTextColumn PropertyName="Acto" HeaderText="Formacion" CanUserFilter="False"/>
                <telerik:DataGridNumericalColumn PropertyName="IdActo" HeaderText="id" IsVisible="False" CanUserFilter="False"/>
                <telerik:DataGridTemplateColumn HeaderText="" IsVisible="True">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <ImageButton x:Name="modificar"
                                Command="{Binding BindingContext.SelectionCommand3, Source={x:Reference Actos}}"
                                CommandParameter="{Binding IdActo}"
                                WidthRequest="26"
                                HeightRequest="26"
                                IsEnabled="True">
                                <ImageButton.Source>
                                    <FontImageSource FontFamily="Iconsj" Glyph="&#xE802;" Color="Grey"/>
                                </ImageButton.Source>
                            </ImageButton>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>
                <telerik:DataGridTemplateColumn HeaderText="" IsVisible="True">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <ImageButton x:Name="elimina"
                                Command="{Binding BindingContext.SelectionCommand2, Source={x:Reference Actos}}"
                                CommandParameter="{Binding IdActo}"
                                WidthRequest="26"
                                HeightRequest="26"
                                IsEnabled="True">
                                <ImageButton.Source>
                                    <FontImageSource FontFamily="Iconsj" Glyph="&#xE801;" Color="LightCoral"/>
                                </ImageButton.Source>
                            </ImageButton>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>
                <telerik:DataGridTemplateColumn HeaderText="">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <ImageButton x:Name="SelectedButton"
                                Command="{Binding BindingContext.SelectionCommand, Source={x:Reference Actos}}"
                                CommandParameter="{Binding IdActo}"
                                WidthRequest="26"
                                HeightRequest="26"
                                IsEnabled="True">
                                <ImageButton.Source>
                                    <FontImageSource FontFamily="Iconsj" Glyph="&#xF064;" Color="Green"/>
                                </ImageButton.Source>
                            </ImageButton>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>
            </telerik:RadDataGrid.Columns>
        </telerik:RadDataGrid>
    </Grid>
</Grid>

解决方案 #

1. 统一绑定引用的元素名称 #

代码中存在引用名称不一致问题：单个按钮代码引用ActosL，但完整布局中绑定用的是Actos，需确保x:Reference指向正确的页面根元素（比如页面的x:Name为Actos）。

2. 用RelativeSource替代x:Reference（iOS兼容性优化） #

iOS平台下x:Reference在DataTemplate内可能存在上下文解析异常，改用RelativeSource绑定到页面的BindingContext：

<!-- 先在XAML顶部引入视图命名空间 -->
xmlns:views="clr-namespace:formaciones.Views.Formacion"

<!-- 修改ImageButton的Command绑定 -->
Command="{Binding BindingContext.SelectionCommand, RelativeSource={RelativeSource AncestorType={x:Type views:ActoView}}}"

3. 完善ViewModel的Command初始化 #

ViewModel无参构造函数未初始化SelectionCommand，可能导致绑定时机问题，补充初始化：

public ActoViewModel()
{
    SelectionCommand = new Command<object>(async (idActo) => await GuardarIdAc(idActo));
}

4. 修复Telerik渲染层交互问题 #

• 更新Telerik UI for .NET MAUI到最新版本，老版本iOS端DataTemplate内交互元素可能存在事件穿透问题
• 给ImageButton添加InputTransparent="False"强制开启交互：

<ImageButton x:Name="elimina" 
             InputTransparent="False"
             ... />

内容的提问来源于stack exchange，提问作者Giorgio