WPF自定義控制項快速構成窗體布局

2021-06-09 17:51:52 字數 2393 閱讀 8025

之前做了乙個類似於360介面的wpf程式,主要是通過對基本控制項的模版來修改實現的,在其中定義了很多模版,後來由於原始碼丟失,導致在製作相同風格的程式時又得重頭開始,所以嘗試了下自定義控制項的製作,製作一套構成介面的基本控制項,方便以後呼叫。

介面樣式:

首先分析下介面構成:主要是由乙個無邊框窗體+tab控制項+若干個系統按鈕構成,在wpf中,窗體控制項的繼承比較麻煩,加上無邊框窗體樣式設定比較簡單,所以只需要製作乙個tab控制項和系統按鈕控制項就可以了。按鈕也只需乙個就夠了,樣式都是一樣的,只要更改下就行了。

好了,開始動手吧,首先是tab控制項

1.啟動vs,建立名為「wmtabcontrol」的wpf自定義控制項專案,並繼承tabcontrol,vs為我們生成了2個檔案:generic.xaml,wmtabcontrol.cs其中generic.xaml是用來定義控制項樣式模版的,wmtabcontrol.cs可以用來實現各種功能,比如新新增的屬性之類的。

由於我們的wmtabcontrol不需要新增額外屬性及功能,只是外觀的改變,所以wmtabcontrol.cs就不用管他了,預設就行。

接著在generic.xaml裡面定義控制項樣式模版

然後繼續新建專案wmtabitem

新增模版

好了,乙個控制項搞定了,下面開始製作按鈕控制項,老樣子,新增新專案wmbutton。

按鈕有三個狀態,預設,按下,滑鼠劃過,在這裡主要是通過觸發器改變背景色實現。

另外還要新新增兩個屬性,分別用來存放 滑鼠按下,滑鼠劃過的。

public imagesource moverbrush

set

}public static readonly dependencyproperty moverbrushproperty = dependencyproperty.register("moverbrush", typeof(imagesource), typeof(wmbutton));

public imagesource enterbrush

set

}public static readonly dependencyproperty enterbrushproperty = dependencyproperty.register("enterbrush", typeof(imagesource), typeof(wmbutton));

接著在模版裡面定義兩個筆刷,並繫結到上面兩個屬性

然後在按鈕狀態觸發器裡面分別使用上面兩個筆刷就可以了

到此為止,兩個控制項就搞定了。下面開始試試看,

1.重新建立wpf專案,並製作乙個無邊框窗體

2.引用剛才製作的控制項,把tab控制項放在窗體上,並刪除自帶的tabitem(因為我們有自定義的tabitem,不用他的),在tab控制項根目錄下新增剛才製作的wmtabitem。

好難看。。。。。不過不要著急,給他換個先

額,效果還不錯,好了,多複製幾個,再把剛才製作的按鈕也放上,再新增三張,預設狀態的就直接改變背景筆刷就行了,另外兩個狀態就要用到剛才新增的兩個新屬性了,在屬性面板找到剛才新增的新屬性,分別新增兩張。

還行,繼續拖控制項,關閉,最大化,最小化,自己找就行了

好了,乙個基本的介面就搭建好了,可以加上標題之類的,位置也可以根據需要調整下。很方便,只需要將剛才製作的兩個控制項拖進來,改變下,乙個簡單的介面布局就完成了。

新增換膚功能:

主要是繫結窗體背景,具體就不多說了,看**

WPF設計 自定義窗體

原文 wpf設計 自定義窗體 效果圖如下 實現思路 1.繼承window類 2.為自定義的customwindow類設計窗體樣式 使用blend很方便!3.為窗體增加最大最小化和關閉按鈕,並實現滑鼠拖拽改變窗體大小 使用derek bartram的windowresizer.dll庫 說明 1.繼承...

WPF設計 自定義窗體

原文 wpf設計 自定義窗體 效果圖如下 實現思路 1.繼承window類 2.為自定義的customwindow類設計窗體樣式 使用blend很方便!3.為窗體增加最大最小化和關閉按鈕,並實現滑鼠拖拽改變窗體大小 使用derek bartram的windowresizer.dll庫 說明 1.繼承...

WPF 建立自定義窗體

原文 wpf 建立自定義窗體 在前面的一篇部落格 wpf 自定義metro style窗體 展示了如何建立乙個類似於metro style的window,並在程式中使用。但是這個窗體不能夠自由的改變大小。今天的部落格中將展示如何建立乙個可以通過拖拽來改變大小的metro style窗體。實現思路,在...