继续聊WPF——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>  


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值