基于AvaloniaUI与CommunityToolkit.Mvvm构建可复用控件遇问题求助

问题背景 #

使用Avalonia开发应用，需构建可多处复用的FilePicker UserControl：仅包含一个Button，点击打开文件选择对话框；外部组件需能绑定选中的文件进行操作。基于Visual Studio 2022 Avalonia模板开发，出现命令绑定及DataContext类型转换错误。

现有代码实现 #

FilePicker.axaml #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:userControls="clr-namespace:FoodShiner.Avalonia.UserControls"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="FoodShiner.Avalonia.UserControls.FilePicker"
             x:DataType="userControls:FilePickerViewModel">
    <Button Command="{Binding OpenFileDialog}">Test</Button>
</UserControl>

FilePicker.axaml.cs #

using Avalonia.Controls;

namespace FoodShiner.Avalonia.UserControls;

public partial class FilePicker : UserControl
{
    public FilePicker()
    {
        InitializeComponent();
    }
}

FilePickerViewModel.cs #

using System.Threading.Tasks;
using CommunityToolkit.Mvvm.Input;
using FoodShiner.Avalonia.ViewModels;

namespace FoodShiner.Avalonia.UserControls
{
    internal partial class FilePickerViewModel : ViewModelBase
    {
        [RelayCommand]
        public async Task OpenFileDialog()
        {
            
        }
    }
}

MainView.axaml #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:FoodShiner.Avalonia.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="FoodShiner.Avalonia.Views.MainView"
             x:DataType="vm:MainViewModel">
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
  </Design.DataContext>
</UserControl>

MainWindow.axaml #

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:uc="using:FoodShiner.Avalonia.UserControls"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="FoodShiner.Avalonia.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="FoodShiner.Avalonia" 
        RequestedThemeVariant="Dark"
        HorizontalContentAlignment="Center" 
        VerticalContentAlignment="Center">
        <uc:FilePicker />
</Window>

遇到的错误 #

1. 初始错误（ViewModel为internal时）：

Attempt by method 'CompiledAvaloniaXaml.XamlIlTrampolines.FoodShiner.Avalonia:FoodShiner.Avalonia.UserControls.FilePickerViewModel+OpenFileDialog_0!CommandExecuteTrampoline(System.Object, System.Object)' to access method 'FoodShiner.Avalonia.UserControls.FilePickerViewModel.OpenFileDialog()' failed.

2. 修改ViewModel为public后出现的错误：

System.InvalidCastException: 'Unable to cast object of type 'FoodShiner.Avalonia.ViewModels.MainViewModel' to type 'FoodShiner.Avalonia.UserControls.FilePickerViewModel'.'

错误原因 #

• 第一个错误：FilePickerViewModel为internal访问修饰符，CommunityToolkit.Mvvm生成的命令执行代码无法访问内部方法。
• 第二个错误：FilePicker未设置自身的DataContext，默认继承父容器（MainWindow）的DataContext（MainViewModel），但XAML中指定了x:DataType="userControls:FilePickerViewModel"，导致类型转换失败。

解决方案 #

提供两种主流实现方案，根据复用场景选择：

方案1：控件独立封装ViewModel（适合完全自主逻辑的复用控件） #

此方案让控件自身持有ViewModel，内部逻辑完全封装，外部仅需绑定结果属性。

1. 修改FilePickerViewModel为public，并添加可绑定的选中文件属性：

using System.Threading.Tasks;
using Avalonia.Controls;
using CommunityToolkit.Mvvm.Input;
using FoodShiner.Avalonia.ViewModels;

namespace FoodShiner.Avalonia.UserControls
{
    public partial class FilePickerViewModel : ViewModelBase
    {
        private string _selectedFile;
        public string SelectedFile
        {
            get => _selectedFile;
            set => SetProperty(ref _selectedFile, value);
        }

        [RelayCommand]
        public async Task OpenFileDialog()
        {
            // 实现文件选择对话框逻辑
            var dialog = new OpenFileDialog();
            var result = await dialog.ShowAsync();
            if (result != null && result.Length > 0)
            {
                SelectedFile = result[0];
            }
        }
    }
}

2. 在FilePicker构造函数中设置自身DataContext：

using Avalonia.Controls;

namespace FoodShiner.Avalonia.UserControls;

public partial class FilePicker : UserControl
{
    public FilePicker()
    {
        InitializeComponent();
        DataContext = new FilePickerViewModel();
    }

    // 提供外部绑定选中文件的便捷属性
    public string SelectedFile
    {
        get => ((FilePickerViewModel)DataContext).SelectedFile;
        set => ((FilePickerViewModel)DataContext).SelectedFile = value;
    }
}

3. 外部使用时绑定结果：

<uc:FilePicker SelectedFile="{Binding YourViewModelProperty}" />

方案2：通过依赖属性实现外部绑定（适合适配外部ViewModel的灵活复用） #

此方案移除控件内部ViewModel，通过依赖属性让外部传递命令和数据，更灵活适配不同业务场景。

1. 修改FilePicker添加依赖属性：

using Avalonia;
using Avalonia.Controls;
using System.Windows.Input;

namespace FoodShiner.Avalonia.UserControls;

public partial class FilePicker : UserControl
{
    // 选中文件依赖属性
    public static readonly StyledProperty<string> SelectedFileProperty =
        AvaloniaProperty.Register<FilePicker, string>(nameof(SelectedFile));

    // 打开文件命令依赖属性
    public static readonly StyledProperty<ICommand> OpenFileCommandProperty =
        AvaloniaProperty.Register<FilePicker, ICommand>(nameof(OpenFileCommand));

    public string SelectedFile
    {
        get => GetValue(SelectedFileProperty);
        set => SetValue(SelectedFileProperty, value);
    }

    public ICommand OpenFileCommand
    {
        get => GetValue(OpenFileCommandProperty);
        set => SetValue(OpenFileCommandProperty, value);
    }

    public FilePicker()
    {
        InitializeComponent();
    }
}

2. 修改FilePicker.axaml，绑定到控件自身的依赖属性：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="FoodShiner.Avalonia.UserControls.FilePicker">
    <Button Command="{Binding OpenFileCommand, RelativeSource={RelativeSource AncestorType=UserControl}}">Test</Button>
</UserControl>

3. 外部使用时绑定自身ViewModel的命令和属性：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:uc="using:FoodShiner.Avalonia.UserControls"
        xmlns:vm="clr-namespace:FoodShiner.Avalonia.ViewModels"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="FoodShiner.Avalonia.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="FoodShiner.Avalonia" 
        RequestedThemeVariant="Dark"
        HorizontalContentAlignment="Center" 
        VerticalContentAlignment="Center">
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>
    <uc:FilePicker OpenFileCommand="{Binding OpenFileDialog}" SelectedFile="{Binding SelectedFilePath}" />
</Window>

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