Quelques effets en xaml

Soyez le premier à donner votre avis sur cette source.

Vue 20 128 fois - Téléchargée 1 166 fois

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
305
Date d'inscription
lundi 7 janvier 2002
Statut
Membre
Dernière intervention
10 août 2011
5
Tu peux le faire en xaml, avec des templates, il me semble.
Messages postés
403
Date d'inscription
vendredi 28 octobre 2005
Statut
Membre
Dernière intervention
31 août 2008

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.
Messages postés
305
Date d'inscription
lundi 7 janvier 2002
Statut
Membre
Dernière intervention
10 août 2011
5
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...
Messages postés
403
Date d'inscription
vendredi 28 octobre 2005
Statut
Membre
Dernière intervention
31 août 2008

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.
Messages postés
305
Date d'inscription
lundi 7 janvier 2002
Statut
Membre
Dernière intervention
10 août 2011
5
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 ;)
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.