Concepts
Session
Working with Windows Phone 83
3.1 Advanced Elements and Controls in Windows Phone 8
Windows Phone 8 offers an array of options in the form of advanced UI controls, tools, and utilities to provide sophisticated app development for the end-users. For example, consider the following scenario:
Î A business executive, who is successful in his business of selling a variety of products for home needs, wants to cater to a wide range of customers by introducing mobile shopping. He requires a mobile app with the following features:
y The Home page should display a gallery of recent products with thumbnail images in a colorful background.
y It should contain an attractive display of text and images with animation effects.
y It should display custom-effects on the items that provide user-interaction to the user, such as when the user selects a particular item from the gallery the item should be enlarged a bit with a visible motion effect instead of providing a regular click effect.
y It should provide user-friendly display of messages to the user from time-to-time whenever the user performs a selection of any item from the app page.
y The app should provide smooth navigation facility to the users to and from the Home page to other parts of the app.
y It should also display relevant news and articles on the current list of products from other Web sites at the right corner of the Home page.
To create a mobile app with such functionalities, Windows Phone 8 provides UI controls and objects, such as Images, Brushes, Shapes, Web Browser, App Bar, and so on. It also provides various themes, animations, and control tilt effects to aid in visually stunning UI development.
3.2 Creating a UI with Attractive Visual Elements
Once you create the basic UI for an app, you need to concentrate on the ways to make it visually appealing for the end-users. Windows Phone 8 provides various options to enhance the appearance of an app.
3.2.1 Images for Windows Phone 8
You can add images, such as pictures, charts, diagrams, and logos to provide an attractive visual interface for the Windows Phone 8 apps. To include images, you can use the Image control available in Windows Phone 8.
Note – Windows Phone 8 supports most of the common image file formats, such as Joint Photographic Experts Group (JPEG), Graphic Interchange Format (GIF), and Portable Network Graphics (PNG).
The Image control in XAML is used to display the required image in Windows Phone 8 from the source location. You can specify either a Uniform Resource Locator (URL) that contains the image online or the path of the image in the local hard disk, by using the Source property in the Image control.
Concepts
Session 3
Working with Windows Phone 8
You can also customize the appearance of the image in Windows Phone 8 by using the following properties:
Î Height and Width
When the image is created without any size specifications, the original dimensions of the image are applied in Windows Phone 8 as well. In case you want to change the height and the width of the image, you can specify them explicitly. The image will then be displayed in a rectangular container area with the specified size.
Î Stretch
This property is used to specify how the image will be filled within the container area, set using Height and Width.
Table 3.1 lists the possible values of this property along with their description.
Value of the Stretch
Property Description Sample Image
None The image is not stretched to accommodate the container area.
Uniform
This is the default value. The image is adjusted uniformly according to the dimensions of the container area. The original aspect ratio of the image is maintained in this option.
UniformToFill
The image is adjusted uniformly to fill the dimensions of the entire container area.
The original aspect ratio of the image is maintained in this option.
Fill
The image is stretched to fill the
dimensions of the entire container area.
The original aspect ratio of the image is not maintained in this option. Thus, there is a possibility that the quality of the image might diminish due to irregular stretching and filling.
Table 3.1: Possible Values of the Stretch Property
Concepts
Session
Working with Windows Phone 83
Î Clip
This property is used to crop or cut down the unnecessary spacing in an image. You need to specify a geometric shape, such as Oval or Ellipse, which will fit the image to the given shape and crop the remaining areas.
Note – You can also provide a masking or a fading effect to the selected portions of the image display, by using the OpacityMask property. This property, when included in an image, will create an additional layer on top of the image and you can adjust the color settings of this new layer to provide various effects, such as transparent and opaque, on the image.
Code Snippet 1 demonstrates the use of the Image control in XAML.
Code Snippet 1:
<Image HorizontalAlignment=”Left” Height=”330” VerticalAlignment=”Top”
Width=”366” Margin=”53,97,0,0” Source=”Images/sampleImage.jpg”
RenderTransformOrigin=”0.601,0.506”>
<Image.Clip>
<EllipseGeometry RadiusX=”120” RadiusY=”120” Center=”180,180”>
</EllipseGeometry>
</Image.Clip>
</Image>
Figure 3.1 shows a Windows Phone 8 screen, which contains the Image control.
Figure 3.1: Example of a Windows Phone 8 App with Image Control
Concepts
Session 3
Working with Windows Phone 8
3.2.2 Shapes for Windows Phone 8
Windows Phone 8 provides the Shape object to create or draw geometric shapes on the app. With the Shape object, you can create the required shapes, such as Rectangle, Line, Polygon, and Ellipse, by using a brush. The brush is used to render the shape with a particular fill or thickness.
There are various properties associated with the Shape object. Table 3.2 lists some of the important properties of the Shape object along with their description.