Comment animer la souris sur un événement à l'aide des déclencheurs WPF pour un élément d'onglet?

Question

J'ai un modèle de tabitem remplacé et créé mon propre style personnalisé. Cependant, je ne suis pas sûr de savoir comment écrire des déclencheurs d'événement pour l'événement mouse over.

---

Désolé pour la réponse tardive, je ne reçois pas de notification pour les commentaires (peut-être cela devrait être changé?). Ok, je vais essayer d'expliquer cela plus en détail. Je n'ajoute pas de commentaire car je dois poster un exemple de code. Disons que vous avez un contrôle, un contrôle. Supposons que vous ayez également défini un certain nombre de styles en tant que ressources. donc:

<LinearGradientBrush x:Key="NormalGradientBrush"> 
    <GradientStop Color="Black" Offset="0" /> 
    <GradientStop Color="Red" Offset="1" /> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="NormalForeground"> 
    <GradientStop Color="Black" Offset="0" /> 
    <GradientStop Color="Gray" Offset="1" /> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="MouseOverGradientBrush"> 
    <GradientStop Color="Red" Offset="0" /> 
    <GradientStop Color="Green" Offset="0.2" /> 
    <GradientStop Color="Black" Offset="1" /> 
</LinearGradientBrush> 

<RadialGradientBrush x:Key="MouseOverForeground" GradientOrigin="0.3,0.5"> 
    <GradientStop Color="Gray" Offset="0" /> 
    <GradientStop Color="Black" Offset="1" /> 
</RadialGradientBrush > 

Maintenant que vous avez le contrôle de l'élément onglet:

<LinearGradientBrush x:Key="MouseOverGradientBrush"> 
    <GradientStop Color="Black" Offset="0" /> 
    <GradientStop Color="Red" Offset="1" /> 
</LinearGradientBrush> 

<Style x:Key="StyleTabItem" 
     TargetType="{x:Type TabItem}"> 
    <Setter Property="Foreground" 
      Value="{StaticResource NormalForeground}" /> 
    <Setter Property="BorderBrush" 
      Value="Black" /> 
    <Setter Property="Background" 
      Value="{StaticResource NormalGradientBrush}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid SnapsToDevicePixels="true"> 
        <Border x:Name="Bd" 
          Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="1,1,1,0" 
          Padding="{TemplateBinding Padding}"> 
         <ContentPresenter x:Name="Content" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         SnapsToDevicePixels="True" 
         ContentSource="Header" 
         RecognizesAccessKey="True" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" 
          Value="true"> 
         // what here? 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

La question est, comment puis-je dire WPF faire 3 secondes d'animation de la brosse courant MouseOverGradientBrush et du premier plan actuel à MouseOverForeground sur l'événement MouseOver? J'ai vu dans les exemples que vous faites cela en changeant les décalages du dégradé un par un. Je le veux maintenant. Cela augmente la taille du code et peut finir par être très désordonné. En outre, les balais peuvent avoir un nombre différent de décalages ou l'un peut être linéaire et l'autre radial. J'espère que c'est plus clair.

Answer 1

La meilleure solution pour utiliser les déclencheurs d'événement est d'utiliser Expression Blend. Il vient avec une manière intuitive de créer des déclencheurs.

Answer 2

Vérifiez ceci: http://en.csharp-online.net/WPF_Styles_and_Control_Templates%E2%80%94Event_Triggers Cela peut être utile

Answer 3

Si vous voulez vraiment utiliser un EventTrigger vous pouvez le faire comme ça

<Style x:TargetType="TabItem"> 
    <Style.Triggers> 
     <EventTrigger RoutedEvent="MouseOver"> 
      <BeginStoryboard> 
      .... 
      </BeinStoryboard> 
     </EventTrigger> 
    </Style.Triggers> 
</Style> 

Dans la plupart des cas Si je fais simple, discret, valeur modifications Je le ferai dans un déclencheur de propriété qui se déclenche lorsque la propriété IsMouseOver change, par opposition à un EventTrigger qui nécessite une animation

<Trigger Property="IsMouseOver" Value="True"> 
    <Setter Property="Foo" Value="Bar" /> 
</Trigger> 

Answer 4

Merci pour tous vos respones. Mes déclencheurs fonctionnent bien. Je ne peux pas les animer. J'ai eu un wat plus simple pour faire cela dans Silverlight en utilisant VisualStateManager et je ne suis pas sûr de savoir comment cela se fait dans WPF.

Je fournis mon échantillon, car l'expression mélange a généré la copie du modèle pour un tableau.

<Style x:Key="StyleTabItem" TargetType="{x:Type TabItem}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusStyle}"/> 
    <Setter Property="Foreground" Value="{DynamicResource ForegroundGradient}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource TabItemGradientBrushUnselected}"/> 
    <Setter Property="Background" Value="{StaticResource TabItemBorderBrushUnselected}"/> 
    <Setter Property="Padding" Value="6,1,6,1"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="Storyboard1"> 
         <DoubleAnimation 
           Storyboard.TargetName="Bd" 
           Storyboard.TargetProperty="BorderBrush.GradientStops[0].Offset" 
           Duration="00:00:00.3"/> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <Grid SnapsToDevicePixels="true"> 
        <Border x:Name="Bd" 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="1,1,1,0" 
        Padding="{TemplateBinding Padding}" 
        CornerRadius="2,2,2,2"> 
         <ContentPresenter x:Name="Content" 
         HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
         VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
         ContentSource="Header" 
         RecognizesAccessKey="True"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> 
         </Trigger.EnterActions> 
         <Setter Property="Background" TargetName="Bd" Value="{StaticResource MouseOverGradientBrush}"/> 
        </Trigger> 
        <Trigger Property="Selector.IsSelected" Value="False"/> 
        <Trigger Property="IsSelected" Value="true"> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemGradientBrushSelected}"/> 
         <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemBorderBrushSelected}"/> 
        </Trigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="false"/> 
          <Condition Property="IsMouseOver" Value="true"/> 
         </MultiTrigger.Conditions> 
         <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemMouseOverGradientBorder}"/> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="true"/> 
          <Condition Property="TabStripPlacement" Value="Top"/> 
         </MultiTrigger.Conditions> 
         <Setter Property="Margin" Value="-2,0,-2,0"/> 
         <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/> 
        </MultiTrigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Background" TargetName="Bd" Value="{DynamicResource DisabledGradientBrush}"/> 
         <Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource DisabledGradientBorder}"/> 
         <Setter Property="Foreground" Value="{DynamicResource DisabledForeground}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Ce que je veux simplement faire (pour commencer) est le passage de la souris pour changer l'arrière-plan bd de la valeur actuelle (quelle qu'elle soit) à la valeur que j'ai dans la mouseover = true déclencheur (MouseOverGradientBrush). Quel est le problème dans le code ci-dessus et l'animation ne fonctionne pas? J'ai utilisé l'expression mélange tout ce que je pouvais ...

Answer 5

Cela devrait fonctionner. J'ai sorti un tas de déclencheurs que vous aviez pour aider à simplifier les choses. Si cela fonctionne et que vous avez besoin d'ajouter plus de fonctionnalités, faites-le moi savoir et nous pourrons le créer à partir de là. J'ai également remplacé vos références de ressources par des couleurs statiques. Si vous les redéfinissez sur ressources et que cela cesse de fonctionner, cela pose un problème avec l'emplacement de vos ressources.

<LinearGradientBrush x:Key="MouseOverGradientBrush"> 
     <GradientStop Color="Black" Offset="0" /> 
     <GradientStop Color="Red" Offset="1" /> 
    </LinearGradientBrush> 

<Style x:Key="StyleTabItem" 
      TargetType="{x:Type TabItem}"> 
     <Setter Property="Foreground" 
       Value="{DynamicResource ForegroundGradient}" /> 
     <Setter Property="BorderBrush" 
       Value="Black" /> 
     <Setter Property="Background" 
       Value="Yellow" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid SnapsToDevicePixels="true"> 
         <Border x:Name="Bd" 
           Background="{TemplateBinding Background}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="1,1,1,0" 
           Padding="{TemplateBinding Padding}" 
           CornerRadius="2,2,2,2"> 
          <ContentPresenter x:Name="Content" 
               HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
               VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
               ContentSource="Header" 
               RecognizesAccessKey="True" /> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" 
           Value="true"> 
          <Setter Property="Background" 
            TargetName="Bd" 
            Value="{StaticResource MouseOverGradientBrush}" /> 
         </Trigger> 
         <Trigger Property="IsSelected" 
           Value="true"> 
          <Setter Property="Panel.ZIndex" 
            Value="1" /> 
          <Setter Property="Background" 
            TargetName="Bd" 
            Value="Cyan" /> 
          <Setter Property="BorderBrush" 
            TargetName="Bd" 
            Value="Pink" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>