Windows Phone 8 - 2 Designing WP8 Applications
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Windows Phone 8 - 2 Designing WP8 Applications






Total Views
Views on SlideShare
Embed Views



2 Embeds 10 9 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • The Windows Phone design styleMicrosoft created the Metro design, which is inspired by the clear signage you often see employed with metropolitan area public transit signage. Metro uses big, clear typography and features large text that catches the eye and runs off the page. The Metro design principles center on a look that uses type to echo the visual language of airport and metro system signage. The goal is to clearly direct end users to the content they want. Metro interfaces are supposed to embody harmonious, functional, and attractive visual elements. Ideally, good UI design should encourage playful exploration when interacting with the application and people should feel a sense of wonder and excitement. A clear, straightforward design not only makes an application legible, it encourages usage.Make the point that the Metro style is influencing many Microsoft products, and that it will play an increasing role in Windows products beyond the phone platform, such as in the UI for the forthcoming Windows 8.  
  • Pride in craftsmanship-Take care of the details-Make it safe and reliable-Balance, symmetry, hierarchy-Align to the grid>> This principle is a reminder that designers and developers should take pride in what they create. They shouldn’t accept mediocre. It’s about ensuring balance and symmetry, and where possible aligning to the grid (12px for Windows Phone, 10x for Windows!). It’s also about building an intuitive interface where the user is free to explore without fear that they’ll accidentally break or delete something.
  • Be fast and fluid-Life is mobile-Delight with motion-Design for touch-Intuitive interaction-Be responsive and ready-Immersive and compelling>> With the continually increase in device capabilities it’s possible to bring a new dimension to applications in the form of animations. Windows has a number of predefined animations that can assist with consistency. Both platforms share a similar state and transition system which is powerful when designing for motion.
  • Do more with less-Be great at something-Focused and direct-Content before chrome-Inspire confidence>> The key to this principle is to focus on the core objective of the application. Too often this is not considered so it can appear that an application is an aggregation of a number of somewhat disparate components. When designing the structure of the application, ask the question “why has the user opened the application?”
  • Authentically Digital-Cloud connected-Dynamic and alive-Beautiful use of typography-Bold vibrant colours-Motion>> Both platforms make extensive use of bold, block, colours, which is a relatively flat style. There is a focus on allowing applications to breathe and not cramming everything onto a single page. There should be no attempt at skewmorphism - to make applications look like they belong in the real world – instead, embrace the digital world.
  • Win as one-Fit into the UI model-Reduce redundancy-Work together to complete scenarios-Tools and templates are designed to scale>> Windows and Windows Phone have a unique design language that runs through the core applications. It’s important that application developers respect the design of the platform (for better or worse) and where possible adapt their brand to compliment the design language. This ensures a consistent user experience which benefits the end user, application developer, device manufacturers and of course Microsoft (ie the whole ecosystem).
  • These design principles run throughout the design language you use to create great apps for Windows Phone and for Windows 8.
  • The result is the Windows Phone that you see today – great use of bold block colors, a clear uncluttered display and clear communication of the information the user needs.
  • XAML and MetroWindows phone uses a default font called Segoe WP. All the project templates and controls use this style by default. There are many other aspects of design that together make up the Windows Design Language as applied to Windows Phone, such as the spacing between UI items and the page layout.You can download the User Experience Design Guidelines for Windows Phone document from AppHub, or from the URL shown on the slide. The design guidelines are well worth reading. In fact you can’t call yourself a phone developer until you have read them.   
  • Now, keeping those design messages in mind, we are going to go through the process of building an app, from the design concept right through to the completion of a functional, prototype. As we do so, we will learn how the tools help us to build great apps that adopt the Windows Phone style.
  • The first thing to note, is that it is rarely a great idea to break out the tools to start prototyping your app. Better to think carefully about what your app is going to do, and to do the first design exercise on paper. With any app, you should always be asking yourself: “What is it that the user opened this app to do?”. The app should have a clear purpose, be intuitive and pleasurable to use. You can bests achieve these goals by spending some time thinking about the different screens the user will see and what the information they communicate should be.Here we see the design for the Contoso Cookbook application, which is what we are going to build. The main page is a list of regional cookery styles, and after the user selects the regional style they want, the app displays a pivot consisting of an introduction page on the region, and then a list of recipes for that region. Then, when you select a recipe from the list, the app displays the detailed instructions of how to make the selected recipe.
  • As a part of this exercise, think carefully about how the user will navigate through your app. Is it a “hub and spoke” design (most are) where there is a recognisable “home page” and the user starts from there to go out along a spoke to achieve some goal, or is it a more free-form ‘magazine’ style of app, where the user can jump around from experience to experience? Think about this now, as it will influence how you build your app.
  • Separation of TasksThe XAML programming technology allows the visual elements to be written as a dialect of XML (called XAML, or XML Application Markup Language), which design tools such as Blend can easily generate and manipulate.Sitting alongside the XAML are C# or Visual Basic code files, which the application developer creates and maintains using Visual Studio.This separation of presentation (the UI) from the application logic can lead to well-structured applications, and allows graphical designers to concentrate on what they are good at, and coders to concentrate on what *they* are good at.   
  • Tools for the Job: Graphical DesignWhen you download the Windows Phone SDK, you get not one, but two full-functioned developer tools: Visual Studio which is primarily geared to satisfying the needs of coders, and Blend for Visual Studio 2012 which provides an alternative toolset for working on Windows Phone projects which is better suited to the needs of graphical designers.   
  • Tools for the Job: Code CreationDevelopers use Visual Studio, primarily for working on the code behind the UI of the application. But you can create UI in Visual Studio; just the same as you can write code in Blend.In Visual Studio, you can create UIs any way you want:Drag components onto the design surface from the Toolbox windowWrite the XAML language directly into the XAML view on the designer to specify the UI of the applicationCreate UI elements directly “on the fly” in your code by instantiating instances of the appropriate class.In Visual Studio 2012, many of the design tools that previously were only in Blend have now been incorporated into Visual Studio, such as the Application Bar designers and the Style wizards. This means that developers who wear both hats: a developer *and* a designer, can stay in Visual Studio much of the time where previously they would switch more frequently between the two tools.   
  • Design Style and programmingThe thought processes of programmers usually focuses on the technical challenges they need to solve in the code when thinking of an application. That’s absolutely fine.However, user acceptance of an app for a modern touch-sensitive smartphone is about more than just ‘does it work’? It has to work well, and be a pleasure to use.The third bullet point on the slide is very important. Phone users are very sensitive to UI issues.Designers are as important in a phone app development team as programmers.The applications that really stand out in the marketplace are those with design input.    
  • Project Templates and ComponentsThe Windows Phone SDK installs a set of different project templates which you use to create the starter design and code of your application. All the templates conform to the Windows Phone design guidelines, but address slightly different styles of application.Once you have picked your style you can then create an application based on that.   
  • Application TemplatesThe Windows Phone Application and Windows Phone Databound Application templates both create simple apps that consist of one or two pages respectively.The Pivot and Panorama templates create applications built around the Pivot and Panorama controls. These application styles are particularly interesting as they demonstrate one of the innovative User Experiences that Windows Phone brings to smartphones.With both Pivot and Panorama, the phone screen is made to feel like a window on a much broader landscape behind it. The user swipes left or right in order to reveal a bit more of the content that is held in a big wide display area ‘behind’.You usually use a Pivot to show different views of essentially the same kind of data objects. For example, the built-in email app uses a Pivot to allow the user to easily switch between ‘All’, ‘Urgent’ ‘Unread’ etc views of their mail.The panorama is more like a big magazine cover which contains little islands of information which will be different from each other. Think of the ‘hubs’ on Windows Phone such as the music+videos hub. This shows different collections of media as the user swipes across to reveal more: ‘zune’, ‘history’, ‘new’, ‘apps’ etc.Tip: If you have time you can create a default application of each kind to show how they work. 
  • Application TypesThese application types are fundamentally the same, in that they are created and managed in exactly the same way.The screens above have been entirely created by the project templates that are provided as part of Visual Studio.Tip: If you have time you can create a default application of each kind to show how they work.   
  • We are going to start building our application by looking at how XAML allows us to layout our pages in a flexible way.
  • The app we are building is the Contoso Cookbook. Although the main page is a list of regional cookery styles, we are actually going to start by designing the recipe detail page. There’s no particular reason for this, you can design any page. In fact, there’s a good principle at work here: You should create every page as a standalone entity. This is because Widows Phone allows multiple ways of launching an app, many of which can launch an app at any page – not just the main page. Examples include launching from tiles, speech, search extensibility and many more.
  • A pivot page is a number of differetpaes that the user navigates between by a swipe of the finger.The recipe details page is a pivot consisting of three panes: the recipe picture and instructions, the ingredients list and a third pane where the user ca see photographs they have taken for the recipe.Represented as XAML, you can see that there is a single Pivot element situated on the PhoneApplicationPage. The Pivot item has a Title attribute which displays at the top of the header area. Inside the Pivot, you place one or more PivotItem elements, one for each pane. The headers of each PivotItem display in the header are, with the currently focused item shown with a bold header, and the headers of the others shown greyed out until the user navigates to that pane.Inside each PivotItem, you define the content of the pane which is nearly always defined inside a .
  • XAMLandObjectsEvery visual element that makes up the UI of this application is actually just the graphical rendering of an object. All XAML UI is comprised of a ‘visual tree’ of objects.This is standard UI fare – nearly all graphical programming systems work the same way.   
  • XAML display elementsThe page contains a number of display elements, each of which is represented by an object.In fact, everything you see on the page is described in the XAML that is created to describe the page UI. When you drag a control from the Toolbox and drop it onto the design surface for the page, Visual Studio adds the XAML for the control into the XAML for the page.   
  • Display element dataXAML is a way of declaratively defining objects that can be rendered. The XAML defines the objects that makes up the page, and also sets the initial values of properties of those objects that is used when the page is first rendered, such as the style to use for text display, or the width and height of a button.In our application code, we can manipulate these objects and change properties while the program is running. When this happens, the visual appearance of the affected element will change.    
  • XAML element class hierarchyThe XAML family of classes is very rich and quite complex.Everything inherits from FrameworkElement which defines properties and events that all XAML objects possess. Further down in the tree, there are further classes that are common base classes for others such as ButtonBase, which is the base class for controls such as Button and RadioButton.You can create custom control objects yourself that inherit from one of the existing classes in the XAML class hierarchy, but this is very specialized work and not something that most XAML application developers will ever have to do. 
  • Elements and XAMLXAML is XML – XML Application Markup Language to be precise, so it is simply text based. The slide shows the main UI of the first pane in our Pivot page, which displays the picture of the recipe and the recipe directions.It shows a Grid control which is acting as a container for the XAML elements used to diplay the UI of this pivot pane.There is no hidden designer generated codethat goes on to arrive at the final UI of a XAML application – everything you see is from rendered XAML or from the display of image files such as jpgs or pngs.   
  • Grid container elementSome of the XAML controls are simply containers for other controls. Their job is simply to determine the position of other controls you place inside them.In the case of a Grid, as shown here, you place controls into columns and rows. In fact, the Grid shown on the slide has no columns explicitly defined but does have three rows, so it is actually a grid consisting of three rows and just one column, in other words a single cell. Each element inside the Grid is positioned within a particular cell of the containing grid by specifying Grid.Row=”n” and Grid.Column=”n” properties in their XAML. None are shown on the Image elementon the slide, which means that the defaults are used, which are Grid.Row=”0” and Grid.Column=”0”. The first row is explicitly sized at 240 pixels high (in the RowDefinition property).[Click]The second row has a ScrollViewer control in it, in which there is the TextBlock used to display the recipe directions. A ScrollViewer is used because the directions will likely be taller then the display area on the screen. Note that this row is sized as “*”, which means ‘take all the size that’s left after you have layed out for the explicitly sized rows’.[Click]The third row has a StackPanel in it. A StackPanel is a useful layout control that arranges the elements you place in it either horizontally or vertically. In this case, it is used to position the ‘Prep Time:’ TextBlock and the TextBlock we woll use to diaply the actual preparation time for the recipe. 
  • Aligning to the Grid is a critical part of good UI design. In the case of Windows Phone, items should usually be aligned to multiples of 12px (although variants such as 6px or 18px are acceptable sometimes). There should be a crisp left margin of 24px and controls should be aligned with at least a 12px separation.
  • Our first attempt at laying out the recipe detail page is not good. We have not got the 24px left margin all the way down, nor is there good white space between controls.[Click]The header text and the rest of the content is not aligned[Click]There is not an even, crisp margin of 24px down the left of the page[Click]There needs to be a gap of 12px (or maybe 6px) between the bottom of the descriptions ScrollViewer and the Prep Time text.
  • One thing you can do to help with laying out to the Grid is to turn on the 12px alignment grid in the designer. This is available in both Visual Studio and in Blend. Just click the button at the bottom of the Designer window to overlay a 12px alignment grid, to help you with aligning content.
  • A new feature in VS2012 is an alignment grid overlay that you can display at runtime, not just in the designer.This is included in every new project you create in VS2012 – you will find AlignmentGrid.png in the \Assets folder, and at the foot of MainPage.xaml, there is commented out XAML to display the Grid.Notice that the AlignmentGrid element is positioned as the last element in the content Grid, which means (should you uncomment it) that it is layed out last by the XAML rendering engine and will overlay any other content on the page.You can easily copy and paste this XAML into any other page to add the alignment overlay to any other page.
  • With the alignment grid XAML uncommented, this is what you see both in the designer (on the left) and at runtime (on the right).
  • With the overlay, we can see what we have to fix to align all elements to the grid.The actual position of an element inside its container (such as a cell in a ) is specified by the Margin=”n,n,n,n” property, where the four numbers represent the margin from the element to the walls of its container (the cell) on the Left, Top, Right and Bottom respectively. Other properties such as Width, Height, HorizontalAlignment and VerticalAlignment also influence the final sizing and positioning of the UI element.The margin that has been applied here is 12, not 24. Why?The reason is that the PivotItem control itself already has a built in left margin of 12, so an additional 12 gives the required 24. You can see the builtin margin on the PivotItem by selecting the element in the Visual Studio designer – the margin is shown on the screen.
  • For demonstration notes please look in the “Demonstration” folder and open the corresponding Word document.   
  • You could set the foreground colour of the text explicitly using colours such as ‘white’ or ‘Antique Grey’, and you could try to size the text by using explicit foint sizes such as ’14’ or ’24’.This is rarely a good idea. It is very difficult to match the text sizes used by the first-party apps by setting font sizes explicitly. Its also very difficult to get things to look right when the user swirtches between the light and dark phone themes.What are the phone themes…?
  • Failure to work correctly with both the dark and light theme is one of the top 5 causes of app submission failures with the Windows Phone Store.The first shot at laying out the page looks bad because the font size is too small. [Click]But more importantly, when the user switches from the dark theme to the light theme…[Click]The text disappears because the colour has been set as white, and it is now displaying on a white background – so disappears.
  • The answer to both these problems is to use the built-in styles. These styles not only match the font sizes used by the first party apps, but also are theme aware. So they use a white foreground colour when the theme is dark, and a black foreground colour when the theme is light.Here we see a few examples of using the built-in themes effectively.
  • Applying themes used to be one of things you could only easily do in Expression Blend in the Windows Phone 7.1 SDK. Unless you happened to know the text name of the themes and could type it in directly into the XAML.But in the Windows Phone 8 SDK, the Theme designer is incorporated into Visual Studio, making it easy to see what the effect of applying each of the styles would be at the time you are choosing which style to apply.
  • For demonstration notes please look in the “Demonstration” folder and open the corresponding Word document.   
  • Design Time DataSo far, we have been laying out the UI, but the design-time experience has been poor. We’ve only seen the default text of ‘TextBlock’ displayed on the design surface which gives us very little help in laying out a great UI.Blend is great for generating design time data. This is data you see only at design time but not at runtime. Seeing realistic data while you are laying out the UI of a page helps a great deal in getting the desired end result. 
  • Generating Design-time DataDesigners use Expression Blend as a WYSIWYG editor so they can see the end result as they modify styles and layout. However, if the controls in the design do not display any text, you cannot do this effectively. Blend allows you to generate design-time data that the controls in the UI display at design time to make the WYSIWYG editing experience effective.Expression Blend allows you to auto-generate design-time data from two different sources:An XML file: Blend will read the file and infer a schema to represent the data you are trying to describe. Since this approach requires no code, it is probably the easiest entry point for designers to generate design-time data.From a class in the project: You can generate design-time data from a class that already exist in the project. This is often a better approach, but does require the application developer to have defined the data classes in advance of the UI design – no bad thing! 
  • Creating Sample Data from ClassIf you adopt a methodology where you design the data classes (i.e. the ViewModel classes) first probably working in Visual Studio, and then work on the UI in Expression Blend, you can easily generate the design-time data from the data object.In the Create Sample Data from Class window, Expression Blend lists all the CLR objects that are referenced in your project. Scroll down and select the ViewModel class for which you want to generate data.The ViewModel class can be a class that contains other objects: Blend will generate sample data for the child objects as well. 
  • Edit Design-time Data Format & ValuesBy default, Expression Blend generates dummy words in the design-time data for properties in your data class. The words are taken from LoremIpsum, which has been the printing and typesetting industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.You can easily change the number of words and the length of the words used on any data class property. If LoremIpsum isn’t appropriate, you can instead choose to generate dummy text of many other different styles, such as Names, Addresses, email addresses etc. 
  • Edit Design-time Data Format & ValuesYou can use the Generate Sample Data tools already described to tool-generate the sample data. The result is written to a file which Expression Blend puts in the \SampleData folder of your project.You can choose to edit the file directly to further modify the design-time data to suit your own needs. 
  • For demonstration notes please look in the “Demonstration” folder and open the corresponding Word document. 
  • Data BindingThis section introduces XAMLdata binding, a widely-used technique for declaratively binding UI controls directly to a property of a data object.In the previous section, we applied data binding by dragging fields from the Data window onto controls on the UI, and the prompt text told us that we were ‘data-binding’ thexxxControl.Text property to the data field. What does ‘data binding’ mean? 
  • Data BindingMost of the simple samples you have seen so far in this course set the properties of controls directly, such as to set the Text property of a TextBox. There’s nothing wrong with that, but in any even moderately complicated app, this approach very quickly becomes unwieldy. You end up with large, bloated code files that are difficult to change to introduce new functionality, where it is too easy to make mistakes whenever you want to change anything, and which are very difficult to debug.XAML data binding is a technique where you add markup to your XAML to bind a property of a control directly to a property of a data object, eliminating code to do this.A data class that is suitable for data binding is known as a ViewModel. 
  • Data Binding in XAMLIn this example, you can see that the Text property of the TextBlock control is set not to a literal string, but to a specially formatted string known as a Markup Extension:Text="{Binding Directions}"The {…} brackets enclose a binding statement which starts with the keyword Binding. Directions is the name of the property on the bound data object where this TextBlock will get the value to show. The Binding statement does not say exactly which data object is used to supply the vale, it just states that when this element is bound to a data object, if it has a property called Directions, that’s where this control will get the value for its Text property from.You define the actual object to use for data binding by setting the DataContext property. You can set DataContext on an individual element, or on a containing element, in which case it is inherited by all the contained controls. Often, you will simply set DataContext on a Grid or on the whole Page.There is a property called ItemsSource on a ListBox control which does a similar job, but which you need to set to some collection of data objects. 
  • Data Binding ModesThis Binding statement also specifies a Mode:Text="{Binding Directions, Mode=OneWay}"The Mode property states how changes to the data object or to the control are handled:OneTime – Control property is set once to the data value and any subsequent changes are ignoredOneWay – Changes in the data object are synchronized to the control property, but changes in the control are not synchronized back to the data objectTwoWay – Changes in the data object are synchronized to the control property and vice-versa 
  • INotifyPropertyChangedThe magic that makes a data object suitable for OneWay or TwoWaydatabinding is the INotifyPropertyChanged interface.That interface exposes just a single event, PropertyChanged. When you create a data class for use with databinding, you simply code it so that in all the setters for properties on the class, you fire the PropertyChanged event, passing the name of the property in the PropertyChangedEventArgs.The observer of this PropertyChanged event is – of course – the XAML runtime. When this event fires, it updates the corresponding controls that have properties bound to the ViewModel property that has changed. 
  • The slide shows an example for the ID property. This is the way we have built ViewModels up to now. But there is a potential problem here. This breaks one of the golden rules of good software engineering – you should never use hard-coded strings – or ‘magic strings’ as they are known.What happens if we use the Visual Studio built-in refactoring tools to rename the ID property to ‘Ident’? Sure, the field and all it’s references will update, but if we forget to change the hard-coded “ID” parameter to the call to NotifyPropetyChanged, the UI will stop to update [Although, note that Binding statements in the XAML are another example of hard-coded property references, so there’s plenty of ways to get this wrong!] 
  • In Windows Phone 8, a new technique comes to our rescue – at least as far as coding ViewModels robustly goes.Now we can use the CallerMemberName attribute to automatically detect the name of the property that is calling our SetProperty method (and subsequently our OnPropertyChanged method). If you use this technique, you will not have any ‘magic strings’ in your ViewModels. The PropertyChanged event will still be raised with the correct property name specified.
  • Binding to ListsA single data object that is suitable for databinding implements INotifyPropertyChanged. A collection of objects that is suitable for databinding implements INotifyCollectionChanged which fires events whenever an item is added or removed from the collection, or an item in the collection is changed. Also, the individual items in the collection should implement INotifyPropertyChanged.You will often see a special collection object used in XAML called the ObservableCollection, which is a collection suitable for databinding and supports INotifyCollectionChanged.In the XAML on the slide, the ListBox control has an ItemsSource property which needs to be set to an ObservableCollection. In this example, it is actually databound to a property called Items. For this databinding statement to work there needs to be an Items property on whatever data object is set to be the DataContext for this ListBox. 
  • Observable CollectionsThe previous slide showed that the ListBox was databound to a property on a data object called Items.Here, you can see the Items property declaration, which is of type ObservableCollection. Observable collections are template classes, meaning that it is a collection of objects of some type. You substitute the ‘T’ in ObservableCollection for a proper type, which in this case is the ItemViewModel type.The code in the constructor shown on the slide inserts some test data into this collection, by instantiating the Items observable collection, and then adding three ItemViewModelobjects into it.[Note: this code and that shown on the other slides in this section is actually taken from a new project created with the Windows Phone Databound Project template. You may wish to create one now and walk through the code to reinforce what has been taught through these topics.]   
  • MVVMDatabinding is a crucial ingredient of a particular software pattern called MVVM, which stands for Model – View – ViewModel. This model is often used for Silverlight apps, and is similar to the better-known Model-View-Controller or Model-View-Presenter patterns.The slide suggests some further reading for those interested in exploring best practices and MVVM some more.The Swiss company GalaSoft distributes a free toolkit called MVVMLite which is widely used for XAML app development, both for Windows Phone and for Windows 8 Windows Store App development. See for more information. 
  • For demonstration notes please look in the “Demonstration” folder and open the corresponding Word document. 
  • So far in this module, we have defined the design of our app and layed out the RecipeDetailPage. We have also defined some design-time data to help with the design, and we have used the alignment grid to ensure that everything is well aligned.Next, we need to do some work on the pages of our app that contain lists of objects.
  • LongListSelectorOne change in Windows Phone 8 is that the ListBox control is replaced by the LongListSelector.The LongListSelectoris the Swiss Army Knife of selection. Think of it as ListBox++--, it has everything you expect from ListBox plus a bunch of advanced capabilities and great on-device performance minus the levels of abstraction and generality that tend to slow ListBox down. LongListSelectorsupports flat lists (programmed in exactly the same way as the old ListBox), grouped lists (with headers!), and also implements the "jump list" header navigation UI that makes the "People" app so efficient!  
  • One important thing to realize about list controls is that even though you can connect them to a collection of data objects by setting the ItemSource property, but they have no built-in default rendering of a data object. The list has no idea how you want your list to appear.All it can do without any more specific instruction is to list the name of the data item object, as shown here on the slide.
  • Blend and the design-time data window can be a great help in designing lists.If you drag a property from the data window that is actually an ObservableCollection or a List or similar – and the List mode is selected in the buttons at the top of the window – then Blend will automatically generate a ListBox on the design surface and make a ‘best guess’ at a data template. In fact it simply generates a databoundTextBlock for every public property of the objects in the list and puts them into a StackPanel inside the DataTemplate it creates to layout the list items.This is a good starting point for your finished data template.[Note that this is the only place in all the Windows Phone development tooling where a is still generated! Microsoft has removed it from the Toolbox and normally the only way you can inadvertently use a ListBox is if you type it directly into the XAML. They missed this one…. !]
  • Every aspect of the design of a list with the longListSelector is defined by a template. The main one is the ItemTemplate which defines how every item in the list displays. In addition to this, you also have the GroupHeaderTemplate and GroupFooterTemplate which appears at the top and bottom of a group of items when the control is used to show grouped items.You also have the ListHeaderTemplate and the ListFooterTemplate which formats the UI that shows at the top and the bottom of the whole list.Finally, we have the JumpListStyle, which formats the little squares you see in the Jump List (similar to the semantic zoom display on Windows 8.
  • To edit the ItemTemplate in Blend after generating it from the data window, right-click the LongListSelector control where it is listed in the ‘Objects and Timeline’ window, point at Edit Additional Templates, then Edit Item Template, then click Edit Current.
  • Here is an example of a finished data template which defines how each recipe data group (in other words, regional cookery style) appears in the list on MainPage.xaml. As with many other pieces of layout we have seen, it uses a Grid, this time with two columns and two rows. An Image displays in column 0 and spans both rows, while the group Title and Description display in column 1, in row 0 and row 1 respectively.
  • For demonstration notes please look in the “Demonstration” folder and open the corresponding Word document. 
  • In this module we walked throughThe design principles behind the Windows Design LanguageIntroduced how to use XAML to lay out the UI of our applicationCreated a Pivot page to show the recipe detailsDefined design-time data to help lay out the pageShowed how databinding helps not only with showing the design-time data, but in declaratively binding our UI elements to properties of a VireModel class at runtimeDefined an Item Template to show items in a list

Windows Phone 8 - 2 Designing WP8 Applications Presentation Transcript

  • 1. Oliver Scheer Senior Technical Evangelist Microsoft Deutschland Designing Windows Phone Applications
  • 2. Agenda Designing Windows Phone Applications In this and the next module, we will go through the essential techniques you need to build an application In this module: • Windows Design Language • Designing an App • Introduction to XAML Layout • Styles and Themes • Design Time Data • Data Binding • Lists and the LongListSelector
  • 3. 3/17/2014Microsoft confidential3 Windows Phone Design
  • 4. The Windows Phone Design Style • The Windows Phone team have taken a lot of trouble over the look and feel of the phone • They have created a design style, inspired by metropolitan signage, to express this • Programs on the phone should reflect this style 4
  • 5. Windows Design Principles
  • 6. Principle: Pride in craftsmanship Take care of the details Make it safe and reliable Uncompromising Sensitivity to Weight, Balance and Scale Align to the grid
  • 7. Principle: Be fast and fluid Life is mobile Delight with motion Design for touch Intuitive interaction Be responsive and ready Immersive and compelling
  • 8. Principle: Do more with less Be great at something Focused and direct Content before chrome Inspire confidence
  • 9. Principle: Authentically Digital Don’t Try to be What It’s NOT Cloud connected Dynamic and alive Beautiful use of typography Bold vibrant colours Motion
  • 10. Principle: Win as one Fit into the UI model Reduce redundancy Work together to complete scenarios Tools and templates are designed to scale
  • 11. Principles Pride in craftsmanship Be Fast and Fluid Win as One Do More with Less Authentically Digital
  • 12. Windows Phone 8 SDK and the Windows Phone Design Style • To make life easier for us the Windows Phone design style is “baked in” to the developer tools • The default appearance, behaviour and fonts of the user elements all match the style • If you want to find out more about the Windows Phone Design Style you can read the “User Experience Design Guidelines for Windows Phone” us/library/hh202915.aspx 13
  • 13. Designing an App 3/17/201414
  • 14. Design on Paper Before You Touch the Tools! 3/17/2014Microsoft confidential15 12:38 Text Text Text Text CONTOSO COOKBOOK regions 12:38 Text CONTOSO COOKBOOK indian rec CONTOSO COOKBOOK recipes ind pivot Text Text Text Text Contoso Cookbook Shows recipes grouped by regional style. User can view recipes, also add pictures and notes
  • 15. Design App Navigation Early! 3/17/2014Microsoft confidential16 12:38 CONTOSO COOKBOOK regions 12:38 Regional recipes 12:38 Recipe Detail 12:38 About 12:38 Notes & Photos Back BackBack Back
  • 16. Now Start Building With the Tools • One way to get good looking programs is to separate the graphical design aspects from the programming • The designer can work on the look and feel of the application • The programmer can implement the required behaviours • XAML and the Windows Phone developer tools are designed to support this way of working 17
  • 17. 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 18
  • 18. 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 19
  • 19. 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 20
  • 20. Project Templates and Components • Windows Phone SDK provides a set of project templates • Each of them maps onto a particular style of application 21
  • 21. 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 22
  • 22. Application Types • Three application types provide quite different user experiences • Select the one that you feel is the most appropriate 23
  • 23. Introduction to XAML Layout 3/17/201424
  • 24. 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
  • 25. Pivot Pages • <phone:PhoneApplicationPage x:Class="ContosoCookbook.RecipeDetailPage" ... /> <Grid x:Name="LayoutRoot" Background="Transparent"> <phone:Pivot Title=“PIVOT APPLICATION"> <!--Pivot item one--> <phone:PivotItem Header=“item1"> <Grid> </Grid> </phone:PivotItem> <!--Pivot item two--> <phone:PivotItem Header=“item2"> <Grid> </Grid> </phone:PivotItem> </phone:Pivot> </Grid> </phone:PhoneApplicationPage> 26 Pivot Control Pivot Headers Pivot Items Control
  • 26. XAML and Objects • Every XAML element is a declaration of an object • XAML stands for XML Application Markup Language • XAML is a way of describing a UI using XML • 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
  • 27. XAML Display Elements • Pivot title • Pivot item headers • Image • TextBlock • TextBlock • TextBlock 28
  • 28. 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 29
  • 29. 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 30 FrameworkElement TextBlock TextBox ContentControl ButtonBase Button Control
  • 30. Elements and XAML 31 <!--Pivot item one--> <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal"> <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem>
  • 31. Grid Container Element 32 <!--Pivot item one--> <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" > <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem>
  • 32. • 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 Alignment of Elements 3/17/201433
  • 33. • Poor alignment of content with header • Page Margin not 24px • No spacing between elements Fixing the Alignment of the Recipe Page 3/17/2014Microsoft confidential34
  • 34. • 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 Visual Studio and Blend Alignment Grid 3/17/2014Microsoft confidential35
  • 35. • 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 <!--Uncomment to see an alignment grid to help ensure your controls are aligned on common boundaries. The image has a top margin of -32px to account for the System Tray. Set this to 0 (or remove the margin altogether) if the System Tray is hidden. Before shipping remove this XAML and the image itself.--> <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />--> Alignment Grid Overlay 36
  • 36. Using the Alignment Grid 3/17/2014Microsoft confidential37 <Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />
  • 37. <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" > <TextBlock Text="Prep time: " Margin="0" /> <TextBlock x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem> Use Margin Property to Insert Spacing Microsoft confidential38
  • 38. Demo 1: Laying out a Page
  • 39. Styles and Themes 3/17/2014
  • 40. • You can set colors and font sizes for elements directly in XAML: <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Foreground="White" FontSize="12" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" > <TextBlock Text="Prep time: " Margin="0" Foreground="White"/> <TextBlock x:Name="PrepTimeTextBlock" Foreground="LightGray" FontSize="24" /> </StackPanel> • This is generally a BAD IDEA! • Difficult to match builtin styles • Difficult to work with Windows Phone Themes Applying Styles to Elements 3/17/2014Microsoft confidential41
  • 41. Foreground Colors and Themes 3/17/2014Microsoft confidential42
  • 42. <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextSmallStyle}" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" > <TextBlock Text="Prep time: " Margin="0" Style="{StaticResource PhoneTextNormalStyle}" /> <TextBlock x:Name="PrepTimeTextBlock" Style="{StaticResource PhoneTextSubtleStyle}" /> </StackPanel> </Grid> </phone:PivotItem> Use Built-In Styles Microsoft confidential43
  • 43. New in VS2012 – Apply Styles in Visual Studio 3/17/2014Microsoft confidential44
  • 44. Demo 2: Working with Styles
  • 45. Design-Time Data
  • 46. Design-time data is essential for designers toget the full benefits ofWYSIWYG designing Blend allows you tocreate sample data, toimport it from XMLor generate it from an existing class Generating Design-Time Data 47
  • 47. Creating Sample Data From Class
  • 48. Edit Design-Time Data Format and Values EasilyeditthenumberofwordsExpressionBlend generatesforeachstringfield Editthemaximumlengthofeachword
  • 49. Edit Design-Time Data Format and Values Edit the sample data XMLfile that Blend generates
  • 50. Demo 3: Design-Time Data
  • 51. Data Binding
  • 52. 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 the viewmodel class • Changing the property, updates the display • User input can automatically update the bound property of the viewmodel class
  • 53. 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), • or • The ItemsSource property of a List control <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Directions}" />
  • 54. Data Binding Modes • 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 <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Directions, Mode=OneWay}" />
  • 55. INotifyPropertyChanged  Data objects that take part in OneWay 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 public class ItemViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; … }
  • 56. ViewModel Implementation in Windows Phone 7.1 Old style of implementation was error-prone because of use of „magic strings‟ public class ItemViewModel : INotifyPropertyChanged { private string _id; /// Sample ViewModel property; this property is used to identify the object. public string ID { get { return _id; } set { if (value != _id) { _id = value; NotifyPropertyChanged("ID"); } } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }
  • 57. ViewModel Implementation in Windows Phone 8.0 New style of implementation – CallerMemberName Attribute public class ItemViewModel : INotifyPropertyChanged { private string _id; public string ID { get { return _id; } set { this.SetProperty(ref this._id, value); } } public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { var eventHandler = this.PropertyChanged; if (eventHandler != null) eventHandler(this, new PropertyChangedEventArgs(propertyName)); } }
  • 58. Binding to Lists •List controls can bind to collections of items •Set the ItemsSource property to a collection of data objects • For one way or two way databinding to work, this must be an ObservableCollection • Items inside an ObservableCollection need to implement INotifyPropertyChanged <ListBox x:Name="IngredientsLIstBox" ItemTemplate="{StaticResource StringTemplate}" ItemsSource="{Binding Ingredients}"/>
  • 59. Observable Collections 60 /// <summary> /// A collection for ItemViewModel objects. /// </summary> public ObservableCollection<ItemViewModel> Items { get; private set; } public void LoadData() { this.Items.Add(new ItemViewModel() { ID = "0", LineOne = "runtime one", LineTwo = ... }); this.Items.Add(new ItemViewModel() { ID = "1", LineOne = "runtime two", LineTwo = ... }); this.Items.Add(new ItemViewModel() { ID = "2", LineOne = "runtime three", LineTwo = ... }); }
  • 60. MVVM • MVVM stands for Model – View – ViewModel • MVVM is an architectural pattern that employs Databinding and strict separation of concerns • Model – a class or classes that exposes the data of your application, either fetched from local data storage or externally such as a web service • ViewModel – a class or classes that has properties and methods that can be used to databind to a View • View – a class or classes that implement the presentation functionality of your application, displaying data and accepting user input. A View should contain no application logic and is bound to a ViewModel class • See • Implementing the Model-View-ViewModel Pattern in a Windows Phone Application: • MVVMLite framework:
  • 61. Demo 4: Data Binding 62
  • 62. Designing Lists
  • 63. LongListSelector • ListBox++ • Flat lists • Grouped lists – with headers • Jump List • Supports full UI and data virtualization • Formerly in the Silverlight Toolkit • Now in ROM for good performance • Use instead of ListBox – this is the preferred List control!
  • 64. 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 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:LongListSelector x:Name="lstGroups" ItemsSource="{Binding ItemGroups}" SelectionChanged="lstGroups_SelectionChanged" > </phone:LongListSelector> </Grid> 3/17/201465
  • 65. 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 66 „List‟ mode
  • 66. 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 • ItemTemplate – layout for each data item • JumpListStyle – layout of items in the Jump List, if enabled • ListFooterTemplate – area that shows at the foot of the whole list • 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 3/17/201467
  • 67. • Right-click on the list control, then access the Edit Additional Templates menu • Design the controls in the template Modifying the ItemTemplate in Blend 3/17/201468
  • 68. <phone:PhoneApplicationPage.Resources> <DataTemplate x:Key="RecipeDataGroupTemplate"> <Grid Margin="5" > <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Image Source="{Binding BackgroundImage}" Width="150" Stretch="UniformToFill" Grid.RowSpan="2"/> <TextBlock Text="{Binding Title}" Grid.Column="1" Grid.Row="0" Style="{StaticResource …}"/> <TextBlock Text="{Binding Description}" Grid.Column="1" Grid.Row="1" Style="{StaticResource …}" /> </Grid> </DataTemplate> </phone:PhoneApplicationPage.Resources> DataTemplate in XAML 3/17/2014Microsoft confidential69
  • 69. Demo 5: Data Templates and Lists 70
  • 70. Review • Windows Phone Design has five key principles: • Clean, Light, Open, Fast • Celebrate Typography • Alive in Motion • Content, Not Chrome • Authentically Digital • Windows Phone applications use XAML to express the design of their user interface • The design is expressed in a XAML text file that defines and arranges display elements • There are a set of project templates for applications based on the Windows Phone design • In Blend, you can create design-time data to aid during design of a UI • Databinding in XAML allows you to declaratively markup UI elements to link them to a property of a data class • List controls define layout using XAML Templates
  • 71. The information herein is for informational purposes only an represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.