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

• 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 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

• 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

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

• 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 gives five guidelines for Windows 8 interfaces
– Pride in craftsmanship
– Be fast and fluid
– Authentically digital
– Do more with less
– Win as one

• 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

• 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

• 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

• 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

Control
Canvas
Free element placing
StackPanel
Grid
Automatically stacks elements horizontally or vertically
Grid-like layout, developer sets the number of rows and columns
VariableSizedWrapGrid Like Grid but single tiles can be of a different size

• 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

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

The Image component in the Toolbox.
Setting the source

• 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));

• 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 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

• 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

• 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>

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

• 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();

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

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.

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