[X.Form] Image - 內嵌資源

使用內嵌資源，是將圖片將入PCL專案中，並將圖片建置動作改成內嵌資源，Complier 時會把圖片包進去

將圖片放在 PCL 專案內

把圖片建置動作改為內嵌資源

• C# 程式碼呼叫

xaml layout 設計

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImagePractice.Embedded">

    <ContentPage.Content>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Label Text="內嵌相片 demo" FontAttributes="Bold"></Label>   
        <Image 
            x:Name="imgEmbedded" 
            Aspect="AspectFit"></Image>    
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

在 C# 內指定圖片

namespace ImagePractice
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Embedded : ContentPage
    {
        public Embedded()
        {
            InitializeComponent();

            // 檔案名稱需加上目前專案 namespace，格式為 namespace.圖檔.副檔名
            imgEmbedded.Source = ImageSource.FromResource("ImagePractice.Firework.jpg");
        }
    }
}

• 在 Xaml 內呼叫

必須實作 IMarkupExtension 介面，並在 Xaml 內利用擴充標記引用

xaml layout

namespace ImagePractice
{
    // 設定 ContentProperty 的話，Xaml 內就不用再輸入 Source Property
    [ContentProperty("Source")]
    public class EmbeddedResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }

            return ImageSource.FromResource(Source);
        }
    }
}

xaml 內設定 image.Source 來引用相片

<?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:ImagePractice"
             x:Class="ImagePractice.Embedded">

    <ContentPage.Content>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Label Text="內嵌相片 demo" FontAttributes="Bold"></Label>   
    
        <Image 
            x:Name="imgEmbedded" 
            Aspect="AspectFit"
            Source="{local:EmbeddedResource ImagePractice.Firework.jpg}"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

• 重點1：xaml 內引用自訂 class EmbeddedResourceExtension，可以寫成 EmbeddedResource 就好

• 重點2：EmbeddedResource class 有設定 ContentProperty 的因素，所以在 Image 內不需要指定 Source Property，沒有 ContentProperty 的話，要像下面明確指定 Source Property 才行

<Image 
    Source = 
    "{local:EmbeddedResource Source=ImagePractice.Firework.jpg}"></Image>

• 重點3：不論是在 C# 或 Xaml 內呼叫圖片 ImageSource.FromResource() 內接受的字串一定要是該規則：namespace.圖檔.副檔名

• 重點4：在一個 PCL 專案內練習 Image View，所以有手動新增 ContentPage 來使用，在 xaml 內呼叫自訂 class EmbeddedResourceExtension 時，出現下面錯誤訊息，查才知道原來只有預設 ContentPage 會引用 PCL namespace，手動新增的也必須手動加入，Orz

一開始找不到 clrNamespace 參數，想說這是哪裡來的，Orz

手動加入 namespace

<?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:ImagePractice"
             x:Class="ImagePractice.Embedded">

結果

參考資料
• Images
• Xamarin.Forms 教學系列文（十三.壹）從網址或內嵌資源載入圖片