WPF開發(fā)入門嘗試
01. 創(chuàng)建軟件雛形
這個(gè)雛形包括4個(gè)項(xiàng)目(Project):
一個(gè)主程序(WPF Application)項(xiàng)目,命名為:DataTracer
一個(gè)組件庫(WPF User Control Library)項(xiàng)目,命名為:K3UcLib
一個(gè)控件庫(WPF Custom Control Library)項(xiàng)目,命名為:K3CcLib
一個(gè)算法庫(Class Library)項(xiàng)目,命名為:K3Helper
作為入門,這看起來有點(diǎn)復(fù)雜,不過實(shí)現(xiàn)起來還算簡單。
菜單:File >New >Project…
菜單:File >Add >New Project…
THINKING:
通常,復(fù)雜是由簡單構(gòu)成的,只要我們合理的分解它;
復(fù)雜的設(shè)計(jì),并不意味著復(fù)雜的實(shí)現(xiàn);同樣,簡單的設(shè)計(jì),也不意味著簡單的實(shí)現(xiàn);
不過,沒有準(zhǔn)備迎接復(fù)雜挑戰(zhàn)的簡單設(shè)計(jì),卻通常是小小噩夢的開始。
F5 運(yùn)行,看看結(jié)果!
02. 制作一個(gè)組件
我習(xí)慣將User Control稱為組件,將Custom Control稱為控件。
他們的區(qū)分,簡單說:User Control通常通過組合多個(gè)控件產(chǎn)生,Custom Control通常通過擴(kuò)展單個(gè)控件產(chǎn)生。
現(xiàn)在,我們先制作一個(gè)準(zhǔn)備用來替換現(xiàn)有窗口標(biāo)題的組件,命名為:K3WindowHeader。
Project Add User Control,然后修改XAML,并編譯(Shift F6)
- <Border CornerRadius="0, 0, 10, 10" Background="DarkBlue">
- <DockPanel LastChildFill="True">
- <Button Content="關(guān)閉" Width="75" Height="23" DockPanel.Dock="Right" />
- <TextBlock Text="Window Header" DockPanel.Dock="Left" Foreground="White"/>
- </DockPanel>
- </Border>
這個(gè)組件包括兩個(gè)控件Button,TextBlock。
CornerRadius用于設(shè)定Border四個(gè)角的弧度
= ”LeftTop, RightTop, RightBottom, LeftBottom”
DockPanel.LastChildFill,很有用的屬性。
注意DockPanel所包含組件的順序,并在組件中正確的使用DockPanel.Dock屬性。
在DataTracer中使用這個(gè)組件。
Project Add References,添加K3UcLib,然后修改MainWindow.XAML:
- <Window …
- xmlns:K3UcLib="clr-namespace:K3UcLib;assembly=K3UcLib"
- WindowStyle="None"
- > xmlns:K3UcLib="clr-namespace:K3UcLib;assembly=K3UcLib"
- WindowStyle="None"
- > xmlns:K3UcLib="clr-namespace:K3UcLib;assembly=K3UcLib"
- WindowStyle="None"
- >
- <Grid>
- <Grid.RowDefinitions>
- <RowDefinition Height="Auto"/>
- <RowDefinition Height="*"/>
- <RowDefinition Height="Auto"/>
- </Grid.RowDefinitions>
- <K3UcLib:K3WindowHeader Height="25" />
- </Grid>
將WindowStyle設(shè)為None,將窗口標(biāo)題隱掉,從而為DIY新的窗口標(biāo)題做好準(zhǔn)備。
Height, Width可取值包括:
Auto(自適應(yīng)),*(全部剩余),NaN(相當(dāng)于Auto),數(shù)值
F5 運(yùn)行,看看結(jié)果!
這個(gè)窗口怎么關(guān)掉?Alt + F4!
這個(gè)窗口好丑!別著急,如果你真的很急,可以先試著使用 Margin屬性及xxxAlignment屬性,調(diào)整一下位置(試一試我的調(diào)整,如下)。
- <Border CornerRadius="0, 0, 10, 10" Background="DarkBlue" Margin="3,0,3,0">
- <DockPanel LastChildFill="True">
- <Button Content="關(guān)閉" Width="75" Height="23" DockPanel.Dock="Right" Margin="0, 0, 10, 0" HorizontalAlignment="Center" VerticalAlignment="Center" />
- <TextBlock Text="Window Header" DockPanel.Dock="Left" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
- </DockPanel>
- </Border>
F5 運(yùn)行,看看結(jié)果!
03. 添加事件,關(guān)閉窗口
需求:當(dāng)用戶點(diǎn)擊“關(guān)閉”按鈕時(shí),關(guān)閉主窗口。
實(shí)現(xiàn):為“關(guān)閉”按鈕添加Click事件處理。有兩種實(shí)現(xiàn)方式:
?。?) 通過XAML文件中實(shí)現(xiàn):<Button Name=”buttonClose” Content=”” ……Click=”buttonClose_Click” ……/>
(2) 通過后臺代碼實(shí)現(xiàn):this.buttonClose.Click += new new RoutedEventHandler(buttonClose_Click);
這里,我們采用后者,即后臺代碼方式,完整代碼如下:
- public K3WindowHeader() {
- InitializeComponent();
- this.Init();
- }
- void Init() {
- this.buttonClose.Click += new RoutedEventHandler(Button_Click);
- }
- void Button_Click(object sender, RoutedEventArgs e) {
- throw new NotImplementedException();
- }
注:
使用Init()方法,是為了使代碼整潔。
在你鍵入“+=”時(shí),系統(tǒng)將為你自動生成事件代碼。你可以先修改所生成的事件處理方法的名字,然后再按“TAB”鍵,這樣就可以生成你想要的名字的方法。在這里,我將默認(rèn)的buttonClose_click改為Button_Click。
接下來,我們添加事件處理的內(nèi)容,以實(shí)現(xiàn)關(guān)閉主窗體。
注意,因?yàn)槲覀兪褂玫氖橇硪粋€(gè)組件項(xiàng)目中的組件,而非主程序自身項(xiàng)目中的組件,所以實(shí)現(xiàn)起來稍微有點(diǎn)麻煩,不是簡單的一個(gè)Close()就可以完成。
在這種情況下,有多重實(shí)現(xiàn)方式:
?。?) 假定組件自身知道自己是如何被使用的,如本案例中,它被放在主窗體的Grid中,那么可以這樣實(shí)現(xiàn):
((this.Parent as Grid).Parent as Window).Close(); 這種實(shí)現(xiàn)方式,屬于hard code,使組件失去了靈活性,不是一個(gè)好方法,但它是一個(gè)思路,即:只要你能找到你想要的,你就可以做你想做的。
(2) 將點(diǎn)擊“關(guān)閉”按鈕事件,轉(zhuǎn)化成一個(gè)新的事件,告訴引用這個(gè)組件的窗體:有人請求關(guān)掉你!這個(gè)設(shè)計(jì)有點(diǎn)麻煩,但使組件具有了組件該有的特性:靈活性,或稱為適應(yīng)性,以保證你可以相對隨意的使用它。
#region >>>>> 自定義事件 ... public static readonly RoutedEvent PreviewWindowHeaderEvent; public event RoutedEventHandler PreviewWindowHeaderEventHandler { add { this.AddHandler(PreviewWindowHeaderEvent, value); } remove { this.RemoveHandler(PreviewWindowHeaderEvent, value); } } static K3WindowHeader() { PreviewWindowHeaderEvent = EventManager.RegisterRoutedEvent( "PreviewWindowHeaderEventHandler", RoutingStrategy.Tunnel, typeof(RoutedEventHandler), typeof(K3WindowHeader)); } #endregion …… void Button_Click(object sender, RoutedEventArgs e) { RoutedEventArgs eventArgs = new RoutedEventArgs(); eventArgs.RoutedEvent = PreviewWindowHeaderEvent; RaiseEvent(eventArgs); } |
這段代碼,加在K3WindowHeader中。 #region #endregion的合理使用,有利于提升代碼的可讀性。你可以加上注釋。BTW,我添加>>>>> … 是為了美觀,讀者可以試試去掉它,或改變它,看看你自己更喜歡哪一個(gè)。 注意,我添加了static 類型的構(gòu)造函數(shù),以便注冊自定義事件。 Event有兩種類型,其關(guān)鍵參數(shù)是:RoutingStrategy,其取值的不同,將生成兩種傳遞方向不同事件。詳述如下: |
|
public static readonly RoutedEvent PreviewWindowHeaderEvent; public event RoutedEventHandler PreviewWindowHeaderEventHandler { add { this.AddHandler(PreviewWindowHeaderEvent, value); } remove { this.RemoveHandler(PreviewWindowHeaderEvent, value); } } static MainWindow() { PreviewWindowHeaderEvent = K3WindowHeader.PreviewWindowHeaderEvent.AddOwner(typeof(MainWindow)); } void Init() { this.PreviewWindowHeaderEventHandler += new RoutedEventHandler(CustomEventHandler); } void CustomEventHandler(object sender, RoutedEventArgs e) { this.Close(); } |
這段代碼,加在DataTracer中。 注意這段代碼與上段代碼的不同,在于靜態(tài)構(gòu)造中,我們通過事件的AddOwner方法,將這兩個(gè)自定義事件關(guān)聯(lián)起來,從而保證了可以捕獲到該事件。 同樣,我使用了Init來使代碼整潔,并在其中添加了對該特定事件的處理程序。別忘了將Init()放入構(gòu)造函數(shù)中。 |
F5 運(yùn)行,看看結(jié)果!
原文鏈接:http://www.cnblogs.com/technology/archive/2011/04/19/2020910.html
【編輯推薦】