Quelques effets en xaml

Télécharger le projet
Commenter

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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_yoannd)