Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

4 avril 2014 5 04 /04 /avril /2014 22:17

9-Transformations
blend5.png

Déplacer selon X et Y
Rotation selon un angle
Redimensionner selon X et Y
Incliner selon X et Y
Symétrie
RenderTransform et LayoutTransform(conteneur parent)
 
Dans le code ...
RotateTransform Rotation par un angle
ScaleTransform  Redimensionnement d’un objet selon ScaleX et ScaleY  
SkewTransform Transformation « oblique » selon AngleX et AngleY
TranslateTransform déplacement d’un point à un autre selon X  et Y
 

 

10- Animations

On crée un « StoryBoard »  (afin d’avoir une timeline)
Panneau « Objets et Chronologie » (menu « Fenêtres »)
blend6.png
 
 
 
 Il suffit ensuite de définir son animation/transformations sur la timeline
  
blend7.png
  
Propriétés du StoryBoard

blend10.png

F5 pour exécuter l’application ou simplement bouton « lecture » avec la timeline .

11 – Comportements/Behaviors

On crée d’abord une animation/un état que l’on déclenche ensuite grâce à un behavior
 
CallMethodAction
ChangePropertyAction Change une propriété
ControlStoryboardAction Contrôle le StoryBoard
GoToStateAction Change d'état
HyperlinkAction Navigation vers un site au clic sur le lien
InvokeCommandAction invocation d'une commande
PlaySoundAction
RemoveElementAction supprime un élément
  • ControlStoryBoardAction
Glisser /Déposer le comportement
blend8.png

 

Je montre des exemples de code (sachant que tout peut se faire de manière transparente grâce aux différents panneaux) .
Exemple au chargement de l'application
les namespaces
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
       <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Loaded">
                           <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                    </i:EventTrigger>
             </i:Interaction.Triggers>

 

Il est possible de changer les propriétés du Trigger grâce à Blend

blend9.png
Exemple lorsqu’on change pour que l’animation se déclenche à MouseEnter sur une image désirée
<i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseEnter" SourceName="image">
                           <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                    </i:EventTrigger>
             </i:Interaction.Triggers>

 

On peut aussi ajouter un Trigger pour arrêter l’animation
<i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseEnter" SourceName="image">
                           <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeave" SourceName="image">
                           <ei:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource Storyboard1}"/>
                    </i:EventTrigger>
             </i:Interaction.Triggers>

 

 

 

  • ChangePropertyAction
Exemple : je change la taille d'une image (propriété Height) au clic gauche de la souris dessus
En code cela donne
       <i:EventTrigger EventName="MouseLeftButtonDown" SourceName="image">
                           <ei:ChangePropertyAction TargetName="image" PropertyName="Height" Value="200"/>
                    </i:EventTrigger>
             </i:Interaction.Triggers>

 

12-VisualState

  • On ajoute les états et définit ceux ci
  • Puis on fait glisser un behavior GoToStateAction
  • enfin on définit les propriétés du behavior

 

Ajouter des états .Panneau « Etats »
blend11.png
Exemple simple:
Je crée un état normal et un état ou le background est noir + un bouton qui permet de passer à l’état « black » au clic .
Cela donne en code
<Window
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
       x:Class="ButtonWithStates.Window3"
       x:Name="Window"
       Title="Window3"
       Width="640" Height="480">
 
       <Grid x:Name="LayoutRoot">
             <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="VisualStateGroup">
                           <VisualState x:Name="Normal"/>
                           <VisualState x:Name="Black">
                                  <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="LayoutRoot">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                      <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="Black"/>
                                                      </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                           </VisualState>
                    </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
             <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click" SourceName="btGoToBlackState">
                           <ei:GoToStateAction StateName="Black"/>
                    </i:EventTrigger>
             </i:Interaction.Triggers>
             <Button x:Name="btGoToBlackState" Content="button" HorizontalAlignment="Left" Height="75" Margin="20,40,0,0" VerticalAlignment="Top" Width="115"/>
       </Grid>
</Window>

Partager cet article

Repost 0
Published by Romagny13 - dans Blend
commenter cet article

commentaires