Expander-自定义模板(很好的东西)

上一篇文章简单说了一下Expander控件，本文将编写一个自义模板的Expander控件，如下图所示：

 

 

[html]  view plain  copy

 print ?

1. <Window x:Class="Expander_Sample2.Window1"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="Window1" Height="300" Width="300">  
5.     <Window.Resources>  
6.         <!--  
7.         ToogleButton的模板，  
8.         因为要进和状态切换，故要用到ToggleButton控件  
9.         -->  
10.         <ControlTemplate x:Key="ToggleButtonTemp" TargetType="{x:Type ToggleButton}">  
11.             <Border x:Name="bd"  
12.                     BorderThickness="1"  
13.                     CornerRadius="1,1,1,1">  
14.                 <Border.Background>  
15.                     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
16.                         <GradientStop Color="LightGray" Offset="0"/>  
17.                         <GradientStop Color="White" Offset="1"/>  
18.                     </LinearGradientBrush>  
19.                 </Border.Background>  
20.                 <Border.BorderBrush>  
21.                     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
22.                         <GradientStop Color="Black" Offset="0"/>  
23.                         <GradientStop Color="Gray" Offset="1"/>  
24.                     </LinearGradientBrush>  
25.                 </Border.BorderBrush>  
26.                 <Path Margin="2,2,2,2" Fill="Black" x:Name="p"  
27.                       Data="M 0,0 L 4,5 L8,0 Z"  
28.                       HorizontalAlignment="Center"  
29.                       VerticalAlignment="Center"/>  
30.             </Border>  
31.             <ControlTemplate.Triggers>  
32.                 <Trigger Property="IsMouseOver" Value="True">  
33.                     <Setter TargetName="bd" Property="Background">  
34.                         <Setter.Value>  
35.                             <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
36.                                 <GradientStop Color="LightGreen" Offset="0"/>  
37.                                 <GradientStop Color="White" Offset="1"/>  
38.                             </LinearGradientBrush>  
39.                         </Setter.Value>  
40.                     </Setter>  
41.                 </Trigger>  
42.                 <Trigger Property="IsChecked" Value="True">  
43.                     <Setter TargetName="p" Property="Data"  
44.                                 Value="M0,5 L8,5 L4,0 Z"/>  
45.                 </Trigger>  
46.                 <Trigger Property="IsEnabled" Value="True">  
47.                     <Setter TargetName="bd" Property="BorderBrush" Value="Gray"/>  
48.                     <Setter TargetName="p" Property="Fill" Value="Gray"/>  
49.                 </Trigger>  
50.             </ControlTemplate.Triggers>  
51.         </ControlTemplate>  
52.         <!-- 
53.             Expnder的样式 
54.         -->  
55.         <Style TargetType="{x:Type Expander}">  
56.             <Setter Property="Template">  
57.                 <Setter.Value>  
58.                     <ControlTemplate TargetType="{x:Type Expander}">  
59.                         <Grid>  
60.                             <Grid.RowDefinitions>  
61.                                 <RowDefinition Height="auto"/>  
62.                                 <RowDefinition x:Name="gr" Height="0"/>  
63.                             </Grid.RowDefinitions>  
64.                             <BulletDecorator Background="DarkTurquoise" Grid.Row="0" VerticalAlignment="Center" >  
65.                                 <BulletDecorator.Bullet>  
66.                                     <ToggleButton Margin="1,1,1,1"  Height="18" Width="18" Template="{StaticResource ToggleButtonTemp}"  
67.                                                   IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"  
68.                                                   OverridesDefaultStyle="True"/>  
69.                                 </BulletDecorator.Bullet>  
70.                                 <ContentPresenter HorizontalAlignment="Center" Margin="1,1,1,1" ContentSource="Header"/>  
71.                             </BulletDecorator>  
72.                             <Border x:Name="scv" Background="LightGray" BorderThickness="1" BorderBrush="Black" Grid.Row="1" >  
73.                                 <ContentPresenter Margin="0" ContentSource="Content"/>  
74.                             </Border>  
75.                         </Grid>  
76.                         <ControlTemplate.Triggers>  
77.                             <Trigger Property="IsExpanded" Value="True">  
78.                                 <Setter TargetName="gr" Property="Height" Value="{Binding Path=DesiredSize/Height,ElementName=scv}"/>  
79.                             </Trigger>  
80.                         </ControlTemplate.Triggers>  
81.                     </ControlTemplate>  
82.                 </Setter.Value>  
83.             </Setter>  
84.         </Style>  
85.     </Window.Resources>  
86.     <Grid>  
87.         <Expander Margin="10,10" Height="210" Width="130" OverridesDefaultStyle="True">  
88.             <Expander.Header>  
89.                 <TextBlock Text="相见恨晚" FontWeight="Bold" FontSize="16"/>  
90.             </Expander.Header>  
91.             <TextBlock TextWrapping="Wrap">  
92.                 如果相见不会太晚，我们就不会悲伤，和你堂堂的手牵手，过得好简单，  
93.                 若我有天不见了，或许你会比较快乐，虽然有万般舍不得，也不愿看你难割舍   
94.                 若我有天不在了。请你原谅我的困扰，虽然你给我的不算少，只是我没福气要就算是完美。  
95.             </TextBlock>  
96.         </Expander>  
97.     </Grid>  
98. </Window>