Xamarin.Forms 影像教學課程
在嘗試此教學課程之前，您應該已成功完成：
- 建置您的第一個 Xamarin.Forms 應用程式 快速入門。
- StackLayout 教學課程。
在本教學課程中，您會了解如何：
- 在 XAML 中建立 Xamarin.Forms
Image。 - 自訂
Image外觀。 - 顯示每個平台專案中的本機影像檔。
您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何顯示影像並自訂其外觀的簡單應用程式。 下列螢幕擷取畫面顯示的是最終的應用程式：
您也會使用 XAML 熱重新載入 Xamarin.Forms 來查看 UI 變更，而不需重建應用程式。
建立影像
若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。 此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。 如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。 如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。
啟動 Visual Studio，並建立名為 ImageTutorial 的新空白Xamarin.Forms應用程式。
重要
本教學課程中的 C# 和 XAML 程式碼片段，要求將解決方案命名為 ImageTutorial。 當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。
如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [方案總管] 的 ImageTutorial 專案中，按兩下 MainPage.xaml 將其開啟。 然後在 MainPage.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" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>此程式碼會以宣告的方式定義頁面的使用者介面，其包含
StackLayout中的Image。Image.Source屬性可指定要透過 URI 顯示的影像。Image.Source屬性的類型為ImageSource，其可讓影像源自檔案、URI 或資源。 如需詳細資訊，請參閱在指南中的影像中Xamarin.Forms顯示影像。HeightRequest屬性可指定Image的高度 (採用裝置獨立單位)。注意
您不需要在此範例中設定
WidthRequest屬性。 這是因為根據預設，Image會維持影像的外觀比例。在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：
自訂外觀
在 MainPage.xaml 中修改
Image宣告，以自訂其外觀：<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />此程式碼會將
Aspect屬性設定為Fill，該屬性可定義影像的縮放模式。Fill成員定義於Aspect列舉中，可延展影像以完全填滿檢視 (不論影像是否扭曲)。 如需影像縮放的詳細資訊，請參閱在指南中的影像中顯示影像Xamarin.Forms。OnPlatform標記延伸可讓您自訂每個平台的 UI 外觀。 在此範例中，標記延伸用於將HeightRequest和WidthRequest屬性設定為 300 個裝置獨立單位 (在 iOS 上) 和 250 個裝置獨立單位 (在 Android 上)。 如需OnPlatform標記延伸的詳細資訊，請參閱取用 XAML 標記延伸指南中的 OnPlatform 標記延伸。此外，
HorizontalOptions屬性可指定將影像水平置中。如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。 否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：
在 Visual Studio 中，停止應用程式。
顯示本機影像
圖像檔可以新增至平台專案，並從共用程式代碼參考 Xamarin.Forms 。 當影像是平台專用的 (例如，在不同平台上使用不同的解析度) 或屬於略微不同的設計時，就需要這種影像散發方法。
在本練習中，您會修改 ImageTutorial 解決方案，使其顯示本機影像而非下載自 URI 的影像。 這個本機影像是 Xamarin 的標誌，請藉由按一下下方按鈕來下載。
重要
若要跨所有平台使用單一影像，「在每個平台上都必須使用相同的檔案名稱」，且應該是有效的 Android 資源名稱 (也就是只允許小寫字母、數字、底線和句點)。
在 [方案總管] 中的 [ImageTutorial.iOS] 專案內，展開 [資產目錄]，然後按兩下 [資產] 來加以開啟。 然後，在 [Assets.xcassets] 索引標籤中，按一下 [加號] 按鈕，然後選取 [新增影像集]：
在 [Assets.xcassets] 索引標籤中，選取新的影像集，隨即便會顯示編輯器：
將 [XamarinLogo.png] 從檔案系統拖曳至 [通用] 類別的 [1x] 方塊：
在 [Assets.xcassets] 索引標籤中，以滑鼠右鍵按一下新影像集的名稱，然後將其重新命名為 XamarinLogo：
儲存並關閉 [Assets.xcassets] 索引標籤。
在 [方案總管] 的 [ImageTutorial.Android] 專案中，展開 [資源] 資料夾。 然後，將 [XamarinLogo.png] 從檔案系統拖曳至 [可繪製資源] 資料夾：
注意
Visual Studio 會自動將影像的建置動作設定為 [AndroidResource]。
在 [ImageTutorial] 專案中的 MainPage.xaml 內，將
Image宣告修改為顯示本機的 XamarinLogo 檔案：<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />此程式碼會將
Source屬性設定為要顯示的本機檔案。WidthRequest屬性會設定為 300 個裝置獨立單位 (在 iOS 上) 和 250 個裝置獨立單位 (在 Android 上)。 此外，HorizontalOptions屬性可指定將影像水平置中。注意
對於 iOS 上的 PNG 影像，在
Source屬性中指定的檔案名稱內可省略 .png 副檔名。 若為其他影像格式，則必須有副檔名。在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：
在 Visual Studio 中，停止應用程式。
恭喜！
恭喜您完成此教學課程，您已學會如何：
- 在 XAML 中建立 Xamarin.Forms
Image。 - 自訂
Image外觀。 - 顯示每個平台專案中的本機影像檔。
下一步
若要深入瞭解使用 Xamarin.Forms建立行動應用程式的基本概念，請繼續進行 Grid 教學課程。
相關連結
在這個區段有遇到問題嗎？ 如果有，請提供意見反應，好讓我們可以改善這個區段。