begin process at 2012 02 11 05:52:52
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

WPF

 > QUELQUES EFFETS EN XAML

QUELQUES EFFETS EN XAML


 Information sur la source

Note :
Aucune note
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é :16 546 / 854

Auteur : yoannd

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture Source .NET (Dotnet) PIXEL SHADER - CRÉATION, UTILISATION, ET BINDING
Source avec Zip Source avec une capture Source .NET (Dotnet) CRÉATION ET ENVOI DE FICHIERS ZIPPÉS
Source avec Zip Source avec une capture Source .NET (Dotnet) LES RÉFÉRENCES FAIBLES
Source avec Zip Source .NET (Dotnet) EXTENSION DES LISTES GÉNÉRIQUES (DESIGN PATTERN "DECORATEUR"...
Source avec Zip Source avec une capture Source .NET (Dotnet) UN PEU DE 3D AVEC XAML ET BLENDER

 Sources de la même categorie

Source avec Zip OUTIL DE VISUALISATION DE L'INDICE BOURSIER par ajkangoud
Source avec Zip Source avec une capture Source .NET (Dotnet) [WPF] RICH TEXT FORMAT par MasterShadows
Source avec Zip Source .NET (Dotnet) [WPF] GÉNÉRATEUR DE DOCUMENT XPS MULTIPAGES. par MasterShadows
Source avec Zip Source avec une capture Source .NET (Dotnet) WPF MESSAGE BOX ET WPF FOLDER SELECTOR par MasterShadows
Source avec Zip Source avec une capture Source .NET (Dotnet) EXPLORATEUR DE REGISTRE WINDOWS par thebestdrummer

 Sources en rapport avec celle ci

Source avec Zip Source .NET (Dotnet) CODE SOURCE DE L'ARTICLE "WPF : 10 BONNES RAISONS DE CHOISIR... par odahan
Source avec Zip Source avec une capture Source .NET (Dotnet) TETRIS WPF par max12
Source avec Zip Source avec une capture Source .NET (Dotnet) CUBE-IT: PETIT JEU EN WPF par Bidou
Source avec Zip Source .NET (Dotnet) CALCULETTE (OPÉRATEURS : +, -, X ET :) EN SILVERLIGHT par xXTitouffXx
Source avec Zip Source avec une capture Source .NET (Dotnet) PETITE PENDULE EN XAML par yoannd

Commentaires et avis

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 ?

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...

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 ?

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 ;)

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.

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...

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.

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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 6,006 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales