分享一個自己寫的WPF換膚窗體WPF.DazzleUI

本文轉載自查看原文 2013-05-11 11:08 6199 [技術]C#.NET/ [技術]WPF/ [技術]C#

最近自己在自學WPF，看了網上很多前輩的WPF例子，覺得很炫，自己也有點沖動，就嘗試着寫了一下。

桌面程序嘛，要炫起來，當然首先得窗體先炫起來，所以就自己寫了一個可以換膚的WPF窗體基類。

不多說，先上圖：

怎么樣，看起來效果還是不錯吧。

先發個demo的下載地址：例子下載 http://pan.baidu.com/share/link?shareid=565013&uk=1108265080

其實，已開始看別人的東西，覺得很神奇，不過自己寫下來，覺得也沒那么復雜。只不過由於，WPF引入了XAML，跟以前winform時代有很大差別，需要一個轉換過程。多寫寫代碼就好了。

View Code

< ResourceDictionary xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:DazzleWPF ="clr-namespace:WPF.DazzleUI.Controls"
                    xmlns:shell ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
                    xmlns:converters ="clr-namespace:WPF.DazzleUI.Converters" >

     < ResourceDictionary.MergedDictionaries >
         < ResourceDictionary Source ="/WPF.DazzleUI;component/Assets/ImageButton.xaml" />
     </ ResourceDictionary.MergedDictionaries >

     < converters:BooleanToVisibilityConverter x:Key ="BooleanToVisibilityConverter" />
     < converters:ResizeModeToVisibilityConverter x:Key ="ResizeModeToVisibilityConverter" />

     < Style TargetType ="DazzleWPF:DazzleWindow" >

         < Setter Property ="Width" Value ="800" />
         < Setter Property ="Height" Value ="640" />
         < Setter Property ="MinWidth" Value ="50" />
         < Setter Property ="MinHeight" Value ="50" />
         < Setter Property ="ResizeMode" Value ="CanResizeWithGrip" />
         < Setter Property ="UseLayoutRounding" Value ="True" />
         < Setter Property ="TextOptions.TextFormattingMode" Value ="Display" />

         < Setter Property ="Template" >
             < Setter.Value >
                 < ControlTemplate TargetType ="DazzleWPF:DazzleWindow" >

                     < Grid Background ="#ffffff" >

                         < Border BorderBrush ="#3399ff" BorderThickness ="0" >

                             < AdornerDecorator >
                                 < Grid x:Name ="LayoutRoot" >
                                     < Grid.RowDefinitions >
                                         < RowDefinition Height ="36" />
                                         < RowDefinition Height ="*" />
                                         < RowDefinition Height ="15" />
                                     </ Grid.RowDefinitions >

                                     
                                     < Rectangle x:Name ="HeaderBackground" Grid.RowSpan ="5" Height ="196"
                                               VerticalAlignment ="Top"
                                               Visibility =" {DynamicResource Color_ImageOrColor} " >
                                         < Rectangle.Fill >
                                             < LinearGradientBrush StartPoint ="0, 0" EndPoint ="0, 1" Opacity =".1" >
                                                 < GradientStop Offset ="0" Color =" {DynamicResource DazzleUI_BackGroudColor} " />
                                                 < GradientStop Offset =".3" Color =" {DynamicResource DazzleUI_BackGroudColor} " />
                                                 < GradientStop Offset ="1" Color ="Transparent" />
                                             </ LinearGradientBrush >
                                         </ Rectangle.Fill >
                                     </ Rectangle >
                                     < Image Source =" {DynamicResource DazzleUI_BackGroudImage} " Grid.RowSpan ="5"   Stretch ="UniformToFill" VerticalAlignment ="Top"
                                           Visibility =" {DynamicResource Image_ImageOrColor} " >
                                         < Image.OpacityMask >
                                             < LinearGradientBrush StartPoint ="0.5, 0" EndPoint ="0.5, 1" >
                                                 < GradientStop Color ="#FF000000" Offset ="0" ></ GradientStop >
                                                 < GradientStop Color ="#33000000" Offset ="0.5" ></ GradientStop >
                                                 < GradientStop Color ="#00000000" Offset ="1" ></ GradientStop >
                                             </ LinearGradientBrush >
                                         </ Image.OpacityMask >
                                     </ Image >
                                     < ContentPresenter Grid.Row ="1" Grid.RowSpan ="2" ></ ContentPresenter >

                                     
                                     < StackPanel Orientation ="Horizontal" HorizontalAlignment ="Right" VerticalAlignment ="Top"
                                                    Margin ="0" shell:WindowChrome.IsHitTestVisibleInChrome ="True" Height ="20" >

                                         < DazzleWPF:ImageButton Width ="28" Height ="20"
                                                               Visibility =" {Binding ResizeMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource ResizeModeToVisibilityConverter}, ConverterParameter=MinButton} "
                                                   Command =" {Binding Source={x:Static shell:SystemCommands.MinimizeWindowCommand}} "
                                                   NormalImage ="/WPF.DazzleUI;component/Resources/btn_mini_normal.png"
                                                   HoverImage ="/WPF.DazzleUI;component/Resources/btn_mini_highlight.png"
                                                   PressedImage ="/WPF.DazzleUI;component/Resources/btn_mini_down.png"
                                                   DisabledImage ="/WPF.DazzleUI;component/Resources/btn_mini_normal.png" ></ DazzleWPF:ImageButton >
                                         < DazzleWPF:ImageButton x:Name ="MaxButton" Width ="28" Height ="20"
                                                               Visibility =" {Binding ResizeMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource ResizeModeToVisibilityConverter}, ConverterParameter=MaxButton} "
                                                   Command =" {Binding Source={x:Static shell:SystemCommands.MaximizeWindowCommand}} "
                                                   NormalImage ="/WPF.DazzleUI;component/Resources/btn_max_normal.png"
                                                   HoverImage ="/WPF.DazzleUI;component/Resources/btn_max_highlight.png"
                                                   PressedImage ="/WPF.DazzleUI;component/Resources/btn_max_down.png"
                                                   DisabledImage ="/WPF.DazzleUI;component/Resources/btn_max_normal.png" ></ DazzleWPF:ImageButton >
                                         < DazzleWPF:ImageButton x:Name ="RestoreButton" Width ="28" Height ="20"   Visibility ="Collapsed"
                                                   Command =" {Binding Source={x:Static shell:SystemCommands.RestoreWindowCommand}} "
                                                   NormalImage ="/WPF.DazzleUI;component/Resources/btn_restore_normal.png"
                                                   HoverImage ="/WPF.DazzleUI;component/Resources/btn_restore_highlight.png"
                                                   PressedImage ="/WPF.DazzleUI;component/Resources/btn_restore_down.png"
                                                   DisabledImage ="/WPF.DazzleUI;component/Resources/btn_restore_normal.png" ></ DazzleWPF:ImageButton >
                                         < DazzleWPF:ImageButton Width ="39" Height ="20"   ImageSize ="39"
                                                   Command =" {Binding Source={x:Static shell:SystemCommands.CloseWindowCommand}} "
                                                   NormalImage ="/WPF.DazzleUI;component/Resources/btn_close_normal.png"
                                                   HoverImage ="/WPF.DazzleUI;component/Resources/btn_close_highlight.png"
                                                   PressedImage ="/WPF.DazzleUI;component/Resources/btn_close_down.png"
                                                   DisabledImage ="/WPF.DazzleUI;component/Resources/btn_close_normal.png" ></ DazzleWPF:ImageButton >
                                     </ StackPanel >

                                     
                                     < Grid Grid.Row ="2" >
                                         < Path x:Name ="ResizeGrip" Visibility ="Collapsed" Width ="12" Height ="12" Margin ="1" HorizontalAlignment ="Right"
                                                  Stroke ="#333333"
                                                  StrokeThickness ="1"
                                                  Stretch ="None"
                                                  Data ="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
                                     </ Grid >
                                 </ Grid >
                             </ AdornerDecorator >

                         </ Border >
                         < Border BorderBrush ="#7fbfff" BorderThickness ="1"
                                    Visibility =" {Binding !IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource BooleanToVisibilityConverter}} " />
                         < Border BorderBrush ="#3399ff" BorderThickness ="1"
                                    Visibility =" {Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource BooleanToVisibilityConverter}} " />
                     </ Grid >
                     < ControlTemplate.Triggers >
                         < Trigger Property ="WindowState" Value ="Maximized" >
                             < Setter TargetName ="LayoutRoot" Property ="Margin" Value ="7" />
                         </ Trigger >
                         < Trigger Property ="DazzleWindowState" Value ="Maximized" >
                             < Setter TargetName ="MaxButton" Property ="Visibility" Value ="Collapsed" />
                             < Setter TargetName ="RestoreButton" Property ="Visibility" Value ="Visible" />
                             < Setter TargetName ="LayoutRoot" Property ="Margin" Value ="7" />
                         </ Trigger >
                         < Trigger Property ="DazzleWindowState" Value ="Normal" >
                             < Setter TargetName ="MaxButton" Property ="Visibility" Value ="Visible" />
                             < Setter TargetName ="RestoreButton" Property ="Visibility" Value ="Collapsed" />
                         </ Trigger >
                         < MultiTrigger >
                             < MultiTrigger.Conditions >
                                 < Condition Property ="ResizeMode" Value ="CanResizeWithGrip" />
                                 < Condition Property ="WindowState" Value ="Normal" />
                             </ MultiTrigger.Conditions >
                             < Setter TargetName ="ResizeGrip" Property ="Visibility" Value ="Visible" />
                         </ MultiTrigger >
                     </ ControlTemplate.Triggers >
                 </ ControlTemplate >

             </ Setter.Value >
         </ Setter >

         < Setter Property ="shell:WindowChrome.WindowChrome" >
             < Setter.Value >
                 < shell:WindowChrome CornerRadius ="0" GlassFrameThickness ="1" UseAeroCaptionButtons ="False" />
             </ Setter.Value >
         </ Setter >
     </ Style >
</ ResourceDictionary >

終於把代碼貼上來了，不知道啥問題

源碼只貼出來了主窗體的，全部貼出來代碼太多了，估計也不容易看懂，拷貝過去也不一定能運行。大家有想要源碼，留個郵箱吧，我發給大家。

PS：給大家介紹一些文章、開源的框架，我的程序也是參考這么前輩的寫出來的。

Modern UI for WPF https://mui.codeplex.com/

這個可是個好東西，我的代碼基本是參考它來的。

mahapps.metro http://mahapps.com/mahapps.metro/

這個的效果也很不錯。

WPF - Image Button https://imagebuttonwpf.codeplex.com/

這個很實用哦

WPF換膚系列文章

http://www.cnblogs.com/scy251147/archive/2012/07/25/2609126.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF換膚之五：創建漂亮的窗體 WPF換膚之一：創建圓角窗體 WPF換膚之二：可拉動的窗體 WPF之換膚 WPF之彈出另外一個窗體 WPF換膚之七：異步 WPF換膚之三：WPF中的WndProc [WPF][Rubyer] 寫一個自己的 UI 庫 (二) - Icon WPF中窗體調用窗體 WPF 實現窗體拖動