Overblog Suivre ce blog
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:18

13 Ressources :
a-Créer une nouvelle ressource
Sélectionner l’élément à transformer en ressource > Panneau « Propriétés » Convertir en nouvelle  ressource …

Note : On peut créer un dossier « Ressources » puis un dictionnaire de ressources (panneau « Projets ») si on veut mieux organiser son code .


    blend32b.png

(Le dictionnaire de ressources et le code de la page sont mis à jour)

b-Utiliser une ressource
Panneau « Propriétés » > Ressource Locale


c-Accéder/Modifier aux ressources

Panneau « Ressources »

14-Style

a-Créer un style
Modifier le Style > Créer un élément vide …

Définir le style de l’élément

 

b-Utiliser un Style
Sur un control auquel le style peut être appliqué …

 

 

C – Accèder/Modifier un Style

Depuis le panneau ressources  
 

15- Template

 
1 Définir le Template
sur l'élément ...Modifier le modèle > Créer un élément vide
 
2 les VisualState pour les diffirents états(Panneau « Etats »)
Exemple pour un bouton on redéfinit son template (border avec coins arrondis,...)qui correspond en fait à l’état Normal,puis on défnit l’apparence pour les états MouseOver,Pressed

 

 

16-Exemple de Données avec Blend

Ajouter une source de données
Il est possible de définir le type de données (nombre,chaine,booléen,etc.) ,le format(Nom,adresse électronique,etc.)

 

 
On peut vérifier le résultat avec des exemples de valeurs

 
(Les fichiers sont générés)
     blend32.png 
Il suffit ensuite de créer une liaison de données à partir du contrôle

Exemple sur un Datagrid > clic droit >  Créer une liaison de données pour l’ItemsSource .

Il est possible de définir précisément les éléments à Binder
Repost 0
Published by Romagny13 - dans Blend
commenter cet article
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>
Repost 0
Published by Romagny13 - dans Blend
commenter cet article
4 avril 2014 5 04 /04 /avril /2014 22:08

Bien coder ne suffit plus. Il faut être en mesure de proposer une bonne expérience utilisateur. Blend est l’outil qui permet de définir ses IHM en Xaml.Cet article a pour but de découvrir la bête qui n’est pas forcément  simple d’accès .

 

1- Projets

 

On distingue principalement 3 types de projets (WPF,Silverlight et SketchFlow)

 

 

2- Générer /Exécuter le projet (menu « Projet »)  

F12 Générer le projet (affichage de la fenêtre « Résultats »)
F5 Exécuter le projet

3- Switcher rapidement d’espace de conception

Modes(Menu « Affichage ») :Création,Code et Mixte 
Switch via bouton Ou F11  
Définir la fenêtre de démarrage(StarupUri est modifié dans App.xaml)

 

4-Espaces de travail

2 espaces de travail(menu « Fenêtre ») : Design et Animation
CTRL + F11 poiur un switch rapide
Note : ill est possible d’enregistrer son propre espace de travail

5 – Raccourcis

Outils de sélection
Loupe
Pipette : copie la couleur/dégradé
Pot de peinture : remplit une zone fermée avec la couleur/dégradé
Plume
Forme : rectangle,ellypse,ligne
Conteneurs : Grid,Canvas,etc.
Contrôles de texte : TextBlock,Textbox,etc.
Contrôles : button,checkbox,tabControl,etc.

 

A cela s’ajoute la boîte contenant tous les contrôles,formes,etc. disponibles .

6-Propriétés 

Pinceau et apparence:
 

Fill : remplissage
Stroke : le contour pour une forme
Foreground : couleur de la police
Etc.
 
Dégradé linéaire (droite à gauche),radial 

Pinceau,couleur unie,dégradé,mosaïque(image),ressources
Boutons permettant de régler les couleurs sur la barre
GradientOrigin permet de  personnaliser le début dégradé
Opacity : transparence
Etc.

Propriétés communes :
Strecth : Fill,Uniform(par défaut),…

7-Grouper un élément

 

8-Evènements avec Blend

Repost 0
Published by Romagny13 - dans Blend
commenter cet article