![Page 1: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/1.jpg)
Software Development
![Page 2: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/2.jpg)
Chapter 4 – Windows application interfaces
![Page 3: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/3.jpg)
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
![Page 4: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/4.jpg)
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
![Page 5: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/5.jpg)
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
![Page 6: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/6.jpg)
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
![Page 7: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/7.jpg)
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?
![Page 8: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/8.jpg)
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
![Page 9: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/9.jpg)
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
![Page 10: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/10.jpg)
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
![Page 11: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/11.jpg)
New Project window
![Page 12: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/12.jpg)
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
![Page 13: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/13.jpg)
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
![Page 14: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/14.jpg)
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
![Page 15: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/15.jpg)
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
![Page 16: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/16.jpg)
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
![Page 17: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/17.jpg)
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
![Page 18: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/18.jpg)
Adding an image file, 4 and 5
The Image component in the Toolbox.
Setting the source
![Page 19: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/19.jpg)
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));
![Page 20: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/20.jpg)
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
![Page 21: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/21.jpg)
Expression Blend
![Page 22: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/22.jpg)
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
![Page 23: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/23.jpg)
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
![Page 24: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/24.jpg)
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>
![Page 25: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/25.jpg)
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>
![Page 26: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/26.jpg)
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();
![Page 27: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/27.jpg)
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.
![Page 28: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/28.jpg)
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.
![Page 29: Software Development. Chapter 4 – Windows application interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc75503460f94abc1cc/html5/thumbnails/29.jpg)
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.