上一篇文章简单说了一下Expander控件,本文将编写一个自义模板的Expander控件,如下图所示:
<Window x:Class="Expander_Sample2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<!--
ToogleButton的模板,
因为要进和状态切换,故要用到ToggleButton控件
-->
<ControlTemplate x:Key="ToggleButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="bd"
BorderThickness="1"
CornerRadius="1,1,1,1">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Gray" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Path Margin="2,2,2,2" Fill="Black" x:Name="p"
Data="M 0,0 L 4,5 L8,0 Z"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="LightGreen" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="p" Property="Data"
Value="M0,5 L8,5 L4,0 Z"/>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter TargetName="bd" Property="BorderBrush" Value="Gray"/>
<Setter TargetName="p" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--
Expnder的样式
-->
<Style TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition x:Name="gr" Height="0"/>
</Grid.RowDefinitions>
<BulletDecorator Background="DarkTurquoise" Grid.Row="0" VerticalAlignment="Center" >
<BulletDecorator.Bullet>
<ToggleButton Margin="1,1,1,1" Height="18" Width="18" Template="{StaticResource ToggleButtonTemp}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="Center" Margin="1,1,1,1" ContentSource="Header"/>
</BulletDecorator>
<Border x:Name="scv" Background="LightGray" BorderThickness="1" BorderBrush="Black" Grid.Row="1" >
<ContentPresenter Margin="0" ContentSource="Content"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="gr" Property="Height" Value="{Binding Path=DesiredSize/Height,ElementName=scv}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Expander Margin="10,10" Height="210" Width="130" OverridesDefaultStyle="True">
<Expander.Header>
<TextBlock Text="相见恨晚" FontWeight="Bold" FontSize="16"/>
</Expander.Header>
<TextBlock TextWrapping="Wrap">
如果相见不会太晚,我们就不会悲伤,和你堂堂的手牵手,过得好简单,
若我有天不见了,或许你会比较快乐,虽然有万般舍不得,也不愿看你难割舍
若我有天不在了。请你原谅我的困扰,虽然你给我的不算少,只是我没福气要就算是完美。
</TextBlock>
</Expander>
</Grid>
</Window>
原文链接: http://blog.csdn.net/tcjiaan/article/details/6984670