One of the new features of WPF 4 is the presence of easing functions. Already available with Silverlight 3, these functions allow you to play with acceleration or deceleration on your animations. The following sample illustrates how to add elastic behavior on image size animation.
<Image x:Name="MyImage" Source="Desert.jpg" Width="100" Height="100" Stretch="UniformToFill">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="Width"
From="100" To="200" Duration="0:0:1" >
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="Height"
From="100" To="200" Duration="0:0:1" >
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
An easing function applies formula to obtain an acceleration or deceleration effect. A “mode” option allows you to set when to apply the formula: at the beginning (EaseIn), at the end (EaseOut) or both (EaseInOut).
For our sample, the following graph demonstrates the different values of EasingMode, where f(t) represents the animation progress and t represents time (msdn source).
By default, WPF 4 contains the following functions:
- BackEase
- BounceEase
- CircleEase
- CubicEase
- ElasticEase
- ExponentialEase
- ExponentialEase
- PowerEase
- QuadraticEase
- QuarticEase
- QuinticEase
- SineEase
For more information about easing functions: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.easingmode(VS.100).aspx
The source code is available here:
Une des nouveautés de WPF 4 est la présence des « easing functions ». Déjà présentes avec Silverlight 3, ces fonctions permettent de jouer sur les effets d’accélération de vos animations. L’exemple ci-dessous permet, par exemple, d’ajouter un effet élastique lors de l’agrandissement d’une image :
<Image x:Name="MyImage" Source="Desert.jpg" Width="100" Height="100" Stretch="UniformToFill">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="Width"
From="100" To="200" Duration="0:0:1" >
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="Height"
From="100" To="200" Duration="0:0:1" >
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Une « easing function » applique une formule afin d’obtenir un effet d’accélération ou de décélération. Un mode permet de spécifier à quel moment est appliquée la formule : au début (EaseIn), à la fin (EaseOut) ou les deux (EaseInOut).
Pour notre exemple, voici les courbes correspondantes avec f(t) qui représente la progression de l’animation et t le temps (source msdn).
Voici la liste des fonctions disponibles:
- BackEase
- BounceEase
- CircleEase
- CubicEase
- ElasticEase
- ExponentialEase
- ExponentialEase
- PowerEase
- QuadraticEase
- QuarticEase
- QuinticEase
- SineEase
Pour plus d’informations sur ces fonctions : http://msdn.microsoft.com/en-us/library/system.windows.media.animation.easingmode(VS.100).aspx
Le code source est dispo ici :
En cette rentrée, deux événements s’organisent autour des technologies RIA et RCA de Microsoft :
24 septembre – Have You Seen the light : Soirée communautaire avec des conférences sur Silverlight 3, Expression 3, Jeux, concours, Cockatail … Pour l’inscription, c’est ici : http://communaute-fbnews.eventbrite.com/
1er Octobre - Industrialisation des développements N-tiers avec WPF et Silverlight : Conférence sur les nouvelles briques de développements .net (RIA Services, Prism). Pour plus d’info sur ce sujet, le poste de Mitsu, speaker à cet événement : http://blogs.msdn.com/mitsufu/archive/2009/09/04/mdd-industrialisation-des-d-veloppements-n-tiers-avec-wpf-et-silverlight.aspx et le lien direct vers la page d’inscription : http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032425797&Culture=fr-FR
Avec MonoTouch, vous pouvez maintenant développer et exécuter vos applications .net sur IPhone ou sur IPod Touch. MonoTouch est une version spécifique de Mono (http://www.mono-project.com/Main_Page) pour ces périphériques. Pour plus d’information : http://monotouch.net/
Sachez qu’il est également possible de développer des applications .net sur Windows Mobile avec le .net compact Framework (http://msdn.microsoft.com/en-us/windowsmobile/bb264329.aspx) et vous pouvez publier vos applications sur le marché Windows Mobile (http://developer.windowsmobile.com/). Pour plus d’information sur le développement Windows Mobile, suivez le blog de Pierre : http://blogs.msdn.com/pierreca/
With MonoTouch, you can now develop and run your .net applications on IPhone and IPod Touch. MonoTouch is a specific version of Mono (http://www.mono-project.com/Main_Page) for these devices. For more information: http://monotouch.net/
Know that you can develop .net application on windows Mobile with the .net Compact framework (http://msdn.microsoft.com/en-us/windowsmobile/bb264329.aspx) and store your application on the Windows Mobile Market Place (http://developer.windowsmobile.com/).
Windows 7 and Windows Server 2008 R2 are RTM !!! You can watch the RTM announcement by Steven Sinofsky during the Microsoft Global Exchange event on the following video:
Windows 7 Sneak-Peak from MGX
Cet article, coécrit avec Luc VoVan (http://blogs.msdn.com/luc), présente différentes solutions liées aux problèmes de partage de ressources et de code source entre une application WPF et Silverlight.
N’hésitez pas à donner votre avis sur cet article ou partager votre retour d’expérience.
Lien direct pour le télécharger :
WPF and Silverlight are both XAML based platforms but there are some important functionality and implementation differences between the two. A guidance about these differences was posted on codeplex here: http://wpfslguidance.codeplex.com/
[English]
During your WPF development with Visual Studio 2008 SP1, you may encounter the following error: the IDE stops responding and you receive a message in the notification area: "Microsoft Visual Studio is Busy".
In this case, know that a Fix has just been release on this link: http://support.microsoft.com/kb/963035/en-us
[Français]
Au cours de vos développements WPF dans Visual Studio 2008 SP1, il est possible que lorsque vous ouvrez un fichier XAML en mode « designer », l'IDE cesse de répondre et un message se trouve dans la zone de notification: «Microsoft Visual Studio est occupé».
Si vous avez déjà rencontré ce problème, sachez qu’un correctif vient juste de sortir à l’adresse suivante : http://support.microsoft.com/kb/963035/fr
[English]
Microsoft Expression WEB SuperPreview is a stand-alone application which shows your web pages rendered in Internet Explorer.
This tool is very useful to identify differences in layout depending of the web browser: From a web site, SuperPreview can highlight on conflicts html tags.
For more information, see the team blog post: http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx
Direct link to download: http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe
[Français]
Microsoft Expression WEB SuperPreview est une application cliente qui va permettre d’afficher votre site web sous les différents moteurs d’Internet Exploreur.
Cet outil est très pratique pour identifier rapidement les différences de rendu en fonction du navigateur : A partir d’un site web, SuperPreview surligne les tags html qui sont sources de conflits.
Actuellement en version beta, il sera intégré dans la prochaine version de Microsoft Expression Web et pourra gérer les navigateurs web les plus populaires.
Pour plus d’informations, le blog de l’équipe expression : http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx
Le lien pour télécharger la béta : http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe
The Silverlight 3 SDK has just been released. It contains online documentation, online samples, libraries and tools for developing Silverlight 3 applications. You can dowload it from here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=d09b6ecf-9a45-4d99-b752-2a330a937bc4
[English]
The version 2 of prism (just been released) supports now Silverlight 2. The previous version of this guidance was targeted at WPF. With this new release, Patterns & practices team provide recommendation about building composite applications in WPF or Silverlight or applications that target both WPF and Silverlight with a shared code base. The guidance includes a reference implementation, reusable library code (named the Composite Application Library), and documentation.
For more information: http://msdn.microsoft.com/en-us/library/dd458809.aspx
On Chanel 9, Blaine Wastell provides a quick overview and demonstrates a Silverlight and WPF application using shared code: http://channel9.msdn.com/shows/Continuum/Prismv2/
[Français]
La version 2 de prism supporte maintenant Silverlight 2. La précédente version de ce guide ciblait essentiellement WPF. Avec cette nouvelle version, les équipes de patterns & practices nous donnent des recommandations sur la création d’applications composites utilisant la technologie WPF ou Silverlight ou les deux avec un partage du code source.
Ce guide inclut des exemples d’implémentations, des librairies ainsi que des tutoriaux et une documentation.
Pour plus d’information : http://msdn.microsoft.com/en-us/library/dd458809.aspx
Sur Channel 9, Blaine Wastell présente un rapide aperçu sur la mise en place d’une application WPF et Silverlight avec un partage de code: http://channel9.msdn.com/shows/Continuum/Prismv2/
[English]
OutSync is a great tool that syncs photos of your Facebook friends with matching contacts in Microsoft Outlook. It allows you to select which contacts are updated. So you can update all contacts at once or just a few at a time.
OutSync is written by Mel Sampat, a Program Manager in the Windows Mobile team at Microsoft. This is a personal project and not supported or endorsed by Microsoft
For more information and to download this tool: http://www.melsam.com/outsync/default.aspx
[Français]
OutSync est un outil assez sympa qui permet de synchroniser les photos de vos amis Facebook qui correspondent à vos contacts Outlook. Il est possible de sélectionner les contacts qui seront mis à jour ou tout simplement de tout sélectionner d’un coup.
OutSync a été développé par Mel Sampat, chef de projet dans les équipes Windows mobile chez Microsoft. Il s’agit d’un projet personnel non supporté par Microsoft.
Pour plus d’informations ou pour télécharger l’application : http://www.melsam.com/outsync/default.aspx
[English]
Infragitics, one of the leaders of UI controls, share their knowledge with a new Silverlight application which explores several User Experience patterns. Even if you have never used patterns, these information are very interesting and could be useful when you will have to design and to implement UI behaviors.
http://quince.infragistics.com/
[Français]
Infragistics, un des leaders dans le domaine des composants UI, partage leurs connaissances avec une application Silverlight qui explore de nombreux patterns sur l’expérience utilisateur. Même si vous n’avez jamais utilisé de patterns, ces informations sont très intéressantes et pourront être utiles quand vous aurez à designer et implémenter le comportement de vos interfaces graphiques.
http://quince.infragistics.com/
[English]
Media Center uses the engine for internet explorer within Windows Media Center's own browser window and use MSHTML to host html applications. What does it mean? Well that’s a great news for Silverlight developersJ. We can develop Silverlight application which will be accessible through windows media center.
You will have to develop a javascript wrapper to access to media center object. This object will allow you to manage and control functionalities of your Media Center.
Once you have developed your Silverlight application, you just have to reference it in Media Center.
Create a text file with .mcl extension, edit it with notepad and copy it to media center programs folder (C:\Users\{yourname or media center extender name}\AppData\Roaming\Media Center Programs):
<application
Title = "mceTestSilver.mcl"
id = "{7A88E155-4940-4c33-89EB-EA224A0A3B5C}"
url = "http://localhost/smooth/Source720p24-1minute.html"
/>
The url parameter references the path of your silverlight application. The title will allow you to find your application in your media center program library. The id is required and can be generated with “Create Guid” tool.
Start Windows Media Center and navigate to Online Media / program library
You can reference non specific media center Silverlight application. But be careful, using application through Media Center brings accessibility constraints that you shouldn’t forget. Your application will be able to be viewed on TV and controlled through remote control. You could find more info about it in the section “Managing Focus and navigation” of the SDK.
[Français]
Windows Media center utilise le moteur d’internet explorer 7 au sein de sa fenêtre de navigation et utilise MSHTML pour héberger les applications html. Qu’est ce que cela signifie ? Que c’est une super nouvelle pour les développeurs Silverlight J On va pouvoir développer des applications Silverlight qui seront accessibles via Media Center.
Vous aurez à développer un « Wrapper » javascript pour accéder à un objet Media Center. Cet objet vous permettra de gérer et contrôler les différentes fonctionnalités de votre media center.
Une fois votre application Silverlight développée, il ne vous reste plus qu’a la référencer au sein de votre media center.
Créez un fichier texte avec l’extension .mcl, éditez le avec le blocnote et copiez le dans le répertoire des programmes media center (C:\Users\{votre login ou celui de votre extender media center}\AppData\Roaming\Media Center Programs):
<application
Title = "mceTestSilver.mcl"
id = "{7A88E155-4940-4c33-89EB-EA224A0A3B5C}"
url = "http://localhost/smooth/Source720p24-1minute.html"
/>
Le paramètre « url » référence le chemin qui permet d’accéder à votre application Silverlight. Le paramètre « title » va permettre d’identifier votre application dans votre bibliothèque de programme Media center. Enfin, le paramètre « id » est requis et peut être généré à l’aide de l’outil « Create Guid » de Visual Studio.
Démarrer Windows Media Center et naviguer jusqu’au menu Online Media / program library
Vous pouvez référencer des applications Silverlight qui ne sont pas spécifiques au Media Center. Cependant, faites attention, utiliser une application à travers Media Center implique des contraintes d’accessibilité qu’il ne faut pas oublier. Votre application devra être capable d’être visionné sur une TV et contrôlé à l’aide d’une télécommande. Vous trouverez plus d’informations à ce sujet dans la section « Managing Focus and navigation » du SDK.
