共用方式為

第 13 章的摘要。 點陣圖

  • 發行項

注意

這本書於2016年春季出版，此後一直沒有更新。 這本書中有很多仍然有價值，但一些材料已經過時，有些主題不再完全正確或完整。

元素 Xamarin.FormsImage 會顯示點陣圖。 Xamarin.Forms所有平臺都支援 JPEG、PNG、GIF 和 BMP 檔案格式。

中 Xamarin.Forms 陣圖來自四個位置：

  • 透過 URL 所指定的 Web
  • 內嵌為共用文檔庫中的資源
  • 內嵌為平臺應用程式專案中的資源
  • 從可由 .NET Stream 對象參考的任何位置，包括 MemoryStream

共用連結庫中的位圖資源與平台無關，而平台專案中的位圖資源則為平臺特定。

注意

這本書的文字會參考已由 .NET Standard 連結庫取代的可攜式類別庫。 書籍中的所有範例程式代碼都已轉換為使用 .NET 標準連結庫。

點陣圖是藉由將 Source 的 Image 屬性設定為 類型的 ImageSource物件，這是具有三個衍生專案的抽象類：

  • UriImageSource ，根據 Uri 設定為其 Uri 屬性的物件，透過 Web 存取位圖
  • FileImageSource ，根據設定為其 屬性的資料夾和檔案路徑，存取儲存在平臺應用程式專案中的 File 點陣圖
  • StreamImageSource，用於使用從集合傳回 Stream Func 至其 Stream 屬性所指定的 .NET Stream 物件載入點陣圖

或者，您也可以使用 類別的 ImageSource 下列靜態方法，所有這些方法都會傳回 ImageSource 物件：

方法沒有對等的 Image.FromResource 類別。 如果您需要控制快取，類別 UriImageSource 會很有用。 類別 FileImageSource 在 XAML 中很有用。 StreamImageSource 對於對象的異步載入 Stream 很有用，而 ImageSource.FromStream 是同步的。

與平台無關的位圖

WebBitmapCode 專案會使用 ImageSource.FromUri透過 Web 載入位陣圖。 元素 Image 會設定為 Content 的 ContentPage屬性，因此會限制為頁面的大小。 不論點圖的大小為何，受限制 Image 的元素都會延展至其容器的大小，而點圖會顯示在元素內的大小上限， Image 同時維持位圖的外觀比例。 Image點陣圖以外的區域可以使用 來著色BackgroundColor。

WebBitmapXaml 範例很類似，但只會將 Source 屬性設定為URL。 轉換是由 ImageSourceConverter 類別處理。

調整和填滿

您可以將 的 Image 屬性設定Aspect為下列其中一個列舉成員Aspect，來控制點陣圖的延展方式：

  • AspectFit：尊重外觀比例（預設值）
  • Fill：填滿區域，不尊重外觀比例
  • AspectFill：填滿區域但尊重外觀比例，透過裁剪位圖的一部分來完成

內嵌資源

您可以將點陣圖檔案新增至 PCL 或 PCL 中的資料夾。 為它提供 EmbeddedResource 的建置動作。 ResourceBitmapCode 範例示範如何使用 來ImageSource.FromResource載入檔案。 傳遞至 方法的資源名稱包含元件名稱，後面接著點，後面接著選擇性資料夾名稱和點，後面接著檔名。

程式會將 的 VerticalOptions Image 和 HorizontalOptions 屬性設定為 LayoutOptions.Center，使 Image 專案不受限制。 Image和點陣圖的大小相同：

  • 在iOS和Android上， Image 是點陣圖的圖元大小。 點陣圖圖圖元與螢幕圖元之間有一對一對應。
  • 在 通用 Windows 平台 上，Image是裝置獨立單位中位圖的圖元大小。 在大部分的裝置上，每個點陣圖圖元都會佔用多個螢幕圖元。

StackedBitmap 範例會將 置於 Image XAML 中的垂直StackLayout位置。 名為 ImageResourceExtension 的標記延伸有助於參考 XAML 中的內嵌資源。 此類別只會從其所在的元件載入資源，因此無法放置在連結庫中。

關於重設大小的詳細資訊

最好在所有平台之間一致地調整位圖大小。 實驗 StackedBitmap 時，您可以在垂直StackLayout的 Image 元素上設定 WidthRequest ，讓平台之間的大小保持一致，但只能使用這項技術來減少大小。

您也可以設定 HeightRequest ，讓影像大小在平臺上保持一致，但點陣圖的限制寬度會限制這項技術的多功能性。 針對垂直 StackLayout中的影像， HeightRequest 應避免使用 。

最佳方法是從位圖開始，其寬度大於裝置獨立單位的手機寬度，並設定 WidthRequest 為裝置獨立單位中所需的寬度。 這在 DeviceIndBitmapSize 範例中示範。

《 瘋狂黨 》展示了劉易斯·卡羅爾愛麗絲《 仙境 冒險》第7章，約翰·泰尼爾的原始插圖：

瘋狂茶會的三個螢幕快照

流覽和等候

ImageBrowser 範例可讓使用者瀏覽儲存在 Xamarin 網站上的庫存影像。 它會使用 .NET WebRequest 類別來下載具有位圖清單的 JSON 檔案。

注意

Xamarin.Forms 程序應該使用 HttpClient 而不是 WebRequest 透過因特網存取檔案。

程式會使用 ActivityIndicator 來指出發生問題。 載入每個點陣圖時，的唯讀 IsLoading 屬性 Image 為 true。 屬性 IsLoading 是由可系結屬性所支援，因此 PropertyChanged 當該屬性變更時，就會引發事件。 程式會將處理程式附加至這個事件，並使用 的目前設定 IsLoaded 來設定 IsRunning 的 ActivityIndicator屬性。

串流點圖

方法ImageSource.FromStream會根據 .NET Stream建立 ImageSource 。 方法必須傳遞 Func 會傳回 Stream 物件的物件。

存取數據流

BitmapStreams 範例示範如何使用 ImaageSource.FromStream 方法來載入儲存為內嵌資源的位圖，以及跨 Web 載入位圖。

在運行時間產生位圖

Xamarin.Forms所有平臺都支援未壓縮的 BMP 檔案格式，這很容易在程式代碼中建構，然後儲存在 中MemoryStream。 這項技術允許在運行時間以演算法方式建立位圖，如 Xamrin.FormsBook.Toolkit 連結庫中的 類別所BmpMaker實作。

「自行 執行」DiyGradientBitmap 範例示範如何使用 BmpMaker 來建立具有漸層影像的點陣圖。

平臺特定位圖

Xamarin.Forms所有平台都允許將點陣圖儲存在平臺應用程式元件中。 應用程式擷 Xamarin.Forms 取時，這些平台點陣圖的類型 FileImageSource為 。 您可以使用它們來進行：

平台元件已經包含圖示和啟動顯示畫面的點陣圖：

  • 在 iOS 專案中的 [資源] 資料夾中
  • 在 Android 專案中，於 Resources 資料夾的子資料夾中
  • 在 Windows 專案中的 Assets 資料夾中（雖然 Windows 平臺不會將點陣圖限制為該資料夾）

PlatformBitmaps 範例會使用程式代碼來顯示來自平臺應用程式專案的圖示。

點陣圖解析度

所有平台都允許針對不同的裝置解析度儲存多個版本的點陣圖影像。 在運行時間，會根據螢幕的裝置解析度載入適當的版本。

在iOS上，這些點陣陣圖會以檔名上的後綴區分：

  • 160 DPI 裝置沒有後綴（裝置獨立單位為 1 像素）
  • 320 DPI 裝置的 '@2x' 後綴 （2 像素到 DIU）
  • 480 DPI 裝置的 「@3x」後綴（3 像素至 DIU）

要顯示為一英吋平方的點陣圖會存在於三個版本中：

  • MyImage.jpg 160 像素方塊
  • MyImage@2x.jpg 位於320像素平方
  • MyImage@3x.jpg 位於 480 像素平方

程式會將此位圖稱為MyImage.jpg，但會根據螢幕解析度在運行時間擷取適當的版本。 不受限制時，位圖一律會以160個裝置獨立單位呈現。

針對 Android，點陣陣圖會儲存在 Resources 資料夾的各種子資料夾中：

  • 120 DPI 裝置的可繪製-ldpi（低 DPI）（0.75 像素至 DIU）
  • 160 DPI 裝置的 drawable-mdpi （medium） （1 像素到 DIU）
  • 240 DPI 裝置的可繪製 hdpi （高） （1.5 像素至 DIU）
  • 320 DPI 裝置的 drawable-xhdpi （額外高） （2 像素到 DIU）
  • 480 DPI 裝置的 drawable-xxhdpi （額外高） （3 像素到 DIU）
  • 640 DPI 裝置的 drawable-xxxhdpi （三個額外高） （4 像素到 DIU）

針對要以一平方英吋轉譯的點陣圖，不同版本的位圖名稱會相同，但大小不同，並儲存在這些資料夾中：

  • 120 像素方形的 drawable-ldpi/MyImage.jpg
  • drawable-mdpi/MyImage.jpg 160 像素方形
  • 240 像素方形的 drawable-hdpi/MyImage.jpg
  • drawable-xhdpi/MyImage.jpg 320 像素方形
  • drawable-xxhdpi/MyImage.jpg 480 像素平方
  • drawable-xxxhdpi/MyImage.jpg 640 像素方形

位圖一律會以160個裝置獨立單位呈現。 （標準 Xamarin.Forms 解決方案範本只包含 hdpi、xhdpi 和 xxhdpi 資料夾。）

UWP 專案支援位圖命名配置，其中包含每個裝置獨立單位以像素為單位的縮放比例，例如：

  • MyImage.scale-200.jpg 320 像素方形

只有某些百分比有效。 這本書的範例程式只包含 scale-200 後綴的影像，但目前的Xamarin.Forms解決方案範本包括 scale-100、scale-125、scale-150 和 scale-400。

將點陣圖新增至平台專案時， 建置動作 應該是：

  • iOS： BundleResource
  • Android： AndroidResource
  • UWP： 內容

ImageTap 範例會建立兩個類似按鈕的物件，其中包含Image已安裝的專案TapGestureRecognizer。 對像是一英吋平方。 的 Source 屬性 Image 是使用 OnPlatform 和 On 對象來參考平臺上可能不同的檔名。 位圖影像包含數位，指出其圖元大小，因此您可以看到擷取和轉譯的點陣圖大小。

工具列及其圖示

平臺特定位圖的主要用法之一是 Xamarin.Forms 工具列，其建構方式是將 物件新增 ToolbarItem 至 ToolbarItems 所 Page定義的集合。 ToobarItem 衍生自 MenuItem 它繼承某些屬性的來源。

最重要的 ToolbarItem 屬性包括：

項目數目 Primary 應限制為三或四個。 您應該包含 Text 所有項目的設定。 針對大部分的平臺，只有 Primary 專案需要 ， Icon 但 Windows 8.1 需要 Icon 所有專案的 。 圖示應該是32個裝置獨立的單位方形。 類型 FileImageSource 表示它們是平臺特定的。

點ToolbarItem選時會引發Clicked事件，就像 。Button ToolbarItem 也支援 Command 和 CommandParameter 屬性，通常用於與MVVM的連線。 （請參閱 第 18 章 MVVM）。

iOS 和 Android 都需要顯示工具列的頁面是 NavigationPage 或 由 NavigationPage巡覽的頁面。 ToolbarDemo 程式會使用 ContentPage 自變數將類別App的 屬性設定MainPage為NavigationPage建構函式，並示範工具列的建構和事件處理程式。

按鈕影像

您也可以使用平臺特定的點陣圖，將 的屬性設定為32個裝置獨立單位平方的點陣圖，如 ButtonImage 範例所示。Image Button

注意

按鈕上的影像使用已增強。 請參閱 搭配按鈕使用位圖。