SlideShare una empresa de Scribd logo
1 de 49
Design
Design
Hub Navigation
Wide Tiles
lock screen     lock screen
background      background
integration     should not be
should be       ads
relevant


background      The visual focus
images should   of the lock
be simple       screen should
                be the
                image, not the
                logo or text
Design for touch
                   Minimum font size is 15 pt.

                   Recommended touch target
                   size is 9mm

                   Minimum touch target size
                   is 7mm

                   Minimum spacing between
                   elements is 2mm

                   Visual size is 60-100% of
                   the touch target size

                   Provide feedback when an
                   item is touched.
Layout Alignment
Multiple Resolutions
Multiple Resolutions – Scaling & Touch




          WVGA                           720p
          480x800                        720x1280
User Experience Bar Document
View

Data
Binding
                  Commands

     ViewModel



          Model
public class KittenObject
{
    public KittenObject() { }
    public string KittenImage { get; set; }
    public string KittenName { get; set; }
    public string KittenAge { get; set; }
}




                                              Model
public class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

                                                         ViewModel
private string _sampleProperty = "my start value";
public string SampleProperty
{
    get { return _sampleProperty; }
    set
    {
        _sampleProperty = value;
        NotifyPropertyChanged("SampleProperty");
    }
}



                                                     ViewModel
<TextBox Text="{Binding SampleProperty, Mode=TwoWay}" />




                                                      View
<phone:LongListSelector
    ItemsSource="{Binding MyListOfItems}"
    SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" />




                                                      View
View

Data
Binding
                  Commands

     ViewModel



          Model
<TextBlock x:Name="ContentText"
      Text="{Binding LineThree, Mode=OneWay}"/>

• The Mode property determines how changes are synchronized
  between the target control and data source
   – OneTime – Control property is set once to the data value and any subsequent changes
     are ignored
   – OneWay – Changes in the data object are synchronized to the control property, but
     changes in the control are not synchronized back to the data object
   – TwoWay – Changes in the data object are synchronized to the control property and vice-
     versa



Windows Phone
class AddItemCommand : ICommand
{
    ViewModel _viewModel;
    public AddItemCommand(ViewModel viewModel)
    {
        _viewModel = viewModel;
    }
    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object title)              <Button Command="{Binding AddCommand}"
    {                                              CommandParameter="Untitled" Content="Button"
        _viewModel.AddItem(title as string);       HorizontalAlignment="Center"
    }                                              VerticalAlignment="Center"/>
}
Demo
http://mvvmlight.codeplex.com/   http://caliburnmicro.codeplex.com/
Laurent Bugnion                  Rob Eisenberg
Not running




              Launching




 Running
Not running




                                                Closing                  Launching




         Exit
Application_Closing                                        Running

                             Deactivate
                      Application_Deactivated                           Deactivating



                      Dormant                                  Dormant
Not running




Closing                     Launching




                Running


   Activating             Deactivating




                  Dormant
Not running




Closing                     Launching




                Running


   Activating             Deactivating




                  Dormant


 Tombstoned
Not running




                                                 Closing                     Launching



private void Application_Activated(object
sender, ActivatedEventArgs e)
{                                                                Running
    if (e.IsApplicationInstancePreserved)
    {
         // Dormant - objects in memory intact      Activating             Deactivating
    }
    else
    {                                                              Dormant
         // Tombstoned - need to reload
    }                                             Tombstoned
}
Not running




Closing                     Launching




                Running


   Activating             Deactivating




                  Dormant


 Tombstoned
<Tasks>
  <DefaultTask   Name ="_default“ NavigationPage="MainPage.xaml“ />
</Tasks>




<Tasks>
  <DefaultTask Name ="_default" NavigationPage="MainPage.xaml">
      <BackgroundExecution>
        <ExecutionType Name="LocationTracking" />
      </BackgroundExecution>
    </DefaultTask>
</Tasks>
Launch     Page 1    Page 2
 from
 Start



Launch   deep link   Page 2
 from
 Start
Launch   Page 1   Page 2
 from
 Start



Launch   FAR
         Page 1   Page 2
 from
 Start
Demo
var isf = IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream fs = new
IsolatedStorageFileStream("CaptainsLog.store", FileMode.Open, isf));




StorageFile storageFile = await
Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(
                        new Uri("ms-appdata:///local/CaptainsLog.store "));
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
StorageFile storageFile = await localFolder.GetFileAsync("CaptainsLog.store");




              Storage APIs align with Windows 8
Demo
Windows.System.Launcher.LaunchUriAsync
(new Uri(“myNewApp:NewSession”));
<Extensions>
   <Protocol Name="fundamentalsdemo“
      NavUriFragment="encodedLaunchUri=%s“
      TaskID="_default"/>
</Extensions>
Demo
URI scheme                      Description
http:[URL]                      Launches the web browser and navigates to URL

                                Launches the email app and creates a new message.
mailto:[email address]
                                Note that the email is not sent until the user taps send.

ms-settings-accounts:           Launches the Account Settings app.
ms-settings-airplanemode:       Launches the Airplane Mode Settings app.
ms-settings-bluetooth:          Launches the Bluetooth Settings app.
ms-settings-cellular:           Launches the Cellular Settings app.
ms-settings-emailandaccounts:   Launches the email and accounts settings app.
ms-settings-location:           Launches the Location Settings app.
ms-settings-lock:               Launches the Lock Screen settings app.
ms-settings-wifi:               Launches the Wi-Fi Settings app.
Designing for Windows Phone 8

Más contenido relacionado

La actualidad más candente

Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptJon Kruger
 
Javascript Module Patterns
Javascript Module PatternsJavascript Module Patterns
Javascript Module PatternsNicholas Jansma
 
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperJon Kruger
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 
Modular javascript
Modular javascriptModular javascript
Modular javascriptZain Shaikh
 
Working effectively with ViewModels and TDD - UA Mobile 2019
Working effectively with ViewModels and TDD - UA Mobile 2019Working effectively with ViewModels and TDD - UA Mobile 2019
Working effectively with ViewModels and TDD - UA Mobile 2019UA Mobile
 
Bringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJSBringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJSBoyan Mihaylov
 
React 소개 및 구현방법 Demo
React 소개 및 구현방법 DemoReact 소개 및 구현방법 Demo
React 소개 및 구현방법 DemoDaesung Kim
 
Strategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux ApplicaitonsStrategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux Applicaitonsgarbles
 
State management in android applications
State management in android applicationsState management in android applications
State management in android applicationsGabor Varadi
 
Displaying additional image types in XMetaL
Displaying additional image types in XMetaLDisplaying additional image types in XMetaL
Displaying additional image types in XMetaLXMetaL
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databindingBoulos Dib
 

La actualidad más candente (20)

Dynamic Elements
Dynamic ElementsDynamic Elements
Dynamic Elements
 
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
 
Javascript Module Patterns
Javascript Module PatternsJavascript Module Patterns
Javascript Module Patterns
 
Data Storage
Data StorageData Storage
Data Storage
 
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
Modular javascript
Modular javascriptModular javascript
Modular javascript
 
Working effectively with ViewModels and TDD - UA Mobile 2019
Working effectively with ViewModels and TDD - UA Mobile 2019Working effectively with ViewModels and TDD - UA Mobile 2019
Working effectively with ViewModels and TDD - UA Mobile 2019
 
Bringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJSBringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJS
 
Matreshka.js
Matreshka.jsMatreshka.js
Matreshka.js
 
Matreshka.js
Matreshka.jsMatreshka.js
Matreshka.js
 
React
React React
React
 
React 소개 및 구현방법 Demo
React 소개 및 구현방법 DemoReact 소개 및 구현방법 Demo
React 소개 및 구현방법 Demo
 
Strategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux ApplicaitonsStrategies for Mitigating Complexity in React Based Redux Applicaitons
Strategies for Mitigating Complexity in React Based Redux Applicaitons
 
State management in android applications
State management in android applicationsState management in android applications
State management in android applications
 
Displaying additional image types in XMetaL
Displaying additional image types in XMetaLDisplaying additional image types in XMetaL
Displaying additional image types in XMetaL
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
 

Similar a Designing for Windows Phone 8

02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)TECOS
 
iOS app dev Training - Session1
iOS app dev Training - Session1iOS app dev Training - Session1
iOS app dev Training - Session1Hussain Behestee
 
Android Workshop 2013
Android Workshop 2013Android Workshop 2013
Android Workshop 2013Junda Ong
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Mahmoud Hamed Mahmoud
 
Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)Gabor Varadi
 
Windows 10 - one application for all platforms. (UA Mobile 2016)
Windows 10 - one application for all platforms. (UA Mobile 2016)Windows 10 - one application for all platforms. (UA Mobile 2016)
Windows 10 - one application for all platforms. (UA Mobile 2016)Mykyta Bondarenko
 
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 GervinBarry Gervin
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsRan Mizrahi
 
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.Windows 10 - одно приложение для всех платформ. UA Mobile 2016.
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.UA Mobile
 
Android Architecture Components
Android Architecture ComponentsAndroid Architecture Components
Android Architecture ComponentsBurhanuddinRashid
 
Day 4: Activity lifecycle
Day 4: Activity lifecycleDay 4: Activity lifecycle
Day 4: Activity lifecycleAhsanul Karim
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Domkaven yan
 
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...solit
 
Code to DI For - Dependency Injection for Modern Applications
Code to DI For - Dependency Injection for Modern ApplicationsCode to DI For - Dependency Injection for Modern Applications
Code to DI For - Dependency Injection for Modern ApplicationsCaleb Jenkins
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android DevelopmentJussi Pohjolainen
 
JavaScript Coding with Class
JavaScript Coding with ClassJavaScript Coding with Class
JavaScript Coding with Classdavidwalsh83
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS InternalEyal Vardi
 

Similar a Designing for Windows Phone 8 (20)

02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)
 
iOS app dev Training - Session1
iOS app dev Training - Session1iOS app dev Training - Session1
iOS app dev Training - Session1
 
Android Workshop 2013
Android Workshop 2013Android Workshop 2013
Android Workshop 2013
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 
Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)
 
Introduction toandroid
Introduction toandroidIntroduction toandroid
Introduction toandroid
 
Windows 10 - one application for all platforms. (UA Mobile 2016)
Windows 10 - one application for all platforms. (UA Mobile 2016)Windows 10 - one application for all platforms. (UA Mobile 2016)
Windows 10 - one application for all platforms. (UA Mobile 2016)
 
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
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
 
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.Windows 10 - одно приложение для всех платформ. UA Mobile 2016.
Windows 10 - одно приложение для всех платформ. UA Mobile 2016.
 
Android Architecture Components
Android Architecture ComponentsAndroid Architecture Components
Android Architecture Components
 
Day 4: Activity lifecycle
Day 4: Activity lifecycleDay 4: Activity lifecycle
Day 4: Activity lifecycle
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
 
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...
Solit 2013, Автоматизация тестирования сложных систем: mixed mode automated t...
 
Code to DI For - Dependency Injection for Modern Applications
Code to DI For - Dependency Injection for Modern ApplicationsCode to DI For - Dependency Injection for Modern Applications
Code to DI For - Dependency Injection for Modern Applications
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
 
JavaScript Coding with Class
JavaScript Coding with ClassJavaScript Coding with Class
JavaScript Coding with Class
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 

Más de David Isbitski

Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015David Isbitski
 
Lap Around Azure Build Updates
Lap Around Azure Build UpdatesLap Around Azure Build Updates
Lap Around Azure Build UpdatesDavid Isbitski
 
Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesHosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesDavid Isbitski
 
Azure Mobile Services for iOS
Azure Mobile Services for iOSAzure Mobile Services for iOS
Azure Mobile Services for iOSDavid Isbitski
 
Building Apps for the new Windows Store
Building Apps for the new Windows Store Building Apps for the new Windows Store
Building Apps for the new Windows Store David Isbitski
 
Windows Phone 8 Sensors
Windows Phone 8 SensorsWindows Phone 8 Sensors
Windows Phone 8 SensorsDavid Isbitski
 
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 David Isbitski
 
Windows Azure Mobile Services
Windows Azure Mobile ServicesWindows Azure Mobile Services
Windows Azure Mobile ServicesDavid Isbitski
 
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptWindows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptDavid Isbitski
 
Designing a Windows Store App
Designing a Windows Store AppDesigning a Windows Store App
Designing a Windows Store AppDavid Isbitski
 
Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...David Isbitski
 
Windows Phone App Development
Windows Phone App DevelopmentWindows Phone App Development
Windows Phone App DevelopmentDavid Isbitski
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGDavid Isbitski
 
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!David Isbitski
 
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptDavid Isbitski
 

Más de David Isbitski (17)

Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
 
Lap Around Azure Build Updates
Lap Around Azure Build UpdatesLap Around Azure Build Updates
Lap Around Azure Build Updates
 
Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesHosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure Websites
 
Azure Mobile Services for iOS
Azure Mobile Services for iOSAzure Mobile Services for iOS
Azure Mobile Services for iOS
 
Building Apps for the new Windows Store
Building Apps for the new Windows Store Building Apps for the new Windows Store
Building Apps for the new Windows Store
 
Windows Phone 8 Sensors
Windows Phone 8 SensorsWindows Phone 8 Sensors
Windows Phone 8 Sensors
 
More Than An App
More Than An AppMore Than An App
More Than An App
 
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8
 
Windows Azure Mobile Services
Windows Azure Mobile ServicesWindows Azure Mobile Services
Windows Azure Mobile Services
 
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptWindows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScript
 
Designing a Windows Store App
Designing a Windows Store AppDesigning a Windows Store App
Designing a Windows Store App
 
Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...
 
Windows Phone App Development
Windows Phone App DevelopmentWindows Phone App Development
Windows Phone App Development
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
 
HTML5 Gaming
HTML5 GamingHTML5 Gaming
HTML5 Gaming
 
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
 
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
 

Designing for Windows Phone 8

  • 1.
  • 2.
  • 5.
  • 8. lock screen lock screen background background integration should not be should be ads relevant background The visual focus images should of the lock be simple screen should be the image, not the logo or text
  • 9. Design for touch Minimum font size is 15 pt. Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size Provide feedback when an item is touched.
  • 12. Multiple Resolutions – Scaling & Touch WVGA 720p 480x800 720x1280
  • 14.
  • 15. View Data Binding Commands ViewModel Model
  • 16. public class KittenObject { public KittenObject() { } public string KittenImage { get; set; } public string KittenName { get; set; } public string KittenAge { get; set; } } Model
  • 17. public class MainViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } ViewModel
  • 18. private string _sampleProperty = "my start value"; public string SampleProperty { get { return _sampleProperty; } set { _sampleProperty = value; NotifyPropertyChanged("SampleProperty"); } } ViewModel
  • 20. <phone:LongListSelector ItemsSource="{Binding MyListOfItems}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" /> View
  • 21. View Data Binding Commands ViewModel Model
  • 22. <TextBlock x:Name="ContentText" Text="{Binding LineThree, Mode=OneWay}"/> • The Mode property determines how changes are synchronized between the target control and data source – OneTime – Control property is set once to the data value and any subsequent changes are ignored – OneWay – Changes in the data object are synchronized to the control property, but changes in the control are not synchronized back to the data object – TwoWay – Changes in the data object are synchronized to the control property and vice- versa Windows Phone
  • 23. class AddItemCommand : ICommand { ViewModel _viewModel; public AddItemCommand(ViewModel viewModel) { _viewModel = viewModel; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; } public void Execute(object title) <Button Command="{Binding AddCommand}" { CommandParameter="Untitled" Content="Button" _viewModel.AddItem(title as string); HorizontalAlignment="Center" } VerticalAlignment="Center"/> }
  • 24. Demo
  • 25. http://mvvmlight.codeplex.com/ http://caliburnmicro.codeplex.com/ Laurent Bugnion Rob Eisenberg
  • 26.
  • 27. Not running Launching Running
  • 28. Not running Closing Launching Exit Application_Closing Running Deactivate Application_Deactivated Deactivating Dormant Dormant
  • 29. Not running Closing Launching Running Activating Deactivating Dormant
  • 30. Not running Closing Launching Running Activating Deactivating Dormant Tombstoned
  • 31. Not running Closing Launching private void Application_Activated(object sender, ActivatedEventArgs e) { Running if (e.IsApplicationInstancePreserved) { // Dormant - objects in memory intact Activating Deactivating } else { Dormant // Tombstoned - need to reload } Tombstoned }
  • 32. Not running Closing Launching Running Activating Deactivating Dormant Tombstoned
  • 33. <Tasks> <DefaultTask Name ="_default“ NavigationPage="MainPage.xaml“ /> </Tasks> <Tasks> <DefaultTask Name ="_default" NavigationPage="MainPage.xaml"> <BackgroundExecution> <ExecutionType Name="LocationTracking" /> </BackgroundExecution> </DefaultTask> </Tasks>
  • 34. Launch Page 1 Page 2 from Start Launch deep link Page 2 from Start
  • 35. Launch Page 1 Page 2 from Start Launch FAR Page 1 Page 2 from Start
  • 36. Demo
  • 37.
  • 38. var isf = IsolatedStorageFile.GetUserStoreForApplication(); IsolatedStorageFileStream fs = new IsolatedStorageFileStream("CaptainsLog.store", FileMode.Open, isf)); StorageFile storageFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync( new Uri("ms-appdata:///local/CaptainsLog.store "));
  • 39. StorageFolder localFolder = ApplicationData.Current.LocalFolder; StorageFile storageFile = await localFolder.GetFileAsync("CaptainsLog.store"); Storage APIs align with Windows 8
  • 40. Demo
  • 41.
  • 42.
  • 43.
  • 44.
  • 46. <Extensions> <Protocol Name="fundamentalsdemo“ NavUriFragment="encodedLaunchUri=%s“ TaskID="_default"/> </Extensions>
  • 47. Demo
  • 48. URI scheme Description http:[URL] Launches the web browser and navigates to URL Launches the email app and creates a new message. mailto:[email address] Note that the email is not sent until the user taps send. ms-settings-accounts: Launches the Account Settings app. ms-settings-airplanemode: Launches the Airplane Mode Settings app. ms-settings-bluetooth: Launches the Bluetooth Settings app. ms-settings-cellular: Launches the Cellular Settings app. ms-settings-emailandaccounts: Launches the email and accounts settings app. ms-settings-location: Launches the Location Settings app. ms-settings-lock: Launches the Lock Screen settings app. ms-settings-wifi: Launches the Wi-Fi Settings app.