what’s new in xaml and tooling for windows 8.1
DESCRIPTION
In deze sessie krijg je een overzicht van de nieuwe XAML mogelijkheden en tools voor het ontwikkelen van Windows 8.1 Store apps. Je leert de nieuwe mogelijkheden van Blend zoals Guides, Behaviors en SampleData. In Visual Studio leer je Code Snippets, IntelliSense en Refactoring gebruiken. Tot slot worden de nieuwe controls en de nieuwe mogelijkheden van bestaande controls getoond. In deze sessie zitten veel demo’s waarmee je sneller mooiere Windows 8.1 apps kunt ontwikkelen met behulp van XAML.TRANSCRIPT
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
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="🌅 🌆 🌇"
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
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