WPF Image控制項的繫結

原文:

wpf image控制項的繫結

在我們平時的開發中會經常用到image控制項，通過設定image控制項的source屬性，我們可以載入，設定image的source屬性時可以使用相對路徑也可以使用絕對路徑，一般情況下建議使用絕對路徑，類似於下面的形式source="/demo;component/images/test.jpg"其中demo表示工程的名稱，後面表示具體哪個資料夾下面的哪個資源，在程式中，我們甚至可以為image控制項設定x:name屬性，在後台**中動態去改變image的source，但我個人認為這種方式不太適合最大量的切換，而且增加了view層和**之間的耦合性，不是和復合mvvm的核心設計思想，所以今天就總結一下image的動態繫結的形式。

要繫結，肯定是繫結到image控制項的source屬性上面，我們首先要搞清楚source的型別是什麼，public imagesource source 也就是imagesource型別，當然在我們繫結的時候用的最多的就是bitmapimage這個位圖影象啦，我們首先來看看bitmapimage的繼承關係：bitmapimage：bitmapsource：imagesource，最終也是一種imagesource型別。當然在我們的model層中我們也可以直接定義乙個bitmapimage的屬性，然後將這個屬性直接繫結到image的source上面，當然這篇文章我們定義了乙個imgsource的string型別，所以必須要定義乙個轉換器converter，這裡分別貼出相應地**。

首先是view層，比較簡單：

"
1">
"}" stretch="
fill
">

然後我們再來看看model層也很簡單。

public
class
ltemodel : basemodel
set            }
}}

然後就是重要的轉換器：

public

class

stringtoimagesourceconverter:ivalueconverter

else

}public

object convertback(object value, type targettype, object

parameter, cultureinfo culture)

#endregion

}

轉換器返回的是object型別，實際返回的是乙個bitmapimage物件。所以我們在寫程式繫結的時候一定要弄清繫結的目標和物件之間的關係，這個是非常重要的。

下面就是在viewmodel層中來新增繫結，並更新資料來源，這裡使用的是乙個定時器來定時更新資料來源：

然後就是例項化乙個viewmodel物件繫結到前台中，這個思路其實是相當明確的。

其實在我們的很多時候，我們並不知道我們需要繫結什麼，或者說根據資料型別來繫結，這個在定義資料模板的時候經常使用到，下面就介紹一下，根據型別來繫結相應的。然後通過定義 public enum devicetype 這些型別，通過不同的型別來繫結到不同的，這個也是乙個非常重要的應用，我們一定要注意使用的方法，這裡只是簡單介紹一下。

"
}" grid.row="
2">
"itemscontrol
">
"3" rows="
7" isitemshost="
true
">
"horizontal
" horizontalalignment="
left
" margin="
20 0 0 0
" verticalalignment="
center
" sn　　　　　　　　　　　　　　　　　　　　　　　　apstodevicepixels="
true
">
"icon1
" width="
48" height="
48" renderoptions.bitmapscalingmode="
nearestneighbor
" verticalali　　　　　　　　　　　　　　　　　　　　　　　　　　gnment="
center
">
"10 0 0 0
" foreground="
#fff
" tooltip="
" fontsize="
40" text="
" 　　　　　　　　　　　　　　　　　　　　　　　　　　horizontalalignment="
left
" verticalalignment="
center
">
"" value="
shexiangji
">
"source
" value="
/igiscontrols.jtj.uicontrols;component/images/camera.png
" targetname="　　　　　　　　　　　　　　　　　　　　　　　　　　　　
icon1
">
"" value="
kakou
">
"source
" value="
/igiscontrols.jtj.uicontrols;component/images/bayonet.png
" targetname=　　　　　　　　　　　　　　　　　　　　　　　　　　　　"
icon1
">
"" value="
dianzijingcha
">
"source
" value="
/igiscontrols.jtj.uicontrols;component/images/epolice.png
" targetname=　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"
icon1
">
"" value="
mingjin
">
"source
" value="
/igiscontrols.jtj.uicontrols;component/images/police_a.png
" targetname　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　="
icon1
">

另外和image很類似的就是

用法也差不多，同樣可以通過繫結的方式來新增，不過在使用的時候還是需要注意一下的。

WPF Image控制項的繫結

WPF Image控制項 Source繫結路徑方法

WPF Image控制項

WPF Image控制項鋸齒問題

WPF Image控制項的繫結

WPF Image控制項 Source繫結路徑方法

WPF Image控制項

WPF Image控制項鋸齒問題

相關推薦