Speakers
이길복 MVP
휴즈플로우 CTO
주신영 MVP
스마트쉐어 CEO
Windows 8.1: Free for all Windows 8
PCs
TextBlock
TextBlock
TextBlock
FontSize="40" FontWeight="Bold" FontStyle="Italic"
FontFamily="Times New Roman"
TextBlock
Te...
RichTextBlock
RichTextBlock OverflowContentTarget="{Binding ElementName=SecondColumnOverflow}"
Paragraph
Paragraph
Paragra...
TextBox and PasswordBox
<TextBox Text="Hello world" />
<TextBox Text="Headers can be templated" Header="TextBox Header Tex...
<TextBox InputScope="EmailSmtpAddress"/>
<TextBox InputScope="Formula"/>
<TextBox InputScope="Number"/>
Input scope
DatePicker and TimePicker
DatePicker
CalendarIdentifier="GregorianCalendar"
DatePicker
CalendarIdentifier="KoreanCalendar"...
Flyouts
Button
<Button.Flyout>
<Flyout>
StackPanel
TextBlock
TextBlock
Button
StackPanel
</Flyout>
</Button.Flyout>
Button...
AppBar
Image
TextBlock
Image
TextBlock
Image
Image.Source
BitmapImage DecodePixelWidth="600"
Image.Source
Image
DecodePixelWidth/...
Data
Data template
ListView
ListView
GridView
GridView
FlipView
FlipView.ItemTemplate
DataTemplate
Grid
Image
Border
TextBlock
Border
Grid
DataTemplate
FlipView.ItemTemplate
Fli...
Panning perf overview – UI virtualization
Panning perf overview – UI virtualization
8
8.1
가상화 불가
ItemsStackPanel과 ItemsWrapGrid
같은 크기에, 같은 템플릿을 사용하는 경우에만 가상화 작동.
VariableSizedWrapGrid는 가상화 불가
가상화 가능
가상화 불가
Large list performance
GridViewItemPresenter
+ =
퍼포먼스 개선
불필요한 엘리먼트의 생성을 줄이기.
GridViewItemPresenter의 사용.
<GridView ShowsScrollingPlaceholders="true">
Placeholders로 가시적인 퍼포먼스 개선
Incrementally updating the data template
GridView의 ContainerContentChanging이벤트
Windows 8 view states
Full landscape
Filled
Snapped
Full portrait
Windows in Windows 8.1
Wider than tall
window
Taller than w
ide window
Taller than
wide window
Taller tha
n wide wi
ndow
Windows 8.1 접근
세로로 긴 레이아웃을 지원할 것.
이제 좋은 툴킷을 맘대로 쓰고 개발자 마음대로 하세용
대형화면은 앱을 다섯 개까지! 보통은 두, 세 가지.
App-specific visual states
VisualStateManager.VisualStateGroups
VisualStateGroup
VisualState PrimaryLayout
Storyboard Stor...
Setting visual states from code
const string PrimaryLayout
const string NarrowLayout
const string TallLayout
const string ...
방향과 위치
ApplicationView.Orientation (Landscape 또는 Portrait을 반환)
ApplicationView.AdjacentToLeftDisplayEdge
ApplicationView.A...
Window 크기
Window.Current.Bounds : 초기 크기
페이지가 사라질 때는 핸들러를 끊어주는 센스!
전체화면일 때조차도 픽셀은 논리적 픽셀수.
Handling the SizeChanged event
protected override void
Window.Current.SizeChanged += OnWindowSizeChanged;
protected overri...
ShowCreateSetupwindowcontent
Show a secondary view
var
var
await view.Dispatcher
var
var new
typeof
await
ViewSizePreferen...
Speech
Synthesis
Speech synthesis
 Voice
 David(en-US, 남성)
 Zira(en-US, 여성)
 Hazel(en-UK, 여성)
 Heami(ko-KR, 여성)
 외 13개국 음성 지원
Code
Speech synthesis
 단순 텍스트 음성 출력
 synthesizeTextToStreamAsync
 PC의 위치 설정에 따라 음성 지원
var synth = new Windows.Media.Spe...
Speech synthesis
 SSML(Speech Synthesis Markup Language)
 synthesizeSsmlToStreamAsync
 음성 특징, 발음, 볼륨, 피치, 비율 / 속도, 강도
C...
Contact &
Appointment
Contact
 People 앱을 통한 연락처 관리
 이메일 및 소셜 계정의 연락처 연동됨
 모든 연락처의 추가/수정/ 삭제
 ContactPickerUI를 통한 연락처들 호출
 ContactManager.Sh...
Contact Picker
 Appxmanifest에서 Contact Picker 사용 선언
Contact Picker
Code
ContactPicker picker = new ContactPicker();
picker.SelectionMode = ContactSelectionMode.Contacts;
// C...
Contact card
Contact card workflow
View Profile
ContactManager
From: Ben Miller
ContactManager
Code
Contact contact = new Contact();
contact.FirstName = "주";
contact.LastName = "신영";
ContactEmail email ...
Appointments
 Calrendar 앱을 통한 일정 관리
 이메일 및 소셜 계정의 일정 연동됨
 모든 일정의 추가/수정/ 삭제
 AppointmentManager.
ShowAddAppointmentAsyn...
Appointments
AppointmentManager.
ShowAddAppointmentAsync(…)
Appointments
Code
private async void AddAppointment_Click(object sender, RoutedEventArgs e)
{
var appointment = new Appoin...
Appointments
Code
Rect rect = Helper.GetElementRect(sender as FrameworkElement);
var id = await AppointmentManager.ShowAdd...
Bluetooth in Windows 8.1
RFCOMM
• General device control
• Robots
• Sphero
• Netduino
• Gadgeteer
• More…
GATT
• Custom an...
Bluetooth Pairing
Bluetooth RFCOMM: Connection
Windows.Devices.Bluetooth.RfcommDeviceService _service;
Windows.Networking.Sockets.StreamSock...
Bluetooth RFCOMM: receiving data
Socket..
StreamSocketListener socketListener = new StreamSocketListener();
….
DataReader ...
Package.appxmanifest 중요!
Industry-leading economics
70%for new apps
80%
once your app
makes $25,00
0
Developer registration
Trials Matter
70x
downloads
10%
conversion
10x
revenue
Windows Phone Developer blog, March 2011
Simple time-based trials
Initialize the license
private void
#if
// debug license information
#else
// release license information
#endif
Use the r...
Handle license events
private void
if
if
// Show the features that are available during trial.
else
// Show the features t...
Conditionally enable features
private void
if
if
// trial mode. You decide if you should inform the user that the
// featu...
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Upcoming SlideShare
Loading in …5
×

Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP

2,152 views

Published on

2014년 3월 22일 한국 마이크로소프트 MVP가 주최하고 한국 마이크로소프트가 후원한 Microsoft MVP ComCamp(Community Camp) 2014행사가 열렸습니다.
그 행사에서 <윈도우>이란 주제로 저와 주신영 MVP가 여러분들을 모시고 발표를 하였습니다.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,152
On SlideShare
0
From Embeds
0
Number of Embeds
438
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Windows 8.1 is a freely available upgrade through the Windows 8 storeEvery user will be prompted once to upgrade; after that, they can upgrade via the StoreThe upgrade will NOT be forced on all users, but many will upgrade to get new features, new apps, and moreNew models of PCs will have Windows 8.1
  • Almost every app needs to display text to the user. In most cases, the element you’ll use is the TextBlock.The TextBlock allows for text display, but isn’t limited to plain fonts. You have access to opentype features through the Typography namespace, and all the standard font features (Size, Weight, Family, etc.) through properties.The last four TextBlock instances all use the same font family, but through OpenType Stylistic Sets, are able to display complex variations.Through OpenType we can even control the display of fractions of arbitrary value. There are many more properties enabling features like capitalization and ligatures to ensure your fonts display exactly as you want them to at every resolution and DPI.The TextBlock also supports line breaks and word wrapping, but for more complex text, we have another control.
  • The text in the code listing has been shortened to fit on the slideParagraphs, spans, and runs allow for formatting sections of the rich text, using all the same font formatting options employed by the TextBlock.Hyperlink control provides simple dedicated URL linking functionality.InlineUIContainer enables inclusion of any XAML content, including other text controls, images, and even buttons and drop-down list boxes. This is primarily for the display of inactive controls, but they may be made interactive as well.RichTextBlockOverflow facilitates smooth overflow for multi-column text layout. In this case, the two controls are (not shown here) placed inside a two-column Grid.
  • For many of you, your apps must first and foremost gather input from users. Chief among input controls is the TextBox.The humble TextBox control has seen a number of improvements in 8.1. One of the nicest is a fully-templatable header property. If you provide a custom template, it can contain any XAML with any layout.We’ve also added the ability to control the color of highlighted text, to help you keep it in line with your app’s branding, regardless what selection color choices the user has made at the OS level.When you work with fonts like Segoe UI Emoji, color fonts can be especially fun.The textbox has many other great features including spell-checking, placeholder text, text-prediction and input scope for on-screen keyboards, multi-line support and much more.Finally, the password box is available for inputting sensitive data. As a developer, you can control the availability of the password reveal button.
  • The InputScope property of the TextBox requires a little more explanation.Setting the scope does not provide any data validation. Instead, it is a hint to Windows telling it which on-screen keyboard to use for the most efficient interaction with the user. It’s easy to forget to set the inputscope on TextBox controls. However, we encourage you to set this property to make input easier for your tablet and touch-screen users.
  • New in Windows 8.1 we have the DatePicker and TimePicker. Both controls display multiple drop-down lists for selecting data.By default, the calendar will be shown in the language matching the calendar associated with the user language. The ClockIdentifiers, CalendarIdentifiers and DayFormats can be difficult to remember. Luckily, VS2013 has XAML intellisense on all of these properties.
  • The flyout is implemented through a property on a button instance.Typically, this is an AppBarButton, but it may be any button on the UI.Automatically handles positioning and light dismiss.
  • An image’s source may be set in a few different ways.The easiest way is to simply provide a URI and a size. When this happens, Windows loads the entire image into memory and then scales it down from there.The second way is a bit more verbose because it uses a BitmapImage as the source. Like the straight Image Source, the BitmapImage can use a URI source to load from a file, site, or resource. However, it also adds a very important set of properties: DecodePixelWidth and DecodePixelHeight. These tell Windows which size to use when it loads the image into memory. Because the scaling is done once, and doesn’t need to be concerned about animation or other factors, Windows can also use a higher quality downsampling algorithm.If you specify only DecodePixelWidth or only DecodePixelHeight, Windows will infer the other based upon the aspect ratio of the image. However, if you know both values and the aspect ratio for the image, provide both for an even more efficient load.When you know the intended size ahead of time, always decode at that size.Finally, note the URI syntax used for loading assets from the Appx install folder. Prefix : ms-appx://Folder: /Assets/ImagesFile: Pro2.pngWe’ll cover this more in the Performance unit.
  • Items controls use a DataTemplate for rendering itemsBy default, it shows the output from ToString() on the bound objectThe DataTemplate can be as complex as you want, including panels, images, text and moreHowever, you want it as simple as possible when dealing with large numbers of items in order to keep total element count down.Too many elements positioned and rendered means performance will sufferTemplates may be placed in resource dictionaries for reuse throughout the app
  • The ListView has been designed and optimized for vertical display of multiple items.Although you can change the items panel to one which is horizontal, we recommend you use the GridView for anything with horizontal panning or large numbers of items.
  • The GridView was designed to display large numbers of items in a horizontal orientationAs it is an itemscontrol, the markup is very similar to the ListView markup. Like the ListView, you can have ItemTemplate and container styles.The GridView also supports grouping. However, for hub/main pages, the new Hub control is a better choice.There are many great examples of working with GridViews, including several in our code gallery.
  • FlipView is designed and optimized for display of one item at a time in a style similar to a slide show. Using the mouse or swipe gestures, the user can pan left and right to view one image at a time.Note the Itemtemplate here. Each time the FlipView has to display one of the items it’s bound to, it will render it using the contents of the DataTemplateThe datacontext for the data template is the current item, so binding just worksAlthough the FlipView is an itemscontrol by name and inheritance, don’t think of it like a “list”. It’s optimized for showing one item at a time without list-like interactions.
  • Top: load all items at startup. This is a huge app startup performance hit – something you don’t want to do. In this case, it might be four or five thousand items being loaded and built.In Windows 8, we therefore enabled virtualization at the group level. In this case, that cut down to two thousand items, which is a significant difference.But we could do better.
  • Top is Windows 8 approach, bottom is new Windows 8.1 approach.In 8.1, we render only what is near the viewport. So in this case, instead of rendering the two thousand items we did in Windows 8, we’re only rendering around 18.As long as you use the stock panels with the GridView and ListView in 8.1, you get this behavior for free.
  • Virtualization is enabled by default as long as you aren’t using a panel like the VariableSizedWrapGrid.
  • Optimizations available for standard item adornmentRe-template GridView with a GridViewItemPresenterMany times, controls like the GridView are used simply to display data, and to accept a single click or tap to drill down into an item. In these cases, the selection capabilities, and therefore all the elements associated with them, are not required. In those cases, you can use the GridViewItemPresenter to reduce the complexity of what’s rendered.If you use a GridViewItemPresenter we internally draw the adorners rather than have a tree of XAML elements that are created for each item.Use this approach if the standard adornment look is what you want and you want a performance boost.
  • When rendering items in a list, the UI thread may eventually run out of time to process and must turn over whatever work was done to be rendered, even if we knew more items were there to be processed. That often led to cases where items failed to render when panning a large list quickly. In Windows 8.1, the UI thread can very quickly put out placeholders for all the missing items. This comes for free in Windows 8.1, but may be controlled by the ShowsScrollingPlaceholders property
  • Turn off automatic placeholder generation and then handle the event.On the left, we can see that in the time budget, we could render up to item 23. But what if instead of fully rendering as many items as possible, we render a little bit of as many items as we can?On the right instead of spending the time fully rendering items 21 through 23 as on the left, we partially rendered the remaining items.Items 21 through 29 have had titles and subtitlesItems 30 through 32 have just the titles.Items 21 through 32 don’t yet have imagesThis provides a much better end-user experience than just placeholders
  • In Windows 8, we had discrete view states:FullFilledSnappedIn addition, we had (and still have) orientationPortraitLandscape
  • In Windows 8.1, we’ve gone with a more fluid layout approach which allows multiple apps to appear on-screen, in a usable size.On most tablets, you’ll see two apps on screen at a time. On larger screens, this approach supports up to five open windows on a single display“Before we move on, let’s take a look at how Windows 8.1 implements windows for modern apps”
  • Apps support a minimum width of 500px at which they are expected to be functional.“Taller than wide” layouts must be supportedOptionally, apps may support sizes under 500px, all the way down to the 320px “Snapped” view from Windows 8. Unlike snapped view, this is not a discrete state, but is simply a continuation of the window resizing capabilitiesIn 8.1 we removed the stock view states and page base class. This frees apps to use their own view states that are specific to the app requirements. We’ll cover more about that in this section.
  • Given all the known states of the app, we can create some visual states which will set the layout to one which is optimized for the resolution and orientation. This is done separately for each page in the app.The visual states you use for your app do not need to be generic. For example, you may have specific states for resolutions below a certain size, or aspect ratios which may not be important to other apps.
  • Use the Window.SizeChanged event.Because we know how to get the dimensions of the app’s window, we can write a little code to trigger the visual state changes. The VisualStateManager handles transitioning between the states we’ve declared in XAML.GoToState will transition from the current state to the new state. If the last parameter is true (as it is in this case), the state change will use transition animations.This code is nothing magic. In fact, this is almost identical to what the old “LayoutAwarePage” base class did for you. However, in that implementation, the states were based off the now deprecated Value property (which returned Snapped, Filled, FullScreen etc.).Note also that we’re not specifically handling orientation here. Care to hazard a guess as to why?Right. Our “Tall” layout state will handle that automatically. It also covers the case when we’re in a window that’s larger than 500px wide, but still more narrow than it is tall. We did that because it works for this specific app. In your own apps, you may need to have different states, or handle orientation differently.
  • Windows provides information on the layout and placement of the app on the screen. This can be used to alter the layout to provide a better user experience.In many cases, you don’t need to worry about orientation, as the app will have the same layout whether it is in portrait mode or simply in a “taller than wide” layout in a Window. In those cases, inspecting the window sizes is sufficient.
  • We recommend using Window.SizeChanged as we’re looking to capture Window size changes here, not element size changes.You can also use the Page.SizeChanged event, but Window.SizeChanged is slightly more efficient for layout purposes (it happens earlier in the layout process).
  • Wiring up the SizeChanged event is just like any other event.Use Window.Current.SizeChanged, not Page.SizeChanged as Window.Current.SizeChanged gives you the actual window information.Although scoping takes care of teardown for most, always remember to tear down your event handlers. This is especially important in cases where an external long-lived object (like Window.Current) has a reference to something on your page (like the OnWindowSizeChanged handler).
  • To open a secondary view.Call CoreApplication.CreateNewView. This will get you the CoreApplicationView instance for tracking this viewThere’s another overload of CreateNewView which lets you specify a classID for a view provider and an entrypoint in the code. This performs a similar function to the App entry point in your main view.Build the secondary view. Notice here how we do this by calling the dispatcher for *that* view (each view has its own UI thread and therefore its own dispatcher).You’ll need to get the view’s ID here, so you can pass it to the ApplicationViewSwitcherSet up the view just like you would when building out the first view of the app in App.xaml.cs: create a window, put a frame in the window, set the window content to that frame, and then navigate to the content you want placed in that frame.Show the window. You can show it in place, or specify that it uses half or less of the space. In this case, specify the parameters as follows:viewID : view to showUseHalf: size for the new viewGetForCurrentView().id : ID of the “anchor” view (the view this secondary view is anchored toUseHalf: resize the anchor view to half.In many cases, UseMinimum and UseLess result in the same You can also subscribe to the consolidating event to know when the window closes.
  • 요즘 블루투스4.0 관련지원하는게 os들 특징이죠특히나 모바일과 앞으로 iot라고하는 사물인터넷을 지원하기 위한 저전력(Low Energy)를 지원하려고 하는건데요. //간단하게 집어드리면 블루투스는1.1때부터 제대로 쓰이기 시작했구요. 그때가 2002년 입니다. 제가 pda를 처음 접했을때였구요. Pda에는 거의 대부분 블루투스가 있었죠. //스마트폰이 붐을 타기전에는 대부분 2.0이 많았습니다. 예전에 pda로 영상을 전송해본적이 있었는데요.//2.1(2007년)까지도 속도가 계속 향상됐다곤 해도 실제 그속도만 큼 너무 안나왔죠. 정말 영상 전송하기엔 부족했습니다.//그리고 3.0(2009년) 부터 실제로 대용량 동영상이나 파일을 보낼수 있는게 들어갔고 최근에 4.0,4.1에서는 저전력과 실제 사물인터넷을 위한 기술들이 들어갔습니다.윈도우8.1에도 블루투스 4.0관련 지원이 들어갔습니다.장비들과 실제로 데이터를 주고 받는게 필요할 경우에8.1에서 RFCOMM으로일반적인 시리얼 통신포트를 이용한 소켓통신을 하면 됩니다.//C사용해보셨으면 시리얼통신할때도 통신포트로 소켓을 오픈하면 통신되는것과 같다고 생각하시면 됩니다.//실제로 pda로 개발할때도 이런식으로 했었습니다.
  • Reference:http://msdn.microsoft.com/en-us/library/windows/apps/bg182882.aspxFAQ:http://msdn.microsoft.com/en-us/library/windows/apps/dn263108.aspx블루투스 연동 코드는 먼저 블루투스를찾구요.FindAllAsync을 통해서 DeviceInformationCollection으로시리얼포트로 연결된 정보를 다 가져옵니다.RfcommDeviceService로 사용할 타겟을 설정하구요.소켓을 열고 으로커넥트를 했습니다.자. 장비하고는 연결이 끝났습니다.
  • Reference:http://msdn.microsoft.com/en-us/library/windows/apps/bg182882.aspxFAQ:http://msdn.microsoft.com/en-us/library/windows/apps/dn263108.aspx소켓이 연결됐으면 이젠 소켓통신하면 되겠죠?뭐 다 소켓 관련 처리입니다. DataReader라는 인풋 스트림으로 데이터를 받아오면 되구요.문자열로 받아서 출력하면 화면에 출력하거나 하면 되죠.하지만 실제로소켓통신할때는 이렇게 데이터를 가져오지는 않고 프로토콜을 정해서 Byte배열로 쭉 보내고헤더가 먼저 오고 실제데이터가 그뒤에 오겠죠?블루투스 통신은 이렇게 하시면 됩니다.8.1 샘플에 BlutoothRfcommChat이 있습니다.블루투스로 채팅을 하는 샘플이니 참고하시면 됩니다.
  • 매니페스트 파일 설정.UI로 안나옴
  • http://code.msdn.microsoft.com/Bluetooth-Generic-5a99ef95/view/SourceCode#content
  • https://github.com/orbotix/Sphero-Win-SDKDownload the SDK and extract the demoThis demo was tested with Sphero 2.0 and Surface 2, but also works with Sphero 1.0 and Surface RT/Pro or any other modern Windows 8.1 PC with Bluetooth.The sphero 2.0 will continue to blink its colors when connected to the PC. As long as Windows 8.1 says it’s connected, you’re good.Charge the spheroRemove the sphero from the chargerDouble-tap the sphero to wake it up. It’ll blink colors which correspond to its three initialsGo into Bluetooth settings on the PC to pair the sphero: (to connect: charm-&gt;settings-&gt;change pc settings-&gt;PC and devices-&gt;Bluetooth)Once connected and paired, start the app.Alsohttp://channel9.msdn.com/Events/Build/2013/3-026Alternate demo (2014)Use AGENT smart watch and AGENT demo app.
  • Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP

    1. 1. Speakers 이길복 MVP 휴즈플로우 CTO 주신영 MVP 스마트쉐어 CEO
    2. 2. Windows 8.1: Free for all Windows 8 PCs
    3. 3. TextBlock 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"
    4. 4. RichTextBlock 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"
    5. 5. TextBox and PasswordBox <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="pete@contoso.com" 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" />
    6. 6. <TextBox InputScope="EmailSmtpAddress"/> <TextBox InputScope="Formula"/> <TextBox InputScope="Number"/> Input scope
    7. 7. DatePicker and TimePicker 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" DatePickerTimePicker
    8. 8. Flyouts 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
    9. 9. AppBar
    10. 10. Image TextBlock Image TextBlock Image Image.Source BitmapImage DecodePixelWidth="600" Image.Source Image DecodePixelWidth/Height 불러올 때 크기를 제공하면 메모리를 절약할 수 있다. 퍼포먼스도 좋아진다. 확대/축소된 결과도 더 품질이 좋다.
    11. 11. Data Data template
    12. 12. ListView ListView
    13. 13. GridView GridView
    14. 14. FlipView FlipView.ItemTemplate DataTemplate Grid Image Border TextBlock Border Grid DataTemplate FlipView.ItemTemplate FlipView DataTemplate FlipView
    15. 15. Panning perf overview – UI virtualization
    16. 16. Panning perf overview – UI virtualization 8 8.1
    17. 17. 가상화 불가 ItemsStackPanel과 ItemsWrapGrid 같은 크기에, 같은 템플릿을 사용하는 경우에만 가상화 작동. VariableSizedWrapGrid는 가상화 불가 가상화 가능 가상화 불가
    18. 18. Large list performance GridViewItemPresenter + = 퍼포먼스 개선 불필요한 엘리먼트의 생성을 줄이기. GridViewItemPresenter의 사용.
    19. 19. <GridView ShowsScrollingPlaceholders="true"> Placeholders로 가시적인 퍼포먼스 개선
    20. 20. Incrementally updating the data template GridView의 ContainerContentChanging이벤트
    21. 21. Windows 8 view states Full landscape Filled Snapped Full portrait
    22. 22. Windows in Windows 8.1 Wider than tall window Taller than w ide window Taller than wide window Taller tha n wide wi ndow
    23. 23. Windows 8.1 접근 세로로 긴 레이아웃을 지원할 것. 이제 좋은 툴킷을 맘대로 쓰고 개발자 마음대로 하세용 대형화면은 앱을 다섯 개까지! 보통은 두, 세 가지.
    24. 24. App-specific visual states 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는 UI와 코드 를 분리해 주죠. 코드에서 수동으로 엘리먼 트 이동하고, 크기변경하고 하는 대신에 간단히 이 변 경사항들을 처리하는 Storyboard를 가진 visual state로 변경하는 게 깔끔 하죠.
    25. 25. Setting visual states from code const string PrimaryLayout const string NarrowLayout const string TallLayout const string ExtraLargeLayout const double const double const double Use constants Sizes 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
    26. 26. 방향과 위치 ApplicationView.Orientation (Landscape 또는 Portrait을 반환) ApplicationView.AdjacentToLeftDisplayEdge ApplicationView.AdjacentToRightDisplayEdge ApplicationView.IsFullScreen
    27. 27. Window 크기 Window.Current.Bounds : 초기 크기 페이지가 사라질 때는 핸들러를 끊어주는 센스! 전체화면일 때조차도 픽셀은 논리적 픽셀수.
    28. 28. Handling the SizeChanged event protected override void Window.Current.SizeChanged += OnWindowSizeChanged; protected override void Window.Current.SizeChanged -= OnWindowSizeChanged; 핸들러 제거하는 것 잊지 마세요! 팁: 모든 닷넷 프로그램에서 메모리 누수가 발생하는 흔한 원인 중 하나가 제대로 이벤트 핸들러를 제거 하지 않는 것이다. 싱글턴 객체나 정적 클래스의 이벤트에 대한 핸들러는 꼭 제거합시다.
    29. 29. ShowCreateSetupwindowcontent Show a secondary view var var await view.Dispatcher var var new typeof await ViewSizePreference ViewSizePreference Default 기본값은 UseHalf와 같은 절반. UseMore 가로 50% 이상을 차지 UseHalf 절반 UseLess 가로 50% 이하를 차지 UseMinimum Manifest에 정해 놓은 최소값인 320 또는 500 픽셀 UseNone 보여주지 않음
    30. 30. Speech Synthesis
    31. 31. Speech synthesis  Voice  David(en-US, 남성)  Zira(en-US, 여성)  Hazel(en-UK, 여성)  Heami(ko-KR, 여성)  외 13개국 음성 지원
    32. 32. Code Speech synthesis  단순 텍스트 음성 출력  synthesizeTextToStreamAsync  PC의 위치 설정에 따라 음성 지원 var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer(); SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Welcome!"); media.SetSource(stream, stream.ContentType); media.Play();
    33. 33. Speech synthesis  SSML(Speech Synthesis Markup Language)  synthesizeSsmlToStreamAsync  음성 특징, 발음, 볼륨, 피치, 비율 / 속도, 강도 Code string Ssml = @"<speak version='1.0' " + "xmlns='http://www.w3.org/2001/10/synthesis' xml:lang='en-US'>" + "<prosody contour='(0%,+80Hz) (10%,+80%) (40%,+80Hz)'>Welcome! Shinyoung" + "<break time='500ms' />" + "Have a good time" + "</prosody></speak>"; var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer(); SpeechSynthesisStream stream = await synth.SynthesizeSsmlToStreamAsync(Ssml); media.SetSource(stream, stream.ContentType); media.Play();
    34. 34. Contact & Appointment
    35. 35. Contact  People 앱을 통한 연락처 관리  이메일 및 소셜 계정의 연락처 연동됨  모든 연락처의 추가/수정/ 삭제  ContactPickerUI를 통한 연락처들 호출  ContactManager.ShowContactCard()를 통해 바로 원하는 연락처의 ContactCard를 호출  대부분의 사용자는 개인정보 유출에 대한 우려로 앱 자체에서 연락처정보의 관리/보호/저장 하는 것을 원하지 않음.
    36. 36. Contact Picker  Appxmanifest에서 Contact Picker 사용 선언
    37. 37. Contact Picker Code ContactPicker picker = new ContactPicker(); picker.SelectionMode = ContactSelectionMode.Contacts; // Contact contacts = await picker.PickContactAsync();// 1개 IList<Contact> contacts = await picker.PickContactsAsync(); // 여러개 foreach (Contact contact in contacts) { // process each contact returned Debug.WriteLine(contact.FirstName + " " + contact.LastName); } ContactPickerUI 로 UI를 커스텀 가능
    38. 38. Contact card Contact card workflow View Profile ContactManager From: Ben Miller
    39. 39. ContactManager Code Contact contact = new Contact(); contact.FirstName = "주"; contact.LastName = "신영"; ContactEmail email = new ContactEmail(); email.Address = “bit1010@live.com"; contact.Emails.Add(email); Rect rect = Helper.GetElementRect(sender as FrameworkElement); ContactManager.ShowContactCard(contact, rect, Windows.UI.Popups.Placement. Default);
    40. 40. Appointments  Calrendar 앱을 통한 일정 관리  이메일 및 소셜 계정의 일정 연동됨  모든 일정의 추가/수정/ 삭제  AppointmentManager. ShowAddAppointmentAsync(…) 를 통해 바로 원 하는 일정 ContactCard를 호출
    41. 41. Appointments AppointmentManager. ShowAddAppointmentAsync(…)
    42. 42. Appointments Code private async void AddAppointment_Click(object sender, RoutedEventArgs e) { var appointment = new Appointment(); appointment.Subject = "Prepare for next session"; appointment.StartTime = DateTime.Now.AddMinutes(2); appointment.Duration = TimeSpan.FromHours(1); appointment.Location = "Speaker room"; appointment.Uri = new Uri("http://dev.windows.com"); appointment.Sensitivity = AppointmentSensitivity.Public; appointment.Details = "Nothing like a little procrastination!";
    43. 43. Appointments Code Rect rect = Helper.GetElementRect(sender as FrameworkElement); var id = await AppointmentManager.ShowAddAppointmentAsync( appointment, rect, Windows.UI.Popups.Placement.Above); if (!string.IsNullOrEmpty(id)) ResultDisplay.Text = "Returned appointment id " + id; else ResultDisplay.Text = "Appointment not added."; } }
    44. 44. Bluetooth in Windows 8.1 RFCOMM • General device control • Robots • Sphero • Netduino • Gadgeteer • More… GATT • Custom and low-power devices • Smart watches • Health monitors • Fitness monitors • Home automation • More… Windows 8.1 PC running your Windows Store app Windows.Devices.Bluetooth.Rfcomm Windows.Devices.Bluetooth.GenericAttributeProfile
    45. 45. Bluetooth Pairing
    46. 46. Bluetooth RFCOMM: Connection Windows.Devices.Bluetooth.RfcommDeviceService _service; Windows.Networking.Sockets.StreamSocket _socket; async void Initialize() { // Enumerate devices with the object push service DeviceInformationCollection _DICollection = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync( RfcommDeviceService.GetDeviceSelector(RfcommServiceId.SerialPort)); if (_DICollection.Count > 0) { // Typically, check protection level and version compatibility here // Initialize the target Bluetooth device _service = await RfcommDeviceService.FromIdAsync(services[0].Id); // Create a standard networking socket and connect to the target _socket = new StreamSocket(); await _socket.ConnectAsync(_service.ConnectionHostName, _service.ConnectionServiceName, SocketProtectionLevel.BluetoothEncryptionAllowNullAuthentication); // The socket is connected. Data transfer happens using standard WinRT Sockets API } }
    47. 47. Bluetooth RFCOMM: receiving data Socket.. StreamSocketListener socketListener = new StreamSocketListener(); …. DataReader reader = new DataReader(socket.InputStream); // Read the message. uint messageLength = reader.ReadByte(); // Loads data from the input stream. uint actualMessageLength = await reader.LoadAsync(messageLength); // Reads a string value from the input stream. string message = reader.ReadString(actualMessageLength); …..
    48. 48. Package.appxmanifest 중요!
    49. 49. Industry-leading economics 70%for new apps 80% once your app makes $25,00 0
    50. 50. Developer registration
    51. 51. Trials Matter 70x downloads 10% conversion 10x revenue Windows Phone Developer blog, March 2011
    52. 52. Simple time-based trials
    53. 53. Initialize the license private void #if // debug license information #else // release license information #endif Use the right license provider WinRT provides the CurrentAppSimulator for testing trial mode, in-app purchases, and more without you r app being listed in the Windows Store. CurrentApp is for submission to the Windows Store. You cannot submit an app which uses CurrentAppSimulator.
    54. 54. Handle license events private void if if // Show the features that are available during trial. else // Show the features that are available only with a full license. else // A license is inactive only when there's an error.
    55. 55. Conditionally enable features private void if if // trial mode. You decide if you should inform the user that the // feature is not available, or simply not enable the UI for the feature else // enable feature ... Hide or inform? You may find that providing a UI with a warning that the feature is only enabled in the full version is a bet ter approach than simply hiding the feature. Whenever you prompt, be sure to give the user the option t o purchase right then.

    ×