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

Asettelukontrollit ControlDescriptionSample 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 file 1.Launch Visual Studio and open your Windows 8 application project 2.From the Project menu, choose Add Existing Item 3.Choose your image file and click Add 4.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 image An image titled ”myImage” will be download into the Image compotent ” string url = " 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">

Step 2: defining the animation <DoubleAnimation Duration="0:0:0.6" To=" " 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"/>

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 1 I'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 2 Where 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 4.aspx. Some of the materials are available in Finnish. 4.aspx Remember, since XAML uses XML syntax, the knowledge of the XML language is helpful to learning XAML.