Wpf中如何获取ItemsControl内的WebView2控件并传递至ViewModel

在WPF项目中，点击按钮后希望将页面上的WebView2控件传递给ViewModel。单独的WebView2控件（webView_single）可通过CommandParameter正常传递，但ItemsControl模板内的WebView2控件（webView_list）传递时参数为null。

原因分析 #

• 命名空间隔离：ItemsControl的ItemTemplate属于数据模板（DataTemplate），模板内部的元素处于独立的命名空间（Name Scope），模板外部的元素（如示例中的Button_list按钮）无法通过ElementName直接引用模板内的控件。
• 多实例冲突：当ItemsControl绑定数据源生成多个项时，模板内的webView_list会被多次实例化，每个实例名称相同，但外部无法区分这些实例，导致无法正确获取目标控件。

解决方法 #

方法1：将按钮移入DataTemplate内部 #

把操作按钮放到每个项的模板中，使按钮与WebView2处于同一命名空间，即可直接通过ElementName引用控件。

修改后的DataTemplate代码：

<DataTemplate>
    <md:TransitioningContent OpeningEffect="{md:TransitionEffect Kind=ExpandIn}" >
        <Grid Width="600" MinHeight="800" MaxHeight="250" Margin="8" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition />
            </Grid.RowDefinitions>  
            <Border CornerRadius="4" Grid.RowSpan="5" Background="#7F7F7F" />
            <StackPanel Orientation="Horizontal">                                   
                <TextBlock Text="UserName：" />
                <TextBlock Padding="5,0" Text="{Binding UserName}"  />
                <TextBlock Text="Password：" />
                <TextBlock Padding="5,0" Text="{Binding Password}" />
                <!-- 将按钮移入模板，绑定到上级ViewModel的命令 -->
                <Button Command="{Binding DataContext.BtnCommand1, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                        CommandParameter="{Binding ElementName=webView_list}"
                        Margin="10,0">操作此WebView</Button>
            </StackPanel>
            <webview2:WebView2 Name="webView_list" Source="https://www.google.com/" Grid.Row="1">
                <behaviour:Interaction.Triggers>
                    <behaviour:EventTrigger EventName="NavigationCompleted">
                        <behaviour:CallMethodAction TargetObject="{Binding}" MethodName="webView2_NavigationCompleted" />
                    </behaviour:EventTrigger>
                </behaviour:Interaction.Triggers>
            </webview2:WebView2>
        </Grid>
    </md:TransitioningContent>
</DataTemplate>

说明：按钮的Command通过RelativeSource绑定到ItemsControl的DataContext（即ViewModel），确保命令能正确触发ViewModel中的逻辑。

方法2：通过数据模型关联WebView2实例 #

在数据项模型（AccountDto）中添加WebView2属性，将模板内的WebView实例绑定到模型，ViewModel通过模型即可获取对应的控件。

步骤1：修改AccountDto模型

public class AccountDto : INotifyPropertyChanged
{
    private string _userName;
    public string UserName
    {
        get => _userName;
        set { _userName = value; OnPropertyChanged(); }
    }

    private string _password;
    public string Password
    {
        get => _password;
        set { _password = value; OnPropertyChanged(); }
    }

    // 添加WebView2属性，用于存储控件实例
    private WebView2 _webView;
    public WebView2 WebView
    {
        get => _webView;
        set { _webView = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤2：修改DataTemplate中的WebView2配置

<webview2:WebView2 Source="https://www.google.com/" Grid.Row="1"
                   Loaded="WebView_Loaded"
                   Tag="{Binding}">
    <behaviour:Interaction.Triggers>
        <behaviour:EventTrigger EventName="NavigationCompleted">
            <behaviour:CallMethodAction TargetObject="{Binding}" MethodName="webView2_NavigationCompleted" />
        </behaviour:EventTrigger>
    </behaviour:Interaction.Triggers>
</webview2:WebView2>

步骤3：在View后台处理Loaded事件，赋值WebView实例

private void WebView_Loaded(object sender, RoutedEventArgs e)
{
    var webView = sender as WebView2;
    var accountDto = webView.Tag as AccountDto;
    if (accountDto != null)
    {
        accountDto.WebView = webView;
    }
}

步骤4：在ViewModel中通过模型获取WebView2

public DelegateCommand<object> BtnCommand1 { get => new DelegateCommand<object>(Execute1); }
private void Execute1(object parameter)
{
    // 示例：遍历所有数据项，获取对应的WebView2
    foreach (var account in AccountDtos)
    {
        if (account.WebView != null)
        {
            Console.WriteLine(account.WebView);
            // 执行所需操作，如account.WebView.CoreWebView2.ExecuteScriptAsync("console.log('test')");
        }
    }
}

原问题代码 #

XAML代码 #

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel>
        <!--点击Button_single按钮，ViewModel可获取到Microsoft.Web.WebView2.Wpf.WebView2类型的参数-->
        <Button Command="{Binding BtnCommand1}" CommandParameter="{Binding ElementName=webView_single}">Button_single</Button>
        <!--点击Button_list按钮，ViewModel获取到的参数为null，原因是什么？-->
        <Button Command="{Binding BtnCommand1}" CommandParameter="{Binding ElementName=webView_list}">Button_list</Button>
        <webview2:WebView2 Name="webView_single" Source="https://www.google.com/" Grid.Row="1">
            <behaviour:Interaction.Triggers>
                <behaviour:EventTrigger EventName="NavigationCompleted">
                    <behaviour:CallMethodAction TargetObject="{Binding}" MethodName="webView2_NavigationCompleted" />
                </behaviour:EventTrigger>
            </behaviour:Interaction.Triggers>
        </webview2:WebView2>
    </StackPanel> 
    <ScrollViewer Grid.Row="2" >
        <ItemsControl Grid.Row="1" ItemsSource="{Binding AccountDtos}" HorizontalAlignment="Center">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <md:TransitioningContent OpeningEffect="{md:TransitionEffect Kind=ExpandIn}" >
                        <Grid Width="600" MinHeight="800" MaxHeight="250" Margin="8" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>  
                            <Border CornerRadius="4" Grid.RowSpan="5" Background="#7F7F7F" />
                            <StackPanel Orientation="Horizontal">                                   
                                <TextBlock Text="UserName：" />
                                <TextBlock Padding="5,0" Text="{Binding UserName}"  />
                                <TextBlock Text="Password：" />
                                <TextBlock Padding="5,0" Text="{Binding Password}" /> 
                            </StackPanel>
                            <webview2:WebView2 Name="webView_list" Source="https://www.google.com/" Grid.Row="1">
                                <behaviour:Interaction.Triggers>
                                    <behaviour:EventTrigger EventName="NavigationCompleted">
                                        <behaviour:CallMethodAction TargetObject="{Binding}" MethodName="webView2_NavigationCompleted" />
                                    </behaviour:EventTrigger>
                                </behaviour:Interaction.Triggers>
                            </webview2:WebView2>
                        </Grid>
                    </md:TransitioningContent>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

ViewModel代码 #

public DelegateCommand<object> BtnCommand1 { get => new DelegateCommand<object>(Execute1); }
private void Execute1(object parameter)
{
    //点击Button_single按钮可获取到Microsoft.Web.WebView2.Wpf.WebView2类型的参数
    //点击Button_list按钮时参数为null，原因是什么？如何解决？
    Console.Write(parameter);
}

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