Xamarin 快速上手--影象資源的使用
Image Class -- 圖片
Image -- 圖片
功能描述: 顯示一個圖片資源。支援“JPEG, PNG, GIF, and BMP”所有圖片型別。
Image 相關屬性
Aspect :Aspect列舉型別,設定Image的縮放模式。
*Fill - 拉伸圖片填充整個顯示區域,可能會導致影象失真
*AspectFill -剪下圖片填充整個區域,不會使影象失真.
*AspectFit - 不對影象進行拉伸和剪下處理,根據影象的大小上下或左右留白顯示,預設值.不同平臺縮放效果可能會有所不同
IsLoading :bool型別,表示圖片的載入狀態。
IsOpaque
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
四 圖片剪下