2010年7月28日 星期三

關於Silverlight的Style機制與ResourceDictionary

前幾天在FaceBook專頁明城提到了關於Silverlight中的Style機制,才恍然想起在先前的Blog和書上幾乎都完全沒有提到ResourceDictionary這個在SL3之後被加進來的物件,因此趁著SL4的書籍在做最後階段的整理,順便在Blog上提一下這個物件。
ResourceDictionary讓我們可以在宣告Resource時,以Dictionary的方式來建置,例如:











這樣有一個好處,ResourceDictionary是繼承自Dictionary類別的物件,當Resource非常多的時候,或是Resource是動態載入的時候,開發人員可能無法記得或熟知每一個Resource的名稱,我們可以透過底下這樣的程式碼在ResourceDictionary中確認某一個資源設定是否存在:

//判斷TextBoxStyle1是否存在
if (this.RD1.Contains("TextBoxStyle1"))
{ … }

因此,當資源被放置在ResourceDictionary中之後,我們也可以透過程式碼來動態的設置樣式,例如:

private void button1_Click(object sender, RoutedEventArgs e)
{
//判斷TextBoxStyle1是否存在
if (this.RD1.Contains("TextBoxStyle1"))
{
//套用Resource
this.TextBox1.Style = RD1["TextBoxStyle1"] as Style;
this.TextBox2.Style = RD1["TextBoxStyle1"] as Style;
this.TextBox3.Style = RD1["TextBoxStyle1"] as Style;
}
else
{
MessageBox.Show("找不到此資源");
}
}
private void button2_Click(object sender, RoutedEventArgs e)
{
//判斷TextBoxStyle2是否存在
if (this.RD1.Contains("TextBoxStyle2"))
{
//套用Resource
this.TextBox1.Style = RD1["TextBoxStyle2"] as Style;
this.TextBox2.Style = RD1["TextBoxStyle2"] as Style;
this.TextBox3.Style = RD1["TextBoxStyle2"] as Style;
}
else
{
MessageBox.Show("找不到此資源");
}
}

如此一來,我們不僅可以利用樣式動態決定控制項的外觀,也可以透過程式碼一次設置多個控制項,讓場景中的控制項可以有一致性的外觀。

當然,還有其他更多的內容,可以參考我們即將出版的SL4書籍。
此範例請參考[CodeStorage]。

有興趣的朋友也可以參考明城寫的這篇文章:
http://kenny.microdream.tw/index.php/archives/836.html

2010年7月24日 星期六

以擴充方法替Canvas, Grid...等容器建立淡入淡出效果

從.NET的語言導入的擴充方法之後,我一直覺得它是一個挺方便的技術。
而開發環境的配合,也讓擴充方法的便利性更加的高。

舉個例子來說,我們寫了一段以程式碼動態為按鈕建立滑鼠移過時的淡入淡出效果,透過擴充方法,我們可以在主程式當中這樣使用:

圖中的ButtonPanel是繼承自Panel的Canvas物件,當然,Canvas物件是沒有registerFadeEffect方法的,但由於我們替Panel建立了擴充方法:

public static class MyEffects //改為靜態類別, 以適用擴充方法
{
//註冊事件處理函式(擴充方法版)
public static void registerFadeEffect(this Panel container)
{
//設定先為0.1
container.Opacity = 0.1;
//如果滑鼠進入
container.MouseEnter += container_MouseEnter;
//如果滑鼠離開
container.MouseLeave += container_MouseLeave;
}

使得VS2010可以直接在ButtonPanel後面帶出該擴充方法,呼叫起來相當便利。

請注意建立擴充方法的關鍵在其所屬的類別為靜態類別,且方法中第一個參數前加上this, 就表示該方法要提供給該參數所屬型別的所有物件使用。

程式碼下載請參考[CodeStorage]。

2010年7月20日 星期二

CodeStorage最新下載排行

CodeStorage最新下載排行(2010/7/1~2010/7/20)


想看看大夥對什麼比較有興趣? 請點選[這裡]。

2010年7月19日 星期一

ASP.NET AJAX中的HTML編輯器

HTML Editor是在最近這幾個版本的ASP.NET AJAX Control tooklit當中被加入的,不管是APS.NET 3.5或4.0都可以使用。實際上使用的時候和坊間一般的ASP.NET HTML編輯器如出一轍,相當簡單:

可以透過content屬性設定或取得HTML值:

protected void Button1_Click(object sender, EventArgs e)
{
//取得HTML碼
this.Literal1.Text= this.Editor1.Content;
}

但請留意,不要將HTML值填入TextBox控制項中,會不work,也有安全性的顧慮。另外使用前請記得先引用AJAX Control Toolkit套件,並從工具箱中將Editor拖曳到頁面中,請務必設定其width與height屬性。

範例下載請至codeStorage:[下載]

2010年7月16日 星期五

透過ASP.NET AJAX 4 Client Libraries實現 Modal Popup Window

現在很多網站都導入了AJAX技術,透過AJAX技術在網頁上實現類似Windows的強制回應視窗(Modal Popup Window)效果,像FaceBook、Google都有廣泛的使用這些功能。

底下連結的這個範例介紹如何透過ASP.NET AJAX Client Libraries,不需要引用特定.dll,只需要參考MS CDN即可輕鬆在網頁上建立這樣的凸顯式強制回應視窗功能。

程式碼約莫如下:

< script type="text/javascript" >
Sys.debug = true;
Sys.require([Sys.components.watermark, Sys.components.modalPopup], function () {
$("#Button1").modalPopup({
PopupControlID: "window", //視窗物件名稱
OkControlID: "buttonOK", //設定OK鈕物件
CancelControlID: "buttonCancel", //設定OK鈕物件
OnOkScript: okayWasClicked, //按下Cancel鈕要做的事情
OnCancelScript: cancelWasClicked, //按下Cancel鈕要做的事情
BackgroundCssClass: "modalBackground" //背景顏色
});
$("#UserName").watermark("<請輸入姓名>", "watermark");
$("#Pwd").watermark("<請輸入密碼>", "watermark");
});
//按下OK鈕要做的事情
function okayWasClicked() {
Sys.get("#Label1").innerText = "返回確定";
}
//按下Cancel鈕要做的事情
function cancelWasClicked() {
Sys.get("#Label1").innerText = "返回取消";
}

完成程式碼請[下載]

2010年7月14日 星期三

ASP.NET的顏色選擇器範例

這個範例是以ASP.NET AJAX 4 Client Libraries中所提供的ColorPicker機制建立的顏色選擇器,開發環境中不需要安裝任何套件,只需要引用微軟CDN當中的Javascript Libraries即可,相當方便好用。[下載]



2010年7月13日 星期二

三個ASP.NET小範例

我在Code Storage上放了幾個ASP.NET的範例,分別是:
●以Cookies記憶登入帳號:[下載]
這個範例展示如何類似Google或是一般入口網站以Cookies紀錄登入者帳號,在一定時間內不需要重登入的機制,以仿Forms驗證的方式來進行。

●AJAX Client Templates與遠端資料存取:[下載]
這個範例透過了AJAX Client Templates和Web Services遠端資料存取的技術,讓頁面上的UI可以經由Services直接Bind(繫結)到遠端的資料。其中也使用到了ADO.NET Entity Framework與LINQ等技術。這個機制讓ASP.NET的Data Binding有機會在前端完成,不經過後端的C#/VB指令碼也可進行。

●浮水印文字方塊(Waterwark textBox):[下載]
這個範例使用了ASP.NET AJAX 4的Client Libraries,以pure JavaScript方式(不需要引用ASP.NET AJAX Controls Toolkit的.dll)在頁面上建立出具有浮水印的文字方塊(Waterwark textBox),並且利用了微軟CDN(Content delivery network)讓網站的效能更好,管理上也更加簡潔。如果只想要在網站尚設計出簡單的AJAX效果,但不希望引用一整個ASP.NET AJAX程式庫時相當好用。

2010年7月6日 星期二

Noticeboard - Silverlight訊息看板套件

在撰寫Silverlight應用程式的時候,有幾種訊息顯示方式,典型的方式是透過ChildWindow或是MessageBox,但各有一些特點或缺點(例如ChildWindow要自己設計樣版,且兩者在顯示時主場景均無法操作),有鑑於這個問題,Silverlight在OOB Mode當中,加上了Notification功能,但在非OOB Mode中卻缺少了有類似效果的機制。

因此我們設計了一個類似的功能,使用的方式相當簡單:

StudyHost.Silverlight.Noticeboard _Noticeboard;
_Noticeboard = new StudyHost.Silverlight.Noticeboard(this.LayoutRoot);
_Noticeboard.show("這是測試按鈕顯示的文字...",3000);


即可輕鬆的達成底下這樣的效果:


如需下載此套件,可參考:[Noticeboard套件]