Category of the Brush object Description
4. Adding the event for the animation
3.4 Creating Advanced Windows Phone 8 App Functionality
3.4.3 Data Binding
Generally, an app displays a collection of UI controls and visual elements to display and accept data from the users. Such data could be in the form of text or images.
There might be a requirement to display data to the users from a different source, such as an object created in C# or Visual Basic, in the app.
There could also be a need to retrieve the data entered by the user and display the same data in a customized form in a different UI control or in a message box. For example, if the user has selected an item from a list, you might want to display the selected item back to the user in a label in a customized form, such as ‘You have selected this <ListBox_Item>’.
You might also need to perform some validations on the data entered by the user in a UI control, such as checking the input and generating an error message in case of invalid input.
Windows Phone 8 provides data binding to promote such data manipulations. Data binding consists of two objects, a source and a target. The source would be the data to be retrieved and the target would
Concepts
Session
Working with Windows Phone 83
typically be a UI control in the app. You can bind a control to either a single item or a list of items.
Î Binding a UI Control to a Single Item
In general, the text entered in a TextBox control can be bound to another UI control, such as a Label or TextBlock. For example, Code Snippet 19 contains the code to create data binding on a TextBlock control based on the text entered by the user in a TextBox control.
Code Snippet 19:
Note – There are different modes to bind a control to a source as follows:
y Onetime: In this mode, the binding between the source and the target occurs at the time of creating it.
y OneWay: In this mode, the binding of the source to the target occurs at the time of creating it and every time when the data is modified in the source. This is the default mode.
y TwoWay: In this mode, the binding of the source to the target occurs every time the data is modified either in the source or in the target. There is one exception in this mode.
When the binding occurs in the Text property of a TextBox, the update occurs when the TextBox loses focus in the app.
Concepts
Session 3
Working with Windows Phone 8
Figure 3.14 displays a sample output for the partial code given in Code Snippet 19.
Figure 3.14: Data Binding on a Single Item Î Binding a UI Control to a List of Items
In case of a ListBox control or any other control that accepts multiple inputs, you might need to bind it to multiple items. For example, Code Snippet 20 contains the code to create a data binding on a ListBox control based on the values set in an object named Furniture. The Furniture object is created in C# with a list of items.
Code Snippet 20:
<!--XAML Code -->
<Grid>
<ListBox x:Name=”ListBox1”ItemsSource=”{Binding}”
Height=”200” Width=”400”/>
Concepts
Session
Working with Windows Phone 83
</Grid>
<!-- C# Code -->
public partial class MainPage : PhoneApplicationPage {
public ObservableCollection <Furniture> MyFurniture = new ObservableCollection<Furniture>();
public MainPage()
{InitializeComponent();
MyFurniture.Add(newFurniture(“Table”));
MyFurniture.Add(newFurniture(“Chair”));
ListBox1.DataContext = MyFurniture;
}}
public class Furniture
{public Furniture(stringfurnitureType) {this.FurnitureType = furnitureType;
}
publicstringFurnitureType { get; set; } publicoverridestringToString()
{returnFurnitureType;
}}
Concepts
Session 3
Working with Windows Phone 8
Figure 3.15 displays a sample output for the partial code given in Code Snippet 20.
Figure 3.15: Data Binding on Multiple Items Î Data Validation
You can also validate data using data binding. For example, consider that an app contains a UI control to accept the phone number from the user. You can create a validation to display a customized error message when the user types a text value or a numeric value with less than ten numbers in the PhoneNumber control.
The steps to create the code for data validation based on the discussed scenario are as follows:
1. Create the class in C# for the object to be validated. In this example, the object is the phone number.
Concepts
Session
Working with Windows Phone 83
2. Code Snippet 21 contains the creation of the class for data validation.
Code Snippet 21:
<!-- Creation of Phone Class in C# -->
public class PhoneClass
3. Create the validation event handler code in C# as shown in Code Snippet 22. In this method, whenever the user types in a wrong phone number, the background of the text area turns into red color. If the user types the correct value for the phone number, the text area remains the same.
Code Snippet 22:
<!-- Creation of Validation Event Handler in C# -->
private void ContentPanel_BindingValidationError(object sender,
Concepts
4. Create the UI in XAML and bind the data and the event handler to its respective object and the event handler created in C#, shown in Code Snippet 21 and Code Snippet 22. The UI comprises the container object, the StackPanel, a TextBlock control, a TextBox control, and a Button control, as shown in Code Snippet 23.
Code Snippet 23:
<!--Creation of UI in XAML -->
<StackPanel x:Name=”ContentPanel” Grid.Row=”1”
The data validation code for the app is complete.
Concepts
Session
Working with Windows Phone 83
Figure 3.16 and Figure 3.17 display the sample outputs of Windows Phone 8 screens with validation errors. Figure 3.18 displays the sample output of Windows Phone 8 screen with no validation error.
Figure 3.16: Data Binding on Multiple Items – Sample Screen 1
Concepts
Session 3
Working with Windows Phone 8
Figure 3.17: Data Binding on Multiple Items – Sample Screen 2
Concepts
Session
Working with Windows Phone 83
Figure 3.18: Data Binding on Multiple Items – Sample Screen 3
Concepts
Session 3
Working with Windows Phone 8
3.5 Check Your Progress
1. The __________ property of the Image control is used to crop down extra spacing in an image.
(A) shape (C) crop
(B) clip (D) fill
2. Which of the following properties is/are used to create rounded edges for a Shape object?
(A) Fill, UniformFill (C) X, Y Co-ordinates
(B) Stroke (D) RadiusX, RadiusY
3. Which of these statements is true and which is false?
Statement A: You need to use the Brush object to paint a UI control of an app.
Statement B: You can use the ImageBrush property to paint an area with multiple colors in straight lines.
(A) Statement A is TRUE and State-ment B is FALSE. (C) Both the statements are TRUE.
(B) Statement A is FALSE and State-ment B is TRUE. (D) Both the statements are FALSE.
4. Which of the following elements can you use in a TextBlock control to specify multiple formatting options for a single text?
(A) Transform (C) Font
(B) Run, LineBreak (D) Run, TextWrap
5. Which of these statements is true and which is false?
Statement A: There are two shades of accent color – dark and light, which the user can set for a theme.
Statement B: If a user changes a theme in Windows Phone 8, the active apps will reflect the new theme immediately.
(A) Statement A is TRUE and State-ment B is FALSE. (C) Both the statements are TRUE.
(B) Statement A is FALSE and State-ment B is TRUE. (D) Both the statements are FALSE.
6. The __________ object is the container that stores all the animated objects for an app.
(A) Media (C) Root
(B) AnimationHub (D) Storyboard
Concepts
Session
Working with Windows Phone 83
7. The ______________ effect is used to provide a visual motion of the UI control whenever an event is generated on it.
(A) Tilt (C) ColorAnimation
(B) AutoReverse (D) Transform
8. Which of these statements is true and which is false?
Statement A: The code for creating the AppBar is available by default as a commented code in
<Nameoftheproject>.xaml.cs.
Statement B: The labels of the menu items and icons for an AppBar appear by default at the bottom of the respective item or icon.
(A) Statement A is TRUE and State-ment B is FALSE. (C) Both the statements are TRUE.
(B) Statement A is FALSE and State-ment B is TRUE. (D) Both the statements are FALSE.
9. Which of the following scenarios is NOT applicable for data binding in Windows Phone 8?
(A) Binding a UI control to a single item (C) Binding a UI control to a list of items (B) Data validation (D) Data conversion
Concepts
Session 3
Working with Windows Phone 8
3.5.1 Answers
1. C
2. D
3. A 4. B 5. B
6. D
7. A
8. D
9. D
Concepts
Session
Working with Windows Phone 83
Î Windows Phone 8 provides various objects, such as images and shapes to insert images and shapes in app.
Î Windows Phone 8 provides the Brush object to paint an area of the app with a particular image or a color.
Î Windows Phone 8 provides various text and fonts objects to display text in varied formatting styles and patterns.
Î A theme is a collection of resources that provides a consistent background and style for app and its UI controls in Windows Phone 8.
Î Windows Phone 8 provides various ways to animate an app through objects, such as DoubleAnimation, ColorAnimation, and PointAnimation.
Î Storyboard is a container object that stores all the animated objects required for an app.
Î Windows Phone 8 provides control Tilt Effect to provide visual motion on a UI control whenever an event is generated.
Î An App Bar in Windows Phone 8 provides shortcuts to commonly-used operations in an app.
Î A Web Browser control in Windows Phone 8 is used to display static as well as dynamic Web content in an app.
Î Windows Phone 8 provides data binding of a UI control to a single item or a list of items to promote data validation and other manipulations.