Software Development

1. Software Development

2. Chapter 4 – Windows application interfaces

3. 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

4. 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

5. 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 atdev.windows.com

6. 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

7. 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?

8. 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

9. 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

10. 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: • BlankApp • Grid App • HubApp • SplitApp

11. New Project window

12. More on templates • BlankApp • 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

13. 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

14. 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

15. Asettelukontrollit

16. 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

17. Adding an image file • Launch Visual Studio and open your Windows 8 application project • From the Project menu, choose Add Existing Item • Choose your image file and click Add • Add an Image component to your program and choose your image file with the Image component's Source field • The image file will be displayed inside the Image component

18. Adding an image file, 4 and 5 Setting the source The Image component in the Toolbox.

19. 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 = "http://www.osoite.fi/kuva.jpg"; myImage.Source = new BitmapImage(new Uri(url));

20. 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

21. ExpressionBlend

22. 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

23. 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

24. 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>

25. 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>

26. 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();

27. 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.

28. 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.

29. 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 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.