ControlTemplate in WPF —— Expander

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <!-- SimpleStyles: Expander -->

  <ControlTemplate x:Key="ExpanderToggleButton"
                   TargetType="{x:Type ToggleButton}">
    <Border x:Name="Border"
            CornerRadius="2,0,0,0"
            BorderThickness="0,0,1,0">
      <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
          <GradientStop Color="{DynamicResource ControlLightColor}" />
          <GradientStop Color="{DynamicResource ControlMediumColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Border.Background>
      <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource BorderLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource BorderDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

      </Border.BorderBrush>
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlMouseOverColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Pressed">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlPressedColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Disabled">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledControlDarkColor}" />
              </ColorAnimationUsingKeyFrames>
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledBorderLightColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="CheckStates">
          <VisualState x:Name="Checked">
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="CollapsedArrow">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Hidden}" />
              </ObjectAnimationUsingKeyFrames>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="ExpandededArrow">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Visible}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Unchecked" />
          <VisualState x:Name="Indeterminate" />
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Grid>
        <Path x:Name="CollapsedArrow"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M 0 0 L 4 4 L 8 0 Z">
          <Path.Fill>
            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
          </Path.Fill>
        </Path>
        <Path x:Name="ExpandededArrow"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Visibility="Collapsed"
              Data="M 0 4 L 4 0 L 8 4 Z">
          <Path.Fill>
            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
          </Path.Fill>
        </Path>
      </Grid>
    </Border>
  </ControlTemplate>

  <Style TargetType="{x:Type Expander}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Expander}">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition x:Name="ContentRow"
                             Height="0" />
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" />
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledBorderLightColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="Border"
                    Grid.Row="0"
                    BorderThickness="1"
                    CornerRadius="2,2,0,0">
              <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1" />
                </LinearGradientBrush>

              </Border.BorderBrush>
              <Border.Background>

                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource ControlLightColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource ControlMediumColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Border.Background>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="20" />
                  <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ToggleButton OverridesDefaultStyle="True"
                              Template="{StaticResource ExpanderToggleButton}"
                              IsChecked="{Binding IsExpanded, Mode=TwoWay, 
                    RelativeSource={RelativeSource TemplatedParent}}">
                  <ToggleButton.Background>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                      <GradientStop Color="{DynamicResource ControlLightColor}"
                                    Offset="0" />
                      <GradientStop Color="{DynamicResource ControlMediumColor}"
                                    Offset="1" />
                    </LinearGradientBrush>
                  </ToggleButton.Background>
                </ToggleButton>
                <ContentPresenter Grid.Column="1"
                                  Margin="4"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True" />
              </Grid>
            </Border>
            <Border x:Name="Content"
                    Grid.Row="1"
                    BorderThickness="1,0,1,1"
                    CornerRadius="0,0,2,2">
              <Border.BorderBrush>
                <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
              </Border.BorderBrush>
              <Border.Background>
                <SolidColorBrush Color="{DynamicResource ContentAreaColorDark}" />
              </Border.Background>
              <ContentPresenter Margin="4" />
            </Border>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded"
                     Value="True">
              <Setter TargetName="ContentRow"
                      Property="Height"
                      Value="{Binding DesiredHeight, ElementName=Content}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

 

posted @ 2017-08-22 10:54  天王星天  阅读(271)  评论(0编辑  收藏  举报