begin process at 2008 05 16 23:36:04
1 173 851 membres
655 nouveaux aujourd'hui
13 973 membres club

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é: 7 390 / 530

Note :
Aucune note

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


Description

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

  • 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

effets audio par greg_greg

XAML Parser par Lutinore

XAML avec VS2005 RTM par jesusonline

Effets visuels type Windows Media Player en c# par herve_labenere

Tuto Xaml par Yxion

Effets sur boutton par Fredy35

xaml c# et canvas par matmat86

OpenFileDialog xaml par matmat86

Class parent dans une frame (class Page) par gomoz

Vidéo en XAML / C# par CrazyJoe1

Appels d'offres

Pub



CalendriCode

Mai 2008
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Téléchargements

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

Boutique

Boutique de goodies CodeS-SourceS