Xamarin.Forms UWP在导航页面中使用ViewCell Renders时不显示图像

Question

I have problem with displaying images in Xamarin.Forms UWP app. My app use list view with custom ViewCell. In UWP I make render for my custom cell. When I call my page in App.cs as Navigation page like MainPage = new NavigationPage(new MyPage()); images are not displayed in list view. But when I don't use NavigationPage, MainPage = new MyPage() images are displayed.

I place images in root of UWP project and if I use images for web, images displayed in both solution.

Can someone help me how to display local images in UWP in navigation page?¸

A put code bellow:

Portable project App.xaml.cs

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

MyPage.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 project 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

On UWP I make 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();
    }
}

and change App.xaml in UWP:

<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>