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:
• OneWay: the target property is refreshed in case the source is changed, but not in the other direction
• TwoWay: it works in both directions
• OneWayToSource: the reversed version of OneWay
• If the Mode is not given, the default is generally OneWay (but it depends on the property)
12.20. ObservableCollection T
• A generic, dynamic collection, which signals when its elements are changed
• Implements INotifyCollectionChanged and INotifyPropertyChanged
• Should not be used with LINQ (or else the change notifications won’t work)
• Can be used for data binding: if its contents are changed, the bound views are also refreshed
12.21. Data Templates
12.22. Data Templates
• The Data Templates are used for defining the way the data appear on the user interface
• A DataTemplate can be assigned to many UI elements: it defines the visualization of the data belonging to the UI element in question
• The DataTemplate can contain UI elements, these appear in case of presentation
• Eg. the looks and contained data of the elements of a ListBox can be defined with a DataTemplate
• When setting the DataTemplate, data binding is used in most cases for referencing the data
12.23. ListBox data binding
• The elements of a ListBox (or any other ItemsControl) can be defined via the ItemsSource property
• ItemsSource can be bound to any collection (eg. List), the elements of the collection will be visualized by list elements
• If the ListBox is to be refreshed automatically when the contents of the data source change, ObservableCollection should be used
• The looks of the list elements are defined by a DataTemplate, which has to be assigned to the ListBox.ItemsTemplate property
12.24. Example: ListBox + data binding
12.25. Presentation of a List element
12.26. MVVM
12.27. MVVM architecture
12.28. MVVM
• In a sizable MVVM project
• Model: the business logic and data class of the application
• ViewModel
• Reads data from the model and transforms it to presentable form, separate ViewModel for every page defined in the XAML
• Receives the commands from the views and calls the corresponding methods of the model
• View: the classes responsible for presentation (in XAML)
• In case of smaller examples (like ours): the logic and part of the Model are located in the ViewModel (instead of the Model)
• The advantages of MVVM architecture are only noticeable in bigger projects, in case of small projects, only the overhead is increased :(
12.29. Advantages of MVVM
• The business logic is detached from the views responsible for presentation entirely (different classes, different files)
• The View defined almost entirely in XAML
• Code written in code-behind files is kept to a minimum
• Blendability: the views show the data during development, in the designer (Expression Blend, Visual Studio)
• A separate "design-time" data source (d:DataContext) can be assigned
• Expression Blend can generate dummy data based on the ViewModel class!
• Uncomplicated unit testing
12.30. Relation of View and ViewModel
• Accessing data and filling the View with it: Binding
• The DataContext of the Views is set to the ViewModel
• The Views are bound to the properties of the ViewModel
• Business logic, actions happening because of user interaction
• Event handler method in the code-behind?NO!
• The logic is defined in Commands placed in the ViewModel, binding to these
12.31. ICommand
• Encapsulates an action to be executed, to which an element of the View can be connected with Binding
• The actions, which are to be carried out in response to the events taking place in the Views can be defined in the ViewModel in the form of Commands
• The reality is not so simple: not all Views and events can be assigned a Command :(