WPF自定义控件快速构成窗体布局

http://blog.youkuaiyun.com/beilinu/article/details/8009968

之前做了一个类似于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里面定义控件样式模版

[html]  view plain copy

1. <Grid>  
2.     <DockPanel HorizontalAlignment="Stretch" Height="Auto" LastChildFill="True" Margin="0" Grid.Row="0" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="1">  
3.         <StackPanel x:Name="HeaderPanel" Height="Auto" VerticalAlignment="Top" Width="Auto" DockPanel.Dock="Top" IsItemsHost="True" Orientation="Horizontal" CanHorizontallyScroll="True"/>  
4.         <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="Auto" DockPanel.Dock="Bottom" Margin="0" Background="{TemplateBinding Background}">  
5.             <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Height="Auto"/>  
6.         </Border>  
7.     </DockPanel>  
8. </Grid>  

然后继续新建项目WMTabItem

添加模版

[html]  view plain copy

1. <Setter Property="Template">  
2.             <Setter.Value>  
3.                 <ControlTemplate TargetType="{x:Type local:WMTabItem}">  
4.                     <Grid x:Name="templateRoot" SnapsToDevicePixels="True" Width="74" Height="82">  
5.                         <VisualStateManager.VisualStateGroups>  
6.                             <VisualStateGroup x:Name="CommonStates"/>  
7.                             <VisualStateGroup x:Name="SelectionStates"/>  
8.                             <VisualStateGroup x:Name="FocusStates"/>  
9.                             <VisualStateGroup x:Name="ValidationStates"/>  
10.                         </VisualStateManager.VisualStateGroups>  
11.                         <Grid.RowDefinitions>  
12.                             <RowDefinition Height="62"/>  
13.                             <RowDefinition Height="20"/>  
14.                         </Grid.RowDefinitions>  
15.                         <Border x:Name="mainBorder" BorderThickness="1,1,1,0" Margin="0" Grid.RowSpan="1" Background="{TemplateBinding Background}" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>  
16.                         <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Focusable="False" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" TextElement.Foreground="{TemplateBinding Foreground}"/>  
17.                     </Grid>  
18.                     <ControlTemplate.Triggers>  
19.                         <Trigger Property="Selector.IsSelected" Value="True">  
20.                             <Setter Property="Background" TargetName="templateRoot">  
21.                                 <Setter.Value>  
22.                                     <ImageBrush Stretch="Uniform" ImageSource="/WMControl;component/image/toolbar_pushed.png"/>  
23.                                 </Setter.Value>  
24.                             </Setter>  
25.                         </Trigger>  
26.                         <MultiTrigger>  
27.                             <MultiTrigger.Conditions>  
28.                                 <Condition Property="IsMouseOver" Value="True"/>  
29.                                 <Condition Property="Selector.IsSelected" Value="False"/>  
30.                             </MultiTrigger.Conditions>  
31.                             <Setter Property="Background" TargetName="templateRoot">  
32.                                 <Setter.Value>  
33.                                     <ImageBrush ImageSource="/WMControl;component/image/toolbar_hover.png"/>  
34.                                 </Setter.Value>  
35.                             </Setter>  
36.                             <Setter Property="RenderTransform" TargetName="mainBorder">  
37.                                 <Setter.Value>  
38.                                     <TransformGroup>  
39.                                         <ScaleTransform ScaleX="1.05" ScaleY="1.05"/>  
40.                                         <SkewTransform/>  
41.                                         <RotateTransform/>  
42.                                         <TranslateTransform/>  
43.                                     </TransformGroup>  
44.                                 </Setter.Value>  
45.                             </Setter>  
46.                         </MultiTrigger>  
47.                     </ControlTemplate.Triggers>  
48.                 </ControlTemplate>  
49.             </Setter.Value>  

好了，一个控件搞定了，下面开始制作按钮控件，老样子，添加新项目WMButton。
按钮有三个状态，默认，按下，鼠标划过，在这里主要是通过触发器改变背景色实现。

另外还要新添加两个属性，分别用来存放 鼠标按下，鼠标划过的图片。

[csharp]  view plain copy

1. public ImageSource MoverBrush  
2. {  
3.     get { return base.GetValue(MoverBrushProperty) as ImageSource; }  
4.     set { base.SetValue(MoverBrushProperty, value); }  
5. }  
6. public static readonly DependencyProperty MoverBrushProperty = DependencyProperty.Register("MoverBrush", typeof(ImageSource), typeof(WMButton));  
7.   
8. public ImageSource EnterBrush  
9. {  
10.     get { return base.GetValue(EnterBrushProperty) as ImageSource; }  
11.     set { base.SetValue(EnterBrushProperty, value); }  
12. }  
13. public static readonly DependencyProperty EnterBrushProperty = DependencyProperty.Register("EnterBrush", typeof(ImageSource), typeof(WMButton));  

接着在模版里面定义两个笔刷，并绑定到上面两个属性

[html]  view plain copy

1. <ImageBrush x:Key="EnterBrush" ImageSource="{Binding EnterBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:WMButton}}}" Stretch="None"></ImageBrush>  
2. <ImageBrush x:Key="MoverBrush" ImageSource="{Binding MoverBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:WMButton}}}" Stretch="None"></ImageBrush>  

然后在按钮状态触发器里面分别使用上面两个笔刷就可以了

[html]  view plain copy

1. <ControlTemplate.Triggers>  
2.     <Trigger Property="IsMouseOver" Value="True">  
3.         <Setter Property="Background" TargetName="border" Value="{StaticResource MoverBrush}"/>  
4.     </Trigger>  
5.     <Trigger Property="IsPressed" Value="True">  
6.         <Setter Property="Background" TargetName="border" Value="{StaticResource EnterBrush}"/>  
7.     </Trigger>  
8. </ControlTemplate.Triggers>  

到此为止，两个控件就搞定了。下面开始试试看，

1.重新建立WPF项目，并制作一个无边框窗体

2.引用刚才制作的控件，把TAB控件放在窗体上，并删除自带的TabItem（因为我们有自定义的TabItem，不用他的）,在tab控件根目录下添加刚才制作的WMTabItem。

好难看。。。。。不过不要着急，给他换个图片先

额，效果还不错，好了，多复制几个，再把刚才制作的按钮也放上,再添加三张图片，默认状态的图片就直接改变背景笔刷就行了，另外两个状态就要用到刚才添加的两个新属性了，在属性面板找到刚才添加的新属性，分别添加两张图片。

还行，继续拖控件，关闭，最大化，最小化，图片自己找就行了

好了，一个基本的界面就搭建好了，可以加上标题之类的，位置也可以根据需要调整下。很方便，只需要将刚才制作的两个控件拖进来，改变下图片，一个简单的界面布局就完成了。

添加换肤功能：

主要是绑定窗体背景，具体就不多说了，看代码