Transcript Luku 4 * Windows-sovellusten käyttöliittymät

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
–
•
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
–
–
–
•
A blank template aimed at developers who are familiar with Windows 8 programming
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
Control
Canvas
Description
Sample layout
Asettelukontrollit
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 = "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 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
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.