如何从变量将 html 内容加载到 UWP WebView

Question

我有一个 UWP 应用程序，其中视图包含 WebView。在我的 ViewModel 中，我有两个变量，一个包含 URI，另一个包含 HTML 内容。

我需要能够导航到 URI 或显示 HTML 内容，具体取决于 ToggleButton 的状态。

我可以绑定 WebView 的 Source 属性以导航到 URI，但我不知道如何加载 HTML 中的内容 WebView.

我知道有一个方法 WebView.NavigateToString(string) 但不知道如何从我的 ViewModel 调用它。我读到你应该从视图后面的代码调用它，但我的视图看不到我的 ViewModel 中的内容。

最明显的方法是从我的 ViewModel 获取对 WebView 的引用，但我不知道该怎么做，它破坏了 MVVM 模式的分离。

谁能提出解决方案？

public class MainPageViewModel : INotifyPropertyChanged
{
    // These properties all observable - notification omitted
    // for brevity
    public bool UseUri { get; set; }
    public string HtmlContent { get; set; }
    public Uri WebUri { get; set; }
}

public sealed partial class MainPage : Page
{
    public MainPageViewModel ViewModel { get; }

    public MainPage()
    {
        this.InitializeComponent();

        ViewModel = new MainPageViewModel();
    }
}

<Page
    x:Class="ReaderZero.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <WebView Source="{x:Bind Path=ViewModel.SelectedEntry.Uri, Mode=OneWay}" />
</Page>

Answer 1

I know that there is a method WebView.NavigateToString(string) but don't know how to call this from my ViewModel. I've read that you should call this from the code behind of the view but my view can't see the content that's in my ViewModel.

对于这种情况，您可以参考 Binding HTML to a WebView with Attached Properties 博客，使 WebViewExtention 如下所示。

public class MyWebViewExtention
{
    public static readonly DependencyProperty HtmlSourceProperty =
           DependencyProperty.RegisterAttached("HtmlSource", typeof(string), typeof(MyWebViewExtention), new PropertyMetadata("", OnHtmlSourceChanged));
    public static string GetHtmlSource(DependencyObject obj) { return (string)obj.GetValue(HtmlSourceProperty); }
    public static void SetHtmlSource(DependencyObject obj, string value) { obj.SetValue(HtmlSourceProperty, value); }
    private static void OnHtmlSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        WebView webView = d as WebView;
        if (webView != null)
        {
            webView.NavigateToString((string)e.NewValue);
        }
    }
 }

用法

<WebView x:Name="webView" local:MyWebViewExtention.HtmlSource="{x:Bind HtmlContent ,Mode=OneWay}">

在上面的基础上，你可以制作两个WebViews，然后将Visibility绑定到ToggleButton IsChecked 属性。这不会破坏 MVVM 模式的分离

如何从变量将 html 内容加载到 UWP WebView

How do I load html content into UWP WebView from a variable

c#

webview

uwp

uwp-xaml