如何在 xamarin 表单的列表视图中使用 Web 视图答案

【问题标题】：How to use web view inside a list view in xamarin forms如何在 xamarin 表单的列表视图中使用 Web 视图
【发布时间】：2021-05-21 14:18:48
【问题描述】：

我想使用 HTML 源代码上的 MVVM 数据绑定在列表视图中显示 Web 视图

【问题讨论】：

在 ListView 模板内放置一个 WebView 控件。你试过这个吗？没有什么特别复杂的。

标签： listview xamarin.forms webview

【解决方案1】：

试试这个代码：对于您的 xaml 文件：

<ContentPage.Resources>
   <ResourceDictionary>
      <local:HtmlSourceConverter x:Key="HtmlSourceConverter" />
   </ResourceDictionary>
</ContentPage.Resources>
...
<ListView>
   <ListView.ItemTemplate>
      <DataTemplate>
         <ViewCell>
            <WebView Source="{Binding MyHtml, Converter={StaticResource HtmlSourceConverter}}" />
         </ViewCell>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

值转换器：

public class HtmlSourceConverter : IValueConverter {
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
      var html = new HtmlWebViewSource();

      if (value != null){
         html.Html = value.ToString();
      }
   
      return html;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){
      throw new NotImplementedException();
   }
}

型号

public class MyWebSite
{
   public string MyHtml { get; set; }
}

视图模型

private IList<MyWebSite> _list;
public IList<MyWebSite> List
{
   get{
      return _list;
   }
   set{
      _list = value;
   }
}
...
public MainPageModel()
{
   List = new List<MyWebSite>(){
      new MyWebSite(){
         MyHtml = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView 1</p></body></html>"
      },
      ...
      ...

   }
}

【讨论】：