WinUI 3 UserControl：如何设置Image的Source与Button的Click事件

我正在构建一个包含图片和文本的Button UserControl，在App中的引用代码如下：

<local:ButtonWithImage
    ButtonClick="Button1_Click"
    ButtonImage="Assets/Clipboard 4.png"
    ButtonText="Clipboard History"
    ButtonWidth="200" />

其中ButtonText和ButtonWidth属性正常工作，但ButtonClick和ButtonImage属性出现以下错误：

1. ButtonClick报错：Cannot implicitly convert type 'string' to 'Microsoft.UI.Xaml.RoutedEventHandler'
2. ButtonImage报错：Cannot implicitly convert type 'string' to 'Microsoft.UI.Xaml.Media.ImageSource'

后续修改Click事件为自定义事件后，又出现No overload for 'Button52_Click' matches delegate 'EventHandler'错误，最终确认是事件签名需要从RoutedEventArgs改为EventArgs（或调整事件委托类型）。

一、修复ButtonImage属性类型不匹配问题 #

问题本质是XAML中传入的图片路径是字符串类型，但UserControl的ButtonImage属性如果定义为ImageSource，无法直接完成隐式转换。

方案1：将ButtonImage定义为string属性，内部转换为ImageSource #

在UserControl的C#代码中，把ButtonImage设为string类型，属性变更时通过BitmapImage将路径转为ImageSource赋值给内部Image控件：

private string _buttonImage;
public string ButtonImage
{
    get => _buttonImage;
    set
    {
        _buttonImage = value;
        if (!string.IsNullOrWhiteSpace(value))
        {
            // 注意路径前缀：ms-appx:/// 用于访问应用安装目录下的资源
            internalImage.Source = new BitmapImage(new Uri($"ms-appx:///{value}"));
        }
    }
}

方案2：保持ImageSource属性，在XAML中用BitmapImage标记扩展 #

如果希望ButtonImage属性保持ImageSource类型，可以在引用时直接使用BitmapImage标记扩展传入：

<local:ButtonWithImage
    ButtonClick="Button1_Click"
    ButtonImage="{BitmapImage UriSource=Assets/Clipboard 4.png}"
    ButtonText="Clipboard History"
    ButtonWidth="200" />

二、修复ButtonClick事件绑定错误问题 #

最初的错误是因为误将事件当作普通属性定义，导致XAML中传入的事件处理方法名被解析为字符串，无法转换为RoutedEventHandler。

正确定义自定义路由事件 #

在UserControl的C#代码中，需要定义标准的路由事件，而非普通属性：

// 注册路由事件
public static readonly RoutedEvent ButtonClickEvent =
    EventManager.RegisterRoutedEvent(
        name: "ButtonClick",
        routingStrategy: RoutingStrategy.Bubble,
        handlerType: typeof(RoutedEventHandler),
        ownerType: typeof(ButtonWithImage));

// 包装为CLR事件供XAML绑定
public event RoutedEventHandler ButtonClick
{
    add => AddHandler(ButtonClickEvent, value);
    remove => RemoveHandler(ButtonClickEvent, value);
}

// 内部Button的Click事件触发时，转发自定义路由事件
private void InternalButton_Click(object sender, RoutedEventArgs e)
{
    RaiseEvent(new RoutedEventArgs(ButtonClickEvent, this));
}

解决事件签名不匹配问题 #

如果修改后出现No overload for 'Button52_Click' matches delegate 'EventHandler'错误，说明自定义事件的委托类型用了EventHandler而非RoutedEventHandler：

• 如果事件定义用的是EventHandler，则事件处理方法的签名必须改为：

  private void Button52_Click(object sender, EventArgs e)
  {
      // 你的处理逻辑
  }
  

• 更推荐遵循WinUI规范，使用RoutedEventHandler作为委托类型，此时方法签名保持(object sender, RoutedEventArgs e)即可。

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