Software Development

Chapter 4 – Windows application interfaces

Contents ❷❸• Significance of a good interface• Planning your interface• What should the interface take into account?• Visual Studio application templates• Layout controls• Importing graphics• Animations

Significance of a good interface• Especially consumers are quick to abandon

programs with a poor or insufficient interface• An interface is good when the user doesn't

need to stop and think how to use it• A good interface isn't born spontaneously

Windows 8 interfaces• Windows 8 have been designed to be visually

impressive, efficient, and easy to use• Much can be learned by observing users and

picking up ideas from other applications• Follow Microsoft's instructions, but especially

games should make their own decisions– You can start at dev.windows.com

Planning• A good interface requires forethought• A good plan doesn't require any special tools,

pen and paper are sufficient• Sketches of the application's interface are an

integral part of your plan• Your goal is to help graphic designers and

developers to start working quickly

A good plan answers questions• When planning your application out, attempt to answer

at least the following questions:– What is your application good for – where is it better than

the others?– Who is your application aimed at?– On what devices can your application be used? Tablets,

laptops, desktops?– What are your application's most important features?– What do the most important screens of your application look

like and how do you move between them? In what order?

Touch first• Windows 8 applications are primarily intended

to be touch-controlled• This must taken into account during interface

design• However, people still use plenty of computers

without touchscreens– Make sure that the application can be used with

traditional input methods

Microsoft's five guidelines• Microsoft gives five guidelines for Windows 8

interfaces– Pride in craftsmanship– Be fast and fluid– Authentically digital– Do more with less– Win as one

Visual Studio application templates

• Microsoft has endeavored to make the development of Windows 8 applications easy by providing application templates

• The four most useful templates are:– Blank App– Grid App– Hub App– Split App

New Project window

More on templates• Blank App

– A blank template aimed at developers who are familiar with Windows 8 programming

• Grid App– Provides an easy way to start developing Windows 8 applications– based around a grid consisting of different groups– Third separate page for displaying details of each item

• Hub App– New addition that requires Windows 8.1 to function– Divides the application's main screen into differently sized portions giving more room for important elements– The template has three pages

• Split App– Splits the application into two pages– Ideal for applications with text and images as their contents

XAML language• The interfaces of Windows 8 applications are built

with the XAML programming language• Short for "eXtensible Application Markup Language"• Uses XML syntax• XAML files can be identified from the ".xaml" file

type.• Visual Studio templates always include at least one

XAML file

Layout controls• Windows 8 applications are able to use all

available screen space for their functionalities.• Windows 8 applications are able to use

specific layout controls• The most common layout controls– Canvas, StackPanel, Grid, VariableSizedWrapGrid

AsettelukontrollitControl Description Sample layout

Canvas Free element placing

StackPanel Automatically stacks elements horizontally or vertically

Grid Grid-like layout, developer sets the number of rows and columns

VariableSizedWrapGrid Like Grid but single tiles can be of a different size

Importing graphics• Impressive and stylish graphics are

indispensable in attracting and pleasing users• Therefore it is important to know how to

import graphical elements into your applications and display them on screen

• Graphics can be imported during development or downloaded from the web when the application is launched

Adding an image file1. Launch Visual Studio and open your Windows 8

application project2. From the Project menu, choose Add Existing Item3. Choose your image file and click Add4. Add an Image component to your program and choose

your image file with the Image component's Source field

5. The image file will be displayed inside the Image component

Adding an image file, 4 and 5

The Image component in the Toolbox.

Setting the source

Downloading an image• In addition to the images added to your

project you can use image files from the Internet

• Sample code for downloading an imageAn image titled ”myImage” will be download into the

Image compotent”

string url = "http://www.osoite.fi/kuva.jpg";

myImage.Source = new BitmapImage(new Uri(url));

Animations• Windows 8 applications offer versatile support

for the use of animations• Especially on touchscreen devices animations

can a source of joy and utility for users• The animations are defined with XAML code

– These do not need to be written manually– Especially Expression Blend can help in animating

Expression Blend

What is Expression Blend?• Expression Blend is a graphics tool

– Visual Studio on the other hand is for programming• Uses and supports the same file formats as

Visual Studio– Seamless co-operation between developers and

graphic artists• Both Blend and Visual Studio have the same

XAML support, but the used features differ

A simple animation• Let's create a simple animation in XAML code• Our goal is to display movement on screen• We will also write the code to start the

animation

Step 1: the ellipse to be animated• XAML code to add a red ellipse<Ellipse x:Name="ellipse" Fill="Red" HorizontalAlignment="Left" Height="100" Margin="76,216,0,0" Stroke="Black" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5"> <Ellipse.RenderTransform> <CompositeTransform/> </Ellipse.RenderTransform></Ellipse>

Step 2: defining the animation<Storyboard x:Name="Storyboard1">

<DoubleAnimation Duration="0:0:0.6" To="568.657" Storyboard.TargetProperty="(UIElement. RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse” d:IsOptimized="True"/>

<DoubleAnimation Duration="0:0:0.6" To="2.985" Storyboard.TargetProperty="(UIElement. RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse” d:IsOptimized="True"/>

</Storyboard>

Step 3: launching the animation• Though the animation has been defined in

XAML, it doesn't launch automatically• Animations can be launched in many ways• The most straightforward one is to have the

program code perform the activation• The required string of code:

Storyboard1.Begin();

Assignments• What are the advantages of both Visual Studio

and Blend supporting the same XAML format?• What is a storyboard in the context of

Windows 8 applications?• Find out which processors are used when a

Windows 8 application displays animations.

Questions and answers 1I've gotten used to using Visual Studio when creating applications, Do I have to use Blend?• Blend is not technically essential, but it is a great aid

for designing graphics and especially in creating animations.

• Small details are important, so you should invest in developing your application's visuals.

• In short, Blend can make a good Windows 8 application excellent.

Questions and answers 2Where can I find more information on the XAML language?• XAML, the eXtensible Application Markup Language, is a markup

language for describing and defining Windows 8 application interfaces.

• XAML:n hyvä hallinta auttaa sinua tekemään parempia Windows 8 -sovelluksia.

• Extensive information on XAML is available at http://msdn.microsoft.com/library/windows/apps/br229564.aspx. Some of the materials are available in Finnish.

• Remember, since XAML uses XML syntax, the knowledge of the XML language is helpful to learning XAML.