Developing Modern Windows 8.1 Store Appdownload.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · Rich, integrated search driven by Bing Personalized start and

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

http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias=aps&field-keywords=windows+8.1+tablet&rh=i:aps,k:windows+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

PDF

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


TextBlock


TextBlock


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


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



SemanticZoom.ZoomedInView

SemanticZoom.ZoomedOutView



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


VisualState

VisualState TallLayout


VisualState

VisualState ExtraLargeLayout


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;


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



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.


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

http://facebook.com/thewarofit

Documents

Developing Modern Windows 8.1 Store Appdownload.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · Rich, integrated search driven by Bing Personalized start and