METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT'S MODERN AND CLEAN.
IT'S FAST AND IN MOTION. IT'S ABOUT CONTENT AND TYPOGRAPHY. AND IT'S ENTIRELY AUTHENTIC.
• Infographic
• Focus is on content
• Touch friendly
• Typography is important
• Animations have an elevated role
10.14. Iconographic vs. infographic UI
• Iconographic
• Uses objects of the real world as metaphors
• Hyperrealism (shadows, lights, etc.)
• Transferring content from the analogue world to the digital
• Focuses on the technique of manipulation and ordering of content
• Infographic
• Information is elevated
• The interface is the content itself
• Design is functional: orders, separates, highlights information
• With colours, fonts, spaces
• No chrome: devoid of unneeded design elements, clutter
10.15. Control elements
10.16. Examples
10.17. Metro UI platforms
• Windows Phone
• Windows 8
• Xbox
10.18. Software development for Windows Phone
10.19. .NET on one slide...
• The .NET translator generates IL (Intermediate Language) code, this is translated into machine code by the CLR runtime (Just In Time)
• Several possible programming languages (20+)
• Only C# and Visual Basic for Windows Phone
• Managed code: system protection, garbage collection, reflection, etc...
10.20. WP software technologies
• Two .NET technologies are at our disposal
• Silverlight: "business" applications
• XNA: games
• From Windows Phone 7.5 onwards these can be used together (eg. game area - XNA, menus - Silverlight)
10.21. Silverlight
• Originally RIA (Rich Internet Application) platform: made for in-browser applications
• Like Flash
• WPF (Windows Presentation Foundation): Since .NET 3.0, made for Windows desktop application development, complex UI framework
• Silverlight: for applications in browser or on mobile devices
• Grown out of WPF
• Multiplatform/browser
• Many minor differences compared to WPF in all aspects
• Some functions are exclusive to Silverlight: eg. no official Deep Zoom for WPF
10.22. WP - Why Silverlight?
• Multiplatform from the beginning, developed for low-resource environments
• Sandboxed environment: safety
• Apps can only access functions provided by the Silverlight APIs
• Isolated storage: every application has a separate folder
• UI: XAML, declarative, animation, vector-based
• Easy to support other resolutions in the future
10.23. XNA
• XNA is Not an Acronym
• Rich programming framework and toolkit primarily for game development
• Render loop model, 2D and 3D support (also for shaders)
• Supported platforms:
• Xbox 360
• Windows (XP, Vista, 7)
• Zune
• Windows Phone 7
• XNA Framework
• Based on .NET CF 2.0
10.24. Structure of Silverlight WP applications
• User interface declared in XAML files
• The functional counterpart for the interface defined in XAML is in a C#/VB code-behind file
• Model, other pieces of code in C#/VB files
• Recommended architecture: Model-View-ViewModel (MVVM)
10.25. MVVM
• More about MVVM in Lecture 12
10.26. Development tools
• IDE
• Visual Studio
• Expression Blend
• Windows Phone Emulator
10.27. Visual Studio
• For Windows Phone development
• Any paid version + downloadable addons
• Free: Visual Studio 2010 Express for Windows Phone
• The usual, rich functionality
• UI (XAML) editor
• Debug functions
• Emulator
• On device debug
10.28. Expression Blend
• Primarily for UI preparation
• Uses the same Solution as Visual Studio
• Richer functionality than the UI Editor found in Visual Studio
• Animation, styles, etc.
• Also runs code in the background! (eg. XAML code behind file)
• Some functions (eg. WCF service calls) don't work
10.29. Windows Phone Emulator
• x86 port of the operating system of the phone
• Utilizes the hardware of the PC
• 3D acceleration
• Virtualization
• Internet Explorer Mobile
• Emulation of mobile specific functions
• Location determination
• Accelerometer
10.30. App development and publication
10.31. App Hub Account
• Required for:
• Testing / debugging on phone: unlocking the phone becomes available after registration, then up to a fixed number of developer apps can be on the device at the same time
• Uploading applications to the Marketplace
• 99$ / year
• Registration for App Hub
• http://create.msdn.com/
10.32. Windows Phone Marketplace
• As a developer, 100 free and an unlimited number of paid applications can be uploaded
• Further free apps cost 20$ each
• The developer receives 70% of the price
• Price range: 0.99$ - 499.99$
• Applications are tested before being released to the public (certification)
• Mid-November 2012:118,000 apps
• Free registration for students:DreamSparkwww.dreamspark.com
10.33. XAP files
• Windows Phone applications can be distributed in form of .XAP files
• Essentially a renamed .ZIP archive
• Contents:
• Code of the application in a DLL (assembly)
• XAML files
• Further DLLs
• Pictures and other content
10.34. XAML basics
10.35. XAML
• XAML: XML based, declarative language for initializing structured values and objects by creating hierarchical object graphs
• No magic involved, every function is accessible from code
• In case of Silverlight, common language of the programmers and designers, developer tools (Visual Studio) and designer tools (Blend)
• XAML is only a tool, language for declarative arrangement of the user interface
• Slightly resembles XHTML, but is much more powerful
• Hierarchy of elements, layout, graphics, media, animation, data binding, triggers, styles, ...can all be expressed with it!
10.36. XAML example
10.37. XAML processing
• XAML is stored in plain text/XML format along with the application
• No converting to binary format (BAML) unlike in WPF
• When running a SilverLight application
• Reading XAML, building object tree, generating code:
10.38. XAML basics
• Tags instantiate classes (name of tag = name of class)
• Each class of every .NET namespace is also accessible from XAML
• In the XAML, we assign XML namespaces to .NET namespaces with properties of the root element
• Silverlight controllers are in the default namespace
• The 'x' namespace is the general XAML engine
• Other assemblies and their namespaces can be imported into new XML namespaces
10.39. Property value assignment
• If the value of the property can be determined from a string, the standard XML attribute can be used:
• Any value can be given with the Property Element syntax: the value of the property is listed as a child element of the XML
10.40. XAML vs. C#
• XAML:
• C#
10.41. XAML basics - Content property
• A so-called Content property can be set in case of every class, the value of the XML tag will be given to this
10.42. Code-behind
• Additional code to the classes defined in the XAML
• In a separate source file: code-behind file (eg. App.xaml and App.xaml.cs)
• Code can be written in the XAML itself: x:Code BAD PRACTICE
• Code-behind file
• Contains a partial class, can be accessed with the x:Class property from the XAML
• The partial class has to be derived from a root class defined in the XAML
• Eg. PhoneApplicationPage
10.43. Example: code-behind
10.44. Connection between code-behind and XAML
• Handling objects from the code-behind: x:Name property
• A field with the given name and type is generated
• Event handlers
• The name of the event handler defined in the code-behind is given as an attribute in the XAML fileClick="button_Click"
10.45. Up and downsides of XAML
• Easier to read
• For developers and tools alike
• Follows the hierarchy of the interface
• Concise
• Dynamic instantiation (it's slower, though)
• Harder to spot mistakes (debugging)
• "Magic" things can also happen, like in code (although not as frequently)
• Why is this white?
• Why doesn't the data binding work?
10.46. HELLO WINDOWS PHONE 10.47. Project structure
10.48. HelloWP main page
• Button on the main page defined in XAML (MainPage.xaml)
• Event handling in the code-behind (MainPage.xaml.cs)
11. 11 Developing Windows Phone User Interface
11.1. Lecture 11 - Outline
• Dependency Property, Attached Property
• Basic UI elements
• Layout handling
• Windows Phone Toolkit
• Resources
• Demo: Playing audio
11.2. Silverlight object tree
• The XAML defines an object tree
• The elements are connected via properties
• The tree has multiple roles: for example, certain property values are derived from the "parent" based on this
• A partial graph of the object tree containing only the elements that appear on the user interface is the visual tree
11.3. Dependency Property
11.4. Dependency Property (DP)
• Extending the functionality of the normal .NET properties
• Automatic change notification (value change triggers callback)
• Small memory footprint: only stores values for the non-default elements (flyweight design pattern)
• Determination (resolution) of the value happens according to a precedence order (if one source doesn't set the value, the next highest level gets the chance)
• Data binding
• Validation
• Can be animated
• Every property of the UI controllers (eg. Button) is DP
• Can be used as a normal Property when getting/setting, but their inner mechanisms are completely different:
11.5. Defining a Dependency Property 1/2
• Every class containing DPs has to extend the DependencyObject
• This class stores DPs in a hash table
• For defining DPs, a static DependencyProperty field has to be added to the containing class
• The field has to be "registered", so that the DependencyObject ancestor can reach it
• The value of the DP can be accessed via the GetValue() and SetValue() methods inherited from the DependencyObject
• The GetValue() and SetValue() calls can be wrapped in a normal property
11.6. Defining a Dependency Property 2/2
11.7. DP value resolution
• When GetValue() is called, the actual value of the DP is determined from multiple sources according to a precedence order
[fragile]
11.8. Value change notification
• When registering the DP, a PropertyMetadata instance is passed in the Register method, which may contain
• The default value of the DP
• The callback method for changes of the DP
• Change handlingprivate static void
11.9. Attached Property
• Property values can be assigned to objects from classes not declaring that property
• Most frequent use: in a parent-child hierarchy the parent can attach certain data (settings, labels) to the child elements
• It is in fact implemented with the Dependency Property defined by the parent
• No common interface needed to the child elements!
• Example: Grid parent with 2 rows containing two Button children
• The Grid.Row Attached Propery determines which child goes into which row
11.10. User interface development 11.11. WP application base classes
11.12. Basic UI classes
• PhoneApplicationFrame
• Root UI element
• Always shows onePhoneApplicationPage
• PhoneApplicationPage
• A separate "screen", view of the application
• It can contain any controller
• The UI of the Windows Phone applications consists of such pages
• Navigation is the switching between these pages
11.13. Control component examples
• Button, CheckBox, RadioButton,TextBox, PasswordBox
• TextBlock, Image, Slider, ProgressBar
11.14. Elements of the user interface
• UI elements in a parent-children relation: Silverlight object tree
• Superclasses: UIElement FrameWorkElement Control
• Determining the containment happens through the ContentProperty of the element usually
• Reminder: the Content Property can vary by class!
• Further important base classes
• Panel: orders layout elements, eg. Grid, StackPanel, Canvas
• ContentControl: a single displayable content element (which can be composite...), eg. Button
• ItemsControl: several content elements, eg. ListBox
• UserControl: user defined Control
11.15. Layout handling
• Layout elements are used for ordering of the UI components (derived from Panel)
• StackPanel: child elements follow each other horizontally or vertically
• Grid: consists of rows and columns, child elements are in the cells
• Canvas: child elements can be positioned directly with coordinates
• The child elements can be added to the Layout element, which places them on itself
• Properties of the child elements (and Attached Properties) affect their placement
11.16. Layout - StackPanel
11.17. Layout - Grid 1/3
• For "table-like" ordering of the elements, diverse functionality, one of the most used layout elements
• The rows and columns of the table can be defined freely:
• Number of rows and columns
• Size of rows and columns
• The Attached Properties of the child element determine which row/column of the Grid it will be in
11.18. Layout - Grid 2/3
• Defining rows and columns with RowDefinitions and ColumnDefinitions
• Sizes (eg. Height) determination
• Auto: dynamic (depends on contained element)
• Specific size
• *: divides the space remaining after the Auto and fixed size rows/columns
11.19. Layout - Grid 3/3
11.20. ContentControl
• Visualizes a single contained element stored by the value of the Content Property
• The content can be
• An individual UIElement
• A Panel with child elements
• String
• An arbitrary number of other types of objects: their string representation is used (ToString() is called)
• The way the content appears can be customized via the ContentTemplate property
• Most important subclass: Button
11.21. Button
• Click event, when pressed
11.22. ItemsControl
• A controller able to contain several elements
• Two possibilities for element definition
• Through the Items property, the list of the elements can be modified , eg. new elements can be added
• Through the ItemSource property with data binding
• Examples: ListBox, Grid
11.23. ListBox
• Standard ListView with selectable elements
• The appearance of the elements is customizable via the ItemTemplate property
• Selected element: SelectedItem, SelectedItemIndex properties
• SelectionChanged event, when the selected event changes
11.24. Showing and receiving text
• Showing text: TextBlock
• Asking for text input: TextBox
• Accessing content via the Text property
• TextChanged event, when the content changes
11.25. ApplicationBar
• An ApplicationBar instance can be assigned to the pages of the app (PhoneApplicationPage) via the ApplicationBar property
• Separate Application Bar for every page
• Stores the highlighted buttons and menu elements of the page
• It can contain:
• 4 button with icons (ApplicationBarIconButton)
• Any number of menu elements via the MenuItems property (ApplicationBarMenuItem)
• If the value of Opacity is lower than 1, the content of the page extends under the transparent Application Bar
11.26. ApplicationBar example
11.27. Icons, pictures in the project
• The Build Action property has two possible settings for pictures/icons added with "Add Existing Item":
• Resource: the picture is embedded into the assembly (DLL) as a resource, this is the default
• Reference: "/HelloWorld;component/icon.png"
• Content: the picture is copied into the installer (XAP) as a separate file, and it will only be loaded when referenced (smaller memory footprint!)
• Reference: "/icon.png"
• The embedded Application Bar icons can be found in the SDK folder
• C: Program Files (x86) Microsoft SDKs Windows Phone v7.1 Icons
11.28. Windows Phone Toolkit
11.29. Windows Phone Toolkit
• New APIs by Microsoft, "experimental" controller elements (may become parts of the WP SDK later)
• Most of the elements are tested thoroughly and ready for use in industrial applications
• Can be downloaded and installed fromhttp://phone.codeplex.com
• A number of new controllers and services
• HubTile
• DateTimePickers
• ToggleSwitch
• GestureHelper (Flick, Pinch...)
11.30. Toolkit example
• For the use of the Toolkit controllers
1. A reference to the Microsoft.Phone.Controls.Toolkit assembly has to be added 2. An XML namespace must be defined in the XAML file for the references (eg. toolkit):
• For example, "Tilt" effect: rotates on touch
• The value of TiltEffect.IsTiltEnabled Attached Property has to be set to True on the pressable element
11.31. Resources
11.32. Resources
• Resources are objects which are to be reused in the XAML (or code) several times
• Eg. A color, a numerical value, a style, etc...
• The resources are stored in a shared ResourceDictionary
• ResourceDictionary is stored by the Resources property of the FrameWorkElement, thus in the code/XAML every class derived from it can contain resources
• For example, resources can be given for the Page or the Application
• Resources are identified by a textual key
• Resources can be instances of any class
11.33. Resource example
11.34. System resources
• The system defines the settings of the actual UI as resources
• The main color of the theme and other colors
• Eg. PhoneAccentBrush
• Fonts and font sizes
• Eg. PhoneFontFamilyNormal, PhoneFontSizeLarge
• Thicknesses for positioning elements
• Eg. PhoneHorizontalMargin
• Using these, the application will always appear with the current theme settings
11.35. Playing audio 11.36. Playing audio
• For playing WAV files
1. A reference has to be added to: Microsoft.Xna.Framework.dll 2. Needed namespaces:
12. 12 Build Data-Driven Apps with Windows Phone
12.1. Lecture 12 - Outline
• Navigation
• Data binding
• Data template, customization of ListBox elements
• MVVM
12.2. Navigation
12.3. Reminder: Basic UI classes
• PhoneApplicationFrame
• Root UI element
• Handles pages of the application and interchanges them when needed
• Rarely handled directly
• Created at the application startup in the App.xaml.cs:
• PhoneApplicationPage
• A separate "screen", view of the application
• The UI of the Windows Phone applications consists of such pages
12.4. Pages
• Pages are defined in separate classes extending PhoneApplicationPage
• Every page has its own XAML and Code Behind file
• Pages contain a root level Content element (typically a Layout element, like Grid or StackPanel), to which the other controllers on the page are added
• The start page of the application is set in the WMAppManifest.xml ("Tasks" element):
12.5. Navigation
• The application always has exactly one active page
• Changing between active pages is navigation
• The previous pages are stored in a navigation stack (BackStack), thus the "previous page" can be restored (like in a browser)
• Navigation between pages can be initiated by several sources
• NavigationService: a class, which provides access to navigation-related functions
• HyperlinkButton: a button, which can be pressed to change to a given page
• The pages can be referenced by the name of a XAML file, via an URI
[fragile]
12.6. NavigationService
• Every page has a NavigationService property, which provides access to the navigation APIs
• "Forward navigation" (changing to a new page):
• Before backwards navigation, the existence of a saved page in the BackStack can be checked:if (NavigationService.CanGoBack) { . . . }
• URI of current page: NavigationService.CurrentSource
12.7. Passing data to pages
• When navigating forward, a ? can be appended to the URI, which enables passing values structured like
• On the opened page, the OnNavigatedTo() method is called when the page is switched, this can be overridden to receive the passed values via the QueryString property of the NavigationService
[fragile]
12.8. Even more navigation
• An object belonging to a page exists as long as the page is on the BackStack
• The page doesn't get deleted on forward navigation, the state of the object remains unchanged, its timers keep running, etc.
• By overriding the OnNavigatedFrom() method, the switching away from the page can be handled (eg. by stopping the timers)
• On each forward navigation (Navigate()), a new instance is created from the class of the page
• On backward navigation (GoBack()), no parameters can be passed in the URI
• The previous page of the BackStack can also be deleted without
navigation:NavigationService.RemoveBackEntry();
12.9. Animating page transition
• With the help of Transition classes in Windows Phone Toolkit
• To enable the animations, the type of the application frame in the App.xaml.cs has to be changed to TransitionFrame:
• The transition can be assigned to pages with Attached Properties of the NavigationService class
• The transitions played when switching to and from the page can be given separately
• Transitions
12.10. Transition example
12.11. Data Binding
12.12. Data Binding
• The aim of data binding: assiging the charasteristics of a controller to a data source
• "Creates a channel between the UI and the data objects"
• Synchronizes the property of the data source and the UI controller automatically
• For example, when the value of a TextBox is changed, the data source object bound to it also changes automatically
• Convenient, needs little coding, easy to read
• Data binding always happens between two properties
• Binding Source: any property
• Binding Target: always Dependency Property
• A single object can be Source and Target at the same time
12.13. Setting the data source
• The code {Binding PropertyName} only defines the name of the property
• What determines which object does the data source property belong to?
• The Source property of the Binding object:
• Multiple data bindings are possible at the same time with the DataContext property of the controller (eg.
PhoneApplicationPage)
12.14. Data source example with Source property
12.15. DataContext 1/2
• If the Source is not defined in the data binding, the properties of an object that can be given as DataContext property will take part in the data binding
• The FrameworkElement property of DataContext, therefore it can be assigned to almost any UI element
• The value of DataContext can be any object
12.16. DataContext 2/2
• The UI elements inherit the DataContext from their parents in the Silverlight object tree
• It is sufficient to set the DataContext in a single parent, eg. the root page, and every contained UI element will be able to access it!
• The DataContext of the child overwrites the one in the parent (but only if the property name matches!)
12.17. Change notification
• One of the most important functions of data binding is that the bound element is refreshed automatically whenever the value of the source property is changed
• Only works if the class of the object defined as data source implements the INotifyPropertyChanged interface and generates an event when the value of the property is changed
• In our example, the Book class has to implement the INotifyPropertyChanged interface and generate an event on the change of its property
12.18. Change notification example
12.19. Direction of the data binding
• The direction of the data binding can be given with the Mode property:
• The direction of the data binding can be given with the Mode property: