Xamarin.Forms UWP在導航中使用ViewCell渲染時不顯示圖像

Question

我在Xamarin.Forms UWP應用程序中顯示圖像時遇到問題。我的應用程序使用自定義ViewCell的列表視圖。在UWP中，我爲我的自定義單元格渲染。當我在App.cs中將我的頁面稱爲導航頁面時，如MainPage = new NavigationPage(new MyPage()); 圖像不會以列表視圖顯示。但是當我不使用NavigationPage時，會顯示MainPage = new MyPage()圖像。

我把圖像放在UWP項目的根目錄下，如果我使用圖像的網頁，圖像顯示在兩個解決方案。

有人可以幫助我如何在導航頁面顯示在UWP本地圖片¸

一個把代碼波紋管：

便攜式項目 App.xaml.cs

public App() 
{ 
    InitializeComponent(); 
    MainPage = new NavigationPage(new MyPage()); // don't display images 
    //MainPage = new MyPage(); // display images 
} 

我的頁面。 xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:App4" 
      x:Class="App4.MyPage"> 
    <ListView x:Name="myList"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
     <local:MyCellView Name="{Binding Name}" ImageFilename="{Binding ImageFilename}" /> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
    </ListView> 
</ContentPage> 

MyPage.xaml.cs

public partial class MyPage : ContentPage 
{ 
    private ObservableCollection<MyCellObject> itemsForList = new ObservableCollection<MyCellObject>() 
    { 
     new MyCellObject { Name="Item 1", ImageFilename="Number_1.png"}, 
     new MyCellObject {Name="Item 2", ImageFilename="Number_2.png" } 
    }; 
    public MyPage() 
    { 
     InitializeComponent(); 
     myList.ItemsSource = itemsForList; ; 
    } 
} 

MyCellView.cs

public class MyCellView : ViewCell 
{ 
    public static readonly BindableProperty NameProperty = BindableProperty.Create("Name", typeof(string), typeof(MyCellView), ""); 
    public static readonly BindableProperty ImageFilenameProperty = BindableProperty.Create("ImageFilename", typeof(string), typeof(MyCellView), ""); 

    public string Name 
    { 
     get { return (string)GetValue(NameProperty); } 
     set { SetValue(NameProperty, value); } 
    } 

    public string ImageFilename 
    { 
     get { return (string)GetValue(ImageFilenameProperty); } 
     set { SetValue(ImageFilenameProperty, value); } 
    } 
} 

MyCellObject.cs

public class MyCellObject 
{ 
    public string Name { get; set; } 
    public string ImageFilename { get; set; } 
} 

UWP項目 MyCellRender.cs

[assembly: ExportRenderer(typeof(MyCellView), typeof(MyCellRender))] 
namespace App4.UWP 
{ 
    public class MyCellRender : ViewCellRenderer 
    { 
     public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell) 
     { 
      return Windows.UI.Xaml.Application.Current.Resources["MyCellTemplate"] as Windows.UI.Xaml.DataTemplate; 
     } 
    } 
} 

的App.xaml

<Application 
    x:Class="App4.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App4.UWP" 
    RequestedTheme="Light"> 
    <Application.Resources> 
     <ResourceDictionary> 
      <DataTemplate x:Key="MyCellTemplate"> 
       <StackPanel> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="0.2*" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="35" /> 
         </Grid.RowDefinitions> 
         <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" /> 
         <Image Grid.Column="0" Source="{Binding ImageFilename}" Height="30" /> 
        </Grid> 
       </StackPanel> 
      </DataTemplate> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

Answer 1

在UWP我做的IValueConverter

ImageExtensionConverter.cs

public class ImageExtensionConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var fileName = value as string; 
     if (fileName == null) 
      return null; 
      return string.Concat("ms-appx:///", fileName); 
    } 

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

和UWP改變的App.xaml：

<Application 
    x:Class="App4.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App4.UWP" 
    RequestedTheme="Light"> 
    <Application.Resources> 
     <ResourceDictionary> 
      <DataTemplate x:Key="MyCellTemplate"> 
       <StackPanel> 
        <Grid> 
         <Grid.Resources> 
          <local:ImageExtensionConverter x:Name="ImageExtensionConverter" /> 
         </Grid.Resources> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="0.2*" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="35" /> 
         </Grid.RowDefinitions> 
         <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" /> 
         <Image Grid.Column="0" Source="{Binding ImageFilename, Converter={StaticResource ImageExtensionConverter}}" Height="30" /> 
        </Grid> 
       </StackPanel> 
      </DataTemplate> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application>