WPF - IsSelected上的動畫

我在另一個控件中有一個Ellipse，當選擇父項時，它的Fill被更改。WPF - IsSelected上的動畫

<Style TargetType="TabItem"> 
     <Setter Property="IsEnabled" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="TabItem"> 
        <Grid MinWidth="150"> 
         <Border BorderBrush="Transparent" BorderThickness="0"> 
          <StackPanel Orientation="Vertical"> 
           <ContentPresenter HorizontalAlignment="Center" ContentSource="Header" /> 
           <Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5"> 
            <Ellipse.Fill> 
             <LinearGradientBrush StartPoint="0,1" EndPoint="1,0"> 
              <GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" /> 
              <GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" /> 
             </LinearGradientBrush> 
            </Ellipse.Fill> 
           </Ellipse> 
          </StackPanel> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetName="FirstGradient" Storyboard.TargetProperty="Color" 
                 From="Transparent" To="#FF9221" Duration="0:0:0.2" /> 
            </Storyboard> 
           </BeginStoryboard> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetName="SecondGradient" Storyboard.TargetProperty="Color" 
                 From="Transparent" To="#FFCFA5" Duration="0:0:0.2" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

工作正常。我沒有設法做的是當父母不再被選擇時將填充改回默認。我怎麼做？

來源

2010-11-01 Johan Alkstål

提供一些更多的代碼，以方便創建示例.... – 2010-11-01 10:41:44

增加了完整的風格。 – 2010-11-01 10:48:41

你試圖在TabControl的TabItem中做樣式...？ – 2010-11-01 11:45:09

如果你正在尋找tabcontrol風格只是看看這可以幫助你在某種程度上。

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication16.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Style TargetType="TabItem"> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="TabItem"> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="Storyboard1"> 
         <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> 
          <SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/> 
          <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#00FE3737"/> 
         </ColorAnimationUsingKeyFrames> 
         <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
          <SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/> 
          <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFF2525"/> 
         </ColorAnimationUsingKeyFrames> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <Grid MinWidth="150"> 
        <Border BorderBrush="Transparent" BorderThickness="0"> 
         <StackPanel Orientation="Vertical"> 
          <ContentPresenter HorizontalAlignment="Center" ContentSource="Header" /> 
          <Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5"> 
           <Ellipse.Fill> 
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0"> 
             <GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" /> 
             <GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" /> 
            </LinearGradientBrush> 
           </Ellipse.Fill> 
          </Ellipse> 
         </StackPanel> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Selector.IsSelected" Value="True"> 
         <Trigger.ExitActions> 
          <StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/> 
         </Trigger.ExitActions> 
         <Trigger.EnterActions> 
          <BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

</Window.Resources> 

<Grid x:Name="LayoutRoot"> 
<TabControl> 

<TabItem Header="First"></TabItem> 
<TabItem Header="Second" IsSelected="true"></TabItem> 
<TabItem Header="Last"></TabItem> 
</TabControl> 
</Grid>

來源

2010-11-01 11:47:27

的問題是，我所定義的橢圓的模板內的默認外觀，

<Ellipse Name="Ellipse" Stroke="Black" StrokeThickness="1" Width="24" Height="24" Margin="5"> 
           <Ellipse.Fill> 
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0"> 
             <GradientStop x:Name="FirstGradient" Color="Transparent" Offset="0.3" /> 
             <GradientStop x:Name="SecondGradient" Color="Transparent" Offset="0.75" /> 
            </LinearGradientBrush> 
           </Ellipse.Fill> 
          </Ellipse>

這造成了如此一個TabItem的不再被選中時，沒」改變回它的默認外觀。

爲了解決這個問題，我只是TemplateBind的Ellipse.Fill到TabItem的背景。

來源

2010-11-01 11:56:23

嘗試用補充說：

      <Trigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetName="FirstGradient" Storyboard.TargetProperty="Color" 
                To="Transparent" From="#FF9221" Duration="0:0:0" /> 
            </Storyboard> 
           </BeginStoryboard> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetName="SecondGradient" Storyboard.TargetProperty="Color" 
                To="Transparent" From="#FFCFA5" Duration="0:0:0" /> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions>

你的觸發器

來源

2010-11-01 11:57:46

WPF - IsSelected上的動畫

回答

相關問題