Accueil > Silverlight, Silverlight 3 > [SL3] : 3D projection, Behaviors, PixelShaders

[SL3] : 3D projection, Behaviors, PixelShaders

Petit post pour vous faire découvrir quelques nouveautés de la version 3 de Silverlight. 

La dernière version de Silverlight propose une mine de petits contrôles et outils de programmation qui permettent de faciliter la vie du développeur ! 

Effects

DropShadowEffect

Applique une ombre aux contrôles

DropShadowEffect

<Border BorderBrush="#FF90A4FE"
			BorderThickness="4"
			Background="White">
		<Border.Effect>
			<BlurEffect />
		</Border.Effect>
		<TextBlock TextWrapping="Wrap"
				   Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed..."
				   Margin="2" />
	</Border>

BlurEffect

Applique un effet de blur à vos contrôles

BlurEffect

<Border BorderBrush="#FF90A4FE"
			BorderThickness="4"
			Background="White">
		<Border.Effect>
			<DropShadowEffect Opacity="0.6" />
		</Border.Effect>
		<TextBlock TextWrapping="Wrap"
				   Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed..."
				   Margin="2" />
	</Border>

3D Projection

Vous permet d’effectuer des rotation à vos contrôles

PlaneProjection

<Border BorderBrush="#FF90A4FE"
			BorderThickness="4"
			Background="White">
		<Border.Projection>
			<PlaneProjection RotationX="-39" RotationY="-21"/>
		</Border.Projection>
		<TextBlock TextWrapping="Wrap"
				   Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed..."
				   Margin="2" />
	</Border>

Behaviors

DragBehavior

Ce behavior vous permet de déplacer votre controle sans aucune ligne de code !

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
	xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
	x:Class="SilverlightApplication7.MainPage"
	>

	<Grid x:Name="LayoutRoot" Background="#FFDFDFDF">
		<Border Width="300" BorderBrush="#FF90A4FE" BorderThickness="4" Background="White" Height="110">
			<Border.Effect>
				<DropShadowEffect Opacity="0.6"/>
			</Border.Effect>
			<i:Interaction.Behaviors>
				<il:MouseDragElementBehavior/>
			</i:Interaction.Behaviors>
			<TextBlock TextWrapping="Wrap" Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed..." Margin="2"/>
		</Border>
	</Grid>
</UserControl>

ControlStoryboardAction

StoryBoardActionBehavior

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
	xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
	xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
	x:Class="SilverlightApplication7.MainPage"
	>

	<UserControl.Resources>
		<Storyboard x:Name="StoryboardTest">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="360">
					<EasingDoubleKeyFrame.EasingFunction>
						<PowerEase EasingMode="EaseInOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
				<EasingDoubleKeyFrame KeyTime="00:00:02" Value="0">
					<EasingDoubleKeyFrame.EasingFunction>
						<BackEase EasingMode="EaseInOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="#FFDFDFDF">
		<Border x:Name="border" Width="300" BorderBrush="#FF90A4FE" BorderThickness="4" Background="White" Height="110">
			<Border.Effect>
				<DropShadowEffect Opacity="0.6"/>
			</Border.Effect>
			<i:Interaction.Behaviors>
				<il:MouseDragElementBehavior/>
			</i:Interaction.Behaviors>
			<Border.Projection>
				<PlaneProjection/>
			</Border.Projection>
			<TextBlock TextWrapping="Wrap" Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed..." Margin="2"/>
		</Border>
		<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Margin="10,10,0,0">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<im:ControlStoryboardAction Storyboard="{StaticResource StoryboardTest}"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>
	</Grid>
</UserControl>

Exemple complet

Bien entendu cette liste n’est pas complète mais vous montre clairement la puissance de ces nouveau concepts d’autant plus que nous pouvons créer nos propres effets  (nous y reviendrons dessus).

Maintenant que vous avez un apercu de ce que nous pouvons faire voici une application complete de présentation de ces principaux concepts : 

3dbehaviourapp


<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
			 xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
			 xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
			 x:Class="SilverlightApplication6.MainPage">

	<UserControl.Resources>
		<Storyboard x:Name="RotateStoryboard">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
										   Storyboard.TargetName="RotateRoot"
										   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
				<EasingDoubleKeyFrame KeyTime="00:00:02"
									  Value="1080" />
				<EasingDoubleKeyFrame KeyTime="00:00:04"
									  Value="0">
					<EasingDoubleKeyFrame.EasingFunction>
						<ElasticEase EasingMode="EaseInOut" />
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot"
		  Background="#FFF1F1F1">

		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition />
		</Grid.RowDefinitions>
		<StackPanel Orientation="Vertical">

			<TextBlock Text="X"
					   TextWrapping="Wrap"
					   Margin="5,0,0,0"
					   FontWeight="Bold" />

			<Slider VerticalAlignment="Top"
					Maximum="1080"
					Minimum="-1080"
					Value="{Binding RotationX, ElementName=Projection, Mode=TwoWay}"
					Margin="0" />
			<TextBlock Text="Y"
					   TextWrapping="Wrap"
					   Margin="5,0,0,0"
					   FontWeight="Bold" />
			<Slider VerticalAlignment="Top"
					Maximum="1080"
					Minimum="-1080"
					Value="{Binding RotationY, ElementName=Projection, Mode=TwoWay}"
					Margin="0" />
			<TextBlock Text="Z"
					   TextWrapping="Wrap"
					   Margin="5,0,0,0"
					   FontWeight="Bold" />
			<Slider VerticalAlignment="Top"
					Maximum="1080"
					Minimum="-1080"
					Value="{Binding RotationZ, ElementName=Projection, Mode=TwoWay}"
					Margin="0" />
			<TextBlock Text="Zoom"
					   TextWrapping="Wrap"
					   Margin="5,0,0,0"
					   FontWeight="Bold" />
			<Slider VerticalAlignment="Top"
					Maximum="5"
					Minimum="0"
					Value="1"
					Margin="0"
					ValueChanged="Slider_ValueChanged" />
			<Button HorizontalAlignment="Left"
					Margin="0"
					Content="Animation !">
				<i:Interaction.Triggers>
					<i:EventTrigger EventName="Click">
						<im:ControlStoryboardAction Storyboard="{StaticResource RotateStoryboard}" />
					</i:EventTrigger>
				</i:Interaction.Triggers>
			</Button>
		</StackPanel>
		<Rectangle StrokeThickness="0"
				   Height="5"
				   Grid.Row="1">
			<Rectangle.Fill>
				<LinearGradientBrush EndPoint="0.5,1"
									 StartPoint="0.5,0">
					<GradientStop Color="#26000000"
								  Offset="0" />
					<GradientStop Offset="0.862" />
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>
		<Grid x:Name="RotateRoot"
			  HorizontalAlignment="Center"
			  VerticalAlignment="Center"
			  Background="#00FF0000"
			  Grid.Row="2"
			  RenderTransformOrigin="0.5,0.5">
			<Grid.Projection>
				<PlaneProjection x:Name="Projection"
								 RotationX="0"
								 RotationZ="0"
								 RotationY="0" />
			</Grid.Projection>
			<i:Interaction.Behaviors>
				<il:MouseDragElementBehavior />
			</i:Interaction.Behaviors>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition />
			</Grid.RowDefinitions>

			<Grid.RenderTransform>
				<TransformGroup>
					<ScaleTransform x:Name="RotateRootScaleTransform" />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Grid.RenderTransform>

			<TextBlock HorizontalAlignment="Center"
					   Margin="0,0,0,10"
					   VerticalAlignment="Top"
					   Text="Fais moi tourner !"
					   TextWrapping="Wrap" />
			<Border HorizontalAlignment="Center"
					VerticalAlignment="Center"
					Width="150"
					Background="White"
					BorderBrush="White"
					BorderThickness="5"
					Grid.Row="1">
				<Border.Effect>
					<DropShadowEffect Opacity="0.6"
									  ShadowDepth="0" />
				</Border.Effect>
				<StackPanel>
					<Image Source="SilverlightLogo.png" />
					<TextBlock Text="Un petit texte"
							   TextWrapping="Wrap"
							   Margin="0,10,0,0" />
					<Button Content="Button"
							Margin="0,10,0,0" />
					<TextBox Text="TextBox"
							 TextWrapping="Wrap"
							 Margin="0,10,0,0" />

				</StackPanel>
			</Border>
		</Grid>
	</Grid>
</UserControl>

Ainsi que son code behind : 


using System.Windows.Controls;

namespace SilverlightApplication6
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
		}

		private void Slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
		{
			if(RotateRootScaleTransform != null)
			{
			RotateRootScaleTransform.ScaleX= e.NewValue;
			RotateRootScaleTransform.ScaleY= e.NewValue;
			}
		}
	}
}

Code source complet de l’application ProjectionBehaviorEffects.zip

Publicités
Catégories :Silverlight, Silverlight 3
  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :