[Windows 8 / XAML] Modifier le style d'un FlipView

22. September 2012 19:09 by Renaud in Windows 8  //  Tags: , , ,   //   Comments (7)

Lors d'un Excellence Lab passé récemment, on m'a conseillé de modifier légèrement mon FlipView de sorte que les flèches de navigation vers les items suivants ou précédents ne se superposent pas au contenu. Il suffisait donc de légèrement ré-hausser les flèches pour régler ce problème. Un collègue m'a également posé une question pour savoir comment modifier la couleur de ces flèches, pour répondre à la demande d'un client. J'imagine que la personne a cherché après une propriété "NavigationTemplate", ou quelque chose du genre, un peu comme on retrouve un ItemTemplate En fait, les boutons de navigation font directement partie du template du FlipView. Pour s'en rendre compte, il suffit d'utiliser Blend !

En créant un projet simple, contenant un FlipView et en l'ouvrant dans Blend, il est possible d'éditer une "copie" du template actuel:

Éditer une copie du template

Si on regarde ensuite le XAML, on peut voir que Blend a généré un Style représentant le FlipView, avec tous les Visual States nécessaires pour faire le FlipView tel qu'on le connait. Voici le code complet :

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

Dans ce style, on retrouve:

  •  4 boutons : deux pour le flip horizontal, et deux pour le flip vertical.
    • PreviousButtonHorizontal
    • NextButtonHorizontal
    • PreviousButtonVertical
    • NextButtonVertical
  • 4 ControlTemplate : un pour chaque bouton
    • HorizontalNextTemplate
    • HorizontalPreviousTemplate
    • VerticalNextTemplate
    • VerticalPreviousTemplate

Vous n'avez plus qu'à jouer sur ce XAML pour arriver à ce que vous voulez :) Encore une fois, vous allez pouvoir apprécier mes talents et mon bon goût digne des graphistes les plus skillés !

Navigation ré-haussée avec du texte

 

Vous pouvez télécharger ce sample ici:

 

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

28th September 2012 :the next Windows 8 appathon in Zaventem

19. September 2012 15:26 by Renaud in   //  Tags:   //   Comments (0)

October 26 is getting closer and closer … is your Windows 8 app ready? You’re invited to the last app-a-thon before Windows 8 hits the market. Join us at our offices in Zaventem on September 28!

Team up with your best UX or developer friend to build a killer team, come alone, sign up with a group, whatever you want! Hands on. Code. Build. Shine. Totally Metro. Totally Windows 8.

When? 28 September 2012 Where? Microsoft Belgium Leonardo Da Vincilaan 3 1935 Zaventem

There will be 2 coding sessions, 1 for Day Birds from 10am – 4pm and one for Night Owls from 6pm – 12am. You can join us for one or both sessions. Build an app, have fun and go home with a fantastic prize!

Xbox 360 + Kinect

 

Deluxe App’ero Bongo Box

Professional Sharp Knife Set

Seats are limited so don’t lose a sec and SIGN UP NOW! All technical pre-requisites and resources are available on the registration page.

No app idea yet? No problem! We have a bucket full of ideas and scenarios you can use right away to kick start your project!

Questions about UX & design? Don’t worry, we’ve got that covered. You’ll be able to talk to a Windows 8 UX Expert (will be there for 4 hours) and a designer (will be there the entire day!) to help out with logo’s, graphic design, etc.

Looking forward to enjoy this day and/or night with you!

Le prochain App-a-thon Windows 8 c'est le 28 Septembre à Zaventem !

19. September 2012 11:09 by Renaud in   //  Tags:   //   Comments (0)

Deux jours après l'App'ero Windows 8 se tiendra un app-a-thon aux bureaux de Microsoft à Zaventem. Si vous n'en pouvez plus d'attendre la sortie de Windows 8, ou que vous souhaitez terminer votre app pour la sortie officielle, inscrivez-vous à cet événement !

On s'approche petit à petit du 26 Octobre, date de sortie officielle de Windows 8. Votre app est-elle prête ? Dans tous les cas, vous êtes invités au dernier app-a-thon (avant la sortie de Windows 8 du moins ;)). Rejoignez Microsoft dans leurs bureaux de Zaventem le 28 Septembre.

Faites équipe avec un ami designer ou développeur pour former une équipe de killer, ou venez seul et rencontrez des gens sur place. Faites comme bon vous semble ! Mais venez plonger les mains dans le code, pour développer votre propre application !

Quand? 28 Septembre 2012 Où? Microsoft Belgium Leonardo Da Vincilaan 3 1935 Zaventem

Il y aura 2 sessions de code, une pour les développeurs diurnes de 10h à 16h, et l'autre pour les noctambules de 18h à minuit!  Vous pouvez nous rejoindre pour l'un ou l'autre, ou les deux ! Développez, amusez-vous et rentrez chez vous avec un prix :)

Xbox 360 + Kinect

 

Deluxe App’ero Bongo Box

Professional Sharp Knife Set

Les places sont limitées donc ne perdez pas une secondes et SIGN UP NOW! Toutes les infos techniques, ressources nécessaires, sont dispos sur la page d'inscription.

Pas encore d'idée d'app? Pas de problème, des personnes sur place auront des tonnes d'idée et de scénarios que vous pourrez utiliser pour démarrer immédiatement !

Des questions UX ou design? Ne vous inquiétez pas, vous aurez la possibilité de parler à un expert Windows 8 UX (présents durant 4h) et un designer (présent toute la journée !) qui pourra vous aideravec vos logos, votre interface graphique, etc...

En espérant vous y voir ;)

Startup Weekend à Mons et Liège : 20 inscriptions offertes par le MIC pour les développeurs .NET !

15. September 2012 12:09 by Renaud in   //  Tags:   //   Comments (0)

Les prochains Startup Weekend en Belgique auront lieu à Mons le weekend du 19 octobre, et à Liège le weekend du 9 novembre.

Un Startup Weekend, pour les développeurs, c'est le défi de former/rejoindre une équipe pour donner vie à un projet en à peine 54 heures. Un projet qui ait du sens, avec un réel potentiel. Si vous vous rappelez cet article racontant mon weekend au premier Bemyapp belge, vous avez alors une idée de ce dont il s'agit. On met sur le tapis des idées, et on forme des équipes polyvalentes, faites de designers, de développeurs, et d'autres talents. Le Startup Weekend, en quelques chiffres, c'est « le plus gros incubateur de projets innovants au monde : plus de 580 événements, 90 pays, 300 villes, 56 000 participants, plus de 800 entreprises créées ».

 

S'inscrire pour Mons S'inscrire pour Liège

Personnellement je serai présent au moins à celui de Mons, et pourquoi pas à celui de Liège si mon emploi du temps le permet :) Vous aurez remarqué que l'inscription est payante (75€ pour les devs, et 60€ en early bid). Mais la super bonne nouvelle, c'est que le MIC de Mons va généreusement offrir l'inscription à 10 20 développeurs .NET prêts à relever le défi ! (10 places pour Mons, et 10 places pour Liège.) La seule condition, c'est d'être développeur .NET, et de s'engager à participer à tout le weekend. Bah oui, sinon on vous l'offre pour rien et ça empêche quelqu'un d'autre d'en profiter... Le nombre de place est assez limité, mais si ça vous intéresse, que vous êtes prêts à écrire des tas de lignes de code, et que vous êtes sûr de pouvoir venir, envoyez-moi un mail à renaud at mic-belgique.be, et je m'occuperai de votre inscription! Premiers arrivés, premiers servis !

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