Windows phone 8 session 3
0 likes712 views
This document provides an overview of designing Windows Phone 8 applications. It discusses designing the app navigation and user interface on paper first before using tools. It recommends Visual Studio for coding and Microsoft Blend for graphical design. It also covers application templates, introduction to XAML layout, styles and themes, design-time data, data binding, and using lists and the LongListSelector control. The document provides guidance on key topics for Windows Phone app design.
Windows phone 8 session 3
- 1. WINDOWS PHONE 8 Designing Windows Phone Applications
- 2. FOLLOW US Twitter : @chothanihitesh Slideshare : http://www.slideshare.net/Chothani-Hitesh Email : chothani.hitesh@gmail.com Support : windows.chothani@live.com LinkedIn : in.linkedin.com/pub/hiteshchothani/6b/311/2b8 W8 Publisher : AppStudios WP Publisher : AppStudios Website : www.appmobinfotech.com
- 3. •DESIGNING AN APP •INTRODUCTION TO XAML LAYOUT •STYLES AND THEMES •DESIGN TIME DATA •DATA BINDING •LISTS AND THE LONGLISTSELECTOR
- 4. THEME
- 6. DESIGN ON PAPER BEFORE YOU TOUCH THE TOOLS!
- 7. DESIGN APP NAVIGATION EARLY!
- 8. TOOLS FOR THE JOB: GRAPHICAL DESIGN A UX designer can use Blend to specify the appearance of the user interface A version of Blend for the phone is supplied as part of the phone SDK
- 9. TOOLS FOR THE JOB: CODE CREATION A Developer can take the user interface design and use Visual Studio build the program to make it work Visual Studio provides a design environment but it is not as advanced as Blend
- 10. DESIGN STYLE AND PROGRAMMING As programmers we probably start of just worrying about making the program work This is a very good place to start But in modern systems the “look and feel” of the user interface is very important No matter how good the code is, if the program is hard to use it will not be popular You should pay careful attention to the user interface when making phone programs If you know any Graphic Designers it is worth getting them on your development team
- 11. PROJECT TEMPLATES AND COMPONENTS Windows Phone SDK provides a set of project templates Each of them maps onto a particular style of application
- 12. APPLICATION TEMPLATES Windows Phone App Basic single page app Windows Phone Databound App Project for creating a Windows Phone application using List and navigation controls with a basic Model-View-ViewModel architecture Windows Phone Pivot App User can “pivot” between different screens by flicking left and right Windows Phone Panorama application A single panoramic background with pages of controls that the user can pan between
- 13. APPLICATION TYPES Three application types provide quite different user experiences Select the one that you feel is the most appropriate
- 15. THE CONTOSO COOKBOOK RECIPE DETAILS PAGE This is a Pivot page that displays details of a recipe Picture and directions on one pane Ingredients list on another pane
- 16. PIVOT PAGES
- 17. XAML AND OBJECTS Every XAML element is a declaration of an object XAML is a way of describing a UI using XML XAML stands for XML Application Markup Language This is a declarative way of expressing your UI XAML elements == objects in the System.Windows.Controls namespace Each of the items on the screen of the application shown is a graphical rendering of an object
- 19. DISPLAY ELEMENT PROPERTIES Each of the elements contains properties that define how it appears on the screen Position on the screen Height and width Font colour and size etc.. These values are used by XAML when the display is drawn If these value are changed by the program the appearance of the element will change
- 20. XAML ELEMENT CLASS HIERARCHY The XAML class hierarchy is quite complex Everything is based on the FrameworkElement class which contains the fundamental properties of all elements You can derive your own components if you wish
- 24. APPLYING STYLES TO ELEMENTS You can set colors and font sizes for elements directly in XAML: This is generally a BAD IDEA! Difficult to match builtin styles Difficult to work with Windows Phone Themes
- 25. FOREGROUND COLORS AND THEMES
- 27. NEW IN VS2012 – APPLY STYLES IN VISUAL STUDIO
- 28. ALIGNMENT OF ELEMENTS Alignment of UI elements is important! The magic number in Windows Phone UI is 12px, or multiples of 12 Your page should have a nice, visually crisp line that is 24 pixels from the left of the device’s screen Gap between controls should be at least 12px Align on 12px increments… though 6px or 18px may also be appropriate
- 29. FIXING THE ALIGNMENT OF THE RECIPE PAGE
- 30. VISUAL STUDIO AND BLEND ALIGNMENT GRID Button at bottom of Designer window can be used to show a 12px alignment Grid Useful for setting alignment of elements Available in Blend Now also available in Visual Studio
- 31. ALIGNMENT GRID OVERLAY All new projects include AlignmentGrid.png in the Assets folder You can overlay the grid at design and runtime by uncommenting the XAML that shows it Included near the foot of MainPage.xaml Copy to other pages to show on those
- 32. USING THE ALIGNMENT GRID
- 33. USE MARGIN PROPERTY TO INSERT SPACING
- 34. DESIGN-TIME DATA
- 36. CREATING SAMPLE DATA FROM CLASS
- 37. EDIT DESIGN-TIME DATA FORMAT AND VALUES
- 38. EDIT DESIGN-TIME DATA FORMAT AND VALUES
- 39. DATA BINDING
- 40. DATA BINDING Simplest way to program UI controls is to write your own “glue” to get and set properties of controls e.g. , textBox1.Text = "Hello, world"; In complex applications, such code quickly becomes unwieldy and error prone. Use XAML data binding to link your UI to a class in your application that contains your application data A data class that is a source for data binding is called a ViewModel UI controls can get their display values automatically from properties of viewmodel class Changing the property, updates the display User input can automatically update the bound property of the viewmodel class
- 41. DATA BINDING IN XAML Properties of controls can be bound to a public property of a data object In the example above, the Text property of the TextBlock is bound to the Directions property of some data source Define the data source by setting The DataContext property of any containing FrameworkElement-derived class (a containing control, the page, or the frame), The ItemsSource property of a List control or
- 42. INOTIFYPROPERTYCHANGED Data objects that take part in One Way or TwoWay binding must implement the INotifyPropertyChanged interface This interface requires only that the object publishes the PropertyChanged event Object must fire the PropertyChanged event whenever the value of one of its public properties changes The XAML runtime subscribes to this event and uses it to update databound UI elements
- 43. VIEWMODEL IMPLEMENTATION IN WINDOWS PHONE 8.0
- 45. DESIGNING LISTS
- 46. LIST ITEM RENDERING All Lists – ListBox, LongListSelector – have no default rendering for data items If you simply bind the ItemsSource property to a collection of objects, all you get displayed in the list for each item is the name of the data object type
- 47. GENERATING LISTS FROM DESIGN-TIME DATA In Blend, if you drag a collection from the Data window onto the design surface while in List mode, it generates a ListBox and attempts a default rendering for list items Manually change to a phone:LongListSelector in the XAML
- 48. LISTS AND TEMPLATES All the different elements that affect how a list displays content can be customised Each aspect is controlled by a template. For the LongListSelector, there are many: GroupFooterTemplate – area that shows at end of each group if LLS used to show grouped items GroupHeaderTemplate – area that shows at top of each group if LLS used to show grouped items JumpListStyle – layout of items in the Jump List, if enabled ListFooterTemplate – area that shows at the foot of the whole list ItemTemplate – layout for each data item ListHeaderTemplate – area that shows at the top of the whole list To change the layout of how each data item displays, we need to modify the ItemTemplate
- 49. MODIFYING THE ITEMTEMPLATE IN BLEND Right-click on the list control, then access the Edit Additional Templates menu Design the controls in the template
- 51. Thank You