1.
What’s new in XAML and
Tooling for Windows 8.1?
Fons Sonnemans
@fonssonnemans

2.
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie
in via www.techdaysapp.nl en maak kans op een van de 20
prijzen*. Prijswinnaars worden bekend gemaakt via Twitter
(#TechDaysNL). Gebruik hiervoor de code op uw badge.
Let us know how you feel about this session! Give your
feedback via www.techdaysapp.nl and possibly win one of
the 20 prizes*. Winners will be announced via Twitter
(#TechDaysNL). Use your personal code on your badge.
* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are
examples

3.
Topics
Blend for Visual Studio 2013
Visual Studio 2013
New Project Templates
New Controls
New Control Properties

4.
Fons Sonnemans
•Software Development Consultant
• Programming Languages
• Clipper, Smalltalk, Visual Basic, C#
• Platforms
• Windows Forms, ASP.NET (Web Forms, MVC), XAML
(Silverlight, Windows Phone, Windows 8)
• Databases
• MS SQL Server, Oracle
• Role
• Trainer, Coach, Advisor, Architect, Designer, App Developer
•More info: www.reflectionit.nl

5.
My Apps
Windows 8
Windows Phone
http://reflectionit.nl/apps

6.
Blend for Visual Studio
2013

7.
Device Window

8.
Scale Factors and Effective Resolution
• No more “Snapped” & “Filled” Views
2560 x 1440
1920 x 1080
1366 x 768450 x 800
to scale
384 x 683

9.
Guides

10.
Guides
• Predefined guides
• C:Program Files (x86)Microsoft Visual Studio 12.0BlendGuidesWindows Store

11.
Behaviors

12.
ShowMessageBox Action
public class ShowMessageAction : DependencyObject, IAction {
#region Text Dependency Property
public string Text {
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text",
typeof(string),
typeof(ShowMessageAction),
new PropertyMetadata(string.Empty));
#endregion Text Dependency Property
public object Execute(object sender, object parameter) {
#pragma warning disable 4014
new MessageDialog(this.Text).ShowAsync();
#pragma warning restore
return null;
}
}
Links:
• http://reflectionit.nl/Blog/2013/windows-8-xaml-tips-creating-blend-behaviors
• http://blendbehaviors.net/

13.
Data Window – Sample Data

14.
Visual Studio 2013

15.
Universal Apps Design

16.
Visual Studio 2013
•XAML Code Snippets
• http://xamlsnippets.codeplex.com/
• http://visualstudiocodesnippets.com/
•IntelliSense
• StaticResources
• Path in Binding
•Goto Definition
•Refactoring
• start/endtag

17.
Binding in Windows 8.1
•DataContextChanged Event
•Binding.FallbackValue and
Binding.TargetNullValue properties
•Binding.UpdateSourceTrigger property
• Default, Explicit, PropertyChanged

18.
New Project Templates

19.
New Project Templates
• New Hub Template
• Common Folder
• Removed LayoutAwarePage
• Changed PageStates
• Removed ApplicationViewStates
• Removed StandardStyles.xaml
• Added RelayCommand
• SampleData in Grid App & Split App templates

20.
New Controls

21.
New Controls
DatePicker & TimePicker
SettingsFlyout
Hub & HubSection
MenuFlyout & Flyout
CommandBar & AppBarButtons
ItemsStackPanel & ItemsWrapGrid
SearchBox

22.
DatePicker & TimePicker
<DatePicker Header="Date"
MonthFormat="{}{month.abbreviated}" />
<TimePicker Header="Time"
ClockIdentifier="12HourClock"
Time="2:30:0" />

23.
SettingsFlyout

24.
SettingsFlyout
protected override void OnLaunched(LaunchActivatedEventArgs e){
...
// Ensure the current window is active
Window.Current.Activate();
SettingsPane.GetForCurrentView().CommandsRequested +=
App_CommandsRequested;
}
private SettingsFlyout1 _setting1;
void App_CommandsRequested(SettingsPane sender,
SettingsPaneCommandsRequestedEventArgs args) {
args.Request.ApplicationCommands.Add(new SettingsCommand("setting1",
"Settings", cmd => {
if (_setting1 == null) {
_setting1 = new SettingsFlyout1();
}
_setting1.Show();
}));
}

25.
Hub & HubSection

26.
MenuFlyout
• adsd

27.
MenuFlyout
• Button Click
• Opens Flyout
<Page.Resources>
<MenuFlyout x:Key="FlyoutDemo">
<MenuFlyoutItem Text="Save"
Click="MenuFlyoutSave_Click" />
<MenuFlyoutSeparator />
<ToggleMenuFlyoutItem Text="Highlight"
IsChecked="True" />
</MenuFlyout>
</Page.Resources>
<Grid Background="{ThemeResource AppBarBackgroundThemeBrush}">
<Button Content="Menu" Flyout="{StaticResource FlyoutDemo}" />
</Grid>

28.
Flyout
Edit Flyout or Drag&Drop Flyout control on another control

29.
Flyout
<Page.Resources>
<Flyout x:Key="FlyoutDemo2">
<Grid Width="100">
<TextBox TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" />
</Grid>
</Flyout>
</Page.Resources>
<Grid Background="{ThemeResource AppBarBackgroundThemeBrush}">
<TextBlock Text="Edit Text" FontSize="24"
FlyoutBase.AttachedFlyout="{StaticResource FlyoutDemo2}"
Tapped="TextBlock_Tapped"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
...
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) {
FrameworkElement element = sender as FrameworkElement;
if (element != null) {
FlyoutBase.ShowAttachedFlyout(element);
}
}

30.
CommandBar
• The CommandBar simplifies the creation of basic app bars by providing:
• Automatic layout of commands, with primary commands on the right and secondary commands on the left.
• Automatic resizing of app bar commands when the app size changes.
• When you need an app bar that contains only AppBarButton,AppBarToggleButton , and
AppBarSeparator controls, use this new CommandBar. If you need more complex content, such as
images, progress bars, or text blocks, use an AppBar control.
• By default, items you add to the CommandBar are added to the PrimaryCommands collection. These
commands are shown on the right side of the CommandBar. You can also add commands to the
SecondaryCommands collection, and these items are shown on the left side.
• The app bar button controls come in two sizes: normal and compact. By default, they have a text
label and full padding. When the IsCompact property is set to true, the text label is hidden and the
padding around the buttons is reduced. The AppBarSeparator also has a compact state in which the
padding is reduced. When you use these controls in the new CommandBar control, it sets their
IsCompact property automatically when there's not enough space to show them at full size.

31.
CommandBar

32.
AppBarButtons
• Windows 8.1 introduces new controls for XAML that let you
more easily create app bar command buttons that reflect the
proper design guidelines and behaviors: the AppBarButton,
AppBarToggleButton, and AppBarSeparator controls.
• App bar buttons differ from standard buttons in several ways:
• Their default appearance is a circle instead of a rectangle.
• You use the Label and Icon properties to set the content instead of the
Content property. The Content property is ignored.
• The button's IsCompact property controls its size.

33.
AppBarButtons
• FontIcon
• The icon is based on a
glyph from the specified
font family.
• BitmapIcon
• The icon is based on a
bitmap image file with the
specified Uri.
• PathIcon
• The icon is based on
Path data.
• SymbolIcon
• The icon is based on a
predefined list of glyphs
from the Segoe UI
Symbol font.

34.
AppBarButtons Links
• Images & Paths (Vectors)
• http://modernuiicons.com
• http://thenounproject.com
• http://www.thexamlproject.com
• http://www.syncfusion.com/downloads/metrostudio
• Symbols
• http://msdn.microsoft.com/en-
us/library/windows/apps/jj841126.aspx
• http://www.geekchamp.com/icon-explorer/introduction
• http://www.fontello.com/
• http://fontastic.me

35.
SearchBox
• SearchBox allows applications to search within the
application, not just by using the Search charm.
• You can only use either the SearchBox OR the charm
<SearchBox Height="32"
Width="200"
FocusOnKeyboardInput="True"
QuerySubmitted="SearchBox_QuerySubmitted" />

36.
ItemsStackPanel & ItemsWrapGrid
•Use ItemsStackPanel or ItemsWrapGrid to get
item virtualization. The framework automatically
does this for all apps that use the default
ItemsPanel.

37.
UI virtualization
• http://channel9.msdn.com/Events/Build/2013/3-158

38.
8.1

39.
8.0

40.
GridViewItemPresenter
Windows 8
Windows 8.1
All apps that use default item container visuals start up to 26% faster when running on
Windows 8.1

41.
Windows 8.1 - GridViewItem Style
<Style x:Key="GridViewItemStyle1"
TargetType="GridViewItem">
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="True" />
<Setter Property="Margin"
Value="0,0,2,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
ContentMargin="4"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
PointerOverBackgroundMargin="1"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
42
lines of
code

42.
Windows 8.0 - GridViewItem Style
<Style x:Key="GridViewItemStyle1"
TargetType="GridViewItem">
<Setter Property="FontFamily"
Value="{StaticResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{StaticResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="True" />
<Setter Property="Margin"
Value="0,0,2,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PointerOverBorder" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectionBackground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource
ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
513
lines of
code

43.
New Control Properties

44.
ListViewBase.ShowsScrollingPlaceholders
Placeholders increase perceived performance
<GridView
ShowsScrollingPlaceholders="true">

45.
TextBox, PasswordBox, ComboBox
• PlaceholderText
• Header
• SelectionHighlightColor
• Paste event
<TextBox Text="Fons Sonnemans"
PlaceholderText="enter your name"
Header="Full name"
SelectionHighlightColor="LightGray" />

46.
MaxLines property
• Applies to TextBlock, RichTextBlock, and
RichTextBlockOverflow controls
• This property lets you specify the maximum number of lines of
text shown in a text block. The text control will adjust its height
to show no more than the specified number of lines, regardless
of the font size, font style, or text length.

47.
TextBlock properties
• TextWrapping: WrapHoleWords
• TextTrimming

48.
TextBlock properties
• OpticalMarginAlignment
• TextLineBounds
• http://blogs.windows.com/windows/b/appbuilder/archive/2013/11/11/xaml-
text-improvements-in-windows-8-1.aspx

49.
Multi Color Fonts
<TextBlock HorizontalAlignment="Left"
Text="&#x1F305; &#x1F306; &#x1F307;"
FontSize="64"
FontFamily="Segoe UI Emoji" />

50.
Hyperlink in RichTextBlock
<Grid Height="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" /><ColumnDefinition Width="2*" /><ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<RichTextBlock Grid.Column="0"
OverflowContentTarget="{Binding ElementName=firstOverflowContainer}"
Margin="20,0">
<Paragraph>
Lorem ipsum
<Hyperlink NavigateUri="http://www.reflectionit.nl">Hyperlink is new in 8.1</Hyperlink>
dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris.
</Paragraph>
<Paragraph>
<LineBreak />
<InlineUIContainer>
<Image Source="http://www.reflectionit.nl/images/demo.jpg" Stretch="None" />
</InlineUIContainer>
<Run Text="Donec pharetra, enim sit amet mattis tincidunt, vel porta diam nisi ..." />

51.
RequestedTheme
<StackPanel VerticalAlignment="Center"
HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" />
<Button Content="Button2" />
<ToggleSwitch Header="Demo" />
</StackPanel>
<StackPanel Orientation="Horizontal"
RequestedTheme="Light"
Background="{ThemeResource
ApplicationPageBackgroundThemeBrush}">
<Button Content="Button1" />
<Button Content="Button2" />
<ToggleSwitch Header="Demo" />
</StackPanel>
</StackPanel>

52.
Dynamic themes
• In Windows 8, the light and dark themes for high contrast are loaded when the app starts. But if the user
changed the theme while the app was running, the XAML theme system couldn't detect this and the themes
wouldn't change in the app.
• In Windows 8.1, the XAML theme system can detect run-time theme changes and will reload resources. The
shared default resources for XAML controls do this automatically in Windows 8.1 Preview. To enable this
behavior in a custom template that you define yourself, reference the theme-specific resource using the new
ThemeResource markup extension. Any resource you define differently on a per-theme basis is then defined
in multiple resource dictionaries, one per theme. These resource dictionaries are merged into the overall set
of XAML-defined resources for an app and the correct dictionary is loaded dynamically when the system
detects a theme change, even if it happens while the app is running.
private void ButtonDark_Click(object sender, RoutedEventArgs e) {
this.RequestedTheme = ElementTheme.Dark;
}
private void ButtonLight_Click(object sender, RoutedEventArgs e) {
this.RequestedTheme = ElementTheme.Light;
}

53.
StaticResource
<Style TargetType="Button">
<Setter Property="Background"
Value="{StaticResource ButtonBackgroundThemeBrush}" />
<Setter Property="Foreground"
Value="{StaticResource ButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{StaticResource ButtonBorderThemeBrush}" />
<Setter Property="BorderThickness"
Value="{StaticResource ButtonBorderThemeThickness}" />
...

54.
ThemeResource
<Style TargetType="Button">
<Setter Property="Background"
Value="{ThemeResource ButtonBackgroundThemeBrush}" />
<Setter Property="Foreground"
Value="{ThemeResource ButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource ButtonBorderThemeBrush}" />
<Setter Property="BorderThickness"
Value="{ThemeResource ButtonBorderThemeThickness}" />
...

55.
ScrollViewer Frozen Areas
ScrollViewer control's Header
properties (TopLeftHeader,
TopHeader and LeftHeader), allow
defining "frozen" areas that contain
content participating in layout. The
contents in these headers either do
not scroll at all or scroll in one
direction in tandem with the primary
content of the ScrollViewer.

56.
FlipView.UseTouchAnimationsForAllNavigation
• Windows 8.1 adds the new
UseTouchAnimationsForAllNavigation property to the
FlipView control to enable a consistent user experience for all
navigation modes. When you set this property to true, the
same animation occurs whether the navigation is touch-based,
button-based, or programmatic.

57.
Frame (Navigation) improvements
• Control the navigation stacks.
• You can now programmatically add, remove or update page entries from your
navigation history.
• The Frame control now has two new properties:
• BackStack: gives you a List<PageStackEntry> object that represents the list of
pages you visited and you can go back to.
• ForwardStack: gives you a List<PageStackEntry> object that represents the
list of pages you have visited before going back.
• The PageStackEntry element exposes the following properties:
• SourcePageType: the type of the source page
• Parameter: the parameter passed to this page
• NavigationTransitionInfo: the transition associated with the navigation entry

58.
MediaElement
• AreTransportControlsEnabled
<MediaElement Source="http://www.reflectionit.nl/demo.mp4"
AreTransportControlsEnabled="True" />
• Full-screen API
• Better performance for media/XAML interactions
• Custom experiences built on media APIs

59.
WebView improvements
• Seamless integration into XAML
• Don’t needt to use the WebViewBrush
• Navigation control
• Event lifecycle
• Rendering local content via URI
• Increased security via app content URIs in manifest

60.
Links
• Controls (XAML with C# or C++)
• http://msdn.microsoft.com/en-
us/library/windows/apps/bg182878.aspx
• XAML Editor Improvements in Visual Studio 2013
• http://blogs.msdn.com/b/visualstudio/archive/2013/08/09/xaml-
editor-improvements-in-visual-studio-2013.aspx
• What's New in XAML
• http://channel9.msdn.com/Events/Build/2013/2-164
• What's New in Visual Studio & Blend for
XAML Developers
• http://channel9.msdn.com/Events/Build/2013/3-321

61.
@fonssonnemans
fons.sonnemans@reflectionit.nl
fonssonnemans
reflectionit.nl/blog

62.
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie
in via www.techdaysapp.nl en maak kans op een van de 20
prijzen*. Prijswinnaars worden bekend gemaakt via Twitter
(#TechDaysNL). Gebruik hiervoor de code op uw badge.
Let us know how you feel about this session! Give your
feedback via www.techdaysapp.nl and possibly win one of
the 20 prizes*. Winners will be announced via Twitter
(#TechDaysNL). Use your personal code on your badge.
* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are
examples

63.
Related sessions 16-4
Slot Title Speaker
07:45 Using native code in your Windows and Windows Phone Applications Maarten Struys
07:45 Bluetooth and NFC phone to phone communication Rob Miles
10:50 What is new in XAML and tooling in Windows 8.1 Fons Sonnemans
10:50 Tiles, Notificaties en het Actiecentrum in Windows Phone 8.1 apps Rajen Kishna
10:50 Sites and Apps, hoe maak ik ze accessible Dennis Vroegop & Jeroen Hulscher
13:15 Windows and Windows Phone – Build Apps for Both Mike Taulty
13:15 Optimizing Windows Store apps for varying form factors, resolutions and viewstates Tom Verhoeff
14:50 Talking to hardware with Windows Phone Rob Miles
14:50 Crossplatform development using Mapping data and features Joost van Schaik
16:20 Building Windows Store and Windows Phone XAML apps Harikrishna Ajithkumar Menon
16:20 Lap Around Windows Phone 8.1 voor de enterprise developer Matthijs Hoekstra
16:20 Making money with Apps Fons Sonnemans
16:20 Van één app honderd apps maken? Tom Droste
16:20 Lap around Windows Phone 8.1: Introduction to the new developer platform Andy Wigley
17:45 App Analytics voor Windows Phone en Windows Store Mark Monster
17:45 Je hebt een app. Nu alleen nog verkopen! Dennis Vroegop

64.
Related sessions 17-4
Slot Title Speaker
07:45 Modern Apps for the Enterprise Dennis Mulder
09:15 Diagnosing performance issues in Xaml based Windows Phone and Windows Store Apps with Visual
Studio 2013
Harikrishna Ajithkumar Menon
09:15 Designing XAML Apps using blend for Visual Studio 2013 Fons Sonnemans
09:15 Building Windows Store apps for Windows Phone 8.1 Andy Wigley
09:15 Jouw apps op alle schermen en resoluties Martin Tirion
09:15 Combineer Windows, Windows Phone en SharePoint apps voor succesvolle enterprise oplossingen Dave Smits
10:50 Hergebruik van JavaScriptkennis bij het bouwen van Windows Store apps Timmy Kokke
10:50 Making the most from Windows Phone App Studio Tom Verhoeff
13:15 Creating games for Windows 8 and Windows Phone 8 with monogame Rob Miles
13:15 A Lap Around the PRISM Framework for Windows 8 Store Apps Mike Taulty
14:50 Bouwen en distribueren van je Enterprise apps voor Windows Phone 8.1 Matthijs Hoekstra
14:50 Zoeken in Windows en in jouw app Martin Tirion
14:50 Succesvol Enterprise apps aanbieden via de Windows en Office Store Dave Smits
16:20 Networking, Mobile Services and Authentication on Windows Phone 8.1 Andy Wigley
16:20 TypeScript en Windows Store apps Timmy Kokke