如何在列表控件中获取webview2控件

Question

我想在单击按钮后将页面上的 webview2 控件传递给 ViewModel。 以下是xaml的部分代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel>
        <!--Click the button "Button_single", and the value of parameter can be obtained from ViewModel as Microsoft.Web.WebView2.Wpf.WebView2 type-->
        <Button Command="{Binding BtnCommand1}" CommandParameter="{Binding ElementName=webView_single}">Button_single</Button>
        <!--Click the button "Button_list", and the value of parameter obtained from ViewModel is null. Why?-->
        <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>

我想在单击按钮后将页面上的 webview2 控件传递给 ViewModel。 以下是xaml的部分代码：

 public DelegateCommand<object> BtnCommand1 { get => new DelegateCommand<object>(Execute1); }
    private void Execute1(object parameter)
    {
        //In the xaml page, if you click the button "Button_single", you can get the parameter value of Microsoft.Web.WebView2.Wpf.WebView2 type
        //If you click the button "Button_list", the value of parameter is null. Why and how can it not be null?
        Console.Write(parameter);
    }

我想在 ViewModel 的列表控件中获取 webView 控件。 我应该如何编写这段代码？

（这个问题Passing a Different button in Command Parameter Wpf和我的问题类似，但是不同）

Answer 1

webView_list 命令参数无法工作的原因有两个。

第一个是概念性的。 将会有这些 WebView2 的列表，而不仅仅是一个。 它怎么知道要引用哪一个？

你知道如果你在 c# 中有任何东西的列表，那么你必须通过索引或列表中你想要的东西来引用。

xaml 也是如此。您需要告诉它 go 查看第 0 行或第 1 行或第 2 行或其他内容。

但是还有另一个并发症。 WPF 有名称范围的概念。 window 网格中的所有控件都在同一个名称范围内。

当您有模板，尤其是事物列表时，事情会变得有点复杂。

让我们从下往上考虑这个问题。

您已将控件命名为 webView_list。 这是在一个项目模板中。 所以当你有 4 个项目时，你将有 4 个 WebView2。 但是不会报错。 不知何故，这 4 个命名控件不会相互冲突。

这是因为从该项目模板生成的每个项目都有自己的名称范围。 第一项有自己的名称范围，第二项有自己的名称范围等。

您不能只使用 elementname 来引用不同名称范围中的内容。 因此，您无法使用元素名称从其所在的项目外部获取该列表中的特定 webview2。

在任何情况下，您都需要一些方法来判断是哪一项。

如果这是一个列表框，您可以使用 selecteditem。

itemscontrol 没有选择。 要在项目中获取 webview2，通常要做的是将按钮放在项目模板和相同的名称范围中。 然后可以使用 relativesource 获取父数据上下文中的命令。 就像是：

        <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 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>
        <Button Command="{Binding DataContext.BtnCommand1, RelativeSource={RelativeSource AncestorType ItemsControl}}"
   CommandParameter="{Binding ElementName=webView_list}"  Grid.Row="2">Button_list</Button>

                        <webview2:WebView2 Name="webView_list" Source="https://www.google.com/" Grid.Row="2">
                            <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>