SlideShare uma empresa Scribd logo
1 de 67
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
TextTrimming="WordEllipsis"
TextBlock
Typography.Fraction="Slashed"
TextBlock
Typography.StylisticSet4="True"
TextBlock
Typography.StylisticSet5="True"
TextBlock
Typography.StylisticSet6="True"
TextBlock
Typography.StylisticSet7="True"
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"
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. &#x1F600;"
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" />
<TextBox InputScope="EmailSmtpAddress"/>
<TextBox InputScope="Formula"/>
<TextBox InputScope="Number"/>
Input scope
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
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
AppBar
Image
TextBlock
Image
TextBlock
Image
Image.Source
BitmapImage DecodePixelWidth="600"
Image.Source
Image
DecodePixelWidth/Height
불러올 때 크기를 제공하면 메모리를 절약할 수 있다.
퍼포먼스도 좋아진다. 확대/축소된 결과도 더 품질이 좋다.
Data
Data template
ListView
ListView
GridView
GridView
FlipView
FlipView.ItemTemplate
DataTemplate
Grid
Image
Border
TextBlock
Border
Grid
DataTemplate
FlipView.ItemTemplate
FlipView
DataTemplate
FlipView
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 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로 변경하는 게 깔끔
하죠.
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
방향과 위치
ApplicationView.Orientation (Landscape 또는 Portrait을 반환)
ApplicationView.AdjacentToLeftDisplayEdge
ApplicationView.AdjacentToRightDisplayEdge
ApplicationView.IsFullScreen
Window 크기
Window.Current.Bounds : 초기 크기
페이지가 사라질 때는 핸들러를 끊어주는 센스!
전체화면일 때조차도 픽셀은 논리적 픽셀수.
Handling the SizeChanged event
protected override void
Window.Current.SizeChanged += OnWindowSizeChanged;
protected override void
Window.Current.SizeChanged -= OnWindowSizeChanged;
핸들러 제거하는 것 잊지 마세요!
팁: 모든 닷넷 프로그램에서 메모리 누수가 발생하는 흔한 원인 중 하나가 제대로 이벤트 핸들러를 제거
하지 않는 것이다. 싱글턴 객체나 정적 클래스의 이벤트에 대한 핸들러는 꼭 제거합시다.
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
보여주지 않음
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.SpeechSynthesis.SpeechSynthesizer();
SpeechSynthesisStream stream = await
synth.SynthesizeTextToStreamAsync("Welcome!");
media.SetSource(stream, stream.ContentType);
media.Play();
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();
Contact &
Appointment
Contact
 People 앱을 통한 연락처 관리
 이메일 및 소셜 계정의 연락처 연동됨
 모든 연락처의 추가/수정/ 삭제
 ContactPickerUI를 통한 연락처들 호출
 ContactManager.ShowContactCard()를 통해
바로 원하는 연락처의 ContactCard를 호출
 대부분의 사용자는 개인정보 유출에 대한 우려로 앱 자체에서 연락처정보의
관리/보호/저장 하는 것을 원하지 않음.
Contact Picker
 Appxmanifest에서 Contact Picker 사용 선언
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를 커스텀 가능
Contact card
Contact card workflow
View Profile
ContactManager
From: Ben Miller
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);
Appointments
 Calrendar 앱을 통한 일정 관리
 이메일 및 소셜 계정의 일정 연동됨
 모든 일정의 추가/수정/ 삭제
 AppointmentManager.
ShowAddAppointmentAsync(…) 를 통해 바로 원
하는 일정 ContactCard를 호출
Appointments
AppointmentManager.
ShowAddAppointmentAsync(…)
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!";
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.";
}
}
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
Bluetooth Pairing
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
}
}
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);
…..
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 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
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.
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.
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP

Mais conteúdo relacionado

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

Visual basic 6.0
Visual basic 6.0Visual basic 6.0
Visual basic 6.0
Aarti P
 
Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)
pbarasia
 
Ajax control tool kit
Ajax control tool kitAjax control tool kit
Ajax control tool kit
Vidhi Patel
 

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

06 win forms
06 win forms06 win forms
06 win forms
 
Visual basic 6.0
Visual basic 6.0Visual basic 6.0
Visual basic 6.0
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발
 
A comprehensive guide on developing responsive and common react filter component
A comprehensive guide on developing responsive and common react filter componentA comprehensive guide on developing responsive and common react filter component
A comprehensive guide on developing responsive and common react filter component
 
Chapter 14
Chapter 14Chapter 14
Chapter 14
 
Vb.net and .Net Framework
Vb.net and .Net FrameworkVb.net and .Net Framework
Vb.net and .Net Framework
 
Java script
Java scriptJava script
Java script
 
Android
AndroidAndroid
Android
 
Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
 
Java Web Programming [8/9] : JSF and AJAX
Java Web Programming [8/9] : JSF and AJAXJava Web Programming [8/9] : JSF and AJAX
Java Web Programming [8/9] : JSF and AJAX
 
Practical Dynamic Actions - Intro
Practical Dynamic Actions - IntroPractical Dynamic Actions - Intro
Practical Dynamic Actions - Intro
 
Java Svet - Communication Between Android App Components
Java Svet - Communication Between Android App ComponentsJava Svet - Communication Between Android App Components
Java Svet - Communication Between Android App Components
 
Java Svet - Communication Between Android App Components
Java Svet - Communication Between Android App ComponentsJava Svet - Communication Between Android App Components
Java Svet - Communication Between Android App Components
 
Csharp
CsharpCsharp
Csharp
 
Declarative presentations UIKonf
Declarative presentations UIKonfDeclarative presentations UIKonf
Declarative presentations UIKonf
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
Ajax control tool kit
Ajax control tool kitAjax control tool kit
Ajax control tool kit
 
Events and Listeners in Android
Events and Listeners in AndroidEvents and Listeners in Android
Events and Listeners in Android
 
Chapter 01
Chapter 01Chapter 01
Chapter 01
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

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

Notas do Editor

  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. Virtualization is enabled by default as long as you aren’t using a panel like the VariableSizedWrapGrid.
  16. 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.
  17. 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
  18. 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
  19. In Windows 8, we had discrete view states:FullFilledSnappedIn addition, we had (and still have) orientationPortraitLandscape
  20. 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”
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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).
  26. 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).
  27. 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.
  28. 요즘 블루투스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로 개발할때도 이런식으로 했었습니다.
  29. 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로 사용할 타겟을 설정하구요.소켓을 열고 으로커넥트를 했습니다.자. 장비하고는 연결이 끝났습니다.
  30. 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이 있습니다.블루투스로 채팅을 하는 샘플이니 참고하시면 됩니다.
  31. 매니페스트 파일 설정.UI로 안나옴
  32. http://code.msdn.microsoft.com/Bluetooth-Generic-5a99ef95/view/SourceCode#content
  33. 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.