Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

QUELQUES EFFETS EN XAML


Information sur la source

Catégorie :WPF Source .NET ( DotNet ) Classé sous : xaml, effets, doubleanimation, coloranimation, eventtrigger Niveau : Débutant Date de création : 06/02/2007 Date de mise à jour : 04/04/2008 00:10:37 Vu / téléchargé: 11 826 / 674

Note :
Aucune note

Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
Ceci est une petite source sans prétention qui a pour but de vous montrer quelque unes des possibilités offertes par les animations en XAML. J'ai choisi ici de faire une imitation du bouton play du dernier windows media player (le reflet en moins).
Le bouton réagit à la souris et fait des effets assez sympa... mais difficile de montrer ça dans une capture d'écran...
 

Source

  • <Window x:Class="PlayButton.Window1"
  • xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  • xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  • Title="PlayButton" Height="300" Width="300"
  • WindowStartupLocation="CenterScreen"
  • BorderThickness="0,0,0,0"
  • >
  • <Grid>
  • <Grid.Background>
  • <SolidColorBrush Color="Black" />
  • </Grid.Background>
  • <!-- Centre -->
  • <Ellipse Margin="7" Width="100" Height="100">
  • <Ellipse.Fill>
  • <RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusX="1.5" RadiusY="1.5">
  • <GradientStop x:Name="FondCouleur1" Color="#C8FDFF" Offset="0.0" />
  • <GradientStop x:Name="FondCouleur2" Color="#36AAFC" Offset="0.15" />
  • <GradientStop x:Name="FondCouleur3" Color="#002BC8" Offset="0.35" />
  • <GradientStop x:Name="FondCouleur4" Color="DarkBlue" Offset="1" />
  • </RadialGradientBrush>
  • </Ellipse.Fill>
  • <Ellipse.BitmapEffect>
  • <OuterGlowBitmapEffect x:Name="GlowEffect" GlowColor="Black" GlowSize="7" />
  • </Ellipse.BitmapEffect>
  • </Ellipse>
  • <!-- Texte du couton (Définit dans le code behind) -->
  • <TextBlock x:Name="Texte" FontFamily="Wingdings 3" FontSize="50" Foreground="White" Margin="10,0,0,0" TextAlignment="Center" VerticalAlignment="Center">
  • <TextBlock.BitmapEffect>
  • <OuterGlowBitmapEffect GlowColor="Black" GlowSize="7" />
  • </TextBlock.BitmapEffect>
  • <TextBlock.RenderTransform>
  • <TranslateTransform x:Name="TranslationBoutonPlay" ></TranslateTransform>
  • </TextBlock.RenderTransform>
  • </TextBlock>
  • <!-- Masque de récupération (transparent) de l'input de la souris -->
  • <Ellipse Margin="7" Width="100" Height="100">
  • <Ellipse.Fill>
  • <SolidColorBrush Color="Transparent"></SolidColorBrush>
  • </Ellipse.Fill>
  • <!-- Evènements de la souris -->
  • <Ellipse.Triggers>
  • <EventTrigger RoutedEvent="Ellipse.MouseEnter">
  • <BeginStoryboard>
  • <Storyboard>
  • <ColorAnimation
  • Storyboard.TargetName="GlowEffect"
  • Storyboard.TargetProperty="GlowColor"
  • To="LightBlue" Duration="0:0:0.2" FillBehavior="HoldEnd" />
  • </Storyboard>
  • </BeginStoryboard>
  • </EventTrigger>
  • <EventTrigger RoutedEvent="Ellipse.MouseLeave">
  • <BeginStoryboard>
  • <Storyboard>
  • <ColorAnimation
  • Storyboard.TargetName="GlowEffect"
  • Storyboard.TargetProperty="GlowColor"
  • To="Black" Duration="0:0:0.2" FillBehavior="Stop" />
  • </Storyboard>
  • </BeginStoryboard>
  • </EventTrigger>
  • <EventTrigger RoutedEvent="Ellipse.MouseDown">
  • <BeginStoryboard>
  • <Storyboard>
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur2"
  • Storyboard.TargetProperty="Color"
  • To="#002BC8" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur3"
  • Storyboard.TargetProperty="Color"
  • To="DarkBlue" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur4"
  • Storyboard.TargetProperty="Color"
  • To="#000011" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <DoubleAnimation
  • Storyboard.TargetName="TranslationBoutonPlay"
  • Storyboard.TargetProperty="X"
  • To="2" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <DoubleAnimation
  • Storyboard.TargetName="TranslationBoutonPlay"
  • Storyboard.TargetProperty="Y"
  • To="2" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • </Storyboard>
  • </BeginStoryboard>
  • </EventTrigger>
  • <EventTrigger RoutedEvent="Ellipse.MouseUp">
  • <BeginStoryboard>
  • <Storyboard>
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur2"
  • Storyboard.TargetProperty="Color"
  • To="#36AAFC" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur3"
  • Storyboard.TargetProperty="Color"
  • To="#002BC8" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <ColorAnimation
  • Storyboard.TargetName="FondCouleur4"
  • Storyboard.TargetProperty="Color"
  • To="DarkBlue" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <DoubleAnimation
  • Storyboard.TargetName="TranslationBoutonPlay"
  • Storyboard.TargetProperty="X"
  • To="0" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • <DoubleAnimation
  • Storyboard.TargetName="TranslationBoutonPlay"
  • Storyboard.TargetProperty="Y"
  • To="0" Duration="0:0:0.08" FillBehavior="HoldEnd" />
  • </Storyboard>
  • </BeginStoryboard>
  • </EventTrigger>
  • </Ellipse.Triggers>
  • </Ellipse>
  • </Grid>
  • </Window>
<Window x:Class="PlayButton.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PlayButton" Height="300" Width="300"
	WindowStartupLocation="CenterScreen"
	BorderThickness="0,0,0,0"
    >
	
    <Grid>
		<Grid.Background>
			<SolidColorBrush Color="Black" />
		</Grid.Background>


		<!-- Centre -->
		<Ellipse Margin="7" Width="100" Height="100">
			<Ellipse.Fill>
				<RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusX="1.5" RadiusY="1.5">
					<GradientStop x:Name="FondCouleur1" Color="#C8FDFF" Offset="0.0" />
					<GradientStop x:Name="FondCouleur2" Color="#36AAFC" Offset="0.15" />
					<GradientStop x:Name="FondCouleur3" Color="#002BC8" Offset="0.35" />
					<GradientStop x:Name="FondCouleur4" Color="DarkBlue" Offset="1" />
				</RadialGradientBrush>
			</Ellipse.Fill>
			<Ellipse.BitmapEffect>
				<OuterGlowBitmapEffect x:Name="GlowEffect" GlowColor="Black" GlowSize="7" />
			</Ellipse.BitmapEffect>
		</Ellipse>

		<!-- Texte du couton (Définit dans le code behind) -->
		<TextBlock x:Name="Texte" FontFamily="Wingdings 3" FontSize="50" Foreground="White" Margin="10,0,0,0" TextAlignment="Center" VerticalAlignment="Center">
			<TextBlock.BitmapEffect>
				<OuterGlowBitmapEffect GlowColor="Black" GlowSize="7" />
			</TextBlock.BitmapEffect>
			<TextBlock.RenderTransform>
				<TranslateTransform x:Name="TranslationBoutonPlay" ></TranslateTransform>
			</TextBlock.RenderTransform>
		</TextBlock>

		<!-- Masque de récupération (transparent) de l'input de la souris -->
		<Ellipse Margin="7" Width="100" Height="100">
			<Ellipse.Fill>
				<SolidColorBrush Color="Transparent"></SolidColorBrush>
			</Ellipse.Fill>

			<!-- Evènements de la souris -->
			<Ellipse.Triggers>
				<EventTrigger RoutedEvent="Ellipse.MouseEnter">
					<BeginStoryboard>
						<Storyboard>
							<ColorAnimation 
							  Storyboard.TargetName="GlowEffect"
							  Storyboard.TargetProperty="GlowColor"
							  To="LightBlue" Duration="0:0:0.2" FillBehavior="HoldEnd" />
						</Storyboard>
					</BeginStoryboard>
				</EventTrigger>
				<EventTrigger RoutedEvent="Ellipse.MouseLeave">
					<BeginStoryboard>
						<Storyboard>
							<ColorAnimation 
							  Storyboard.TargetName="GlowEffect"
							  Storyboard.TargetProperty="GlowColor"
							  To="Black" Duration="0:0:0.2" FillBehavior="Stop" />
						</Storyboard>
					</BeginStoryboard>
				</EventTrigger>
				<EventTrigger RoutedEvent="Ellipse.MouseDown">
					<BeginStoryboard>
						<Storyboard>
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur2"
							  Storyboard.TargetProperty="Color"
							  To="#002BC8" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur3"
							  Storyboard.TargetProperty="Color"
							  To="DarkBlue" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur4"
							  Storyboard.TargetProperty="Color"
							  To="#000011" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<DoubleAnimation
							  Storyboard.TargetName="TranslationBoutonPlay"
							  Storyboard.TargetProperty="X"
							  To="2" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<DoubleAnimation
							  Storyboard.TargetName="TranslationBoutonPlay"
							  Storyboard.TargetProperty="Y"
							  To="2" Duration="0:0:0.08" FillBehavior="HoldEnd" />
						</Storyboard>
					</BeginStoryboard>
				</EventTrigger>
				<EventTrigger RoutedEvent="Ellipse.MouseUp">
					<BeginStoryboard>
						<Storyboard>
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur2"
							  Storyboard.TargetProperty="Color"
							  To="#36AAFC" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur3"
							  Storyboard.TargetProperty="Color"
							  To="#002BC8" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<ColorAnimation 
							  Storyboard.TargetName="FondCouleur4"
							  Storyboard.TargetProperty="Color"
							  To="DarkBlue" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<DoubleAnimation
							  Storyboard.TargetName="TranslationBoutonPlay"
							  Storyboard.TargetProperty="X"
							  To="0" Duration="0:0:0.08" FillBehavior="HoldEnd" />
							<DoubleAnimation
							  Storyboard.TargetName="TranslationBoutonPlay"
							  Storyboard.TargetProperty="Y"
							  To="0" Duration="0:0:0.08" FillBehavior="HoldEnd" />
						</Storyboard>
					</BeginStoryboard>
				</EventTrigger>
			</Ellipse.Triggers>
		</Ellipse>
	</Grid>
</Window>

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de mathmax le 06/02/2007 17:28:37

Très joli ! Comment as tu fait pour définir les effets ? Avec Visual Studio ? Directement dans le code XAML ?
Je suis très intéressé par de tels effets. As-tu un tutoriel sur le XAML/ WPF ?

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 21:51:36

J'ai pas vraiment de tutoriel. J'ai grapillé un peu partout sur la toile pour arriver à ce résultat.
Par contre, je n'ai pas d'éditeur pour faire du xaml, il a fallu que je me palluche tout ça à la main...

signaler à un administrateur
Commentaire de mathmax le 06/02/2007 22:05:16

Il y a une version beta 2 de Blend gratuite. C'est pas mal du tout je trouve. Par contre je suis déçu, ce n'est plus comme avant pour les événements des contrôles : ils ne sont plus accessibles dans le panneau de droite à côté des propriétés comme avant. Je dois passer à côté de quelque chose... On n'est pas obligé d'écrire ça dans le xaml puis à la main dans le code quand même, si ?

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 22:07:26

J'ai essayé Blend, et il me semble avoir vu l'endroit ou se trouvent les évènements, je sais plus trop ou. Mais j'ai un peu de mal avec ce truc...
Enfin je préfère apprendre à faire un peu de xaml à la main au départ, histoire de voir ce que l'on peut tirer de ce truc ;)

signaler à un administrateur
Commentaire de mathmax le 06/02/2007 22:25:04

Ah oui dans Blend en effet. Tu rentres le noms de ta méthodes et ça lance Visual Studio pour afficher le code behind avec la méthode en question. Pas super pratique quand même... J'espère qu'ils vont rassembler tout ça dans Visual Studio Orcas.

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 22:27:45

Ouais, ce serait bien.
A mon avis, s'ils ont mis Visual Studio Express gratuit, c'est aussi pour allécher les gens en leur montrant ce que peut faire le payant. Et parmis les chose qu'il pourrait faire, je vois bien l'éditeur graphique xaml...

A quand un visual studio express avec un éditeur xaml graphique...

signaler à un administrateur
Commentaire de mathmax le 06/02/2007 22:31:46

C'est bizarre que ça soit fait comme ça le XAML. Pourquoi n'ont-ils pas prévus des sortes de feuilles de styles un peu comme les feuille CSS ? Ca aurait permis de rassembler à un endroit dans le code les propriétés qui sont en communs et donc de modifier bien plus facilement le style d'une application.

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 22:38:53

Tu peux le faire en xaml, avec des templates, il me semble.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

effets audio [ par greg_greg ] salut J'aimerai trouver des effets audio (reverbearation, chorus, compression, echo, retard....) programme en C++. je pense que ca doit exister. Si v XAML Parser [ par Lutinore ] Salut, pour le moment je ne comprends pas grand chose au XAML, je voudrais m'affranchir de Visual Studio et surtout de MSBuild, c&#224;d je voudrais p XAML avec VS2005 RTM [ par jesusonline ] Bonsoir, J'ai r&#233;cemment vu des d&#233;mos de XAML (coucou Patrice :-)), puisque je n'ai plus de beta sur mon PC ;-) je cherche donc &#224; instal Effets visuels type Windows Media Player en c# [ par herve_labenere ] Je travaille sur un lecteur MP3,Je souhaite lui ajouter des effets visuels.Idéalement les formes géométriques projetées dépendraient du morceau en cou Tuto Xaml [ par Yxion ] Salut,Je viens de télécharger le .net 3 et tous ce qui va avec, ca marche bien... sauf moi. Je cherche donc si y a quelque chose pour aider moi, un tu Effets sur boutton [ par Fredy35 ] J'aurrai quelques petites questions à vous poser :Je cherche sur un code pour quand je clic sur un boutton cela fait comme si je clic sur un lien pour xaml c# et canvas [ par matmat86 ] Bonjour,je viens de créer un canvas (sousVS 2005 avec le framework 3.0 pour précision) et je lui fournis du texteà l'intérieur. En revanche lorsque le OpenFileDialog xaml [ par matmat86 ] Bonjour,je développe une application web en c#/xaml et je n'ai pas accès à l'objet OpenFileDialog (car je n'ai pas accès à Windows.Forms) donc je voul Class parent dans une frame (class Page) [ par gomoz ] (Mon titre n'est pas très clair, ne vous y fiez pas.)Je voudrais initialiser un délégate depuis une mon XAML parent. Mon XAML parent (simplifié) conti Vidéo en XAML / C# [ par CrazyJoe1 ] Bonjour à tous,Je suis en train de concevoir un programme avec une interface XAML qui doit affichier une liste de vidéo issue d'un fichier RSS (celui


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


HTC G1

Entre 449€ et 449€


Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,484 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.