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이 있습니다.블루투스로 채팅을 하는 샘플이니 참고하시면 됩니다.
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->settings->change pc settings->PC and devices->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
같은 크기에, 같은 템플릿을 사용하는 경우에만 가상화 작동.
VariableSizedWrapGrid는 가상화 불가
Large list performance
불필요한 엘리먼트의 생성을 줄이기.
Placeholders로 가시적인 퍼포먼스 개선
Incrementally updating the data template
Windows 8 view states
Windows in Windows 8.1
Wider than tall
Taller than w
n wide wi
Windows 8.1 접근
세로로 긴 레이아웃을 지원할 것.
이제 좋은 툴킷을 맘대로 쓰고 개발자 마음대로 하세용
대형화면은 앱을 다섯 개까지! 보통은 두, 세 가지.
App-specific visual states
Visual states는 UI와 코드
를 분리해 주죠.
코드에서 수동으로 엘리먼
트 이동하고, 크기변경하고
하는 대신에 간단히 이 변
Storyboard를 가진 visual
state로 변경하는 게 깔끔
Setting visual states from code
const string PrimaryLayout
const string NarrowLayout
const string TallLayout
const string ExtraLargeLayout
Sizes and state names will almost certainly change during design iterations
ApplicationView.Orientation (Landscape 또는 Portrait을 반환)
Window.Current.Bounds : 초기 크기
페이지가 사라질 때는 핸들러를 끊어주는 센스!
전체화면일 때조차도 픽셀은 논리적 픽셀수.
Handling the SizeChanged event
protected override void
Window.Current.SizeChanged += OnWindowSizeChanged;
protected override void
Window.Current.SizeChanged -= OnWindowSizeChanged;
핸들러 제거하는 것 잊지 마세요!
팁: 모든 닷넷 프로그램에서 메모리 누수가 발생하는 흔한 원인 중 하나가 제대로 이벤트 핸들러를 제거
하지 않는 것이다. 싱글턴 객체나 정적 클래스의 이벤트에 대한 핸들러는 꼭 제거합시다.
Show a secondary view
기본값은 UseHalf와 같은 절반.
가로 50% 이상을 차지
가로 50% 이하를 차지
Manifest에 정해 놓은 최소값인
320 또는 500 픽셀
외 13개국 음성 지원
단순 텍스트 음성 출력
PC의 위치 설정에 따라 음성 지원
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
SpeechSynthesisStream stream = await
SSML(Speech Synthesis Markup Language)
음성 특징, 발음, 볼륨, 피치, 비율 / 속도, 강도
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);
People 앱을 통한 연락처 관리
이메일 및 소셜 계정의 연락처 연동됨
모든 연락처의 추가/수정/ 삭제
ContactPickerUI를 통한 연락처들 호출
바로 원하는 연락처의 ContactCard를 호출
대부분의 사용자는 개인정보 유출에 대한 우려로 앱 자체에서 연락처정보의
관리/보호/저장 하는 것을 원하지 않음.
Appxmanifest에서 Contact Picker 사용 선언
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를 커스텀 가능
Contact card workflow
From: Ben Miller
Contact contact = new Contact();
contact.FirstName = "주";
contact.LastName = "신영";
ContactEmail email = new ContactEmail();
email.Address = “firstname.lastname@example.org";
Rect rect = Helper.GetElementRect(sender as FrameworkElement);
ContactManager.ShowContactCard(contact, rect, Windows.UI.Popups.Placement.
Calrendar 앱을 통한 일정 관리
이메일 및 소셜 계정의 일정 연동됨
모든 일정의 추가/수정/ 삭제
ShowAddAppointmentAsync(…) 를 통해 바로 원
하는 일정 ContactCard를 호출
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!";
Rect rect = Helper.GetElementRect(sender as FrameworkElement);
var id = await AppointmentManager.ShowAddAppointmentAsync(
appointment, rect, Windows.UI.Popups.Placement.Above);
ResultDisplay.Text = "Returned appointment id " + id;
ResultDisplay.Text = "Appointment not added.";
Bluetooth in Windows 8.1
• General device control
• Custom and low-power devices
• Smart watches
• Health monitors
• Fitness monitors
• Home automation
Windows 8.1 PC running your Windows Store app
Bluetooth RFCOMM: Connection
async void Initialize()
// Enumerate devices with the object push service
DeviceInformationCollection _DICollection = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(
if (_DICollection.Count > 0)
// Typically, check protection level and version compatibility here
// Initialize the target Bluetooth device
_service = await RfcommDeviceService.FromIdAsync(services.Id);
// Create a standard networking socket and connect to the target
_socket = new StreamSocket();
// The socket is connected. Data transfer happens using standard WinRT Sockets API
Bluetooth RFCOMM: receiving data
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);
Initialize the license
// debug license information
// release license information
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.
Handle license events
// Show the features that are available during trial.
// Show the features that are available only with a full license.
// A license is inactive only when there's an error.
Conditionally enable features
// 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
// 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.