Mobile Dev Day 2013

10. November 2013 15:13 by Renaud in Events  //  Tags: , , , , , ,   //   Comments (0)

Première édition du Mobile Dev Day

Le 12 décembre prochain aura lieu un événement sans précédant en Belgique: une journée consacrée entièrement au développement et aux technologies mobiles. Bien sûr, ce n'est pas la première fois qu'on parle de mobile en Belgique, mais cette fois-ci il s'agit d'une journée consacrée principalement aux technologies Microsoft et, qui plus est, en français!

Le site web est en ligne depuis quelques jours: http://www.mobiledevday.be

Un évènement pour les développeurs, par des développeurs

D'où est née l'idée d'organiser cet évènement? L'histoire a commencé avec la Windows Phone Week...

Pour ceux qui n'en auraient pas entendu parler, la Windows Phone Week est une initiative menée par tous les MVP (Most Valuable Professional) Windows Phone du monde et qui consiste à organiser localement des évènements dédiés à cette discipline.

Pas de chance pour nous les Belges, il n'y a pas de MVP Windows Phone parmi nous, ce qui signifie donc pas d'évènement. À moins... qu'un membre de la communauté décide qu'il y a là quelque chose à faire.

Et c'est ainsi que Olivier Matis (www.guruumeditation.net/), MVP C# et Nokia Developer Champion, m'a contacté pour me parler de sa frustration (que je partageais évidemment). La suite s'est enchaînée très rapidement. Il fallait constituer une team pour organiser cet évènement, et nous avons contacté deux membres actifs de la communauté Microsoft en Belgique: Kévin Rapaille - Software Engineer chez RealDolmen et blogueur - et Matthieu Vandenhende - développeur chez Agilys, blogueur et MVP Client Development.

Un programme avec uniquement des têtes d'affiches

Bon alors c'est sûr, on aurait pu se démerder nous même et vous pondre quelques sessions plus ou moins intéressantes. Mais on a voulu faire quelque chose de grand. Et pour ça, on est allé vous chercher de véritables rockstar. Des speakers venus de France et de Belgique. Des développeurs exceptionnels et des employés Microsoft avec des vrais morceaux de Microsoft à l'intérieur.

C'est un peu comme si vous alliez assister à un Techdays, mais en comité réduit, en séance VIP!

En dehors des sessions, vous aurez évidemment la possibilité de discuter et boire un verre avec tous ces gens, ainsi qu'avec tous les autres passionnés qui seront présents ce jour-là.

Inscriptions ouvertes et limitées

Malheureusement, nous ne pouvons pas accueillir des milliers de personnes comme aux Techdays. La comparaison s'arrête là :) Je vous invite donc à vous inscrire assez rapidement. Bloquez votre 12 décembre, et venez passer une super journée avec la communauté Microsoft Belux. L'entrée est bien évidemment gratuite ;)

Pour avoir toutes les informations, rendez-vous sur le site officiel : http://www.mobiledevday.be

Sponsors

Et enfin il faut le signaler, un évènement de cette taille nécessite des moyens, et nous ne pourrions pas y arriver sans l'aider de nos sponsors principaux que sont:

Planning de la rentrée 2013-2014

Trainings gratuits au Microsoft Innovation Center de Mons

Plein de nouvelles formations planifiées au MIC pour la rentrée, avec des sessions sur Windows Phone et Windows 8 en C#/XAML et en JavaScript/HTML5! Toutes ces formations sont évidemment gratuites, en français, et ouvertes à tous!

Create your Windows 8 app in HTML5

How different is Windows 8? What is the rush to build apps for the Windows 8 platform and why are developer communities reacting differently to Windows 8?  This Windows Store App course introduces HTML5, CSS3, and JavaScript and helps you learn HTML5/CSS3/JavaScript programming skills. This course is an entry point into both the Web application and Windows Store apps.

 18 septembre, 5 novembre, 10 janvier

 

The Ins & Outs of Windows Phone 8 apps

The ins & outs of Windows Phone 8 is a hands on introduction to building apps for Windows Phone. We’ll guide you through the unique aspects of the Windows Phone platform and you’ll have the chance to build on your knowledge immediately! Your app at the end of the day!

 30 septembre, 12 novembre, 20 janvier

 

Making your first Windows 8 app

This workshop is a free and fun training from developers, for developers. Expertise is offered in a fun, low key, interactive way and you’ll have the chance to test and experiment with your new knowledge!

 16 octobre, 9 décembre, 12 février

 

Make your app run into the Cloud 

Et pour étendre les capacités de vos apps et lier tout ça avec le cloud, sachez qu'une session Cloud & Windows Azure est également prévue et sera donnée par Nick Trogh, Developer and Platform Evangelist chez Microsoft BELUX.

In this workshop, we’ll teach you how to add a cloud backend to your app. Free, fun, no-fluff, you will learn how to add a cloud-based backend service to a Windows Store app using Windows Azure Mobile Services. And you’ll have the chance to test and experiment with your new knowledge!

 11 décembre

 

Encore plus de sessions

Je donnerai également des formations au MIC Brussels (voir leur agenda) sur les mêmes sujets, mais probablement en anglais cette fois (cela dépendra de l'audience :)).

Relive TechDays Belgium 2013 online: videos and slides available!

22. March 2013 10:03 by Renaud in Events, Windows 8, Windows Phone  //  Tags: , ,   //   Comments (0)

TechDays

2 weeks ago we closed the Microsoft TechDays 2013 in Antwerp. Close to 2900 IT Professionals, Developers and Students enjoyed 90 sessions with top content led by a broad selection of international and local top speakers. A special THANK YOU goes to our partners, our MVP’s and MEET (Microsoft Extended Experts Team) members and of course, all our enthusiastic attendees! What’s next? The session videos and slides are now available on www.techdays.be! (Re)live the sessions and take the next steps to truly master the technologies. Warm up with a selection from our Technical Evanglists Arlindo Alves and Katrien De Graeve:

Arlindo’s Top Selection Katrien’s Top Selection
Hackers (Not) Halted with Paula Januszkiewicz Become a Windows 8 and Windows Phone App Developer at TechDays with Ben Riga
Moving from Device Centric to a User Centric Management with Corey Hynes Bigger, Faster, Stronger: Optimizing ASP.NET 4 and 4.5 Applications with Mads Kristensen
Windows 8 Client: Part 1 "The OS internals for IT-Pro's" and Part 2 "The Application internals for IT-Pro's" with Tom Decaluwé Behind the scenes of (as many) C# language features with Bart De Smet

Enjoy! The TechDays Team Questions? Connect with us on Twitter, Facebook or simply via e-mail.

Développez votre app Windows début 2013 !

1. December 2012 15:12 by Renaud in Events, Windows 8, Windows Azure, Windows Phone  //  Tags: , ,   //   Comments (0)
Article original sur le blog du MIC.

Vous avez une idée d'application en tête depuis quelques temps et vous aimeriez la réaliser ? Ou bien vous êtes simplement curieux et avez envie d'apprendre les dernières technologies Microsoft ? A partir de janvier 2013, le MIC Belgique organise des labs (gratuits !) tournant autour du développement d'applications mobiles connectées au cloud. Le but est d'arriver à réaliser un projet de bout en bout qui soit disponible sur Windows 8 (tablette/pc) et/ou Windows Phone 8 (smartphone), tout en étant relié au cloud de Windows Azure.

Deux niveaux de sessions sont proposés pour répondre à vos besoins de manière adaptée, et vous permettre d'évoluer. Il y aura d'abord des sessions Discovery pour apprendre les bases. Et pour ceux qui veulent aller plus loin, nous continuerons avec des sessions Advanced présentant les aspects plus complexes ! Toutes ces formations sont gratuites, et destinées à une audience de développeurs .NET. Vous pouvez librement vous inscrire à une ou plusieurs sessions. Pas la peine toutefois de vous inscrire à deux sessions Discovery pour une même techno : il s'agira de la même formation ! Voici l'agenda complet : Discovery #1 :

15/01/13 Windows 8
22/01/13 Windows Phone 8
29/01/13 Azure Mobile

Discovery #2 :

30/01/13 Windows 8
05/02/13 Windows Phone 8
12/02/13 Azure Mobile

 Advanced :  /! Ces sessions sont destinées à des développeurs déjà expérimentés!

13/02/13 Windows 8
19 & 20/02/13 Windows Azure
22/02/13 Windows Phone 8        

Rendez-vous très prochainement au MIC ! ;)

Windows Phone 8 Development

25. November 2012 14:11 by Renaud in Windows Phone  //  Tags:   //   Comments (0)

Voici mes quelques notes prises lors de la session Windows Phone 8 Application Development donnée par Maarten Struys (@mstruys) lors du Windows App Day. On y évoque quelques nouveautés liées au développement sous Windows Phone 8.

Tuiles et templates

Avec Windows Phone 8, de nouvelles tuiles sont apparues. Pour faire simple, on a désormais le choix entre :

  • Flip : Les tuiles que l'on connait déjà depuis Windows Phone 7. Avec une face avant et une face arrière et qui se retourne sur elle-même.
  • Iconic : Une nouvelle tuile qui respecte le design Windows Phone. Elle permet de mettre l'accent sur un compteur.
  • Cycle : Cette dernière tuile permet de boucler parmi 9 images différentes.

Allez lire la doc détaillée pour voir des exemples de bonnes et mauvaises utilisations des différents types de tuiles.

Lock screen

Les applications peuvent maintenant s'enregistrer pour enrichir l'écran de verrouillage. Elles peuvent modifier le background lui-même, comme le fait par exemple l'application Bing qui propose chaque jour un nouveau background, ou afficher des notifications. Il y a désormais deux types de notifications :

  • Les statuts détaillés : affiche le texte de la tuile principale de l'application.
  • Les statuts rapides : affiche une icône plus un compteur si celui-ci est implémenté dans la tuile principale de l'application. Ce deuxième type de notification rappelle les badges disponibles sur Windows 8.

Shared Windows Core

En effet, Windows Phone 8 se rapproche plus de Windows 8 que de Windows Phone 7 dans le sens où les deux OS partagent quelques composants bas niveaux. L'ensemble des librairies Windows Phone 8 (appelées WinPRT dans les slides, pour Windows Phone RunTime) consiste en fait en un subset de WinRT auquel ont été ajoutés quelques composants spécifiques au téléphone. Le tout est donc écrit à la base en C++, avec des projections en C#/VB.NET, aussi à la manière de WinRT. Par contre il n'y a pas pour le moment de projections HTML5/JavaScript. Il y a bien un template d'application HTML/JS disponible avec Visual Studio 2012, mais il s'agit d'une application écrite en code managée et qui embarque un WebBrowser et du contenu HTML/JS. Mais cela ne permet pas d'appeler des librairies natives en JavaScript comme on peut le faire pour Windows 8. Si l'on compte développer une application à la fois sur Windows Phone 8 et Windows 8, il serait donc conseillé, d'un point de vue API, de commencer par l'application phone, et la migrer ensuite vers Windows 8 puisque la quasi-totalité du code pourra être réutilisé. Par contre, d'un point de vue UX & Design, il faut clairement faire la différence entre les deux OS. L'interface devra probablement être entièrement repensée. Parmi les APIs spécifiques à Windows Phone 8, on retrouve par exemple ce qui concerne la synthèse et la reconnaissance vocale. Cela fonctionne de la même manière que la reconnaissance vocale avec le SDK Kinect. Il n'est malheureusement pas possible pour le moment d'utiliser la reconnaissance vocale sans donner des "suggestions", comme par exemple ce que permet de faire le téléphone pour rédiger des SMS.

Les outils : VS 2012 + Blend

L'émulateur Windows Phone a bien été amélioré. Il permet de tester quasiment toutes les fonctionnalités du téléphone.

  • Simuler le type de connexion réseau (4G, 3G, WiFi, ...) et la force du signal (fort, faible, ...)
  • Jouer avec l'accéléromètre
  • Modifier la géolocalisation
  • Tester les différentes résolutions d'écran

Malheureusement, ça ne passera plus auprès de votre chef si vous demandez un téléphone de chaque résolution, juste pour pouvoir tester votre app. Il vous dira simplement d'utiliser l'émulateur. Mais comme Maarten le précisait, il reste nécessaire de tester son application sur un vrai téléphone pour au moins deux raisons :

  • Pouvoir tester avec des performances réelles (l'émulateur ne peut pas reproduire les performances du téléphone)
  • Apprécier la véritable expérience utilisateur. Voir comment vos interfaces réagissent au touch.

Quoi d'autre ?

Voilà en bref le contenu de la session de Maarten Struys. C'était une bonne introduction, même si évidemment ça ne couvre qu'une toute petite partie des nouveautés de Windows Phone 8. J'imagine qu'on peut s'attendre à en voir davantage au TechDays 2013 ! En attendant, on organise des trainings Discovery : Windows Phone 8 au MIC Belgique le 22 janvier 2013 et le 05 février 2013 pour apprendre les bases de la programmation Windows Phone ! :)

[Windows 8 / XAML] Customize the FlipView style

22. September 2012 15:20 by Renaud in Windows 8  //  Tags: , , ,   //   Comments (0)

During an Excellence Lab that I recently passed for a Windows 8 app, the Microsoft Expert told me it would be better to modify my FlipView to make sur the previous/next arrows don't override the content. The only thing I had to do for solving the problem, was to move the arrows upper. Then, a colleague ask me how to modify the color of those arrows... so I decided to write a post :) I can imagine that my colleague looked for a property such as "NavigationTemplate" or whatever, because that's how it works usually when you want to modify how some part of a control look like. For example, for the ItemTemplate property... But in this case, the buttons are directly part of the FlipView template itself ! To realize it, we will simply use Blend !

Create a simple project, using a FlipView and open it in Blend. Then, edit a "copy" of the template of your FlipView :

Edit a copy of the template

Looking at the XAML, you can see that Blend generated a Style element for the FlipView. It contains everything the the FlipView needs to look how it uses to, including the Visual States. Here is the complete default flipview style:

      <Style x:Key="FlipViewStyle1" TargetType="FlipView">
        	<Setter Property="Background" Value="Transparent"/>
        	<Setter Property="BorderThickness" Value="0"/>
        	<Setter Property="TabNavigation" Value="Once"/>
        	<Setter Property="IsTabStop" Value="False"/>
        	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
        	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
        	<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
        	<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
        	<Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="True"/>
        	<Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True"/>
        	<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        	<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
        	<Setter Property="ItemsPanel">
        		<Setter.Value>
        			<ItemsPanelTemplate>
        				<VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal"/>
        			</ItemsPanelTemplate>
        		</Setter.Value>
        	</Setter>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="FlipView">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Focused">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
        									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Unfocused"/>
        							<VisualState x:Name="PointerFocused"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
        						<Border.Resources>
        							<ControlTemplate x:Key="HorizontalNextTemplate" TargetType="Button">
        								<Border x:Name="Root" BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}" BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}" Background="{StaticResource FlipViewButtonBackgroundThemeBrush}">
        									<VisualStateManager.VisualStateGroups>
        										<VisualStateGroup x:Name="CommonStates">
        											<VisualState x:Name="Normal"/>
        											<VisualState x:Name="PointerOver">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        											<VisualState x:Name="Pressed">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        										</VisualStateGroup>
        									</VisualStateManager.VisualStateGroups>
        									<Path x:Name="Arrow" Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06 z" Fill="{StaticResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="10.94" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.67"/>
        								</Border>
        							</ControlTemplate>
        							<ControlTemplate x:Key="HorizontalPreviousTemplate" TargetType="Button">
        								<Border x:Name="Root" BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}" BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}" Background="{StaticResource FlipViewButtonBackgroundThemeBrush}">
        									<VisualStateManager.VisualStateGroups>
        										<VisualStateGroup x:Name="CommonStates">
        											<VisualState x:Name="Normal"/>
        											<VisualState x:Name="PointerOver">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        											<VisualState x:Name="Pressed">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        										</VisualStateGroup>
        									</VisualStateManager.VisualStateGroups>
        									<Path x:Name="Arrow" Data="M5.55,0 L9.67,0.06 L4.12,5.47 L9.67,10.88 L5.55,10.94 L0,5.48 z" Fill="{StaticResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="10.94" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.67"/>
        								</Border>
        							</ControlTemplate>
        							<ControlTemplate x:Key="VerticalNextTemplate" TargetType="Button">
        								<Border x:Name="Root" BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}" BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}" Background="{StaticResource FlipViewButtonBackgroundThemeBrush}">
        									<VisualStateManager.VisualStateGroups>
        										<VisualStateGroup x:Name="CommonStates">
        											<VisualState x:Name="Normal"/>
        											<VisualState x:Name="PointerOver">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        											<VisualState x:Name="Pressed">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        										</VisualStateGroup>
        									</VisualStateManager.VisualStateGroups>
        									<Path x:Name="Arrow" Data="M0.06,0 L5.47,5.56 L10.88,0 L10.94,4.12 L5.48,9.67 L0,4.12 z" Fill="{StaticResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
        								</Border>
        							</ControlTemplate>
        							<ControlTemplate x:Key="VerticalPreviousTemplate" TargetType="Button">
        								<Border x:Name="Root" BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}" BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}" Background="{StaticResource FlipViewButtonBackgroundThemeBrush}">
        									<VisualStateManager.VisualStateGroups>
        										<VisualStateGroup x:Name="CommonStates">
        											<VisualState x:Name="Normal"/>
        											<VisualState x:Name="PointerOver">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        											<VisualState x:Name="Pressed">
        												<Storyboard>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        													<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
        														<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}"/>
        													</ObjectAnimationUsingKeyFrames>
        												</Storyboard>
        											</VisualState>
        										</VisualStateGroup>
        									</VisualStateManager.VisualStateGroups>
        									<Path x:Name="Arrow" Data="M5.63,0 L11.11,5.55 L11.05,9.67 L5.64,4.12 L0.23,9.67 L0.17,5.55 z" Fill="{StaticResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
        								</Border>
        							</ControlTemplate>
        						</Border.Resources>
        						<Grid>
        							<ScrollViewer x:Name="ScrollingHost" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled">
        								<ItemsPresenter/>
        							</ScrollViewer>
        							<Button x:Name="PreviousButtonHorizontal" HorizontalAlignment="Left" Height="40" IsTabStop="False" Template="{StaticResource HorizontalPreviousTemplate}" VerticalAlignment="Center" Width="70"/>
        							<Button x:Name="NextButtonHorizontal" HorizontalAlignment="Right" Height="40" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" VerticalAlignment="Center" Width="70"/>
        							<Button x:Name="PreviousButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalPreviousTemplate}" VerticalAlignment="Top" Width="70"/>
        							<Button x:Name="NextButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalNextTemplate}" VerticalAlignment="Bottom" Width="70"/>
        						</Grid>
        					</Border>
        					<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
        					<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

In this style, you can find :

  •  4 buttons: two for the horizontal flip, and two for the vertical flip.
    • PreviousButtonHorizontal
    • NextButtonHorizontal
    • PreviousButtonVertical
    • NextButtonVertical
  • 4 ControlTemplate : one for each button
    • HorizontalNextTemplate
    • HorizontalPreviousTemplate
    • VerticalNextTemplate
    • VerticalPreviousTemplate

Then, you just have to play with the XAML to achieve what you want to :) Once again, you can appreciate my incredible talent and good taste, that would make the most skilled designer jealous !

Upper navigation with colors and text"

You can download the sample here :

TextBox

About the author

I'm a developer, blog writer, and author, mainly focused on Microsoft technologies (but not only Smile). I'm Microsoft MVP Client Development since July 2013.

Microsoft Certified Professional

I'm currently working as an IT Evangelist with an awesome team at the Microsoft Innovation Center Belgique, where I spend time and energy helping people to develop their projects. I also give training to enthusiastic developers and organize afterworks with the help of the Belgian community.

MIC Belgique

Take a look at my first book (french only): Développez en HTML 5 pour Windows 8

Développez en HTML5 pour Windows 8

Membre de l'association Fier d'être développeur

TextBox

Month List