1. 程式人生 > >Xamarin 快速上手--影象資源的使用

Xamarin 快速上手--影象資源的使用

Image Class -- 圖片

Image -- 圖片

功能描述: 顯示一個圖片資源。支援“JPEG, PNG, GIF, and BMP”所有圖片型別。

Image 相關屬性

Aspect Aspect列舉型別,設定Image的縮放模式。

*Fill - 拉伸圖片填充整個顯示區域,可能會導致影象失真

*AspectFill -剪下圖片填充整個區域,不會使影象失真.

*AspectFit - 不對影象進行拉伸和剪下處理,根據影象的大小上下或左右留白顯示,預設值.不同平臺縮放效果可能會有所不同

IsLoading :bool型別,表示圖片的載入狀態。

IsOpaque

:bool型別,設定Image是否透明。

Source:ImageSource型別,設定顯示的圖片資源。

/** ImageSource介紹

(1)ImageSource提供了四個靜態方法來建立物件。

a) FromUri :根據網路圖片資源建立物件。

b) FromResource :根據嵌入到PCL的圖片資源建立物件。

c) FromFile :根據各個平臺提供的圖片資源建立物件。

d) FromStream :根據.NET Stream建立物件。

(2)Xamarin.Forms 提供了三個ImageSource的子類

a) UriImageSource :表示網路圖片資源,對應FromUri。

b) FileImageSource :表示平臺相關圖片資源,對應FromFile。

c) StreamImageSource :表示流圖片資源,對應FromStream。

protected 方法

override OnBindingContextChanged(); //當繫結上下文的變化時呼叫。

override OnPropertyChanged(String); //當一個屬性發生了變化時呼叫。

override OnPropertyChanging(String); //當一個屬性將改變時呼叫

override OnPropertyChanging( Double,Double):SizeRequest ;

//當layotu週期元素所需的尺寸滿足時呼叫。

============================================================

Image 的建立

(1) C#程式碼示例:

**顯示網路影象

(2)XAML示例:

XAML定義UriImageSource示範:

注意:

1. UriImageSource定義了CachingEnabled和CachingValidity連個屬性。CachingEnabled表示是否啟用快取,bool型別預設為true。CachingValidity表示快取的有效時間,TimeSpan型別,預設為1天。

2. 如果影象無法顯示請檢查:

a)影象網址是否正確

b)裝置是否可聯網

============================================================

顯示本地影象

(1) 顯示相同影象

a)在可移植專案新增資料夾,命名為image

b)新增圖片到該資料夾下(也可直接拖動圖片到image資料夾中)

c)檢視圖片屬性,將“生成操作”修改為“嵌入的資源”

注意:XAML中如何呼叫嵌入資源?

如果你熟悉x:FactoryMethod使用,可能會想通過x:FactoryMethod呼叫ImageSource.FromResource方法,但是ImageSource.FromResource方法要求圖片資源與呼叫方法在同一個程式集內,通過x:FactoryMethod呼叫ImageSource.FromResource方法時呼叫程式碼是在Xamarin.Forms.Xaml程式集內的。

《Creating Mobile App with Xamarin.Forms》中介紹瞭解決方法,定義一個XAML擴充套件標記(先不多做介紹)。

d)程式碼修改為如下:

new Image {

Source = ImageSource.FromResource("Appcs8.image.img1.png")

}

(2) 顯示同名但內容不同的影象

a)在andorid專案的resources\ drawable資料夾和ios專案的resources資料夾下放 置同名檔案,如IMG1.jpg,但圖片內容可以不同。

b)修改程式碼:

new Image {

Source = ImageSource.FromFile("img1.png")

}

(3) 在不同平臺顯示不同影象

a)在可移植檔案專案的image資料夾中放入3個圖片。

b)檢視圖片屬性,將“生成操作”修改為“嵌入的資源”

c)修改程式碼:

new Image {

Source = Device.OnPlatform(

iOS: ImageSource.FromResource("Appcs8.img1.png"),

Android: ImageSource.FromResource("Appcs8.img2.png"),

WinPhone: ImageSource.FromResource("Appcs8.img3.png"))

}

對應的XAML為:

注意:

Andorid中如果無法顯示,請設定影象屬性“生成操 作”為“AndroidResource”。

============================================================

通過Stream訪問圖片資源

1)通過Stream可以訪問網路圖片和嵌入專案中的圖片資源。ImageSource.FromStream或者StreamImageSource可以幫助我們輕鬆的訪問Stream對應的圖片資源。

FromStream方法的引數並不是Stream型別而是Func<Stream>型別(一個無引數,返回值為Stream的方法)。

示例1——訪問本地嵌入圖片資源

示例2——訪問網路圖片資源

注意:子執行緒中不允許更新UI,在子執行緒中更新UI藉助Device.BeginInvokeOnMainThread方法完成。

============================================================

lmage相關擴充套件及說明

一 定製顯示的影象

1) 縮放影象

說明:使用image物件的Scale屬性控制縮放比例。

程式碼:Scale=2.

2)設定縮放模式

說明: 使用mage物件的Aspect屬性控制縮放模式,值有3個:Fill,填充,AspectFill 剪裁填充,AspectFit,原比例填充。

程式碼:Aspect = Aspect.Fill

3)旋轉影象

說明:使用mage物件的Rotation屬性可以旋轉影象。

程式碼:Rotation = 45

四 圖片剪下