如何結束擴展模板？

Question

在我嘗試和了解更多關於WPF的內容中，我一直在尋找一些控件的樣式，我希望有人能夠幫助我製作一些動畫。

我一直在試圖做的是採取一個擴展器，使其動畫擴展/摺疊，並在鼠標懸停時自動執行此操作。

我發現太網站分別說明這些技術，但我努力將它們結合起來，希望有人能幫助我完成。目前我無法獲得動畫效果，我不知道爲什麼。

Animation
AutoExpansion

我剝了下來很多動畫造型的東西更簡單，因爲我不需要學習複雜的例子。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480"> 
    <Page.Resources> 
     <Style x:Key="ExpanderHeaderFocusVisual"> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Border> 
          <Rectangle SnapsToDevicePixels="true" Margin="0" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}"> 
      <Setter Property="Foreground" Value="Transparent"/> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Expander}"> 
         <ControlTemplate.Resources> 
          <Storyboard x:Key="Timeline1"> 
           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:0.25" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
            <SplineDoubleKeyFrame KeyTime="00:00:0.25" Value="1"/> 
           </DoubleAnimationUsingKeyFrames> 
          </Storyboard> 
          <Storyboard x:Key="Timeline2"> 
           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.45" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
            <SplineDoubleKeyFrame KeyTime="00:00:0.45" Value="0"/> 
           </DoubleAnimationUsingKeyFrames> 
          </Storyboard> 
         </ControlTemplate.Resources> 
         <Border x:Name="border" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> 
          <DockPanel> 
           <ContentPresenter FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" 
                 Visibility="Visible" 
                 Margin="{TemplateBinding Padding}" 
                 Focusable="False" 
                 x:Name="HeaderSite" 
                 Content="{TemplateBinding Header}" 
                 ContentTemplate="{TemplateBinding HeaderTemplate}" 
                 ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
                 DockPanel.Dock="Top"/> 
           <ContentPresenter Focusable="false" 
                  Visibility="Collapsed" 
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                  Margin="{TemplateBinding Padding}" 
                  x:Name="ExpandSite" 
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                  DockPanel.Dock="Bottom"> 
            <ContentPresenter.LayoutTransform> 
             <TransformGroup> 
              <ScaleTransform ScaleX="1" ScaleY="0"/> 
              <SkewTransform AngleX="0" AngleY="0"/> 
              <RotateTransform Angle="0"/> 
              <TranslateTransform X="0" Y="0"/> 
             </TransformGroup> 
            </ContentPresenter.LayoutTransform> 
           </ContentPresenter> 
          </DockPanel> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsExpanded" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard Storyboard="{StaticResource Timeline1}"/> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard Storyboard="{StaticResource Timeline2}"/> 
           </Trigger.ExitActions> 
          </Trigger> 
          <Trigger Property="ExpandDirection" Value="Up"> 
           <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/> 
           <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
          </Trigger> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/> 
          </Trigger> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Page.Resources> 
    <Grid> 
     <Expander HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red" BorderBrush="Green" Width="100" Header="" x:Name="expander" Style="{DynamicResource ExpanderStyle1}" IsExpanded="True"> 
      <ListBox IsSynchronizedWithCurrentItem="True" x:Name="listBox"> 
       <ListBoxItem Content="ListBoxItem"/> 
       <ListBoxItem Content="ListBoxItem"/> 
       <ListBoxItem Content="ListBoxItem"/> 
      </ListBox> 
     </Expander> 
    </Grid> 
</Page> 

Answer 1

使用樣式觸發器。在這裏你去：

<Expander> 
    <Expander.Style> 
     <Style> 
      <Setter Property="Background" Value="Green" /> 
      <Style.Triggers> 
       <Trigger Property="Expander.IsMouseOver" Value="True"> 
        <Setter Property="Expander.IsExpanded" Value="True" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Expander.Style> 
    <Rectangle Width="100" Height="100" Fill="Red" Stroke="Black" /> 
</Expander>