Thinking and Coding

sTouch Board is now available on Google Play!

2015-03-23T19:14:00.005-07:00

We launched an interactive app in Google Play
https://play.google.com/store/apps/details?id=sTouch.Android.Client&hl=en-us

sTouch Board- Getting Started

sTouh Board Client allows users to turn their Android tablet/phone into an interactive whiteboard. With the App you can view shared content, control your presentation device, and annotate over any content.

How To Use:
1. Install sTouch Board Windows version: The sTouch Board Client App requires the Windows version of sTouch Board software installed on your Windows device. You can download from here: http://www.stouchtech.com/#!download/c12ug

2. Network Environment: Make sure sTouch Board and sTouch Board Client are on the same network.

3. Connect to sTouch Board : Select the room you from pairing list, and click JOIN.
Please check software user manual for more detail:
http://media.wix.com/ugd/4ee221_94f3d4c3b321492eabe396860db8c6cc.pdf

We also provide interactive solutions for School Education/Office Presentation/Home Entertainment, please see the following components:

1. sTouch TV: It is the most cost effective solution for large touch screen in the world. Easy to set up! Easy to use! You can draw, write and play on the TV.

2. sTouch Whiteboard : It is a low-cost solution that simply turns a traditional whiteboard or projector surface into an interactive whiteboard.

3. sTouch Board: It is image-based, simple, intuitive whiteboard App available for Windows 8/Windows 7 system.
Features include:
- Drawing Tools - Color pens, highlighter pen, eraser, etc
- Present - Import document files or images into the app to make great presentation
- Sharing and Interactive - Broadcast your screen content and interact with remote devices
- Record - Ability to record and capture your screen
- Annotate - Annotate directly on the desktop screen

For more details, please refer the link: http://www.stouchtech.com/

事件的深入分析(function pointer, delegate, event, EventHandler)

2011-02-09T22:51:00.000-08:00

Function pointer(函數指標)

在C/C++ 若要設計事件(Callback function), 可利用function pointer來完成, 其詳細作法可參考Callback Function

Delegate(委託)
delegate是C#特殊的類別, 它可以封裝一個函數, 但與一般類別不同之處,delegate擁有一個簽名(可以代表函式的引數類型和回傳值類型). delegate實現的功能和C/C++中的函數指標十分相似.

C/C++ :
void (*UpdateCallback)(double time);

C# :
delegate void UpateDelegate(double time);

雖然delegate類似於函式指標(function pointer), 不過還是有很多不同之處, 例如delegate具有物件導向和型別安全等特性.

delegate用法
delegate的使用步驟如下:

1. 宣告委派型別
宣告一個delegate的型別, 每個delegate型別封裝了函數的回傳類型,引數的數目, 和引數的類型, 如下面陳述式所示:

delegate void MessageDelegate(string str);

2. 定義一個符合委派型別的簽名方法, 可為 instance method 或 static method

public static void HelloFun(string str)
{
   Console.WriteLine("  Hello, {0}!", str);
}
public static void GoodbyeFun (string str)
{
   Console.WriteLine("  Goodbye, {0}!", str);
}

3. 建立委派物件, 並指定委派方法
delegate宣告後, 必須再將它實體化才能使用(和一般類別的使用方式一樣, 需先將物件實體化), 並指定所代表的函式, 但不需傳入引數, 如下面範例所示

static void Main(string[] args)
{
   MessageDelegate msDelegate = new MessageDelegate(HelloFun);
}

delegate同時也支援多點傳送(+=, -=), 因為繼承自System.MulticastDelegate類別, 你可以使用+= 運算子將多個方法綁定到同一個delegate, 當呼叫這個delegate的時候, 將依次呼叫其所綁定的方法. 當然你也可以使用 - = 運算子 將某個委派參考從委派清單中移除.

MessageDelegate msDelegate;
 msDelegate = new MessageDelegate(HelloFun);
 msDelegate += new MessageDelegate(GoodbyeFun);
 msDelegate -= new MessageDelegate(HelloFun);

4. 透過委派物件執行委派方法
如下所示:

msDelegate("Peter"); //等同msDelegate.invoke("Peter");

event
event的出現,是要避免使用delegate可能會破壞物件封裝性的問題,主要有下面兩點:
1. delegate 可以隨意進行賦值操作, 若不小心使用將會移除所有委派
2. 為了讓delegate可以綁定特定的方法, 宣告時必須定義成public屬性, 但也因此破壞掉物件的封裝性, 因為類別的內外都可以呼叫delegate

考慮下面例子:

public class ButtonControl
{
        public delegate void ClickDelgate(object sender, EventArgs e);        
        public ClickDelgate ClickEvent; 
        public void OnFire(EventArgs e)
        {
            ClickEvent(this, e);
        }
}

static public void TexboxUpdate(object sender, EventArgs e)
{
     Console.WriteLine("Texbox update by button click");
 }

 static public void LabelUpdate(object sender, EventArgs e)
 {
      Console.WriteLine("Label update by button click");
 }

static void Main(string[] args)
{
ButtonControl btnCtrl = new ButtonControl();
      btnCtrl.ClickEvent = new ButtonControl.ClickDelgate(TexboxUpdate);
      btnCtrl.ClickEvent += new ButtonControl.ClickDelgate(LabelUpdate);
btnCtrl.ClickEvent = null;  //這將會移除所有委派
      btnCtrl.ClickEvent(null, new EventArgs()); //不應該讓使用者可以呼叫
}

而就觀察者模式來說, 也應避免下面這些情況:

對於客戶端(觀察者), 應該只適合透過註冊/取消來操作自己對應的事件, 不應該隨意進行的賦值操作, 如果不小心將發佈者的delegate類別直接賦值null, 將會取消掉發佈者所有的通知列表

發佈事件的通知應該由發佈者來觸發, 不應該讓客戶端可以呼叫

因此C#利用event來封裝delegate類型的變數, 所以在類別的外部, 使用者只能透過註冊“+=”和取消“-=” 來作事件的操作.

Event使用範例
將上述範例中, public ClickDelgate ClickEvent 加上 event修飾字

public class ButtonControl
{
        public delegate void ClickDelgate(object sender, EventArgs e);        
        public event ClickDelgate ClickEvent; 
        public void OnFire(EventArgs e)  
        {
            if (ClickEvent != null)
                ClickEvent(this, e);
        }
}

static void Main(string[] args)
{
   ButtonControl btnCtrl = new ButtonControl();

   //只能使用+=,-= 來對事件操作
   btnCtrl.ClickEvent += new ButtonControl.ClickDelgate(TexboxUpdate);
   btnCtrl.ClickEvent += new ButtonControl.ClickDelgate(LabelUpdate);
}

EventHandler
雖然 C# 語言允許event使用任一種delegate型別,但是 .NET Framework 對於使用於event的delegate型別有更嚴格的規範, 因此另外定義出一個適當的delegate型別EventHandler, 語法如下:

public delegate void EventHandler(object sender, EventArgs e);

EventHandler 為預先定義的delegate, EventHandler會定義一個沒有傳回值的方法, 方法第一個參數的型別為 object, 表示引發事件的執行個體(如果是button1的click事件, 則sender就是button1）, 而第二個參數的型別為EventArgs, 表示封裝事件的額外資訊.

EventHandler使用範例

public class ButtonControl
 {
        //利用EventHandler取代delegate void EventHandler(object sender, EventArgs e)
        public event EventHandler ClickEventHandler;  
        public void OnClick()
        {
            if (ClickEventHandler != null)
            {
                ClickEventHandler(this, new EventArgs());
            }           
        }
 }

自訂EventArgs
在.NET Framework 2.0時引進EventHandler泛型版本，即 EventHandler<T>也就是如果你要自訂的 EventArgs 類別, 可以參考下面範例:

public event EventHandler<customeventargs> RaiseCustomEvent;

public class CustomEventArgs : EventArgs
{
    public CustomEventArgs(string s)
    {
        msg = s;
    }
    private string msg;
    public string Message
    {
        get { return msg; }
    } 
}

參考資料:
發行符合 .NET Framework 方針的事件
委派教學課程
事件教學課程
函數指標的進化論(下)
我對.NET中delegate和event區别的理解
談談委派 (Delegate)
C# 筆記：重訪委派－從 C# 1.0 到 2.0 到 3.0

WPF - Style使用

2010-12-31T00:11:00.000-08:00

Style(樣式)
Style主要就是透過屬性(Property)去自訂控制項的外觀, 尤其當我們需要相同的屬性套用在多個控制項時, Style會很方便.

比方在UI設計時, 常會讓UI具有某些相同的Style,例如:背景顏色,字型,控制項的顏色…等等.

使用Style的好處如下:

可以方便使用者將一組屬性值(顏色,尺寸,動畫, 觸發方式等)套用到多個控制項的方式,這樣一來, 程式碼將變得簡潔.
可集中在同一個地方作管理(ex: 資源 Resource), 好處如果以後想改變這些屬性, 只要在同一個地方更新即可

例如下面範例中, 有一個影音播放程式,如圖1所示, 其中UI上有三個外觀相同的按鈕, 在這程式碼當中, 如圖2所示, 如果不套用Style的話, 我們必需要將每一個控制項都設定一次相同的屬性, 這樣, 程式碼將會有很多重覆的部分, 而且, 萬一以後要變更其中一個屬性, 將要修改到很多地方

[圖1]具有一些相同屬性的Button

[圖2] 沒有套用Style

下面的範例中, 我們利用Style將上述程式碼中相同屬性抽離出來(Style用Setter組成的集合來設定目標屬性, 而每個Setter是由依存屬性和設定值組成), 並集中在Resource中. 程式碼將變得簡潔, 管理上也變的更方便, 如圖3所示.

[圖3] 套用Style

Style的共享與限定
你也可以將Style套用在不同的控制項上,如下所示:

<Style x:Key="controlStyle">
  <Setter Property="Control.Height" Value="30"/>
  <Setter Property="Control.Width" Value="75"/>
  <Setter Property="Control.Margin" Value="10"/>
  <Setter Property="Control.Background" 
                    Value="{StaticResource btnBackground}"/>
</Style>

<!-- Style套用在不同的控制項上-->
<Button x:Name="btnPlay" Grid.Column="0"
           Style="{StaticResource controlStyle}"
           Content="Play" Click="btnPlay_Click">
</Button>

<Label Grid.Column="1"
          Style="{StaticResource controlStyle}"
          Content="Text Block"/>
            
<Border Grid.Column="2"
           Style="{StaticResource controlStyle}"/>

或限定此Style只能給特定的控制項使用, 可用TargetType屬性指定, 例如你希望只有Button可套用此Style, 可寫成:

<Style x:Key="btnStyle" TargetType="{x:Type Button}">
     <Setter Property="Height" Value="30"/>
     <Setter Property="Width" Value="75"/>
     <Setter Property="Margin" Value="10"/>
     <Setter Property="Background" 
                Value="{StaticResource btnBackground}"/>
</Style>

若此Syle套用在非Button的控制項上, 將會產生編譯錯誤

Style繼承
Style之間可以互相繼承, 如果要這樣做, 您可以使用一個樣式做為基礎來建立新樣式, 並利用BasedOn屬性來繼承

<Style x:Key="btnStyleWithBold" 
          BasedOn="{StaticResource btnStyle}"
   <Setter Property="Button.FontWeight" Value= "Bold"/>
</Style>

另外, Style除了可用來設定控制項的屬性(Property)之外, 還可以運用在下列幾個地方

設定觸發方式(Trigger)
設定動畫(Animation)
設定樣板(Template)

相關範例, 可參考: MSDN-設定樣式與範本

Touch UI 設計準則

2010-12-14T03:01:00.000-08:00

Touch UI 的操作行為其實和傳統使用滑鼠或鍵盤的操作有些出入, 因此, 在開發觸控軟體時, 有部分的UI設計和操作都需重新設計或調整. 而好的UI設計通常會跟使用者經驗設計(User Experience Design )有很大的關聯. 在這篇文章中, 我會整理出Windows上開發觸控軟體需要注意的事項, 提供給大家參考.

1. 控制元件要夠大 – 因為觸控UI操作方式不是透過是滑鼠游標, 而是利用手指操控, 所以控制元件的大小不能太小, 否則會很難操作, 一般最好能符合人的手指大小, 微軟提出理想尺寸最少要在40*40(Pixel)以上

[圖1]- 觸控元件的合理大小

2. 控制元件之間的間距要夠大 –如果觸控UI元件的間距太小,容易造成不小心觸控到其它控制元件的問題, 所以元件之間的距離要夠大, 微軟建議這範圍至少要 5 Pixel

[圖2] - 觸控元件的間距

3. 不能要求精準控制- 由於觸控不適合作細微的操作, 所以最好不要把需要精準控制的應用軟體設計成觸控UI, 例如繪圖或建模等軟體

4. 適當地調整元件位置 – 有些觸控技術在某些區域容易出現誤判, 例如光學觸控的右上角邊緣, 就是容易發生誤判的區域, 所以在設計觸控UI時, 要避免將元件放在容易誤判的區域

5. 不要有太多手部點選的動作 – 一般會把觸控UI設計成一個動作就立即反應, 這樣可以使操作變得簡單直覺也可減少手部動作, 所以如圖3的下拉式選單的操作(需要一層一層的選擇), 就不適合利用觸控作操作

[圖3 ]- 下拉式選單

6. 不要有Hover功能 – 利用滑鼠控制的UI, 常會利用Hover作一些highlight或提示等功能, 但觸控UI上最好不要有hover行為, 因為不可能讓使用者把手指浮在半空中作操作. 如果真的要有這樣的行為, 我覺得可以在mouse down & mouse move時發生hover, 然後等mouse up時, 在發生click.

7. 使用直覺手勢 – 觸控UI在設計時, 最好能使用一些使用者常用和直覺的手勢.
例如下面是大家常見的手勢:

平移:

[圖4] - 平移手勢(出自MSDN)

放大, 縮小 :

[圖5]- 縮放手勢 (出自MSDN)

旋轉:

[圖6] - 旋轉手勢 (出自MSDN)

7. 加上物理行為 – 由於觸控是一種直覺和自然的動作, 所以可以在觸控操作中加上一些速度, 碰撞, 力量等物理反應, 讓你的touch介面, 更符合Natural UI的概念.下面的影片中, Demo一個我寫的Touch Scroll UI(它會根據手撥動的速度快慢, 而產生不同物理反應)

8. 動作要流暢 –觸控UI最好能提供順暢和反應靈敏的視覺反饋，例如使用旋轉手勢時，畫面的物件也要能同時作動, 不要讓使用者操作時有卡住的感覺

參考文章: Touch(MSDN)

DLL的製作和使用

2010-12-09T18:58:00.000-08:00

在程式開發上, 常會將自己寫好的共用函式或共用類別編譯成DLL, 這樣除了可以省記憶體空間外, 也可達到模組化方便讓其他程式共用, 這邊寫了一篇文章來介紹DLL建立的流程，主要分成兩個重點：

1. DLL建立的步驟

如何建立DLL檔(以C3DMath.dll為例)
如何引用別人的lib檔和h檔(以MainDLLTest.exe為例)

2. 編譯環境的設定
在VC中可以利用一些巨集指令來設定編譯環境，其優點有:

方便管理檔案
省去人工複製的時間(可以少掉複製一些h檔、 dll檔和lib檔的時間)
將來可用在Auto build機制上

DLL建立的步驟-

1. 建立C3DMaths DLL專案：
開啟VC點選File -->New-->Project-->Win32 Console Application，然後在Name的欄位輸入專案的名稱

2. 點選Next

3. 選擇DLL，然後按Finish

4. 產生一個標頭檔(C3DMath.h), 並加入下面這段巨集指令, 如下所示:

#ifdef  API_BUILD_DLL
 #define C3DMATHS_CLASS __declspec(dllexport)
#else
 #define C3DMATHS_CLASS __declspec(dllimport)
#endif

上面這段巨集的意思是, 如果定義了API_BUILD_DLL 編譯時就把字串 C3DMATHS_CLASS換成__declspec(dllexport), 否則, 就換成 __declspec(dllimport), 因為C3DMath.h 通常會用在兩個地方:

(1)產生 DLL的專案: 需要匯出 DLL 的資料、函式、類別或類別成員函式,因此要使用__declspec(dllexport)

(2)使用 DLL 的專案(例如exe檔): 此時需要匯入DLL 的資料、函式、類別或類別成員函式, 所以要用 __declspec(dllimport)

5. 在Preprocessor Definitions中定義巨集(API_BUILD_DLL),其作用是讓上面的巨集指令知道此DLL專案要使用__declspec(dllexport)

6. 在class的title上加上巨集的定義(C3DMATHS_CLASS), 表示將此class匯出

class  C3DMATHS_CLASS  C3DVector
{

public:
    C3DVector(void);
    ~C3DVector(void);

    C3DVector(float X, float Y, float Z);
    void Set(float X, float Y, float Z);
    float Length(void);
    void Normalize(void);
}

7. 按下Rebuild Sloution 鍵，即可產生C3DMaths.dll和C3DMaths.lib

APP使用DLL的步驟
程式中使用DLL需要有.h檔, .lib檔和.dl檔, 其中.h檔和.lib檔必須加入到使用DLL的專案中, 而.dll檔則需要放在應用程式所在的路徑(通常和.exe檔同一路徑), 步驟如下:

1.    建立一隻Console的程式(MainDLLTest.exe)
2.    將C3DMath專案所產生的h檔、lib檔，複製到MainDLLTest的專案底下
3.    引入標頭檔(C3DMath.h)
       #include ".\C3DMaths\C3DMath.h"
4.    連結lib檔
       點選Property Page-->Linker-->Input-->Additional Dependencies，然後輸入lib檔的路徑

5. 複製.dll檔(C3DMaths.dll)到應用程式執行路徑下(MainDLLTest.exe), 即可執行程式來測試DLL的功能

編譯環境的設定

在VC中可以利用一些巨集指令來設定你的編譯環境，不但可方便管理專案，也節省很多人工的時間，尤其在開發大型專案時，自動build的流程就變得很重要。下面介紹的方法，可用來自動產生使用DLL時，所要引用的檔案和資料夾，如此一來可省去人工複製的麻煩和時間。

首先看一下VC項目設置中可以使用的巨集，常用的有：

1. 設定dll檔的輸出路徑
General -->Output Directory --> $(PlatformName)\$(ConfigurationName)

2. 設定lib檔的輸出路徑

Linker->Advance->ImportLibrary -->\$(PlatformName)\$(ConfigurationName)/$(TargetName).lib

3. 利用Post Build Event複製檔案
這個功能大多是當你在開發 DLL 專案，編譯完成後，直接將編譯結果複製到會使用的專案目錄中。這樣就不用, 每次還要開檔案總管進行複製了。輸入的指令如下所示

產生專案目錄
mkdir ".\$(ProjectName)"

產生Debug或Release目錄
mkdir ".\$(ProjectName)\$(PlatformName)\$(ConfigurationName)"

複製lib檔
COPY".\$(PlatformName)\$(ConfigurationName)\$(TargetName).lib"
".\$(ProjectName)\$(PlatformName)\$(ConfigurationName)"

複製dll檔
COPY "$(TargetPath)" ".\$(ProjectName)\$(PlatformName)\$(ConfigurationName)"

複製h檔
COPY "C3DMatrix.h" ".\$(ProjectName)"

COPY "C3DVector.h" ".\$(ProjectName)"
COPY "C3DMathLoader.h" ".\$(ProjectName)"

在C++ Class中使用callback function

2010-12-01T02:48:00.000-08:00

在C++ 的類別中如何使用API的callback function, 相信這是剛學會callback function程式員會遇到的問題, 所以在這整理一下解決的方法.

1. 若callback function要成為類別的member function必須宣告成static

解析 - 首先, 我們先來釐清類別中的成員函式, 是如何存取成員變數(注意: 記憶體中只會有一份類別成員函式, 而類別成員變數可能有好幾份).

關鍵就是透過this指標. 因為, C++在編譯時, 會隱含this指標在類別的成員函式中

例如有一個類別和其成員函式為:

class CShape
{
...
public:

void SetColor(int color) { m_color = color;};
}

經過編譯後, 會變成

class CShape
{
...
public:
    void SetColor(int color, (CShape*)this) { this->m_color = color; }
};

因此, 透過this指標可用來指向呼叫它的物件(instance), 進而存取各自的成員變數.

而callback function通常是由系統呼叫, 也就是系統不需經由任何物件呼叫此函式, 因此member callback function的 this 指標會沒有指向任何實體物件, 這將會造成錯誤.

為了不要讓callback function自動含有this指標, 可以將callback function宣告成static member function.
如此一來, callback function就變成 global function, 不需透過物件的實體就可呼叫.

2. 若要在callback function中存取類別成員變數或成員函式, 需要修改callback function prototype, 讓函式的參數列中, 可傳入this指標.

解析 - 由於static member function是屬於類別而不是物件, 所以呼叫static member function時, 不會傳入物件的位址, 所以static member function中不會有this指標, 因此, static member function中不允許使用non-static成員.

所以, 如果要在static callback function中存取non-static成員, 需要在callback functuon的參數列表中傳入物件的this指標.

例如API中有一個callback function宣告如下:
void (*TouchCallback)(TouchPoint p);

若要成為類別的成員函式, 可改為:
void (*TouchCallback)(TouchPoint p, void* pInstance);

下面為範例:

有一個Touch API, 它利用callback的方法來取得觸控點資料.其介面如下:

#ifdef  TOUCHAPI_EXPORTS
  #define TOUCH_API __declspec(dllexport)
#else
  #define TOUCH_API __declspec(dllimport)
#endif

// 定義觸控點的相關資訊
struct TouchPoint
{
 int X; 

 int Y; 
};

// 定義可傳入this指標的callback function prototype
typedef void (_stdcall *CB_TOUCH_CLASS_FUNC) (TouchPoint, void* pObject);

// 定義了一個RegisterCBTouchMemberFunc的函式,
// 可傳入一個具有CB_TOUCH_FUNC型別的callback function
TOUCH_API void RegisterCBTouchMemberFunc(CB_TOUCH_CLASS_FUNC callback,void* pObject);

定義一個CTouchClass的類別, 必且利用Touch API的callback function 作為member function, 程式碼如下:

TouchClass.h

#include "TouchAPI.h"
class CTouchClass
{
private:
 int m_x;
 int m_y;

public:
 CTouchClass(void);
 ~CTouchClass(void);

public:
 static void _stdcall TouchCallback(TouchPoint point, void* pObject);

public: 
 int GetTouchX();
 int GetTouchY();

};

TouchClass.cpp

#include "StdAfx.h"
#include "TouchClass.h"

CTouchClass::CTouchClass(void)
{
    this->m_x = 0;
    this->m_y = 0;
}

CTouchClass::~CTouchClass(void)
{
   this->m_x = 0;
   this->m_y = 0;
}

// 利用this指標存取member function
void CTouchClass::TouchCallback(TouchPoint point, void* pObject)
{
   CTouchClass* pClass =  (CTouchClass*)pObject;
   pClass->m_x = point.X;
   pClass->m_y = point.Y;
}
 
int CTouchClass::GetTouchX()
{
   return m_x;
}
    
int CTouchClass::GetTouchY()
{
   return m_y;
}

如何在C#中使用C++ Class DLL

2010-11-24T19:16:00.000-08:00

在如何在C#中使用Unmanaged dll 文章中曾介紹C#中使用C++ 函式庫(DLL)的方法, 不過此方法僅適用於C-Style export 出來的函式, 不行用在類別(Class)中的成員函式.

但其實很多API都是設計成C++的類別, 因此本文將介紹如何在C# 使用C++ Class的函式.

其步驟如下:

設計一個C-Style function 介面, 透過指標存取物件的實體 – 由於C#中並沒有提供包裝C++ Class的方法, 所以我們必須將類別中public function重新包裝成C-Style function, 而一個物件的實體, 其實可以透過指標(*)作存取, C#中指標的使用也可透過IntPtr.
利用C# PInvoke機制呼叫C-Style function– 作法可參考如何在C#中使用Unmanaged dll
釋放unmanaged object記憶體 –由於C#的回收機制,不會自動回收unmanaged object記憶體, 所以我們必須透過Dispose/Finalize手動回收, 其作法可參考C#記憶體管理

範例如下:

原始C++類別程式碼

#ifdef CSHAPEAPI_EXPORTS
 #define  CSHAPE_API  __declspec(dllexport)
#else
 #define  CSHAPE_API  __declspec(dllimport)
#endif


class CSHAPE_API CShape
{

public:
 CShape(){};
 virtual ~CShape(){};

public:
 float GetRectangleArea(float w ,float h) { return w*h; };  
 float GetTriangleArea(float b ,float h) { return 0.5*b*h;};
};

另外設計一個C-Style function 介面, 包裝要使用的C++ 類別

CShapeBridge.h

#include "CShapeAPI.h"
#ifdef __cplusplus
extern "C" {
#endif

extern CSHAPE_API CShape* CreateInstance();
extern CSHAPE_API void DisposeInstance(CShape* pShapeInstance);

extern CSHAPE_API float GetRectangleArea(CShape* pShapeInstance,
                                        float w ,float h);  
extern CSHAPE_API float GetTriangleArea(CShape* pShapeInstance,
                                        float b ,float h);


#ifdef __cplusplus
}
#endif

CShapeBridge.cpp

#include "stdafx.h"
#include "CShapeBridge.h"

extern "C"  CSHAPE_API CShape* CreateInstance()
{
 return new CShape();
}

extern "C"  CSHAPE_API void DisposeInstance(CShape* pShapeInstance)
{
 if(pShapeInstance != NULL)
 {
  delete pShapeInstance;
  pShapeInstance = NULL;
 }
}

extern "C"  CSHAPE_API float GetRectangleArea(CShape* pShapeInstance, 
                                              float w ,float h)
{

 return pShapeInstance->GetRectangleArea(w, h);
}

extern "C"  CSHAPE_API float GetTriangleArea(CShape* pShapeInstance, 
                                             float b ,float h)
{
 return pShapeInstance->GetTriangleArea(b, h);
}

利用PInvoke機制呼叫C-Style function , 並釋放unmanaged object記憶體

ShapeWrapper.cs
using System;
using System.Runtime.InteropServices;

namespace ShapeTest
{
    public class ShapeWrapper : IDisposable
    {
        #region PInvokes
        [DllImport("CShapeAPI.dll")]
        private static extern IntPtr CreateInstance();

        [DllImport("CShapeAPI.dll")]
        private static extern void DisposeInstance(IntPtr pShapeInstance);

        [DllImport("CShapeAPI.dll")]
        private static extern float GetRectangleArea(IntPtr pShapeInstance,
                                                     float w, float h);  
       
        [DllImport("CShapeAPI.dll")]
        private static extern float GetTriangleArea(IntPtr pShapeInstance, 
                                                    float b, float h);
        #endregion

        #region Members
        // Variable to hold the C++ class's this pointer
        private IntPtr m_pNativeObject;  
        #endregion Members


        public ShapeWrapper()
        {
            // We have to Create an instance of 
            // this class through an exported function
            this.m_pNativeObject = CreateInstance();
        }

        public void Dispose()
        {
            Dispose(true);
        }

        protected virtual void Dispose(bool bDisposing)
        {
            if (this.m_pNativeObject != IntPtr.Zero)
            {
                // Call the DLL Export to dispose this class
                DisposeInstance(this.m_pNativeObject);
                this.m_pNativeObject = IntPtr.Zero;
            }

            if (bDisposing)
            {
                // No need to call the finalizer since we've now cleaned
                // up the unmanaged memory
                GC.SuppressFinalize(this);
            }
        }

        // This finalizer is called when Garbage collection occurs, but only if
        // the IDisposable.Dispose method wasn't already called.
        ~ShapeWrapper()
        {
            Dispose(false);
        }


        #region Wrapper methods
        public float GetRectangleArea(float w, float h)
        {

            return GetRectangleArea(m_pNativeObject, w, h);
        }

        public float GetTriangleArea(float b, float h)
        {
            return GetTriangleArea(m_pNativeObject, b, h);
        }
        #endregion
    }
}

測試C#程式使用C++ Class DLL

using System;
namespace ShapeTest
{
    class Program
    {
        static void Main(string[] args)
        {
            ShapeWrapper shape = new ShapeWrapper();

            float w= 25.0f;
            float h= 10.0f;
            Console.WriteLine("Rectangle area = "+shape.GetRectangleArea(w, h));


            float b = 30.0f;
            float h1 = 20.0f;
            Console.WriteLine("Triangle area = "+ shape.GetTriangleArea(b, h1));

        }
    }
}

測試結果:

Rectangle area = 250

Triangle area = 300

另外, MSDN也有提供使用CLR的方法, 請參考包裝原生類別以便讓 C# 使用

參考文章:

How to Marshal a C++ Class

Background Process in WPF

2010-11-11T03:04:00.000-08:00

在程式執行中, 有時後需要處理一些比較耗時的程序, 例如讀取或計算大量的資料, 因為這些動作會花比較多的時間, 而且會讓畫面停留不動. 所以, 通常需要一個Loading/Processing的畫面來提醒使用者.

在Loading過程中, 如果要更新UI內容的話, 需要在背景工作, 否則會等Loading處理完畢後, 才會更新UI.

下面的範例中, 程式會顯示Loading過程中的次數和完成的百分比.

private void UpdateProcess()
 {
     for (int i = 1; i <= _numberOfTasks; i++)
     {
         labelNumber.Content = i +"/" + _numberOfTasks;
         float percentageDone = (i / (float)_numberOfTasks) * 100f;
         labelPercent.Content = (int)percentageDone+"%";
         Thread.Sleep(1);
     }
}

從執行結果可看出, 因為不是在背景中(background)更新UI內容, 所以畫面會停住不動, 等Loading完才會更新UI內容

[影片1] 不在背景工作中更新UI

在WPF中提供多個背景工作的方法, 下面逐一介紹

1. 使用Dispatcher

此方法最為簡單, 我們可將Dispatcher Priority 設成 DispatcherPriority.Background,即可在背景執行,而Dispatcher的相關用法可參考這篇文章WPF - Thread and Dispatcher
因此我們可將上面的程式碼, 改成為下面的程式:

private delegate void UpdateProcessDelegate(int index, int percent);
private void UpdateProcessAction(int index, int percent)
{
    labelNumber.Content = index + "/" + _numberOfTasks;
    labelPercent.Content = percent + "%";
 }

 private void UpdateProcess()
 {
     for (int i = 1; i <= _numberOfTasks; i++)
     {
         //labelNumber.Content = i +"/" + _numberOfTasks;
         float percentageDone = (i / (float)_numberOfTasks) * 100f;
         //labelPercent.Content = (int)percentageDone+"%";

         Dispatcher.Invoke(DispatcherPriority.Background,
                           new UpdateProcessDelegate(UpdateProcessAction),
                           i, 
                           (int)percentageDone);
         
         Thread.Sleep(1);
      }
 }

[影片2] 使用Dispatcher更新UI內容

2. 使用DispatcherFrame

此作法類似Windows Form的DoEvents.
DispatcherFrame 表示處理暫停之工作項目的迴圈.發送器會處理迴圈中的工作項目佇列. 此迴圈即稱為框架。通常是由應用程式以呼叫 Run 的方式來初始化初始迴圈. PushFrame 進入以 frame 參數表示的迴圈。對該迴圈的每次查看, Dispatcher 都會檢查 DispatcherFrame 類別上的 Continue 屬性，以判斷迴圈是否應繼續或停止.

程式碼如下:

public void DoEvents()
{
   DispatcherFrame frame = new DispatcherFrame();
   Dispatcher.CurrentDispatcher.BeginInvoke(DispatcherPriority.Background,
                                            new DispatcherOperationCallback(ExitFrame),
                                            frame);
   Dispatcher.PushFrame(frame);
}

private object ExitFrame(object f)
{
   ((DispatcherFrame)f).Continue = false;
   return null;
}

private void UpdateProcess()
{
   for (int i = 1; i <= _numberOfTasks; i++)
   {
       labelNumber.Content = i +"/" + _numberOfTasks;
       float percentageDone = (i / (float)_numberOfTasks) * 100f;
       labelPercent.Content = (int)percentageDone+"%";
       DoEvents();
       Thread.Sleep(1);
    }  
 }

3. 使用BackgroundWorker

BackgroundWorker可以在個別的執行緒上執行. BackgroundWoker常用的function如下:

DoWork -設定背景工作的地方, 會將需要耗時的作業放在此事件處理函式
ProgressChanged - 收進度更新的狀態, UI可在此事件處理函式中作更新
RunWorkerAsync - 啟動執行緒
RunWorkerCompleted - 作業完成時會觸發此事件

程式碼如下:

private void btnShowText_Click(object sender, RoutedEventArgs e)
{
    BackgroundWorker worker = new BackgroundWorker();
    worker.WorkerReportsProgress = true;
    worker.DoWork += new DoWorkEventHandler(DoWork);
    worker.ProgressChanged += new ProgressChangedEventHandler(DuringWork);
    
    // start the background work
    worker.RunWorkerAsync();
 }

 void DoWork(object sender, DoWorkEventArgs e)
 {
     BackgroundWorker worker = sender as BackgroundWorker;
     for (int i = 1; i <= _numberOfTasks; i++)
     {
         if (worker.CancellationPending)
         {
            e.Cancel = true;
            return;
          }
          Thread.Sleep(1);
          float percentageDone = (i / (float)_numberOfTasks) * 100f;
          worker.ReportProgress((int)percentageDone, i);
      }
  }
       
 void DuringWork(object sender, ProgressChangedEventArgs e)
 {
    labelNumber.Content = e.UserState + "/" + _numberOfTasks;
    labelPercent.Content = e.ProgressPercentage.ToString() + "%";
 }

參考文章:

Using Background Process in WPF

在WPF中使用背景工作(BackgroundWorker)

How to use BackgroundWorker to run two threads in background which change UI

WPF - Thread and Dispatcher

2010-11-10T23:03:00.000-08:00

WPF 執行緒:

在WPF應用程式中主要有兩個執行緒(Thread)：Rendering Thread和UI Thread

Rendering Thread: 在背景中執行並協助UI Thread完成工作
UI Thread: 主要負責處理Input、Event與程式碼的部分

在WPF中, 所有UI工作和事件都是在UI Thread上完成. 每個WPF程式至少有一個Dispatcher物件和一個UI Thread. 而大部分WPF物件的操作都是binding在UI Thread上，其他的Thread如果想要直接操作這些UI物件, 是不被允許的, 因為只有建立 DispatcherObject 的Thread才可以存取UI物件。例如, 要讓其他的Thread存取 Label 的 Content 屬性, 將會發生錯誤, 此範例如下所示:

設計一個WPF視窗, 當按下Button後, 讓Label顯示按Button的次數.

C#程式碼如下所示:

private static int _clickCount = 0;
private void btnShowText_Click(object sender, RoutedEventArgs e)
{
      _clickCount++;
       // Update Label Conten in another thread
       Thread updateThread = new Thread(UpdateText);
       updateThread.Start();
 }
 private void UpdateText()
 {
      labelClickCount.Content = "Click Count= " + _clickCount.ToString();
 }

[圖1]無法再另一個Thread中更新UI

Dispatcher用法:

Dispatcher可讓其他的Thread在WPF中的 UI Thread上執行程式碼. Dispatcher又被稱為WPF中的Message Pump，提供一個機制去發送工作項目給UI Thread進行處理.

當Dispatcher將工作項目轉給UI Thread時, 會讓UI Thread進入封鎖狀態(畫面鎖定, 因為要處理工作項目). 其他的Thread必須將工作委派給與 UI Thread相關聯的 Dispatcher. 這可以使用 Invoke 或 BeginInvoke 完成.

Invoke 是同步呼叫,也就是說,除非 UI 執行緒實際完成委派的執行，否則不會返回.

BeginInvoke 是非同步的,會立即返回.

Dispatcher 會依優先權排列其佇列中項目的順序. 在將項目加入至 Dispatcher 佇列.

下面的程式碼, 將說明其解決方法:

C#程式碼如下所示:

private static int _clickCount = 0;

 // Declare a delegate type for updating UI
 private delegate void UpdateDelegate(int number, string str);
 private void btnShowText_Click(object sender, RoutedEventArgs e)
 {
     _clickCount++;
     Thread updateThread = new Thread(UpdateText);
      updateThread.Start();
 }

 private void UpdateText()
 {
      //labelClickCount.Content = "Click Count= " + _clickCount.ToString();
      // Places the delegate onto the UI Thread's Dispatcher
      Dispatcher.Invoke(new UpdateDelegate(UpdateClickCountAction),
                                          _clickCount, 
                                          "Click Count = ");
 }

  private void UpdateClickCountAction(int number, string str)
  {
       labelClickCount.Content = str + number.ToString();
  }

[圖2] 利用Dispatcher執行另一個Thread的function

參考文章:

Touch Game - Rubik's Cube

2010-09-08T23:34:00.000-07:00

之前開發過不少touch相關的應用程式, 其中一個就是Rubik's Cube(中文叫魔術方塊), 關於它的介紹和玩法, 可參考: 維基百科-魔術方塊

Rubik's cube繪圖的部分是透過OpenGL API, 而觸控和手勢則取得透過Win7 Touch SDK.

此遊戲可以利用 "觸控+手勢" 來作操作, 方法如下所示:

Orienting the Cube – Touch one finger and move it in the direction you want the cube to rotate

[圖 1] Orienting the cube

Rotating a Cube Section - Touch one finger and move it inside the section you wish to move, and then move it in the direction you want to rotate the section

[圖 2] Rotating a cube section

Zoom In - Touch two fingers and move them farther apart.

[圖 3] Zoom in

Zoom Out - Touch two fingers and move them closer apart

[圖 4] Zoom out

Resetting All Rotations - Touch two fingers and move them in the same direction, entire cube orientation can be reset

[圖 5] Resetting all rotations

Scrambling the Cube - Touch two fingers and turn them in a circle to scramble the cube

[圖 6] Scrambling the cube

Callback Function

2010-09-08T23:21:00.000-07:00

什麼是Callback function?

如果在程式中使用某個function, 我們可稱作”call” function,這種行為是主動的, 而callback function是被動的, 也就是當特定事件發生時(例如觸控發生, 或某手勢被偵測),callback function才會被呼叫.

而Callback在C/C++實現的方式, 就是利用function pointer(函式指標), 例如A程式想要B程式發生某些事件時, 能通知A程式. 利用Callback機制的話, A程式必須傳一個function pointer給B程式,讓B程式可以使用這個function pointer來通知A程式.

function pointer(函式指標)宣告的方式如下:

返回類型 (* 函式指標名稱) (參數列表);

example:
int (* GetPointCallback)(int x, int y);

Callback function的使用案例

例如: 我們在設計一個觸控繪圖的應用程式時, 通常不會讓程式不斷地向系統要觸控點的資料, 而是希望當系統偵測到觸控發生時, 才會丟回觸控點的資料, 而這個丟回觸控點的行為, 就可以設計成callback function. 其示意圖如下所示:

[圖 1] Touch Paint Callback function

Callback function 範例程式

TouchAPI.h

#ifdef  TOUCHAPI_EXPORTS
 #define TOUCH_API __declspec(dllexport)
#else
 #define TOUCH_API __declspec(dllimport)
#endif

// 定義觸控點的相關資訊
struct TouchPoint
{
 int X; 
 int Y; 
};

// 定義callback function的prototype
// CB_TOUCH_FUNC是一個pointer,指向具有一個TouchPoint類型,且回傳void型的函数
// 前面有個typedef,所以現在CB_TOUCH_FUNC是這種類型的别名
typedef void (_stdcall *CB_TOUCH_FUNC) (TouchPoint);

// 定義了一個RegisterCBTouchFunc的函式,可傳入一個具有CB_TOUCH_FUNC型別的callback function
TOUCH_API void RegisterCBTouchFunc(CB_TOUCH_FUNC callback);

TouchAPI.cpp

#include "stdafx.h"
#include "TouchAPI.h"

void DetectTouchFromSystem(CB_TOUCH_FUNC callback)
{
    // 當系統取得touch資料時,
    // 就會呼叫一次pCB_TOUCH_FUNC參數所指到function一次
    TouchPoint tp;
    tp.X = 5;
    tp.Y = 10;
    callback(tp);
}

void RegisterCallbackTouchFunc(CB_TOUCH_FUNC callback)
{
 DetectTouchFromSystem(callback);
}

TouchPaint.cpp

#include "stdafx.h"
#include "conio.h"
#include "TouchAPI.h"
 
// 定義了一個名為GetTouch的函式, 也就是callback函式
// 它的prototype必須與TouchAPI的CB_TOUCH_FUNC宣告一致
void _stdcall GetTouch(TouchPoint point)
{
 printf("x=%d, y=%d", point.X, point.Y);
}
 
int main(void)
{
    //註冊一個callback function
    RegisterCBTouchFunc(GetTouch);
    getch();
    return 0 ;
};

參考資料:
何謂callback function
Callback (computer science)

C#記憶體管理

2010-05-30T08:17:00.000-07:00

就C++或 C#程式而言, 記憶體的配置區域大致可分成三種

Global區域 -若變數,函式或物件宣告成static,將被配置到此區域內(這類的記憶體,常被稱為全域變數(global variable), 此區域內的所有資料為同一個process共用; Global區域內的記憶體生命週期會維持到程式結束後, 才會被釋放.
Stack區域 - Stack區域是用來儲存區域變數(local variable), 記憶體配置的生命週期受到其區塊範圍 (block scope) 的影響,當進入區塊時,會自動配置記憶體, 離開此區塊,記憶體也會被釋放.
Heap區域- Heap是儲存動態配置的資料(例如:使用new或malloc()宣告), 此記憶體不會隨函式結束被釋放. 而且釋放方式會因不同程式語言而不同. 對於C/C++這類的程式, 記憶體釋放需要由程式員手動釋放(例如: 使用delete 或 free()); 而 Java 與 C# 程式, 記憶體釋放則由 VM(虛擬機)自動作處理, 也就是Garbage Collection的機制.

如果記憶體的釋放是交由 GC 負責控制, 程式員就不必擔心記憶體遺失或使用到錯誤記憶體等問題(可參考How to detect memory leak), 既然GC那麼方便, 那我們先來了解GC是如何運作?

GC 會追蹤 (tracing) 所有活著的物件, 如果不是活著的物件, 就會被標成 GC 該清除的垃圾.若變數為數值型別, 當變數超出有效範圍時, CLR會直接回收它在Stack上所佔用的空間, 若變數為參考型別, CLR會先回收它在Stack上佔用的空間, 再將Heap上的空間視為garbage, 等待GC回收. 若參考型別的變數在其有效範圍內重新初始化, 則原先所指向的物件亦會被視為garbage.
然而, 被視為garbage的物件, 並不會馬上就被GC回收, 而是根據GC內的演算法, 依變數被判定的generation而有不同. 下面為GC的測試程式:

C#程式碼 :


static void Main(string[] args)
{
 Console.WriteLine("程式開始");
 MyClass myClass = new MyClass();
 myClass = null;
 Console.WriteLine("程式結束");
}

執行結果, GC會在程式結束後自動作記憶體回收:

[圖1] GC自動回收記憶體

雖然GC會幫程式人員自動清理記憶體, 但還是有可能發生, 要及時釋放某些記憶體(unmanged object)或資源時, 例如視窗控制代碼 (HWND), 資料庫連接等時, 該怎麼做?

C# 提供三種方式, 讓程式人員可手動釋放記憶體或資源:
(1) 呼叫GC.Collect()

使用GC.Collect()可強制系統嘗試回收可用記憶體的最大量. 但一般來說. 應該盡量避免呼叫GC.Collect()來回收記憶體, 因為在記憶體回收行程執行回收之前，它會暫停所有目前正在執行的執行緒. 如果在不必要的情況下呼叫 GC.Collect()太過頻繁的話, 反而會造成效能上的問題. 此方法使用範例如下:

C#檔

static void Main(string[] args)
{
  Console.WriteLine("程式開始");
  MyClass myClass = new MyClass();
  myClass = null;
  GC.Collect();
  //因為GC回收時是在另一個thread
  //所以使用WaitForPendingFinalizers等到確實回收後再繼續執行
   GC.WaitForPendingFinalizers();
   Console.WriteLine("程式結束");
}

執行結果

[圖2] 使用GC.Collect()強制回收記憶體

(2) 實作 Finalize
實作 Finalize 方法, 如同C++中的解構函式語法, 程式碼範例如下:

C#檔

public class MyClass
{
  UnmanagedResource unmRes ;

  public MyClass()
  {
      Console.WriteLine("建構 MyClass");
      unmRes = new UnmanagedResource();
  }

  ~MyClass()
  {
      /// 釋放unmanaged資源
      unmRes.Release();

      Console.WriteLine("解構 MyClass");
  }
}

執行結果:

[圖3] 利用Finalize 回收記憶體

Finalize 雖可用於釋放一些記憶體, 但執行的時機由GC控制, 因此我們無法預期Finalize()究竟會何時會被呼叫, 這樣如果我們有急迫的資源必須釋放,這時候怎麼辦?

(3)使用Dispose

若要明確地釋放資源和物件, 使用Dispose將是最好的方式.程式員呼叫的方式如下:

明確地呼叫Dispose()
使用using陳述式, 在離開using區塊時, 其Dispose()會被明確地呼叫

請注意, 使用 Dispose 雖然可以讓程式員明確地控制, 但也不能少用 Finalize 方法. 因為當程式員呼叫 Dispose 失敗, 則 Finalize 會提供備份, 以避免資源沒被釋放掉, 相關程式碼如下:

C#檔:


public class Memory : IDisposable
{
  private bool isDisposed = false;

  public Memory()
  {
      Console.WriteLine("建構 Memory");
  }

  ~Memory()
  {
      Dispose(false);
      Console.WriteLine("解構 Memory");
  }

  protected void Dispose(bool Diposing)
  {
      if (!isDisposed)
      {
          if (Diposing)
          {
              //Clean Up managed resources
          }
          //Clean up unmanaged resources
      }
      isDisposed = true;
  }

  public void Dispose()
  {
      Console.WriteLine("Dispose called!");
      Dispose(true);
      //藉由呼叫 GC.SuppressFinalize 方法來避免 Finalize 方法的執行
      GC.SuppressFinalize(this);
  }
}

執行結果:
Console.WriteLine("程式開始");
using (Memory memory = new Memory())
{

}
Console.WriteLine("程式結束");

[圖4] 利用Dispose回收記憶體

結論 :

GC會自動管理Managed resource, 所以不需要程式員煩惱, 除非有用到 unmanaged resource 並需要釋放, 才會用Dispose/Finalize
Finalize() 是交給 GC 安排時間去處理, Dispose() 則讓使用者決定使用的時機
除非必要時機, 否則不建議呼叫GC類別的Collect方法來強制回收記憶體

參考文章:
記憶體回收
.NET 的自動記憶體管理
C# garbage collection 筆記
.NET Framework記憶體回收機制
C# - 資源釋放的觀念整理
實作 Finalize 和 Dispose 以清除 Unmanaged 資源

How to detect memory leak

2010-05-28T08:50:00.000-07:00

記憶體管理對C/C++程式開發是個很重要的議題, 在程式中配置記憶體很容易, 但什麼時間點該釋放記憶體, 就是個很麻煩的問題. 如果配置的記憶體不作釋放, 就會導致系統永遠無法取得那塊記憶體,而造成記憶體遺漏(Memory Leak), 若釋放不該釋放的記憶體, 程式運行到一半找不到對應的位址時, 也會造成程式當掉.上述的這些問題, 常常會發生在C/C++的初學者, 或已經習慣自動記憶體管理的程式員身上.

下面的步驟說明如何在C++的程式中, 偵測memory leak的發生.

引用下列標頭檔

        #define _CRTDBG_MAP_ALLOC
          #include <stdlib.h>
          #include <crtdbg.h>

輸出記憶體洩漏資訊
```
_CrtDumpMemoryLeaks();
```
在Visual Studio中選擇Debug模式然後執行, 若程式中有發生記憶體遺漏, 其相關資訊將出現在輸出視窗中.

下面的程式範例中, 我們利用new配置了一個物件記憶體, 且不將其記憶體作釋放:


#define _CRTDBG_MAP_ALLOC

#include "stdafx.h"
#include "MyClass.h"
#include <stdlib.h>
#include <crtdbg.h>

int _tmain(int argc, _TCHAR* argv[])
{
CMyClass* pClass = new CMyClass();
//delete pClass;
pClass = NULL;
_CrtDumpMemoryLeaks();

return 0;
}

在輸出視窗中我們將觀看到記憶體遺漏的資訊如下:
Detected memory leaks!
Dumping objects ->
{86} normal block at 0x00397D98, 1 bytes long.
Data: < > CD
Object dump complete.
The program '[848] MemoryLeakTest.exe: Native' has exited with code 0 (0x0).

參考文章:
啟用記憶體遺漏偵測
在Visual C++使用內建功能偵測memory leak

Game Loop Compare- DispacterTimer, Storyboard, Composition.Rendering

2010-04-15T18:28:00.001-07:00

Game Loop 對寫遊戲來說是一個很重要的步驟, 通常我們會將一些不需長時間且不用大量計算的事情, 放在Game Loop裡面去作, 例如:碰撞偵測, 動畫撥放, 更新繪圖座標, 檢查滑鼠或鍵盤的狀態..等.

在WPF/Silverlight中, 可以透過下列方式來實作Game Loop,分別是:

DispatcherTimer - 可以在指定的時間間隔內, 處理佇列中的執行緒.
Storyboard - 以時間軸控制動畫, 和DispatcherTimer的作法類似, 透過Duration屬性決定時間長短, 然後在Completed事件中再次呼叫Storyboard的Begin方法, 就可以達到類似計時器的迴圈.
CompositionTarget.Rendering - 每當程式要顯示一個畫面(frame)時, 就會引發Rendering事件

下列程式碼將示範如何使用上述的方法, 我們會讓一個圓球在視窗內作移動, 當碰到邊界時會作反彈, 而圓球的座標是在Game Loop中作更新, 並顯示對應的FPS值, 如下圖所示:

[圖 1]利用Game Loop作動畫

xmal檔如下:


<Window x:Class="GameLoopTesting.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" SizeToContent="WidthAndHeight">
    <Canvas x:Name="LayoutRoot" Background="Black" Width="800" Height="600">
        <TextBlock x:Name="txtFPS" 
                   Foreground="White"
                   FontFamily="Arial"
                   FontSize="24"
                   Text="FPS:" 
                   Panel.ZIndex="99"/>
        <Ellipse x:Name="ball" 
                 Width="50" 
                 Height="50" 
                 Fill="LightBlue" 
                 Stroke="Gray"
                 Canvas.Left="100"
                 Canvas.Top="100">   
        </Ellipse>    
    </Canvas>
</Window>


cs檔如下:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Threading;
using System.Windows.Media.Animation;

namespace GameLoopTesting
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public enum GameLoopType
        {
            DISPATCHERTIMER,
            STORYBOARD,
            RENDERING
        }

        /// <summary>
        /// For object parameters
        /// </summary>
        private float radius;
        private double dx = 1;
        private double dy = 1;
        private double x = 0;
        private double y = 0;


        /// <summary>
        /// For FPS property
        /// </summary>
        private int _frameCounter = 0;
        private double _timeSinceLastUpdate = 0.0;
        private DateTime _lastUpdateTime = DateTime.MinValue;
        private double _fpsValue = 0.0;

        private Storyboard _sbTrigger;


        public Window1()
        {
            InitializeComponent();

            radius = (float)ball.Width/2;
            _lastUpdateTime = DateTime.Now;


            ///Switch game loop type
            SwitchGameLoop(GameLoopType.DISPATCHERTIMER);
        }


        void SwitchGameLoop(GameLoopType gameLoopType)
        {
            switch (gameLoopType)
            {
                case GameLoopType.DISPATCHERTIMER:
                    {
                        DispatcherTimer timer = new DispatcherTimer();
                        timer.Interval = TimeSpan.FromMilliseconds(10);
                        timer.Tick += new EventHandler(timer_Tick);
                        timer.Start();
                    }
                    break;

                case GameLoopType.STORYBOARD:
                    {                     
                        _sbTrigger = new Storyboard();     
                        _sbTrigger.Duration = TimeSpan.FromMilliseconds(10);
                        _sbTrigger.Completed += new EventHandler(sbTrigger_Completed);
                        _sbTrigger.Begin();

                    }
                    break;


                case GameLoopType.RENDERING:
                    {
                        CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

                    }
                    break;
            }
        }

        void timer_Tick(object sender, EventArgs e)
        {
            /// Calculate FPS value
            /// -----------------------------------------------------------
            _frameCounter++;

            if ((DateTime.Now - _lastUpdateTime).Seconds >= 1)
            {
                txtFPS.Text = "FPS : " + _frameCounter;
                _frameCounter = 0;
                _lastUpdateTime = DateTime.Now;
            }
            //-----------------------------------------------------------

            UpdateObjectPosition();
        }

        void sbTrigger_Completed(object sender, EventArgs e)
        {
            UpdateObjectPosition();
            _sbTrigger.Begin();
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            /// Calculate FPS value
            /// -----------------------------------------------------------
            TimeSpan elapsedTime = DateTime.Now - _lastUpdateTime;

            _frameCounter++;
            _timeSinceLastUpdate += elapsedTime.TotalSeconds;

            if (_frameCounter >= 100)
            {
                _fpsValue = (int)(_frameCounter / _timeSinceLastUpdate);
                txtFPS.Text = "FPS : " + _fpsValue;

                _frameCounter = 0;
                _timeSinceLastUpdate = 0;
            }
            _lastUpdateTime = DateTime.Now;
            //----------------------------------------------------------------

            UpdateObjectPosition();
        }


        /// <summary>
        /// Update the position of object
        /// </summary>
        private void UpdateObjectPosition()
        {
            x = ((double)Canvas.GetLeft(ball));
            y = ((double)Canvas.GetTop(ball));

            x += dx;
            y += dy;

            Canvas.SetLeft(ball, x);
            Canvas.SetTop(ball, y);

            if (x > LayoutRoot.Width - 2 * radius)
            {
                dx = -Math.Abs(dx);
            }
            if (x < 0)
            {
                dx = Math.Abs(dx);
            }
            if (y > LayoutRoot.Height - 2 * radius)
            {
                dy = -Math.Abs(dy);
            }
            if (y < 0)
            {
                dy = Math.Abs(dy);
            }
        }
    }
}

總結:
* 在WPF中使用Storyboard作Game Loop時, 會發生畫面更新到一半時, 卻停止更新,但Silverlight上卻不會, 原因目前還不知道.
* 透過上述的3種方式, 都可以作為遊戲的迴圈, 不過穩定度和解析度上有所差別.可參考這篇Game Loop部落格的詳細比較.
就穩定度來說 : CompositionTarget.Rendering > Storyboard > DispatcherTimer

參考文章:
Creating a Game Loop
Application (Game) Loop, FPS and Sprite like Animation
Game Loop

如何在Silverlight的應用程式上作Debug

2010-04-13T04:35:00.001-07:00

在開發Silverlight的應用程式時, 你可能要用到Debug功能, 來找出程式的錯誤, 但在Silverlight專案執行Debug功能, 可能會出現下面訊息, 而無法除錯.

解決的方法如下 :

Visual Studio 2008 SP1 的 Silverlight 3 Tools 包括：
* Visual Basic 和 C# 專案範本
* Intellisense 和 XAML 程式碼產生器
* Silverlight 應用程式偵錯
* 適用於 Mac 的 Silverlight 應用程式遠端偵錯
* Web 參考支援
* WCF 範本
* Team Build 和命令列建置支援
* 支援快取的透明平台擴充程式
* 支援 Silverlight 3 瀏覽器外用應用程式

安裝上述工具後, 即可解決上述問題.
另外若預設瀏覽器可能不是IE, 可能會發生執行Silverlight的程式沒有畫面, 此時就必須將IE設定為預設瀏覽器, 作法如下:

開啟 Internet Explorer 瀏覽器視窗。
選取 [工具] > [網際網路選項]。
選取 [程式集] 標籤。
在 [預設網頁瀏覽器] 區段中按一下 [設成預設值]。
按一下 [確定]

Touch Game Framework

2010-04-11T23:13:00.000-07:00

最近要開發一些Touch的遊戲, 所以構思了整個Game Framework.

下面的表格列出之前survey的一些game engine, 不過對我來說還是有一些技術性的問題,例如: touch功能的支援, UI的建立, 軟體收費, 支援平台等等.

[圖] XNA, Unity, Blender的比較表

所以最後構思的遊戲架構如下:

應用程式 - 選用Silverlight平台, 主要優點如下:

豐富的圖形及使用者互動功能: Silverlight 包含了 WPF技術的子集,可大幅擴充瀏覽器中用來建立 UI 的項目. 另外, 它具有向量式的繪圖能力, 3D繪圖和製作動畫等等.
影音播放 - 它會以資料流方式處理視訊和音訊. 它可以調整視訊品質, 以配合從行動裝置到桌面瀏覽器, 甚至是到 720p HDTV 視訊模式等任何裝置.
支援Windows 7 的Touch功能 - Silverlight 在3.0版本後就支援Windows 7的觸控功能, 可參考這篇文章的簡介 - Silverlight 3.0 + Multi-touch
跨瀏覽器、跨平台的支援 - 它可以在所有常見的 Web 瀏覽器 (包括 Microsoft Internet Explorer、Mozilla Firefox 和 Apple Safari) 以及 Microsoft Windows 和 Apple Mac OS 上執行Silverlight, 可參考 =>支援的平台和瀏覽器

物理引擎 - 選用Farseer Physics Engine. 它是一個在.NET平台上使用的物理引擎(它是open source), 主要用來開發Silverlight和XNA的2D遊戲. 它提供很多物理相關的特性, 例如: 重力, 作用力, 力矩,碰撞,彈簧和關節..等等.

參考文章 :
Farseer Physics Engine 3.0
msdn - Silverlight

Silverlight 3.0 + Multi-touch

2010-02-24T02:42:00.000-08:00

Silverlight是微軟最新的Web用戶介面技術，它能夠跨流覽器、跨平臺運行.
而在Silverlight 3.0 上也支援多點觸控功能 , 但目前功能還是相當有限, 只能取得觸控點的資料,
若要想要有手勢的功能的話, 需要透過觸控點另外作計算.

Silverlight的多點觸控架構如下:

從上圖可知, 要寫一個Silverlight的觸控程式, 必要元素要有: Touch Device + Windows 7 + IE 8

和Windows Touch API 不一樣的地方, Silverlight 不需要註冊RegisterTouchWindow, 它是以整個應用程式為範圍來註冊多點觸控事件, 而不是在UIElement 加入觸控事件(WPF).

撰寫Silverlight multi-touch application的流程如下:

(1)註冊多點觸控的處理常式 - TouchFrameReported(它是一個static function)
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

針對多點觸控所發生的事件，Silverlight預設將多點觸控事件提升為滑鼠事件, 若不希望升級成滑鼠事件, 可以呼叫 SuspendMousePromotionUntilTouchUp

(2)取得觸控點的資料
TouchPoint GetPrimaryTouchPoint(UIElement relativeTo) --> 取得主要觸控點資料

TouchPointCollection GetTouchPoints(UIElement relativeTo) --> 取得所有觸控點資料

傳入一個UIElement將回傳相對偏移的 Position 產生包含相對座標的 TouchPoint.
如果想要獲得觸控點的的絕對座標, 請將 relativeTo 指定為 null.

觸控點的其他資訊如下所示;

example code:
foreach (TouchPoint tp in e.GetTouchPoints(_canvas))
{
// 取得作業系統針對特定觸控裝置所提供的唯一 ID
tp.TouchDevice.Id;

// 取得當觸控點產生時，滑鼠指標所停留的最上層 UIElement 物件
tp.TouchDevice.DirectlyOver

// 取得觸控點的 X, Y 座標位置(相當於觸控區域的中心點位置)
tp.Position;

// 取得觸控點接觸區域(其區域為一個矩形)
tp.Size;
}

(3) 識別觸控的動作 -TouchAction
觸控點的動作可分成下列3種:

TouchAction.Down: 來自 TOUCHEVENTF_DOWN 訊息的觸控動作
TouchAction.Move: 來自 TOUCHEVENTF_MOVE 訊息的觸控動作
TouchAction.Up:來自 TOUCHEVENTF_UP 訊息的觸控動作

下圖為利用Silverlight開發的繪圖板. 因此在網頁上也可利用觸控作繪圖.

P.S: 若要使用Silverlight 來作為開發工具. 如果您沒有 Visual Web Developer,請使用 Web Platform Installer,如果您已有 Visual Studio, 請直接下載這個工具 ( Silverlight 3 SDK )

參考文章:
Silverlight 3 Multi-touch: The Basics
Silverlight 3 中的multi-Touch程式開發
Silverlight 3 Multi-Touch with Windows 7 and HP Touch Smart

WPF + Windows7 Multi-touch (Part 3)

2009-11-18T21:40:00.000-08:00

目前在WPF中使用Multi-touch功能,必須透過P/Invoke的方式呼叫Win32 Touch API的功能(可參考這篇文章 : WPF + Windows7 Multi-touch (Part 2) ), 或是可以直接使用微軟提供的Windows 7 Multitouch .NET Interop Sample Library, 它提供 WPF 與 WinForms 3.5 SP1 要開發Multi-Touch 程式所需的功能, 不過利用上述這些方法開發觸控功能時, 還是有稍嫌複雜, 也不是很直覺.

因此在WPF 4.0 已經將一些觸控功能放到UIElement, UIElement3D和ContentElement中,
在 Beta 1中, 將支援高階操作的觸控功能(Manipulation), 如下所示:

而在Beta 2 中, 除了原本高階操作的觸控功能(Manipulation)外, 還提供的Touch相關的event,如下所示:

下面我們將利用WPF 4.0 Beta2 Touch功能, 撰寫一個顯示目前觸控點的應用程式, 其步驟如下:

軟體和硬體需求

IDE -安裝Visual Studio 2010 Beta 2
OS 版本 - Windows 7 Ultimate Editions
硬體設備 - 準備一台具有多點觸控的螢幕或電腦

程式碼如下:

XAML檔的部份:


<Window x:Class="WPFTouchPoint.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="800" Width="800"
    TouchDown="Window_TouchDown"
    TouchMove="Window_TouchMove"
    TouchUp="Window_TouchUp">
<Canvas Background="Black">
    <Ellipse
        Canvas.Left="0"
        Canvas.Top="0"
        Name="Touch1"
        Stroke="Black"
        Height="60"
        Width="60"
        Fill="LightGreen"
        Visibility="Hidden">
        <Ellipse.BitmapEffect>
            <DropShadowBitmapEffect ShadowDepth="10"
                                    Direction="270"
                                    Color="White"
                                    Opacity="0.5"
                                    Softness="0.25"/>
        </Ellipse.BitmapEffect>
    </Ellipse>

    <Ellipse
        Canvas.Left="0"
        Canvas.Top="0"
        Name="Touch2"
        Stroke="Black"
        Height="60"
        Width="60"
        Fill="LightBlue"
        Visibility="Hidden">
        <Ellipse.BitmapEffect>
            <dropshadowbitmapeffect shadowdepth="10" direction="270" color="White"
            opacity="0.5" softness="0.25">
       </dropshadowbitmapeffect>
     </Ellipse>
  </Canvas>
 </Window>

C#檔的部分:


namespace WPFTouchPoint
{
/// 
/// Interaction logic for MainWindow.xaml
/// 

public partial class MainWindow : Window
{

    private int Touch1ID = 0;    // id for first touch contact
    private int Touch2ID = 0;    // id for second touch contact

    public MainWindow()
    {
        InitializeComponent();
    }


    private void Window_TouchDown(object sender, TouchEventArgs e)
    {
        TouchPoint p = e.GetTouchPoint(this);

        if (Touch1ID == 0)
        {
           // Show the touch point
           Touch1.Visibility = Visibility.Visible;

           Touch1ID = e.TouchDevice.Id;

           // move the ellipse to the given location
           Touch1.SetValue(Canvas.LeftProperty, p.Position.X - Touch1.Width / 2);
           Touch1.SetValue(Canvas.TopProperty, p.Position.Y - Touch1.Height / 2);
        }
        else if (Touch2ID == 0)
        {
           Touch2.Visibility = Visibility.Visible;

           Touch2ID = e.TouchDevice.Id;
           // move the ellipse to the given location
           Touch2.SetValue(Canvas.LeftProperty, p.Position.X - Touch2.Width / 2);
           Touch2.SetValue(Canvas.TopProperty, p.Position.Y - Touch2.Height / 2);
        }

    }

    private void Window_TouchMove(object sender, TouchEventArgs e)
    {
        TouchPoint p = e.GetTouchPoint(this);
        // determine which contact this belongs to
        if (Touch1ID == e.TouchDevice.Id)
        {
           Touch1.SetValue(Canvas.LeftProperty, p.Position.X - Touch1.Width / 2);
           Touch1.SetValue(Canvas.TopProperty, p.Position.Y - Touch1.Height / 2);
        }
        else if (Touch2ID == e.TouchDevice.Id)
        {
           Touch2.SetValue(Canvas.LeftProperty, p.Position.X - Touch2.Width / 2);
           Touch2.SetValue(Canvas.TopProperty, p.Position.Y - Touch2.Height / 2);
        }
    }

    private void Window_TouchUp(object sender, TouchEventArgs e)
    {
        if (e.TouchDevice.Id == Touch1ID)
        {
            Touch1.Visibility = Visibility.Hidden;

            Touch1ID = 0;
        }
        else if (e.TouchDevice.Id == Touch2ID)
        {
            Touch2.Visibility = Visibility.Hidden;

            Touch2ID = 0;
        }

    }
}
}

顯示結果如下所示:

[圖 1] Multi-touch points in WPF4.0 Beta 2

不過目前這些觸控功能在Beta版還是有很多bug, 可參考這些文章測試出來的結果:
Multi-touch in WPF4.0 Beta2

WPF 4, Beta 2 expands multi-touch API but is buggy

參考文章:
Windows 7: Experimenting with Multi-Touch on Windows 7 ( Part 5 )

Windows using Multi-touch using WPF

Multi-touch in WPF4.0 and VS2010

Introduction to WPF 4 Multitouch

Walkthrough: Creating Your First Touch Application

What's New in WPF Version 4

WPF + Windows7 Multi-touch (Part 2)

2009-10-18T22:47:00.000-07:00

在 WPF + Windows7 Multi-touch (Part 1) 這篇文章中, 我們可以透過 P/ Invoke 的方式來取得Windows 7 的手勢訊息, 並對物體作手勢操作.

不過當你用這個方法來取得觸控點的資訊時, 你會發現收不到WM_TOUCH 的訊息, 這個是因為WPF團隊還沒把這部分加進去(這篇 WPF Windows 7 Multi-touch.文章中, WPF團隊有回答此問題)

因此, 如果要在WPF程式中取得觸控點的資訊的話, 就必須採用下面步驟:

新增一個"MicrosoftTabletPenServiceProperty"屬性到視窗上

             IntPtr hWnd = new WindowInteropHelper(this).Handle;
           HwndSource src = HwndSource.FromHwnd(hWnd);
           Win7TouchMethod.SetProp(src.Handle,
                     "MicrosoftTabletPenServiceProperty",
                      new IntPtr(0x01000000));

新增StylusDown/StylusUp/StylusMove的事件, 來處理觸控的相關事件.


        this.StylusDown += new StylusDownEventHandler(Window1_StylusDown);
        this.StylusMove += new StylusEventHandler(Window1_StylusMove);
        this.StylusUp += new StylusEventHandler(Window1_StylusUp);

下面的範例中, 我們會寫一個WPF的觸控應用程式, 當有觸控發生時, 畫面上會出現圓點(用來表示觸控點的位置)

source code如下:


<Window x:Class="WPFTouch.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="600" Width="800">
  <Canvas>
      <Ellipse
          Canvas.Left="0"
          Canvas.Top="0"
          Name="Touch1"
          Stroke="Black"
          Height="30"
          Width="30"
          Fill="Blue"
          Visibility="Hidden"/>
   
      <Ellipse
          Canvas.Left="0"
          Canvas.Top="0"
          Name="Touch2"
          Stroke="Black"
          Height="30"
          Width="30"
          Fill="Green"
          Visibility="Hidden"/>
  </Canvas>

</Window>


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interop;
using Win7TouchInterop;

namespace WPFTouch
{
  public partial class Window1 : Window
  {
  
      private int Touch1ID = 0;    // id for first touch contact
      private int Touch2ID = 0;    // id for second touch contact

      public Window1()
      {
          InitializeComponent();

          Loaded += new RoutedEventHandler(Window1_Loaded);

          // Add StylusDown/StylusMove/StylusUp events to handle the touch related events
          this.StylusDown += new StylusDownEventHandler(Window1_StylusDown);
          this.StylusMove += new StylusEventHandler(Window1_StylusMove);
          this.StylusUp += new StylusEventHandler(Window1_StylusUp);
      }

      void Window1_Loaded(object sender, RoutedEventArgs e)
      {
          IntPtr hWnd = new WindowInteropHelper(this).Handle;
          HwndSource src = HwndSource.FromHwnd(hWnd);

          Win7TouchMethod.SetProp(src.Handle,
                                   "MicrosoftTabletPenServiceProperty",
                                   new IntPtr(0x01000000));
  
      }


      void Window1_StylusDown(object sender, StylusDownEventArgs e)
      {
          Point p = e.GetPosition(this);   // get the location for this contact


          if (Touch1ID == 0)
          {
              // Show the touch point
              Touch1.Visibility = Visibility.Visible;

              Touch1ID = e.StylusDevice.Id;
           
              // move the ellipse to the given location
              Touch1.SetValue(Canvas.LeftProperty, p.X - Touch1.Width / 2);
              Touch1.SetValue(Canvas.TopProperty, p.Y - Touch1.Height / 2);
          }
          else if (Touch2ID == 0)
          {
              Touch2.Visibility = Visibility.Visible;

              Touch2ID = e.StylusDevice.Id;
              // move the ellipse to the given location
              Touch2.SetValue(Canvas.LeftProperty, p.X - Touch2.Width / 2);
              Touch2.SetValue(Canvas.TopProperty, p.Y - Touch2.Height / 2);
          }
      }

      void Window1_StylusMove(object sender, StylusEventArgs e)
      {
          Point p = e.GetPosition(this);
          // determine which contact this belongs to
          if (Touch1ID == e.StylusDevice.Id)
          {
              Touch1.SetValue(Canvas.LeftProperty, p.X - Touch1.Width / 2);
              Touch1.SetValue(Canvas.TopProperty, p.Y - Touch1.Height / 2);
          }
          else if (Touch2ID == e.StylusDevice.Id)
          {
              Touch2.SetValue(Canvas.LeftProperty, p.X - Touch2.Width / 2);
              Touch2.SetValue(Canvas.TopProperty, p.Y - Touch2.Height / 2);
          }
      }

      void Window1_StylusUp(object sender, StylusEventArgs e)
      {
          if (e.StylusDevice.Id == Touch1ID)
          {
              Touch1.Visibility = Visibility.Hidden;

              Touch1ID = 0;
          }
          else if (e.StylusDevice.Id == Touch2ID)
          {
              Touch2.Visibility = Visibility.Hidden;

              Touch2ID = 0;
          }
      }
  }
}

執行畫面如下:

[圖 1] WPF Touch Application

參考文章:
Windows 7 Multi-touch using WPF

如何讓WPF控制項產生陰影效果

2009-10-13T00:28:00.000-07:00

在WPF中可以利用BitmapEffect(點陣圖效果), 使控制項呈現一些影像特效;如: Blur(模糊效果), Shadow(陰影效果), Bevel(斜面), Emboss(凹凸)和色彩光暈等....

在這篇文章中, 我們先來介紹會使控制像看起來比較有立體感的陰影效果.

由於BitmapEffect 是 Visual 物件上的屬性, 因此, 我們可將BitmapEffect套用至任何視覺物件(例如 Button,Image, DrawingVisual 或 UIElement)上. 例如我們可以利用DropShadowBitmapEffect 物件建立 WPF 物件的各種下拉式陰影效果.

它提供下列屬性來讓你自訂陰影效果:

Color - 設定陰影的顏色
Opacity - 設定陰影的透明度, 設定範圍為0 至1, 預設值是1
ShadowDepth - 控制陰影的寬,有效值的範圍為 0 至 300。預設值為 5
Direction - 控制陰影的方向。請將這個屬性的方向值設定為介於 0 與 360 之間的度數. 0表示陰影會顯示在物件的正右方, 隨著Direction的增加, 陰影會逆時針方向移動
Softness - 控制陰影的柔和度或模糊,值 0.0 表示沒有模糊，而值 1.0 則表示全部模糊

下面的範例中, 我們將圖1透過 DropShadowBitmapEffect 的效果, 產生出如圖片2的陰影效果:

XAML檔如下所示:


<Image Source="tulips.jpg"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Margin="80, 50, 80, 50"
       Name="image1"
       Stretch="Fill" >
    <Image.BitmapEffect>
          <DropShadowBitmapEffect ShadowDepth="20"
                                  Direction="300"
                                  Color="Black"
                                  Opacity="0.5"
                                  Softness="0.25" />                                   
    </Image.BitmapEffect>
</Image>

[圖1]沒有陰影效果

[圖2]加上陰影效果

需要注意的地方:

WPF 點陣圖效果是在軟體模式中呈現. 而且是由UI執行緒執行, 而不是呈現的執行緒, 因此使用點陣圖效果會對效能有很大的影響(效能和元素的數量成正比), 所以最好在少量而且是靜態的內容才使用這些效果. 尤其在大型視覺物件上使用點陣圖效果, 或者以點陣圖效果的屬性建立動畫時, 效能會降低最多.

參考文章 :
MSDN - 點陣圖效果概觀
MSDN - 建立含陰影的文字

C# - Delgate(委派)和Event(事件)

2009-09-23T23:07:00.000-07:00

首先, 先來釐清Delgate和Event的不同之處:

Delegate : 類似C語言中的函數指標(function pointer), 它包含了一個函数的原型(參數,返回值,呼叫方式)和該函数的内存位址. delegate是一種型別(class), 要宣告後才能使用.

例如, 我們在C語言中定義一個 callback函式, 可寫成:

typedef void (_stdcall* TouchFunc) (tOTM_Touch Touch);

等同於下面C#的寫法:

delegate void TouchEventFunc (tOTM_Touch Touch);

Event: event是C#是關鍵字, 這個關鍵字是一個修飾詞, 類似const,static等, 而event是用來修飾delegate. Event的實現需要透過delegate.

一個delegate被宣告為event(事件)後，除了在宣告事件的類別(Publisher)外,在其他的地方,只能利用+=、-=操作(即subscrib或unsubscribe), 而delegate則沒有這樣的限制

若要訂閱某事件, 可利用“+=", 訂閱或註冊某事件指定的delegate(所代理的函数).

publisher.RaiseCustomEvent += new CustomEventHandler(HandleCustomEvent);

或

publisher.RaiseCustomEvent += HandleCustomEvent; //C# 2.0 內新增的語法

若要取消訂閱事件, 使用減法指派運算子 (-=) ：

publisher.RaiseCustomEvent -= HandleCustomEvent;

event為物件提供一種方式, 可在某些事情發生時,通知其他類別或物件.

傳送或引發事件的類別稱為 Publisher(發行者) ,而接收或處理事件的類別則稱為Subscriber(訂閱者)

跟Method(方法)不一樣的地方:
Event是主動, 有事件發生就作通知，你可以訂閱或不訂閱; 而Method是被動, 只能等待來呼叫，你不呼叫它就不會執行

下面為在C#中使用自訂Event的步驟:

在Publisher Class(傳送事件的類別)

宣告事件的Delegate型別

public delegate void ChangedEventHandler(object sender, CustomEventArgs e);

宣告事件

public event ChangedEventHandler Changed;

當事件發生時,觸發此事件

if (Changed != null)
Changed(this, e);

在Subscriber Class(接收或處理事件的類別)

訂閱Publisher Class的事件

將Delegate與Event關聯, 並且註冊這個event的EventHandler函式

List.Changed += new ChangedEventHandler(ListChanged);

自訂事件發生時要作的動作

public void ListChanged(object sender, CustomEventArgs e)
{
// Do something....
}

下面的sample code 為時間變更事件的範例, 出處為 Delegates and Events in C# / .NET

using System;
using System.Threading;

namespace EventSample
{
/* ======== Event Publisher ============ */
// Our subject -- it is this class that other classes
// will observe. This class publishes one event:
// SecondChange. The observers subscribe to that event.
public class Clock
{
// Private Fields holding the hour, minute and second
private int _hour;
private int _minute;
private int _second;

// The delegate named SecondChangeHandler,
// which will encapsulate
// any method that takes a clock object
// and a TimeInfoEventArgs
// object as the parameter and returns no value. It's the
// delegate the subscribers must implement.
public delegate void SecondChangeHandler(
object clock,
TimeInfoEventArgs timeInformation
);

// The event we publish
public event SecondChangeHandler SecondChange;

// The method which fires the Event
protected void OnSecondChange(
object clock,
TimeInfoEventArgs timeInformation
)
{
// Check if there are any Subscribers
if (SecondChange != null)
{
// Call the Event
SecondChange(clock, timeInformation);
}
}

// Set the clock running, it will raise an
// event for each new second
public void Run()
{
for (; ; )
{
// Sleep 1 Second
Thread.Sleep(1000);

// Get the current time
System.DateTime dt = System.DateTime.Now;

// If the second has changed
// notify the subscribers
if (dt.Second != _second)
{
// Create the TimeInfoEventArgs object
// to pass to the subscribers
TimeInfoEventArgs timeInformation =
new TimeInfoEventArgs(
dt.Hour, dt.Minute, dt.Second);

// If anyone has subscribed, notify them
OnSecondChange(this, timeInformation);
}

// update the state
_second = dt.Second;
_minute = dt.Minute;
_hour = dt.Hour;

}
}
}

// The class to hold the information about the event
// in this case it will hold only information
// available in the clock class, but could hold
// additional state information
public class TimeInfoEventArgs : EventArgs
{
public TimeInfoEventArgs(int hour, int minute, int second)
{
this.hour = hour;
this.minute = minute;
this.second = second;
}
public readonly int hour;
public readonly int minute;
public readonly int second;
}

/* ==== Event Subscribers ======= */

// An observer. DisplayClock subscribes to the
// clock's events. The job of DisplayClock is
// to display the current time
public class DisplayClock
{
// Given a clock, subscribe to
// its SecondChangeHandler event
public void Subscribe(Clock theClock)
{
theClock.SecondChange +=
new Clock.SecondChangeHandler(TimeHasChanged);
}

// The method that implements the
// delegated functionality
public void TimeHasChanged(
object theClock, TimeInfoEventArgs ti)
{
Console.WriteLine("Current Time: {0}:{1}:{2}",
ti.hour.ToString(),
ti.minute.ToString(),
ti.second.ToString());
}
}
/* ======= Test Application ========== */

// Test Application which implements the
// Clock Notifier - Subscriber Sample
public class Test
{
public static void Main()
{
// Create a new clock
Clock theClock = new Clock();

// Create the display and tell it to
// subscribe to the clock just created
DisplayClock dc = new DisplayClock();
dc.Subscribe(theClock);

// Get the clock started
theClock.Run();
}
}
}

下面圖是為執行結果:

參考文章:
Delegates and events
MSDN - Events Tutorial

WPF + Windows7 Multi-touch(Part 1)

2009-09-02T02:28:00.000-07:00

在Win32的程式中, 可以利用WndProc來接收WM_TOUCH / WM_GESTURE 訊息, 來得到觸控點和手勢的資訊(可參考這兩篇文章Get Touch Point , Windows 7 Gesture Sample), 可是在WPF中沒有WndProc函式可以呼叫, 因此, 下面的文章將介紹如何在WPF Window上使用Windows 7 Multi-Touch function.

在WPF Window使用Windows Touch SDK的步驟如下:

Step 1: 利用PInvoke的機制呼叫user32.dll中定義Touch / Gesture的資料型態, 結構和方法
此方法可參考這篇文章 : 如何在C#中使用Unmanaged dll

例如;我們要使用Winuser.h的 RegisterTouchWindow函式, 其轉換如下:

C

BOOL WINAPI RegisterTouchWindow(
__in  HWND hWnd,
__in  ULONG ulFlags
);

[Flags, Serializable]
public enum RegisterTouchFlags
{
TWF_NONE = 0x00000000,

TWF_FINETOUCH = 0x00000001
}
[DllImport("user32.dll", SetLastError = true)]
public static extern bool RegisterTouchWindow(IntPtr hwnd,
[MarshalAs(UnmanagedType.U4)] RegisterTouchFlags flags);

Step 2: 在WPF Window中利用HwndSource物件來取得的Windows訊息

由於WPF Window不能像Win32 Window, 可利用WndProc函式處理WM_TOUCH / WM_GESTURE訊息,但WPF Window可以用HwndSource來裝載最上層HWND的所有內容.

其方法如下;

(1) 利用 System.Windows.Interop.WindowInteropHelper類別來取得任何WPF Window的HWND

example:
using System.Windows.Interop;
IntPtr _hwnd = new WindowInteropHelper(this).Handle;

(2) 利用HWND取得相關的HwndSource物件(用HwndSource.FromHwnd)

example:
HwndSource src = HwndSource.FromHwnd(_hwnd);

(3) 利用HwndSource的AddHook方法, 即可攔截視窗訊息

example:

src.AddHook(WndProc);
private IntPtr WndProc( IntPtr hwnd,
int msg,
IntPtr wParam,
IntPtr lParam,
ref bool handled)
{
switch (msg)
{
case TouchMessage.WM_GESTURE:
OnGesture(lParam);
// 記得將handle設為true,告訴系統你已經處理該訊息
handled = true;
break;

default:
break;
}
return IntPtr.Zero;
}

看完上面的介紹, 我們就來寫一個 WPF + Win7 Gesture 的應用程式, 我們會在WPF Window上繪製一個rectangle, 並透過一些手勢操作來對此rectangle作放大,縮小,平移,旋轉和改變顏色(twp finger tap)

其步驟如下:

首先,我們會寫一個Win7TouchInterop.cs檔, 目的要將Winuser.h中的 touch和gesture資料作包裝
在WPF的程式碼中, 使用Win7TouchInterop的命名空間 using Win7TouchInterop;
利用HwndSource物件來取得的Windows訊息
處理手勢訊息

程式碼如下所示;

XAML檔 :

<Window x:Class="WPFGestureMessage.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Touch SDK+WPF" Height="600" Width="800">
<Grid>

<Grid.Resources>
<Storyboard x:Key="_twoFingerTap">
<ColorAnimation
Storyboard.TargetName="rect"
Storyboard.TargetProperty=
"(Rectangle.Fill).(SolidColorBrush.Color)"
From="SkyBlue"
To="YellowGreen"
Duration="00:00:00.5"
AutoReverse="true"
FillBehavior="HoldEnd" />
</Storyboard>
</Grid.Resources>

<Rectangle  x:Name="rect"
RadiusX="5"
RadiusY="5"
Width="300"
Height="200"
Stroke="DarkBlue"
StrokeThickness="5"
Fill="YellowGreen"
RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform
x:Name="_scaleTransform"
ScaleX="1"
ScaleY="1" />
<RotateTransform
x:Name="_rotateTransform"
Angle="0" />
<TranslateTransform
x:Name="_translateTransform"
X="0"
Y="0" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>

</Grid>
</Window>

C#檔 :

using System;
using System.Windows;

using Win7TouchInterop;
using System.Windows.Interop;
using System.Runtime.InteropServices;
using System.Windows.Media.Animation;

namespace WPFGestureMessage
{
/// 
/// Interaction logic for Window1.xaml
/// 
public partial class Window1 : Window
{
private IntPtr _hwnd;
const double scaleSensitivityMagicFactor = 200.0;
const double rotateSensitivityMagicFactor = 25.0;

private long _beginScale;

private bool captureAngle;
private double _beginAngle;

private Point firstPoint;

Storyboard _twoFingerTap;

public Window1()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Window1_Loaded);
_twoFingerTap = rect.FindResource("_twoFingerTap") as Storyboard;

}

void Window1_Loaded(object sender, RoutedEventArgs e)
{
_hwnd = new WindowInteropHelper(this).Handle;
HwndSource src = HwndSource.FromHwnd(_hwnd);
if (src != null)
src.AddHook(WndProc);

// Setup the gestures
var gConfig = new[]
{
new GESTURECONFIG
{
dwID = GestureID.GID_ALL,

dwWant = WantGestures.GC_ANY
}   
};

Win7TouchMethod.SetGestureConfig(_hwnd,
0,
gConfig.Length,
gConfig,
Marshal.SizeOf(gConfig[0]));
}


private Point ConvertPoint(POINTS pts)
{
var pt = new POINT { X = pts.X, Y = pts.Y };
Win7TouchMethod.ScreenToClient(_hwnd, ref pt);
return new Point(pt.X, pt.Y);
}


private IntPtr WndProc(IntPtr hwnd,
int msg,
IntPtr wParam,
IntPtr lParam,
ref bool handled)
{

switch (msg)
{
case Win7TouchMessages.WM_GESTURE:
OnGesture(lParam);
handled = true;
break;
default:
break;
}


return IntPtr.Zero;
}

private void OnGesture(IntPtr gestureMsg)
{
GESTUREINFO gesture = new GESTUREINFO();
gesture.cbSize = Marshal.SizeOf(gesture);
if (Win7TouchMethod.GetGestureInfo(gestureMsg, out gesture))
{
switch (gesture.dwID)
{
case GestureID.GID_PAN:
OnPan(gesture.dwInstanceID,
ConvertPoint(gesture.ptsLocation),
gesture.dwFlags);
break;
case GestureID.GID_ROTATE:
OnRotate(gesture.ullArguments,
gesture.dwFlags);
break;
case GestureID.GID_TWOFINGERTAP:
_twoFingerTap.Stop();
_twoFingerTap.Begin();
break;
case GestureID.GID_ZOOM:
OnZoom(ConvertPoint(gesture.ptsLocation),
gesture.ullArguments,
gesture.dwFlags);
break;
default:
break;
}
}
Win7TouchMethod.CloseGestureInfoHandle(gestureMsg);
}



private void OnZoom(Point ptCenter,
long scale,
GestureFlags gestureFlags)
{

if ((gestureFlags & GestureFlags.GF_BEGIN) > 0)
{
_beginScale = scale;
}
else
{
double delta = scale - _beginScale;
_beginScale = scale;

double scaleX = (delta / scaleSensitivityMagicFactor);
double scaleY = (delta / scaleSensitivityMagicFactor);

_scaleTransform.ScaleX += scaleX;
_scaleTransform.ScaleY += scaleY;

}
}


private void OnPan(uint id,
Point point,
GestureFlags gestureFlags)
{

if ((gestureFlags & GestureFlags.GF_BEGIN) > 0)
{
firstPoint = point;
}
else
{
Point curPoint = point;
double xDelta = curPoint.X - firstPoint.X;
double yDelta = curPoint.Y - firstPoint.Y;

_translateTransform.X += xDelta;
_translateTransform.Y += yDelta;

firstPoint = curPoint;
}
}

private void OnRotate(double radians,
GestureFlags gestureFlags)
{

double angle = Win7TouchMethod.ROTATE_ANGLE_FROM_ARGUMENT(radians) * (180.0 / Math.PI);
if ((gestureFlags & GestureFlags.GF_BEGIN) > 0)
{
captureAngle = true;
}
else
{
if (captureAngle)
{
_beginAngle = angle;
captureAngle = false;
}
else
{
double delta = angle - _beginAngle;

_rotateTransform.Angle += 0 - (delta / rotateSensitivityMagicFactor);

if ((gestureFlags & GestureFlags.GF_END) > 0)
{
captureAngle = true;
_beginAngle = 0;
}
}
}//end else
}//end
}
}

成果如下圖所示:

[圖 1] 初始畫面

[圖 2] 縮小

[圖 3] 放大

[圖 3] 平移+inertia (因為有開啟GC_PAN_INERIA)

[圖 5] 旋轉

[圖 6] Two finger tap -->改變顏色

參考文章:
Windows 7 Multi-touch Using WPF
Windows 7: Experimenting with Multi-Touch on Windows 7
MSDN -WindowInteropHelper 類別

如何在C#中使用Unmanaged dll

2009-08-27T01:42:00.000-07:00

在C#中可以透過PInvoke(Platform Invocation Services), 呼叫 DLL 內實作的Unmanaged函式,

其流程可以參考 MSDN - PInvok的流程圖

在Managed的程式中使用Unmanaged dll的方法有兩種:

呼叫DLL匯出(dllexport)的函式
呼叫COM元件上的介面

因為, 使用COM Interop的方式有點複雜, 所以本文章只介紹第一種方法, 若要使用匯出的 DLL 函式(C-Style function), 可分成下面幾個步驟:

引用DllImport所在的名子空間: using System.Runtime.InteropServices;
定義類別(例如class PlatformInvoke)包裝要被呼叫的DLL介面(也就是C/C++中的header檔)

使用 DllImport來引用DLL的函式, 並用 static 和 extern 來標記函式. 此目的在告訴編譯器該方法與實體物件無關.

DllImport的格式語法如下:

//將user32.dll換成要使用的DLL檔

[DllImport("user32.dll"), SetLastError = true]

//換成所需的方法及參數(需要將Unmanaged類型轉成Managed)

public static extern ReturnType FunctionName(type arg);

如下面範例所示:

using System;
using System.Runtime.InteropServices;

class WrapperTest
{
    [DllImport("msvcrt.dll")]
    public static extern int puts(string c);

    [DllImport("msvcrt.dll")] 
    publlic static extern int _flushall();

    public static void Main() 
    {
        puts("Test");
        _flushall();
    }
}

下面表格列出DllImport的屬性欄位

名稱	說明
BestFitMapping	將 Unicode 字元轉換成 ANSI 字元時, 設定true/false可啟用或停用自動對應行為
CallingConvention	CallingConvention 列舉成員, 此欄位的預設值為 WinAPI
CharSet	指示用在入口處中的字串參數, 如果未指定 CharSet, 則預設為 CharSet.Auto
EntryPoint	指示要呼叫的 DLL 進入點(Entry Point) 的名稱或序數
ExactSpelling	控制 DllImportAttribute CharSet 欄位是否會導致 Common Language Runtime 搜尋 Unmanaged DLL 以取得不是指定名稱的進入點名稱.
PreserveSig	指定簽章是否為 Unmanaged 程式碼進入點的直接轉譯, 預設此欄位為 true
SetLasrError	指示自屬性方法傳回之前, 被呼叫端是否呼叫 SetLastError Win32 API 函式。
ThrowOnUnmappableChar	在無法對應的 Unicode 字元轉換為 ANSI "?" 字元時, 啟用或停用例外狀況的擲回

以 Managed 資料型別代替 Unmanaged 資料型別

Managed需要封裝Unmanaged的資料, 下面表格列出Unmanaged和Managed的資料型態轉換:

Wtypes.h 中的 Unmanaged 型別	Unmanaged C 語言型別	Managed 類別名稱
HANALE	void*	System.IntPtr
BYTE	unsigned char	System.Byte
SHORT	short	System.Int16
WORD	unsigned short	System.UInt16
INT	int	System.Int32
UINT	unsigned int	System.UInt32
LONG	long	System.Int32
BOOL	long	System.Int32
DWORD	unsigned long	System.UInt32
ULONG	unsigned long	System.UInt32
CHAR	char	System.Char
LPSTR	char*	System.String 或 System.Text.StringBuilder
LPCSTR	Const char*	System.String 或 System.Text.StringBuilder
LPWSTR	wchar_t*	System.String 或 System.Text.StringBuilder
LPCWSTR	Const wchar_t*	System.String 或 System.Text.StringBuilder
FLOAT	Float	System.Single
DOUBLE	Double	System.Double

如果要包裝一個資料結構, 在 C# 中可以使用 StructLayout屬性來表示的結構, 如下面範例說明:

C	C#
struct tOTM_Point { int X; int Y; int R; };	[Serializable, StructLayout(LayoutKind.Sequential)] public struct tOTM_Point { public int X; public int Y; public int R; }

如果在Struct中有Array的型態, 可以利用MarshalAs 屬性來表示, 如下所示

C	C#
struct tOTM_Touch { int TouchType; int TouchState; tOTM_Point PointArray[2]; };	[Serializable, StructLayout(LayoutKind.Sequential)] public struct tOTM_Touch { public tOTM_TouchType TouchType; public tOTM_TouchState TouchState; [MarshalAs(UnmanagedType.ByValArray, SizeConst = 2)] public tOTM_Point[] PointArray; };

struct tOTM_Touch
{
int TouchType;

int TouchState;

tOTM_Point PointArray[2];

};

[Serializable, StructLayout(LayoutKind.Sequential)]
public struct tOTM_Touch
{

public tOTM_TouchType TouchType;

public tOTM_TouchState TouchState;


[MarshalAs(UnmanagedType.ByValArray, SizeConst = 2)]
public tOTM_Point[] PointArray;

};

下面我以一個用C寫的OTMUT.dll為例子, 說明如何將Unmanaged dll轉成Managed程式碼:

C

#ifdef  OTMUT_EXPORTS
#define OTMUT_API __declspec(dllexport)
#else
#define OTMUT_API __declspec(dllimport)
#endif


struct tOTM_Point
{
int X;

int Y;

int R;
};

struct tOTM_Touch
{
int TouchType;

int TouchState;

tOTM_Point PointArray[2];
};

typedef void (_stdcall* TouchFunc) (tOTM_Touch Touch);

OTMUT_API void RegisterTouchFunc(TouchFunc Func);

using System;
using System.Runtime.InteropServices;


namespace OTMUTInterop
{
[Serializable,
StructLayout(LayoutKind.Sequential)]
public struct tOTM_Point
{   
public int X;

public int Y;

public int R;

};

[Serializable,
StructLayout(LayoutKind.Sequential)]
public struct tOTM_Touch
{    
public tOTM_TouchType TouchType;

public tOTM_TouchState TouchState;

[MarshalAs(UnmanagedType.ByValArray,
SizeConst = 2)]
public tOTM_Point[] PointArray;

};

delegate void
TouchFunc(tOTM_Touch touch);

class OTMUT
{       
[DllImport("OTMUT.dll",
CallingConvention =
CallingConvention.StdCall)]
public static extern void
RegisterTouchFunc(TouchFunc func);

}
}

參考文章 :
MSDN - 使用 Unmanaged DLL 函式
MSDN - 使用平台叫用封送處理資料

C#型別轉換(Casting) - as運算子

2009-08-23T20:08:00.000-07:00

當你在C#中作型別轉換時, 可以利用強制轉換的方法, 例如:

double dx = 7.3;

int i = (int) dx;

下面的範例中, 我們在一個控制項(ListBox)的選擇項目事件變更時, 將object(sender)轉型為 ListView.


void ONListBoxSelectinChange(object sender, SelectionChangedEventArgs args)
{
      // 將object轉型為ListView
     ListView lstView = (ListView)sender;
     int TotalCount = lstView.Items.Count;
}

不過當轉型失敗時, 會造成程式當掉, 因此你必須使用try和catch來處理例外錯誤(系統會丟出InvalidCastException例外狀況)


void ONListBoxSelectinChange(object sender, SelectionChangedEventArgs args)
{
try
{
     ListView lstView = (ListView)sender;
     int TotalCount = lstView.Items.Count;
}
catch (InvalidCastException e)
{
      MessageBox.Show(e.Message);
}
}

[圖 1] 使用try catch丟出的例外錯誤

而在C#中提供一個比較簡單的方法, 就是使用as運算子, 這樣作會更有效率也很安全, 如果轉型失敗的話, 它會返回null, 因此, 你可以很容易的來作一些判斷, 如下面的範例所示:


void ONListBoxSelectinChange(object sender, SelectionChangedEventArgs args)
{
        ListView lstView = sender as ListView;

        if (lstView == null)
        {
            MessageBox.Show("Could not convert object to ListView");
        }
        else
        {
            int TotalCount = lstView.Items.Count;
        }
}

參考資料:
HOW TO：使用 as 和 is 運算子進行安全轉型 (C# 程式設計手冊)
Effective c# Item3：運算子is或as優於强制轉型

WPF ListBox - Beginning

2009-08-19T23:14:00.000-07:00

ListBox可以讓使用者能夠從清單選取某個項目, 它是一個項目的控制項, 可以包含物件(object)的集合.

ListBox繼承自ItemControl, 它可以透過Items(型別為object collection)和 ItemsSource(有實踐IEnumerable的物件)這兩個屬性 , 來將任何物件放入ListBox中, 如果放入的項目不是UIElement(例如:數值或string), 則會呼叫物件的ToString()函式, 然後將資料放入TextBlock中.

將物件放入ListBox有兩種方法:

利用Items屬性加入項目(Add)

下面的程式碼說明利用Items將任一物件放到ListBox中:

XAML檔如下:


<Window
x:Class="ListBoxTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="ListBox" Height="300" Width="300">
<Grid>
<ListBox Margin="10" Name="listBox1">

    <ListBoxItem Foreground="Aqua">Text</ListBoxItem>

    <ListBoxItem>
        <sys:DateTime>8/20/2009</sys:DateTime>
    </ListBoxItem>

    <ListBoxItem>
        <Button Content="Button"
                Background="LavenderBlush"
                Foreground="Green"
                Width="60"
                Height="30"/>
    </ListBoxItem>

    <ListBoxItem>
        <StackPanel>
            <Rectangle Width="50"
                       Height="50"
                       Fill="Chartreuse"
                       Stroke="LightSlateGray"
                       StrokeThickness="3"/>
            <TextBlock Text="Multiple objects in Panel"
                       FontSize="16"
                       Foreground="Red"/>
        </StackPanel>
    </ListBoxItem>
</ListBox>
</Grid>
</Window>

C#檔如下:


Grid grid = new Grid();
ListBox listBox1 = new ListBox();  
listBox1.Margin = new Thickness(10);

grid.Children.Add(listBox1);

// Add a string object to a ListBox.
listBox1.Items.Add("Text");

// Add a DateTime object to a ListBox
DateTime dateTime = new DateTime(2009, 8, 20);
listBox1.Items.Add(dateTime);

// Add a button object to a ListBox
Button button1 = new Button();
button1.Content = "Button";
button1.Background = Brushes.LavenderBlush;
button1.Foreground = Brushes.Green;
button1.Width = 60;
button1.Height = 30;
listBox1.Items.Add(button1);

// Add a stackpanel that contains multpile objects to the ListBox.
StackPanel panel = new StackPanel();

Rectangle rect = new Rectangle();
rect.Width = 50;
rect.Height = 50;
rect.Fill = Brushes.Chartreuse;
rect.Stroke = Brushes.LightSlateGray;
rect.StrokeThickness = 3;

TextBlock txtBlock = new TextBlock();
txtBlock.Text = "Multiple objects in Panel";
txtBlock.FontSize = 16;
txtBlock.Foreground = Brushes.Red;

panel.Children.Add(rect);
panel.Children.Add(txtBlock);
listBox1.Items.Add(panel);

this.AddChild(grid);

[圖 1] 利用Items加物件

將ItemsSource 繫結到一個物件的集合

你可以讓ItemsSource等於一個物件的集合, 或是將ItemsSource繫結(Binding)至集合物件,
注意: 當設定ItemsSource 屬性設定時, 會將 Items 集合設為唯讀和固定大小, 因此不能再對Items作新增或移除. 若將ItemsSource 屬性設為 null, 則會移除集合, 並將用法還原為 Items.

下面的範例說明, 如何利用ItemSource去Binding一個物件:
首先, 我們先建立一個WeekData 的物件,如下:

 public class WeekData : ObservableCollection<string>
{
public WeekData()
{
    Add("Sun");
    Add("Mon");
    Add("Tue");
    Add("Wed");
    Add("Thu");
    Add("Fri");
    Add("Sat");
}
}

將ItemsSource 繫結至 WeekData:


Grid grid = new Grid();
ListBox listBox = new ListBox();
WeekData weekData = new WeekData();
Binding binding = new Binding();

binding.Source = weekData;
listBox.SetBinding(ListBox.ItemsSourceProperty, binding);
grid.Children.Add(listBox);
this.AddChild(grid);

如果您想要從 XAML中繫結的CLR物件, 可以將物件定義為資源, 並指定x:Key,如下所示:


<Window.Resources>
<c:WeekData x:Key="weekData"/>
</Window.Resources>

<ListBox ItemsSource="{Binding Source={StaticResource weekData}}"/>

[圖 2] 利用ItemSource加入物件

參考文件:
MSDN-Controls 內容模型概觀
MSDN- ListBox Class