What’s new in XAML and

Tooling for Windows 8.1?

Fons Sonnemans

@fonssonnemans

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

Topics

Blend for Visual Studio 2013

Visual Studio 2013

New Project Templates

New Controls

New Control Properties

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

My Apps

Windows 8

Windows Phone

http://reflectionit.nl/apps

Blend for Visual Studio

2013

Device Window

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

Guides

Guides

• Predefined guides• C:\Program Files (x86)\Microsoft Visual Studio 12.0\Blend\Guides\Windows Store

Behaviors

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/

Data Window – Sample Data

Visual Studio 2013

Universal Apps Design

Visual Studio 2013

•XAML Code Snippets• http://xamlsnippets.codeplex.com/• http://visualstudiocodesnippets.com/

• IntelliSense• StaticResources• Path in Binding

•Goto Definition

•Refactoring• start/endtag

Binding in Windows 8.1

•DataContextChanged Event

•Binding.FallbackValue and

Binding.TargetNullValue properties

•Binding.UpdateSourceTrigger property• Default, Explicit, PropertyChanged

New Project Templates

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

New Controls

New ControlsDatePicker & TimePicker

SettingsFlyout

Hub & HubSection

MenuFlyout & Flyout

CommandBar & AppBarButtons

ItemsStackPanel & ItemsWrapGrid

SearchBox

DatePicker & TimePicker

<DatePicker Header="Date"

MonthFormat="{}{month.abbreviated}" />

<TimePicker Header="Time"

ClockIdentifier="12HourClock"

Time="2:30:0" />

SettingsFlyout

SettingsFlyout

protected override void OnLaunched(LaunchActivatedEventArgs e){...// Ensure the current window is activeWindow.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();

}));}

Hub & HubSection

MenuFlyout

• adsd

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>

FlyoutEdit Flyout or Drag&Drop Flyout control on another control

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

}

}

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.

CommandBar

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.

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.

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

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

ItemsStackPanel & ItemsWrapGrid

•Use ItemsStackPanel or ItemsWrapGrid to get

item virtualization. The framework automatically

does this for all apps that use the default

ItemsPanel.

UI virtualization

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

8.1

8.0

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

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

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="{StaticResourceListViewItemSelectedPointerOverBackgroundThemeBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"

513 lines of

code

New Control Properties

ListViewBase.ShowsScrollingPlaceholdersPlaceholders increase perceived performance

<GridViewShowsScrollingPlaceholders="true">

TextBox, PasswordBox, ComboBox

• PlaceholderText

• Header

• SelectionHighlightColor

• Paste event

<TextBox Text="Fons Sonnemans"PlaceholderText="enter your name"Header="Full name"SelectionHighlightColor="LightGray" />

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.

TextBlock properties

• TextWrapping: WrapHoleWords

• TextTrimming

TextBlock properties

• OpticalMarginAlignment

• TextLineBounds

• http://blogs.windows.com/windows/b/appbuilder/archive/2013/11/11/xaml-

text-improvements-in-windows-8-1.aspx

Multi Color Fonts<TextBlock HorizontalAlignment="Left"

Text="&#x1F305; &#x1F306; &#x1F307;"

FontSize="64"

FontFamily="Segoe UI Emoji" />

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 ..." />

</Paragraph>

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>

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;

}

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}" />

...

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}" />

...

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.

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.

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

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

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

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

@fonssonnemans

fons.sonnemans@reflectionit.nl

fonssonnemans

reflectionit.nl/blog

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

Related sessions 16-4Slot 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

Related sessions 17-4Slot 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