繼續聊WPF——Expander控制項（2）

 

上一篇文章簡單說了一下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>