Visual Studio 2013
제대로파헤쳐보기!
11월의주제
Developing Modern Windows 8.1
Store App
-한국마이크로소프트기술에반젤리스트김영욱부장http://www.facebook.com/thewarofit
Rich, integrated search
driven by Bing
Personalized start
and lock screens
New live tile sizes,
including large
Live tile on install
Apps share the screen Deep SkyDrive
integration
APIs PDF Rendering
Text to Speech
Improved Web Authentication and Account management
Fingerprint reader support
HID, USB and BT class drivers allow many new peripherals to connect to Windows apps
Point of Service (terminals, bar code readers)
3D Printing
Scanning
Direct2D dramatically faster and richer
HTTP API with control over caching, cookies, and more
Many more
Standards WebGL
MPEG-DASH
W3C Encrypted Media Extension allows standardized encrypted media playback
W3C Media Source Extension
WebCrypto
W3C Pointer events allows standardized touch, pen and mouse support across platforms
Enhanced controlsNew Hub control to make it easy to create a great first-screen experience
Webview controls make integration of web-based resources easier and more powerful
Faster and richer versions of popular GridView and ListView controls
Improved StoreApps auto-update by default
New support for gift cards, consumables, and large catalogs
Faster app downloads through intelligent resource downloading
모든가격대에서만나보는터치스크린
8” Windows tablets
가벼워지고얇아지지만오래가는배터리
배터리사용시간은기본 8시간?
점점더고해상도
LTE, 3G…. 등통신기능기본탑재
http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-
keywords=windows+8.1+tablet&rh=i%3Aaps%2Ck%3Awindows+8.1+tablet
User interface
Fundamentals
Devices Graphics and media Communications and data Services
Geo-location
Proximity
Direct3D Direct2D Direct Write
PlayTo
Contracts
Bing
Azure Mobile
HTML5/CSS XAMLInput Controls
Authentication
Portable
Sensors Playback Capture
Printing
SVGCanvas
Local storage
SMS
StreamsBackground
transfer
Syndication Networking
XML and JSON
Skydrive
Live tiles and toast
Accessibility Data binding
Application services
Threading/timersMemory
managementGlobalization Cryptography
Xbox Live
Updated
User interface
Fundamentals
Devices Graphics and media Communications and data Services
Geo-location
Proximity
Direct3D Direct2D Direct Write
PlayTo
Contracts
Bing
Azure Mobile
HTML5/CSS XAMLInput Controls
Authentication
Bluetooth
USB
HID WiFi direct
Point of service
3Dprinting
Scanning
WebGL
HTTP
Contacts
Appoint-ments
Speech synthesis
Diagnostics
Portable
Sensors Playback Capture
Printing
SVGCanvas
Local storage
SMS
StreamsBackground
transfer
Syndication Networking
XML and JSON
Skydrive
Live tiles and toast
Accessibility Data binding
Application services
Threading/timersMemory
managementGlobalization Cryptography
Xbox Live
UpdatedNew
Windows 8.1You can develop for both Windows 8 and Windows 8.1 on Windows 8.1
A free Microsoft accountPaid accounts required only for submission to the Windows Store
Visual Studio 2013Use the full-featured paid editions, or build great apps using the free edition for Windows Store development.
Develop in JavaScript, VB, C#, or C++.
XAML with C#, VB and C++ makes the best use of your wealth of desktop, server, and phone development knowledge to enable you to build compelling Windows Store apps.
C++
Windows 8.1 subsystem
Windows Store app using XAML (C++, C#, VB)
AppTheme &
PVLDirect3D
Direct-
WriteDirect2D Media Input
Windows Runtime / XAML
DirectX
XAML
Devices & Entry Points Services
Bing As A Platform
Maps
Bing Maps Platform offers a set of
APIs to incorporate the latest maps,
imagery and location services in your
application.
Speech
Get Bing Speech capabilities
integrated with your Windows Phone
and Windows Store apps.
OCR
The Bing Optical Character
Recognition (OCR) Control detects
printed text from images captured by
the device camera.
Translator
The Bing Translator Control and
Microsoft Translator API receive text
and deliver automatic machine
translation into a specified language.
Ads SDK
Whether you’re developing in HTML
or XAML, the Microsoft Advertising
SDK has made it easy to insert ads
into your Windows 8 and Windows
8.1 apps.
Search API
The Bing Search API enables
developers to embed search results
in applications.
Bing As A Platform: Developer Resources
Windows 8.1 developer training
XAML UI Controls
FrameworkElement
TextBlock
RichTextBlock
Control
ContentControl
Border
ButtonBase
Button
ToggleButton
CheckBox
RadioButton
ProgressRing
RangeBase ProgressBar
TextBox,
PasswordBox
RichEditBox
Image
Shape Rectangle, Ellipse
TextBlock
TextBlock
FontSize="40" FontWeight="Bold" FontStyle="Italic"
FontFamily="Times New Roman"
TextBlock
TextTrimming="WordEllipsis"
TextBlock
Typography.Fraction="Slashed"
TextBlock
Typography.StylisticSet4="True"
TextBlock
Typography.StylisticSet5="True"
TextBlock
Typography.StylisticSet6="True"
TextBlock
Typography.StylisticSet7="True"
RichTextBlock OverflowContentTarget="{Binding ElementName=SecondColumnOverflow}"
Paragraph
Paragraph
Paragraph
Hyperlink
Hyperlink
Paragraph
Paragraph
InlineUIContainer
Button
InlineUIContainer
Run
Run
Paragraph
Paragraph
Run
Paragraph
RichTextBlock
RichTextBlockOverflow x:Name="SecondColumnOverflow"
TextBlock
ProgressRing IsActive="True"
TextBlock
ProgressBar Minimum="0" Maximum="250" Value="50"
TextBlock
ProgressBar
IsIndeterminate="True"
Important!You must deactivate progress rings and progress bars when not visible. There’s a performance penalty if you do not.
<TextBox Text="Hello world" />
<TextBox Text="Headers can be templated" Header="TextBox Header Text"/>
<TextBox Text="I am going to the store for moar bread."
Header="Spell-checking" IsSpellCheckEnabled="True"/>
<TextBox Header="Placeholder text"
PlaceholderText="please enter your first name"/>
<TextBox Header="Color Font Support" Text="I like tapioca. 😀"
IsColorFontEnabled="True" FontFamily="Segoe UI Emoji" />
<TextBox Text="For on-screen keyboards only"
Header="Text Prediction" IsTextPredictionEnabled="True"/>
<TextBox Text="[email protected]"
Header="Input scope control" PlaceholderText="For touch keyboard"
InputScope="EmailSmtpAddress"/>
<TextBox Text="Peter piper picked a peck" Header="Selection highlight color control"
SelectionHighlightColor="Orange"/>
<PasswordBox Header="Please enter your password" FontSize="40" Margin="20"
IsPasswordRevealButtonEnabled="True" Password="Password1" />
<TextBox InputScope="EmailSmtpAddress"/>
<TextBox InputScope="Formula"/>
<TextBox InputScope="Number"/>
Button
Click="LoadFileButton_Click"
RichEditBox x:Name="RichTextEditor"
private async void LoadFileButton_Click(object
var new
var await
var await
RichTextEditor.Document.LoadFromStream(TextSetOptions.FormatRtf, stream);
DatePicker
CalendarIdentifier="GregorianCalendar"
DatePicker
CalendarIdentifier="KoreanCalendar"
DatePicker
CalendarIdentifier="JulianCalendar"
DatePicker
DayFormat="{}{dayofweek.solo.full}"
DatePicker
DayFormat="{}{day.integer} {dayofweek.abbreviated}"
TimePicker
ClockIdentifier="12HourClock"
TimePicker
ClockIdentifier="24HourClock"
Date
Pic
ker
Tim
eP
icker
Button
<Button.Flyout>
<Flyout>
StackPanel
TextBlock
TextBlock
Button
StackPanel
</Flyout>
</Button.Flyout>
Button
Button
<Button.Flyout>
<MenuFlyout>
MenuFlyoutItem
MenuFlyoutItem
MenuFlyoutSeparator
ToggleMenuFlyoutItem
ToggleMenuFlyoutItem
</MenuFlyout>
</Button.Flyout>
Button
{x:Null}
TextBlock
Image
TextBlock
Image
Image.Source
BitmapImage DecodePixelWidth="600"
Image.Source
Image
Scale at decode timeProviding a size when loading saves memory as only the bits to be displayed are loaded in memory, reducing your app’s working set.
Often, this results in higher quality scaling as well.
TextBox Grid.Row="2" Grid.Column="2"
TextBox
TextBox Grid.Row="1" Grid.Column="2"
TextBox
TextBox Grid.Row="0" Grid.Column="3"
TextBox
TextBox RenderTransformOrigin="0.5,0.5"
<TextBox.RenderTransform>
<TransformGroup>
<RotateTransform Angle="-40" />
<TranslateTransform X="-20" Y="-100" />
</TransformGroup>
</TextBox.RenderTransform>
TextBox
TextBox RenderTransformOrigin="0.5,0.5"
<TextBox.RenderTransform>
<TransformGroup>
<SkewTransform AngleX="10" AngleY="25" />
<TranslateTransform X="-200" Y="150" />
</TransformGroup>
</TextBox.RenderTransform>
TextBox
TextBox
<TextBox.Projection>
<PlaneProjection CenterOfRotationX="0.5" CenterOfRotationY="0.5“
CenterOfRotationZ="0.5"
RotationX="-70" RotationY="0" RotationZ="10"
GlobalOffsetZ="600"/>
</TextBox.Projection>
TextBox
Ro
tate
an
d M
ove
Skew
an
d M
ove
3D
Tra
nsf
orm
Viewbox
Grid Width="170" Height="150">
Ellipse
TextBlock
TextBox
Grid
Viewbox
FlipView
FlipView.ItemTemplate
DataTemplate
Grid
Image
Border
TextBlock
Border
Grid
DataTemplate
FlipView.ItemTemplate
FlipView
Data
Tem
pla
te
ListView
GridView
SemanticZoom
SemanticZoom.ZoomedInView
<!-- Normal view goes here -->
SemanticZoom.ZoomedInView
SemanticZoom.ZoomedOutView
<!-- high-level view goes here -->
SemanticZoom.ZoomedOutView
SemanticZoom
What can be in the views?The zoomed in and out views are typically GridView or Hub controls, but do not need to be. The control just needs to implement ISemanticZoomInformation.
Windows 8.1 developer training
Windowing and layout
Full landscape
Filled
Sn
ap
ped
Full portrait
Wider than tall
window
Taller than
wide
window
Taller than
wide windowTaller
than
wide
window
Scale with ViewBox
Layout (and scale)
A A
AB ABC
A
BA
B
VisualStateManager.VisualStateGroups
VisualStateGroup
VisualState PrimaryLayout
Storyboard Storyboard
VisualState
VisualState NarrowLayout
Storyboard Storyboard
VisualState
VisualState TallLayout
Storyboard Storyboard
VisualState
VisualState ExtraLargeLayout
Storyboard Storyboard
VisualState
VisualStateGroup
VisualStateManager.VisualStateGroups
Visual States
Visual states decouple UI from code.
Rather than manually move elements or resize them from code, you simply invoke the visual state which itself includes Storyboard animations which handle these changes.
const string PrimaryLayout
const string NarrowLayout
const string TallLayout
const string ExtraLargeLayout
const double
const double
const double
Use constantsSizes and state names will almost certainly change during design iterations
void object
if
this true
else if
this true
else if
this true
else
this true
protected override void
Window.Current.SizeChanged += OnWindowSizeChanged;
protected override void
Window.Current.SizeChanged -= OnWindowSizeChanged;
Remember to remove those handlersTip: A common source of memory leaks in all .NET apps is failure to remove event handlers. In some cases, handlers go out of scope naturally. Not so when external singleton or static classes are involved. Always clean up your handlers.
protected override async void
as
if
// Create a Frame to act as the navigation context and navigate to the first page
new
// Place the frame in the current Window
if
typeof
// Ensure the current window is active
Sh
ow
Cre
ate
Setu
p w
ind
ow
co
nte
nt
var
var
await view.Dispatcher
var
var new
typeof
await
Default
Windows sets the size, which
defaults to half.
UseMore
Window uses more than 50% of
horizontal pixels
UseHalf
Window uses half of horizontal
pixels
UseLess
Window uses less than 50% of
horizontal pixels
UseMinimum
Window uses 320 or 500 pixels,
as specified in manifest.
UseNone
Not visible
shares to search
opens / saves via uses
supplies
is a file source for
protected override void
protected override void
Always remove your event handlersAlways tear down your event handlers when you’re done with them
void
var
var
"Share example"
"This demonstrates how to share text to another app"
DeferralsYou need to use deferrals when there is an async operation in the request. Without a deferral in such cases, the request may timeout or otherwise fail. Including it when not needed does no harm.
protected override async void
var
if
string await
Be quickYou need to complete the sharing operation as quickly as possible. In many cases, that means spinning up a task to handle the actual work. Use ReportStarted() and ReportCompleted() for lengthy actions.
async void
string string
new
// For quicklinks, the supported FileTypes and DataFormats are set
// independently from the manifest
await
SettingsFlyout
StackPanel
StackPanel
SettingsFlyout
SettingsFlyoutA content control. Handles navigation chrome and mechanics automatically.
SearchBox HorizontalAlignment
VerticalAlignment
Width Margin
FocusOnKeyboardInput
ChooseSuggestionOnEnter
PlaceholderText
SearchHistoryEnabled
SearchHistoryContext
SuggestionsRequested
QuerySubmitted
TextBlock FontSize
HorizontalAlignment
VerticalAlignment
x:Name
private string new string
private void
string
var
foreach string in
Handle the SuggestionsRequested eventFill the Request.SearchSuggestionCollection with your suggestions
private void
Wire up the QuerySubmitted handlerThis may be done from code or, as was the case here, from markup
private async void object
var new
var await
foreach var in
// process each contact returned
Using the contact pickerBy default, this code will display the People app’s contact picker UI and allow you to pick one or more contacts from the list.
First, declare your intentionsAdd the Contact Picker declaration to the package.appxmanifest to tell Windows that your app can provide a contact / people picker to other apps.
protected override void
if
var
// Create and activate the contact picker page, passing in the activation args
var new
// Show the page
Second, handle activationCheck for contact picker activation in app.xaml.cs in the OnActivated override. This is the same method you’ll use for other types of activation, such as search or share.
async void
// The event handler may be invoked on a background thread,
// so use the Dispatcher to run the UI-related code on the UI thread.
string
await
foreach in
break
Third, provide a contact picker UI and handle removalThis XAML page will list contacts and enable the user to select/deselect them. Use the passed-in argsand its ContactPickerUI object to handle remove events and update your display.
private async void object
var
"Prepare for next session"
"Speaker room"
"Nothing like a little procrastination!"
// get the location for the button, so the popup won’t overlap it
var
Window.Current.Content
var new
var new new
// display the "add appointment" UI
var id = await AppointmentManager.ShowAddAppointmentAsync(
appointment, rect, Windows.UI.Popups.Placement.Above);
// if id is empty, then the appointment was not created
...
http://Facebook.com/thewarofit
페이스북: The war of IT
http://sdrv.ms/11igPnr