IntroductionWelcome| 00:00 | (music playing)
| | 00:03 | Greetings! I am Doug Winnie, and I'm going to take
you through the basics of building apps
| | 00:09 | for Microsoft's Windows Phone 8 platform.
| | 00:11 | Windows Phone 8 is the latest
generation of Microsoft's mobile platforms that
| | 00:14 | has a unique design aesthetic that
ties in with the latest version of their
| | 00:17 | desktop operating system, Windows 8.
| | 00:20 | Windows Phone 8 combines a number of
unique features, like live tiles that give
| | 00:24 | you updates to the things that are
important to you, right on your home screen.
| | 00:27 | In this course, we'll look at the overall
process of making an app for Windows Phone 8.
| | 00:32 | We'll start with an overview of the
project, then we'll dive into creating
| | 00:36 | the user interface using Visual Studio 2012
for Windows Phone and the XAML Markup Language.
| | 00:43 | Next, we'll build the logic of our app
using the programming language C#, and
| | 00:47 | then look at the design templates that
Microsoft provides to help us make icons
| | 00:51 | and images for our app.
| | 00:52 | Finally, we will test our app using
the built-in emulator and on a locally-
| | 00:57 | connected device, then submit the Windows
Phone Store for people to install on their phones.
| | 01:03 | So, let's get Up and Running
with Windows Phone 8 Development.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | This is a beginner course for
building applications for Windows Phone 8.
| | 00:04 | I don't make any assumptions that
you know how to develop using previous
| | 00:07 | versions of Windows Phone,
Windows, or other .NET technologies.
| | 00:11 | To build applications for Windows Phone
8, you need to have a Windows 8 computer.
| | 00:14 | Due to the configuration of some of the
tools that are a part of the developer
| | 00:17 | toolkit, running Windows in a
virtual machine may not work.
| | 00:20 | It's recommended that you work with an
operating system installed on native hardware.
| | 00:24 | If you're on a Mac, you can use Boot Camp,
but be aware that not all the Windows
| | 00:28 | 8 drivers for Boot Camp are
currently compatible with Boot Camp.
| | 00:32 | This course assumes you've a
working knowledge of the Windows Phone 8
| | 00:35 | operating system, and have access to a
Windows Phone 8 device to test your
| | 00:38 | applications. Testing on a device
isn't required to complete the course, but
| | 00:42 | it is very helpful.
| | 00:43 | It's also helpful if you've worked
with the Code Editor or IDE (or Integrated
| | 00:48 | Development Environment).
| | 00:49 | This course will work with Visual
Studio 2012, the main IDE for Building
| | 00:53 | Windows Phone 8 Apps.
| | 00:55 | Finally, it's helpful if you
have some programming experience.
| | 00:59 | This course uses C#, but if you have
experience with Java, JavaScript, or other
| | 01:03 | languages, it will help.
| | 01:04 | I won't go into the details of the C#
language in this course, but you will
| | 01:08 | be writing some C# code, and I'll help you
out along the way with any tricky sections.
| | 01:13 | For a more in-depth look at C#, check
out C# Essential Training, here in the
| | 01:17 | Lynda.com Online Training Library.
| | Collapse this transcript |
| Using the exercise files| 00:00 | With your course, there is a collection
of exercise files you can use to follow
| | 00:03 | along with the videos.
| | 00:05 | These are available on the course
landing page of the Lynda.com website.
| | 00:08 | When you download the course files,
they'll be an archive file that, when
| | 00:12 | uncompressed, will contain
folders for each of the videos.
| | 00:15 | Each folder contains two versions: one
called start, which is the project you need
| | 00:19 | to open when you start the project, and
then the end, which is the example of what the
| | 00:23 | project should look like when you're finished.
| | 00:25 | As you learn more about Windows phone
development, and the technologies and
| | 00:27 | languages that are part of it, I
recommend using these finished examples to
| | 00:31 | experiment with and add new features.
| | Collapse this transcript |
|
|
1. Installing Visual Studio for Windows PhoneDownloading and installing Visual Studio Express| 00:00 | To get started building Windows
Phone applications, you need to install
| | 00:03 | Visual Studio, the IDE (or Integrated
Development Environment) that is provided by Microsoft.
| | 00:09 | Visual Studio comes in many flavors,
from free versions for individual users, to
| | 00:13 | paid versions for large-scale
projects and distributed development teams.
| | 00:17 | For most projects, the free Express
version of Visual Studio provides easy-to-use
| | 00:21 | and powerful tools to make developing
applications for Windows Phone easier.
| | 00:25 | If you want to learn more about Visual
Studio, check out Visual Studio Essential
| | 00:28 | Training here in the Lynda.com Online
Training Library, which goes into much
| | 00:32 | more depth about the application.
| | 00:34 | Again, the version we're going to
work with is Visual Studio Express.
| | 00:38 | There are multiple versions of Visual
Studio Express for different projects.
| | 00:41 | To get started, we need to go to MSDN or
the Microsoft Developer Network website.
| | 00:46 | You should bookmark this site, because
it has a ton of useful information on
| | 00:49 | Windows Phone Development.
| | 00:50 | So to get started, head over to dev.
windowsphone.com. From here, you can download
| | 00:56 | the SDK (or Software Development Kit),
which includes all the tools you'll need,
| | 01:01 | including Visual Studio 2012 Express
for Windows Phone. Click on the GET SDK
| | 01:06 | link on the page to get started.
| | 01:07 | There are multiple versions of the SDK available.
| | 01:10 | We are going to work with Windows Phone
8, so you'll want the SDK 8.0 listed at
| | 01:14 | the top. Click the download link to get started.
| | 01:17 | You'll be prompted to
download a small installer file.
| | 01:20 | Click Run, and the application will
download, and start in your system.
| | 01:23 | The installer screen for the SDK will
appear. To continue, you'll need to agree
| | 01:27 | to the Terms and Conditions provided by
Microsoft to use the software. And, click Install.
| | 01:32 | When you do this, the installer will download
the full SDK, which is about 1.6 GB in size.
| | 01:37 | So, be sure you have the Internet
connection on during the installation process.
| | 01:41 | After the installation is complete,
you will have the option to launch Visual
| | 01:44 | Studio to get started.
| | 01:45 | In Windows 8, an icon for Visual Studio
2012 and other tools will be placed on
| | 01:50 | the far right of your Start screen.
| | 01:52 | After the install is complete,
you'll have the option to Launch Visual
| | 01:55 | Studio and get started.
| | 01:56 | If you're on Windows 7, you can launch
Visual Studio Express for Windows Phone
| | 02:00 | from the Start menu, under Windows
Phone 8.0 SDK. Under Windows 8, an icon for
| | 02:05 | Visual Studio 2012 will also appear in
the Start screen on the right-hand side.
| | 02:09 | Now that the tools are installed, we
can now walk through how to create a new
| | 02:13 | project, and take a look at some of the
basics of the Visual Studio Interface.
| | Collapse this transcript |
| Creating a Windows Phone project| 00:00 | To begin making a Windows Phone app, you
need to create a project, or solution, as
| | 00:04 | it is called in Visual Studio.
| | 00:06 | A solution is a combination of
multiple files, or even multiple projects, that
| | 00:09 | are grouped together.
| | 00:10 | In this case, we need to create a
solution for Windows Phone project. To start,
| | 00:14 | Launch Visual Studio. When you launch
Visual Studio for the first time, it is
| | 00:18 | going to ask for a product key. You
can click on the Register online link to
| | 00:22 | provide your email address and
user information to get your key.
| | 00:26 | Your key will be provided to you in an email.
| | 00:28 | I am just going to paste my key here.
| | 00:30 | When you have entered your key,
click Next. When your Product key is
| | 00:34 | applied, click Close.
| | 00:36 | When Visual Studio starts up, you will
be greeted with a welcome screen that
| | 00:39 | gives you some helpful information and links.
| | 00:41 | It also checks to see if there
are any updates to the software,
| | 00:44 | and will prompt you to download them.
| | 00:46 | Updates to Visual Studio add new
features, and also update some of the code that
| | 00:50 | is automatically written
for you in new projects.
| | 00:52 | So, there might be some slight
differences with your version than the that one I'm
| | 00:55 | using for this course.
| | 00:57 | But don't worry. These changes
wont' affect what we're working on.
| | 00:59 | Visual Studio has two modes
in terms of the User Interface.
| | 01:03 | By default, it starts with the light theme.
| | 01:04 | I am going to change this to the dark
theme, so that you can see things more
| | 01:07 | clearly in the video.
| | 01:10 | To do this, open the Tools menu, select
Options, and then change Color theme,
| | 01:14 | to Dark, and click OK.
| | 01:17 | From here, you can click on New
project on the left-hand side under Start to
| | 01:20 | create a new project.
| | 01:22 | You can also open up the File menu, and
select New project from there. Whichever
| | 01:25 | you use, you are presented with the
same dialog box, the New Project window.
| | 01:30 | From here, you can select which type of
language you want to work with, and select
| | 01:33 | a Starter Project to begin with.
| | 01:35 | For our project, we are working with C#,
so we need to select Visual C# from the
| | 01:39 | Templates area on the left. From
here, we can select Windows Phone.
| | 01:43 | In the center column, we will want
to create a Windows Phone App, so we
| | 01:47 | can select it here.
| | 01:48 | You'll notice the icon on the left of
the Project description; there is a little
| | 01:51 | green C# showing that this a C# project,
plus the phrase Visual C# on the right.
| | 01:58 | In the right column of the window, it
shows a Preview of what the starter
| | 02:01 | project will first look like. After we create it,
we will add new items to it, and build our app.
| | 02:06 | In the bottom section, you need to give
your app a name, and define a location for
| | 02:11 | on your local machine.
| | 02:12 | When you update the name,
click OK to build the project.
| | 02:14 | I am just going to use the default name
here, just to get us into the interface.
| | 02:18 | The last thing you need to select is
which version of Windows Phone you're
| | 02:21 | building your app for.
| | 02:22 | In this case, we're building it for
Windows Phone 8, so select that, and click OK.
| | 02:27 | With that, Visual Studio will churn
away for a few seconds, and create
| | 02:30 | your project. You are then greeted with
your new project, and are ready to get started.
| | 02:34 | In the next video, we'll look at the
Visual Studio Interface, so you can get
| | 02:38 | comfortable working with it
before we start building our project.
| | Collapse this transcript |
| Exploring the Visual Studio interface| 00:00 | At first, Visual Studio can seem a
little daunting and complex, but it actually
| | 00:04 | is quite intuitive when you
get to learn how to use it.
| | 00:07 | In this video, we will give you a quick
tour of the interface and some of the
| | 00:10 | panels you will be using in the course.
Just like with any windowed application,
| | 00:14 | there is a Menu bar at the top that
holds most of the application's functions.
| | 00:18 | Under there are shortcut buttons to
access other features. Under those, there are
| | 00:22 | four main sections of the interface.
| | 00:24 | Let's start from the left,
and work our way to the right.
| | 00:26 | First, you'll see a panel called Device.
This controls some of the visuals of the
| | 00:31 | device Preview View to
the right of the interface.
| | 00:33 | Windows Phone has a number of resolutions it
supports, and two major themes: dark and light.
| | 00:39 | There are also Accent colors that can be
used to customize the interface even further.
| | 00:43 | This panel sets these options to give
you multiple views to preview your app.
| | 00:48 | The device preview window is actually
much more than that. You can select and
| | 00:51 | place new items, and manipulate the
items directly within the window.
| | 00:55 | To the right of that is the code -- in
this case, XAML, -- that is creating the
| | 00:59 | interface for the application.
| | 01:01 | Currently, the text in here is rather
small for you to view in the video, but we
| | 01:04 | will be making this
larger later on in the course.
| | 01:07 | The preview area and the code are
actually two halves of the single window, in
| | 01:12 | this case showing the
contents of the page, mainpage.xaml.
| | 01:16 | You'll see in the middle of the two
halves, there are some tabs that allow you to
| | 01:20 | swap between the two.
| | 01:22 | At the bottom, you can adjust how you
want the items split, either horizontally
| | 01:26 | or vertically, or collapse one of the panels.
| | 01:33 | Finally, at the bottom, there are zoom
options for both the Design view and the Code view.
| | 01:42 | Let's move to the right side now. By
default, this shows the Solution Explorer,
| | 01:46 | which shows all the folders and files
that are part of your project, or as
| | 01:49 | Visual Studio calls it, your solution.
| | 01:52 | As you can see, there are a few things
that are already built out for you here.
| | 01:56 | To see more, let's select the
mainpage.xaml that is in the list.
| | 02:00 | This is the one file that was already
open on the left. When you have it selected,
| | 02:05 | click on the wrench icon
at the top of the panel.
| | 02:08 | This opens the Property window, which is
really helpful when you're working with
| | 02:11 | items on the screen.
| | 02:14 | Let's zoom back to fit the entire phone
in the Design View, and see how selection
| | 02:18 | in the Design View updates
the Property panel on the right.
| | 02:21 | With this open, click on one of the items
in the Design View, like the Page name text.
| | 02:26 | You'll see that the Properties panel
displays dozens of properties for the item,
| | 02:30 | like color, font, size, position, and others.
| | 02:34 | This item, as you can see in the
Properties panel, is called a TextBlock. On the
| | 02:39 | left, there are two other panels that
can show more of the different types of
| | 02:42 | items we use in our project.
| | 02:44 | Click in the Toolbox on the left-hand
side. This a docked panel that auto hides
| | 02:49 | when it is used. It displays all the
types of components and items you can
| | 02:53 | display in your project.
| | 02:55 | This includes items that are part of
the Windows Phone 8.0 SDK, as well as
| | 03:00 | others you can add in from third parties.
| | 03:02 | Next, click on the Document Outline
docked panel. This panel shows the items and
| | 03:06 | components that are
currently in the file you have open.
| | 03:09 | As you can see, the page name item that
we have selected is selected already in
| | 03:13 | the document outline, and is
part of a number of other objects.
| | 03:16 | This view also shows what objects
are inside other objects. It can help
| | 03:21 | when you're navigating complex arrangements
of objects and components in your project.
| | 03:25 | As you can see, we start with the
PhoneApplicationPage. And then, within that, we
| | 03:29 | have a grid called LayoutRoot.
| | 03:32 | If you select these items, you can see
them selected in the Design View, and the
| | 03:36 | code view will jump to that section
of the code as well, making navigation
| | 03:39 | between components easier.
| | 03:43 | Let's jump into a C# file, and see
how the interface changes a bit.
| | 03:47 | On the right side, in the Solution
Explorer, expand the mainpage.xaml file, and
| | 03:52 | you'll see mainpage.xaml.cs. This is
a C# file called a code behind file.
| | 03:58 | We will explain a bit more about what
each of these files mean in the next
| | 04:02 | section, but for now we will
take a look at it in Visual Studio.
| | 04:04 | As you can see, the interface changes
with the code taking over most of the
| | 04:07 | screen. Since we are working with C#,
and not with the visual items that are defined
| | 04:12 | in xaml, the device preview
isn't part of this layout.
| | 04:15 | We can switch back to the XAML file
by clicking on the File tab at the top
| | 04:18 | of the screen.
| | 04:20 | So, that's our quick tour of Visual Studio.
| | 04:22 | In the next section, we will take a
longer look at Windows Phone itself, and the
| | 04:26 | various technologies that are part of it.
| | Collapse this transcript |
|
|
2. Windows Phone 8 at a GlanceEvolution of the Windows Phone| 00:00 | Windows Phone first came on the scene
at Mobile World Congress back in February
| | 00:04 | of 2010. Its unique graphic design
aesthetic and topography-heavy style were
| | 00:09 | big departures from others in the
marketplace, including Apple, Google and Blackberry.
| | 00:13 | The other big difference was the
strict hardware requirements that Microsoft
| | 00:16 | placed on handset makers.
| | 00:18 | Windows Phone 7, the first version of
the platform, supported only one resolution
| | 00:22 | and a single set of hardware requirements.
| | 00:24 | There were a very few options that
hardware manufactures could put into the
| | 00:28 | phones, especially compared to
Android. But part of this was to have a
| | 00:31 | consistent interface and form factor
to build for, which has plagued Android
| | 00:35 | with varying screen sizes, interface modifications,
and device-specific hardware or augmentations.
| | 00:40 | With Windows Phone 8, Microsoft took
the design language of Window Phone 7, and
| | 00:44 | gave it an update. Along with it, a
number of key hardware restrictions were
| | 00:47 | removed, and the platform embraced more
modern hardware, varying screen sizes, and
| | 00:52 | technologies like near field communication.
| | 00:54 | Under the hood, Windows Phone 8 is
based on the Windows NT Kernel, instead of
| | 00:58 | Windows CE, which Windows Phone 7 was based on.
| | 01:01 | As a result, there are a number of
technologies that are crossovers between
| | 01:04 | Windows 8 and Windows Phone 8, making it
easier to put applications between the two
| | 01:08 | platforms. But let's focus on the
design of the platform for a second.
| | 01:12 | There are five basic principles that
Microsoft has adopted for Windows Phone 8 --
| | 01:16 | and Windows 8 for that matter, --
| | 01:17 | that you should become familiar with
to help build consistency across the
| | 01:21 | various apps on the platform.
| | 01:22 | The first principle is pride in craftsmanship.
| | 01:25 | When you are creating your application,
pay attention to the small things in
| | 01:28 | your design. Apps that are part of
smart phones are accessed frequently and
| | 01:32 | often, and having an extra set of
polish will make each experience with it
| | 01:36 | much more enjoyable.
| | 01:37 | There is guidance to follow a design
grid to help to keep things organized, and
| | 01:41 | to provide visual hierarchy
and balance to your application.
| | 01:44 | There is also emphasis to find
topography that reflects your apps'
| | 01:47 | personality and purpose.
| | 01:49 | It helps to set the tone for
what people will do in your app.
| | 01:52 | The second principle is to do more with less.
| | 01:54 | If you are focusing on the content,
you can create a clean and purposeful
| | 01:58 | experience with little on the screen.
| | 02:00 | This extends to the interface as well
as the content, as you will find very
| | 02:04 | little crumb in Windows Phones apps,
and in the operating system in general.
| | 02:07 | Next, Windows Phone apps
should be fast and fluid.
| | 02:10 | This is done through motion, which is
a key part of the platform, and through
| | 02:13 | the use of tiles that are alive and
full of information that is relevant to the
| | 02:16 | user, and gives them a view into
what is going on within an app or process
| | 02:21 | before going into it.
| | 02:22 | This is a big design principle that
has crossed over between Windows Phone
| | 02:26 | and Windows 8. And, you can see it throughout
the Windows Phone and Window Start screens.
| | 02:29 | The next principle is probably the
biggest visual distinction between
| | 02:32 | Windows Phone and others.
| | 02:33 | The desire to be authentically
digital. This is to embrace the fact that
| | 02:37 | you're working within a digital
environment, and to base your interface and
| | 02:40 | designs within that.
| | 02:42 | Microsoft makes the distinction
between Infographic and Iconographic, pitting
| | 02:46 | its own design aesthetics from Windows
7 and earlier against their new style.
| | 02:51 | On the other end of this is iOS, which
uses a style called Skeuomorphism, which
| | 02:55 | attempts to replicate items, textures, and
objects from the physical world in the digital world.
| | 03:00 | Microsoft's design style is very much
the opposite of this, and they encourage
| | 03:04 | you to bring that your application.
| | 03:06 | Finally, the last item is win as one,
meaning, as you take your application
| | 03:10 | across different devices, form factors,
and users to use a common UI model, so that
| | 03:14 | your users will be able to take
what they learn from one platform, and
| | 03:17 | immediately be able to use it on another,
without needing to reinvent the wheel.
| | 03:21 | With an understanding of Windows
Phone has come to where it is today, and with
| | 03:25 | the understanding of its unique design
style, let's next look at what goes on
| | 03:28 | under the hood, and the
technologies that are the part of the platform.
| | Collapse this transcript |
| Technologies and languages of the Windows Phone| 00:00 | Windows Phone supports a number of
technologies and languages to build your applications.
| | 00:05 | There are generally two types of
apps you can make for Windows Phone.
| | 00:08 | The first are applications that are
built using Windows User Interface
| | 00:11 | components. These are from the .NET
Framework, and you typically build the layout
| | 00:15 | for your application
using a language called XAML.
| | 00:17 | XAML is a tag-based language similar
to HTML, where you create the layout or
| | 00:22 | view of your application.
| | 00:24 | Each of the tags in XAML map to a
component, element, or a class in the language.
| | 00:29 | To get these various components to
work and interact with data in the user
| | 00:32 | interaction, you need to create logic
in your code, which is done with a code
| | 00:36 | behind file that is linked to the XAML file.
| | 00:39 | This pair is pretty consistent when
you're building apps for Windows Phone, and
| | 00:42 | can be done with a number of languages,
including C#, which we are going to use
| | 00:46 | in this course. You can also use Visual Basic.
| | 00:49 | The other type of app is a DirectX
application that is typically used to create
| | 00:53 | 3D games. Because of hardware and
kernel updates between Windows Phone 7 and 8,
| | 00:58 | you can now create DirectX games
that work with native hardware.
| | 01:01 | These apps are made using C++.
| | 01:03 | You may also have noticed the phrase XNA
appear with the Visual Studio if you have
| | 01:08 | been poking around.
| | 01:09 | XNA is an older game development
framework that was used to create games for
| | 01:12 | Windows Phone 7. It is maintained in
the 8.0 SDK for consistency, but Microsoft's
| | 01:18 | guidance is to migrate to DirectX in C++
for game development in the future.
| | 01:22 | In addition to these first-party
development technologies, there are a number
| | 01:25 | of third-party and cross-platform frameworks
you can use to build apps for Windows Phone 8.
| | 01:30 | Some of these include PhoneGap and Unity.
| | 01:32 | PhoneGap uses HTML and
JavaScript to build applications.
| | 01:35 | PhoneGap Build, a cloud-based compilation
service, supports Windows Phone 8 projects.
| | 01:41 | Unity, a popular game development
platform, has announced plans to support
| | 01:44 | Windows Phone 8 as well, allowing
people to port games from iOS, Android, Xbox
| | 01:49 | 360, PS3, and Wii U to Windows Phone as well.
| | 01:53 | So, as you can see, there are a lot of
technologies that are available for you to
| | 01:56 | use with Windows Phone 8.
| | 01:58 | For this project we will use C#
and XAML to build our app.
| | 02:01 | In the next section, we'll cover in-
depth what we are going to make, and how it
| | 02:05 | will be made, and the steps
involved. Then it's off to coding.
| | Collapse this transcript |
|
|
3. Project Overview: "Tipd"What we are going to make| 00:00 | The project we're going to make
in this course is called TIPD,
| | 00:03 | a calculator you can use to determine the
right tip, or gratuity, for a bill at a restaurant.
| | 00:07 | The application will allow the user
enter a numerical amount to calculate.
| | 00:11 | If the value entered isn't valid, it
will notify you using color coding.
| | 00:15 | Next, the user selects a TIPD language,
and the app then shows the TIPD amount,
| | 00:19 | and then adds the amount to the original
bill to give you the grand total for the bill.
| | 00:23 | The interface features a background
image that will scale to fit the screen,
| | 00:27 | and also uses colors that are based on the
user-defined theme for their specific phone.
[00:00:3.79]
While the application itself is pretty basic,
| | 00:33 | it'll provide a good starting point
for you to become familiar with some of
| | 00:36 | the ins and outs of Windows Phones 8 to help
you build your own applications when we are done.
| | 00:41 | So, let's jump into some more details
on how the app is going to be made.
| | Collapse this transcript |
| How we are going to make it| 00:00 | Our app is going to use components that
are part of the Windows Phone 8 SDK. And,
| | 00:04 | we can work with these components to
attach logic and functionality using C#.
| | 00:09 | First, we have the layout of our
app, which is created using XAML.
| | 00:12 | The top app name and page header are
part of the built-in app template that we
| | 00:16 | just customize with our own text.
| | 00:18 | The background image is called an
image brush that we will add to our app
| | 00:22 | background, and point to a bitmap
that we'll import into our project.
| | 00:26 | Next, we have a number of text blocks
that will serve as our labels for the
| | 00:30 | various fields and sections of the interface.
| | 00:32 | The amount of the bill is entered into a
text box, which we can constrain to certain
| | 00:36 | types, which change the layout and
options of the on-screen keyboard.
| | 00:39 | The user then taps one of the five
buttons to determine the tip amount they want
| | 00:43 | to provide to their server.
| | 00:45 | These are basic buttons that we will
attach specific functionality to. When
| | 00:48 | someone selects these, we'll display
the calculated tip and the grand total of
| | 00:52 | the bill using additional text blocks.
| | 00:54 | But we'll use a formatter to
display these using dollars and cents.
| | 00:58 | Behind the scenes, the logic we'll
create in C# will take the value the user
| | 01:02 | enters in, and convert it to a number,
since in a text box, it is considered as
| | 01:06 | letters and numbers, or a string.
| | 01:08 | We'll then work with the few variables
in the project to calculate the tip, and
| | 01:11 | then convert them back into
text to display in the text boxes.
| | 01:14 | While that covers the basics of what
we're going to make, there are other
| | 01:18 | steps that are involved in creating an
app, and we'll talk about those in the
| | 01:21 | next video.
| | Collapse this transcript |
| Steps covered in this course| 00:00 | Making an app for Windows Phone isn't
just coding. There are a number of other
| | 00:04 | steps that you need to consider
when you're building your app.
| | 00:07 | First, we need to create an account
with Microsoft to submit the app to the
| | 00:09 | Windows Phone Store. When we have that,
| | 00:12 | we can then start building on our
profile to start selling apps in the store, and
| | 00:16 | to get paid for them.
| | 00:17 | When we build the app, we'll want to
test our app within the button simulator
| | 00:20 | that comes with Visual Studio.
| | 00:22 | But we will at some point need to
test on an actual device. And, we need to
| | 00:27 | provision that device as a developer
device for Visual Studio to recognize it.
| | 00:30 | After we build the app, we need to rev
up the creative side of our brain, and create
| | 00:34 | an app icon, and other screen shots to
display in the Windows Phone Store on the
| | 00:38 | device, companion app for Windows
8, and on the Windows Phone website.
| | 00:43 | We'll take a look at the design
templates that Microsoft offers to help you
| | 00:46 | create icons and designs that fit
within the overall aesthetic of the platform.
| | 00:50 | When we have these assets, we need to
import them into our project, and define
| | 00:53 | the capabilities of the app.
| | 00:55 | This is done by defining the app manifest.
| | 00:58 | With that done, we can do a final test
with the release version of our app. And, if
| | 01:02 | everything looks good, we can take that
final build called a XAP, and upload it
| | 01:06 | to the Windows Phone developer
dashboard, and submit for review.
| | 01:10 | After several days, if everything looks
good, you'll get an email that the app is
| | 01:13 | launched, and we can now see it in
the store available for purchase.
| | 01:17 | So, now that we know everything about
what we are making, how we're making it, and
| | 01:20 | the steps that go into making it,
let's start building, and actually make it.
| | Collapse this transcript |
|
|
4. Building the InterfaceCustomizing the default application layout| 00:00 | To get started, we are going to create
a new project, and update some of the
| | 00:03 | built-in components to
reflect the name of our app.
| | 00:06 | When we're done, we'll have the name
of our app and the description of what
| | 00:09 | people will do on the screen.
| | 00:11 | There's no project to start from in
the Exercise Files, so let's create one
| | 00:14 | from scratch, ourselves.
| | 00:16 | First, launch Visual Studio, and
create a New Windows Phone 8 project.
| | 00:20 | Remember. To do this, make sure you have
Visual C# and Windows Phone App selected.
| | 00:25 | Let's name our app "TIPD," and use the
default location for the app, which would be
| | 00:29 | used in your user account documents folder,
under the subfolder Visual Studio 2012
| | 00:34 | and Projects. Click OK and create the
project, and then select Windows Phone 8.0
| | 00:39 | as your SDK you wish to use for your
app, and click OK again. With that, you'll
| | 00:43 | have a default Windows 8 App ready to go.
| | 00:46 | Let's take a look at what we have here already.
| | 00:48 | I've modified the layout of the panel
slightly, to help you see things more
| | 00:51 | clearly in the video.
| | 00:53 | If you need a refresher on the overall
interface of Visual Studio, check out the
| | 00:56 | third video in Chapter1 for more information.
| | 00:58 | I am going to make this a little bit smaller,
so we can focus a little bit more on the code.
| | 01:03 | If you look at the Designs view on the
left, you'll see that the app has a few
| | 01:06 | items already created.
| | 01:08 | First, there is some
text that says MY APPLICATION.
| | 01:11 | Traditionally, this is used to
display the name of your application.
| | 01:14 | In this case, it would say TIPD. Below
that are the words "page name." This is the
| | 01:20 | page or the section of your app that
will contain information, functionality, or
| | 01:23 | interactions that are
grouped for a specific purpose.
| | 01:26 | You notice that MY APPLICATION is in all
caps, and page name is in all lowercase.
| | 01:31 | This is traditional for the Windows
Phone 8 design language. And, while you can
| | 01:34 | change it and do your own thing, I prefer
to maintain consistency with the rest of
| | 01:38 | the operating system, since that
is what your users will be used to.
| | 01:41 | Click on the MY APPLICATION text at
the top of the phone in Design view.
| | 01:45 | You'll see that the text is highlighted,
and the curve view will shift to show
| | 01:49 | the code related to the object you selected.
| | 01:51 | If you look at the code, there
are two main sections of code.
| | 01:54 | The first is called the TitlePanel, which
starts on line 42. This area of the app
| | 01:59 | contains the two text fields, or to be
more accurate, TextBlock components, which
| | 02:02 | are on lines 44 and 45.
| | 02:05 | You'll see that these are wrapped by a
common component called a StackPanel.
| | 02:09 | The opening tag is on line 43,
and the closing tag is on line 46.
| | 02:13 | We'll work more with the StackPanel in
the next video, but essentially it allows
| | 02:17 | you to layout components in a stack,
either horizontally or vertically, as it is
| | 02:21 | doing here, which is the
default layout for the StackPanel.
| | 02:24 | On line 48 is the other section
of our project, the ContentPanel.
| | 02:28 | The interactive components of
our app will be placed here.
| | 02:31 | We will do those in the next video, so
hold off on that section for right now.
| | 02:35 | To change the text for the items that
are already on the page, we can select and
| | 02:38 | enter them in Design view, or we can
edit their tag attributes in Code view.
| | 02:42 | While working with text in Design view
is easier, I found that it ultimately
| | 02:46 | is faster to edit them directly in Code view.
| | 02:49 | In addition, you'll get to learn more
about the various tag types and become
| | 02:52 | more comfortable with XAML language.
| | 02:54 | So, let's change the app Name first.
Go to line 44. You'll see the opening
| | 02:58 | TextBlock tag definition. After the
opening, there is an attribute called Text.
| | 03:03 | The value within the quotes is what we
want to change to customize the name.
| | 03:07 | So, enter TIPD in all caps within the
quotation marks after Text. After you
| | 03:14 | enter the text, the Design view may
not update immediately. Just click the
| | 03:17 | Design view window, and it
should update for you. Great!
| | 03:20 | Step 1 is done.
| | 03:21 | Now we can repeat the same process for
the second TextBlock component on line
| | 03:25 | 45. This time we want to change the
text to read "calculate," since that is what
| | 03:30 | will happen on this page of the app.
| | 03:32 | Again, change the value
"page name" to "calculate." Great!
| | 03:37 | With these built-in components updated,
the next step is to start building the
| | 03:40 | new components we will need in our app.
| | 03:42 | We'll do that in the next video.
| | Collapse this transcript |
| Laying out components using the StackPanel| 00:00 | In the last video, we worked with the
components that are pre-built in our new
| | 00:03 | Windows Phone App project.
| | 00:05 | In this video, we're going to create our own, and
arrange them in what is known as a StackPanel.
| | 00:10 | At the end of this video, you'll have
a project that'll have some new user
| | 00:13 | interface components laid out.
| | 00:14 | We'll use a combination of component
types to build the controls in the next few
| | 00:18 | videos. And, although they won't work,
our app will start to look closer and
| | 00:21 | closer to the finished project with each step.
| | 00:24 | Along the way, you'll get introduced to
new component types. And, we'll give each
| | 00:27 | of our components a unique name that
will allow us to work with them when we
| | 00:30 | build the logic behind the app
layout in C# in the next chapter.
| | 00:34 | So, let's get started!
| | 00:35 | If you're running through the course
in order, you can stick with the project
| | 00:39 | from the end of the last video.
| | 00:40 | If you're starting fresh, you can
access the starter version of this project
| | 00:43 | with the course Exercise Files.
| | 00:45 | Open the solution file, and you'll
be at the same point that I'm at.
| | 00:49 | Okay, the first thing we need to do is
create our StackPanel that will be used
| | 00:51 | to contain and lay out our components.
| | 00:54 | In XAML, there are generally two basic
types of components. There are components
| | 00:58 | that do things and there are components
that organize and lay out other components.
| | 01:02 | The StackPanel is one of the
second type. As we saw in the last video,
| | 01:06 | the StackPanel is used to stack
components vertically or horizontally.
| | 01:10 | We need to do this in the ContentPanel
section of our app, which was after the TitlePanel.
| | 01:14 | If you look at Visual Studio, you'll
see that the ContentPanel code starts at
| | 01:18 | line 48. It starts with some
descriptive text, and then there is a component
| | 01:22 | called a Grid on line 49.
| | 01:24 | A Grid is another type of layout
component. The Grid component is a bit
| | 01:28 | advanced, and we aren't
going to cover it in this course.
| | 01:30 | So for now, let's just leave it be.
| | 01:33 | Just like with the previous video, you
can add components using the Design view,
| | 01:35 | but it's important to understand the code, so
you can better work with it, and modify it later.
| | 01:40 | So to start, we're going to
create a new StackPanel component.
| | 01:43 | On line 50, in between the opening and
closing Grid tags, write the following code.
| | 01:47 | We're going to start with the less than
symbol, and start typing in StackPanel.
| | 01:51 | As you can see, Visual Studio
shows us a list that matches the words
| | 01:54 | we've already entered in.
| | 01:56 | When StackPanel is already highlighted,
I can press Tab, and that'll complete the
| | 01:59 | sentence for me. I'm going to then close
this tag with a greater than symbol. And,
| | 02:04 | you'll see that the end tag was
already created for me automatically.
| | 02:08 | I'm going to create a little bit of
space here, because I'm going to be adding
| | 02:12 | in code inside these two texts.
| | 02:14 | The default layout for a StackPanel is
vertical, which is what we want for this layout.
| | 02:18 | So, we don't need to add
anything else to these tags.
| | 02:21 | Now we can start to add in the
individual components within our StackPanel.
| | 02:25 | So, in between the two StackPanel tags --
on my screen it's currently on line 51, -- we
| | 02:31 | can start adding in some of the components.
| | 02:33 | The first is a TextBlock, which is the
same component we modified in the last video.
| | 02:37 | To create a TextBlock, we're going to
use the same process we used for the
| | 02:40 | StackPanel. Start with the less than
symbol, then start typing in TextBlock.
| | 02:45 | Again, the code completion already
shows that that's highlighted, so we can
| | 02:48 | press Tab, and that will complete that for us.
| | 02:50 | Now, remember XAML is an XML-based language,
| | 02:53 | so you can use an opening and closing tags.
Or in this case, we can use a self-closing tag.
| | 02:59 | It's a good idea to give
our components a unique name.
| | 03:02 | That way, if we ever need to change a
value or attribute of the code later.
| | 03:06 | we have a name we can use to reference it.
| | 03:08 | In XAML, you can use the X:Name
attribute to give it a unique name.
| | 03:13 | If you're familiar with XML languages,
you'll see that this is a name-spaced
| | 03:17 | attribute. The X namespace is
defined at the top of the project.
| | 03:21 | Let's go ahead and give
TextBlock a unique name now.
| | 03:23 | I'm going to go right after our
TextBlock statement here, and then type in
| | 03:26 | x:Name. Let's tab to enter that in.
| | 03:30 | Now, this may be review for some, but
just in case, unique names, or instance
| | 03:34 | names, don't have any special
characters or spaces. An exception here is the
| | 03:38 | underscore, which you'll
see later in the course.
| | 03:41 | There are also various
capitalization best practices across languages.
| | 03:44 | I tend to use the Pascal
case in C# for component names.
| | 03:48 | That means that the first letter is
capitalized, and other names that are
| | 03:50 | concatenated with the
first are capitalized as well.
| | 03:53 | So, in this case, I'm going
to call this AmountLabel.
| | 03:57 | Now that we have the basic tag, we
can add attributes to customize it.
| | 04:00 | We need to create the Text attribute, and
add the text to display in the component.
| | 04:05 | To do this I'm going to go after our
x:Name tag, and then type in Text. Now,
| | 04:09 | inside of this, I want to start putting
in the text that I want to put into this
| | 04:13 | particular component.
| | 04:14 | So, to match the users of design style
of Windows Phone, I'm actually going to
| | 04:18 | put this in all caps: AMOUNT OF SERVICE OR BILL.
| | 04:23 | Let's repeat this again for the second
label, which we'll call Tip Label.
| | 04:27 | I'm going to go to the end of the
line, create a new line, and then start by
| | 04:31 | creating a new TextBlock. Use x:Name
to give it a unique name. Again, we'll
| | 04:36 | call it TipLable, and then we will
enter in some Text. In this case, I'm going to
| | 04:41 | say TIP PERCENTAGE.
| | 04:44 | Now, if you look on to the left, you
will see the Design view is starting to
| | 04:46 | stack these up on top of each other.
| | 04:49 | That's why we're using a StackPanel,
because we want to stack these on top of
| | 04:52 | each other in the layout of our application.
| | 04:54 | All right. With that done, let's go
ahead and create two more to finish out
| | 04:57 | what we have to do.
| | 04:58 | I am going to create new TextBlock,
again. x:Name. This one we'll call
| | 05:03 | TipHeader, and then we'll enter in some text.
| | 05:07 | In this case, what we'll say is TIP
AMOUNT. Close our tag. And, we'll do
| | 05:12 | this one more time. TextBlock x:Name. This
one was called TotalHeader. Text TOTAL AMOUNT.
| | 05:23 | When you are done, you should have all
the header tags in place, and the Design
| | 05:26 | view should be like mine.
| | 05:28 | So, as you can see, the StackPanel handles
all the layout of our components for us.
| | 05:32 | With the headers in place within the
ContentPanel section of our code, we can
| | 05:35 | now start placing interactive components.
| | 05:38 | In the next video, we'll add a Text
box component into the first section of
| | 05:41 | our layout.
| | Collapse this transcript |
| Adding text input and constraining input type| 00:00 | A mobile app is pretty boring if it
isn't accepting any input from the user.
| | 00:04 | User interaction is handled often by
interface components that are designed to
| | 00:07 | get information from the user to
change how the app works or functions.
| | 00:11 | Since this is a tip calculator app, we
will clearly need to have the user enter
| | 00:15 | in the amount of the bill.
| | 00:17 | In this video, we'll do exactly that,
but we are going to add a twist to it.
| | 00:20 | At the end of the video, you will have
a TextBox component that will allow the
| | 00:24 | user to enter in the
amount of the bill or service.
| | 00:27 | We will also modify it so the user will
be constrained to enter in only numbers
| | 00:31 | into the TextBox. This works in this
case, because we're dealing with a price,
| | 00:35 | which is always a number.
| | 00:36 | So, let's get started.
| | 00:37 | If you're continuing from the last
video, you can work with the project that
| | 00:40 | you already have open.
| | 00:42 | If not, open the Start project for
this video in the Exercise Files.
| | 00:45 | Since we are working with a stack panel
to organize our components, we will want
| | 00:49 | to add our text input after the header text.
| | 00:52 | In this case, we want to place it after
the AmountLabel TextBlock, which on my
| | 00:55 | screen is on line 51.
| | 00:57 | The component we're going to use is
called a TextBox. Unlike TextBlock, TextBox
| | 01:03 | allows the value to be changed by the user.
| | 01:06 | It is similar to a text
field that you see on a webpage.
| | 01:08 | You may get the two mixed up from time
to time. I keep them sorted out in my
| | 01:12 | mind if I remember that there is a box
around any text that the user can change.
| | 01:16 | Pretty simple, but it helps me
keep things from getting mixed up.
| | 01:19 | So, let's create a basic
empty tag to get started.
| | 01:22 | So, we will create a new line. And, we are
going to create a TextBox. Press tab.
| | 01:27 | With the basic tag entered, you'll see
the Design view updated to show our new
| | 01:30 | TextBox within our other component.
| | 01:32 | Now let's give it a unique name. Just
like before, we'll use the x:Name attribute
| | 01:36 | to give it an instance name. x:
Name. And let's call it "Amount."
| | 01:42 | That's generally the basis of
getting your TextBox in your app.
| | 01:45 | Let's try it out in the
simulator, and see how it works.
| | 01:48 | To run the app in the simulator,
click the green Play button at the top.
| | 01:52 | There are various simulator types,
but we will get more into some of the
| | 01:55 | details of these in the later video.
| | 01:57 | Also, the simulator can take a minute
or two to get started when you launch it
| | 02:00 | for the first time, so you may want
to pause the video while it launches if
| | 02:03 | you're following along.
| | 02:04 | With that, I am going to launch
the simulator to run the app.
| | 02:07 | You may find the simulator app launches
behind Visual Studio. Also, you see that
| | 02:12 | the layout in Visual Studio will also
change. This is because it's now in a
| | 02:15 | debugging mode. It will return to our code
editing mode when we actually end the simulator.
| | 02:22 | Now the simulator will launch the
operating system, and then install and run our
| | 02:24 | app on the simulated device.
| | 02:25 | So, now you can click within
the device window to control it.
| | 02:28 | If we click inside the textbox, you'll see
that now that we have the soft keyboard
| | 02:33 | that shows up at the
bottom of the simulator window.
| | 02:35 | Now, since this is going to be a number,
we want to prevent users from having the
| | 02:38 | ability to enter text.
| | 02:40 | Let's go ahead and do that next.
| | 02:41 | So, let's go back to our code in Visual Studio.
| | 02:44 | To stop the debugging, I am going to
click the Stop button at the top; it's
| | 02:47 | a little red square.
| | 02:49 | That will take us back into our Code view here.
| | 02:51 | When you click the Stop button, it
will disconnect Visual Studio from the
| | 02:54 | emulator, but it will keep running.
| | 02:56 | When you test again, which we'll do
later, it'll pick up from where it left off,
| | 02:59 | and reinstall, and relaunch the app.
| | 03:01 | So, now we are back in the Visual Studio,
and now we can go back into our TextBox
| | 03:05 | component. And add an attribute that
will change the type of input the user can
| | 03:09 | enter into the field.
| | 03:11 | This is done using the InputScope attribute.
| | 03:14 | Let's go ahead and add it, and we
will set to only accept a number.
| | 03:17 | So, after my x:Name here, I'm
going to enter in InputScope.
| | 03:22 | Inside of the attribute value,
let's go ahead and put a number.
| | 03:25 | Okay. So, let's go ahead and test this in
the simulator again, and see if this
| | 03:28 | changes everything.
| | 03:30 | Let's go ahead and click on the TextBox again.
| | 03:32 | Now, you'll see only numbers and
a decimal point are available.
| | 03:36 | With this, we have made the app much
easier to use, and can eliminate a number of
| | 03:40 | possible errors that could have occurred.
| | 03:41 | So, to look back in this video, we
added a new type of component, the TextBox,
| | 03:46 | which allows a user to
enter in a value into an app.
| | 03:48 | To test out the component, we also use
the simulator to install and launch the
| | 03:51 | app in a virtual device, and finally, we
also adjusted the scope of the text box
| | 03:56 | to change the keyboard that is
displayed; in this case, to force the user to
| | 03:59 | enter in only a number.
| | Collapse this transcript |
| Adding buttons and a horizontal StackPanel layout| 00:00 | We already have the first part for
how we need this application to work.
| | 00:03 | The user is able to enter in the amount
of service or bill, using the text box.
| | 00:08 | The second piece information we need
is the percentage that the user wants to
| | 00:11 | use to calculate the tip or gratuity.
| | 00:13 | In this video, we'll accomplish this
by creating a number of buttons using
| | 00:16 | the button component.
| | 00:17 | We'll lay these buttons out
horizontally using a new StackPanel component, and
| | 00:21 | adjust its layout definition.
| | 00:22 | For each button, we'll add a unique
instance name, and customize the label for each one.
| | 00:27 | If you're continuing off of the
previous video, you're good to go; just keep
| | 00:30 | working with project you've opened.
If not, open the start project for this
| | 00:34 | lesson from the Exercise Files.
| | 00:36 | Let's start with the layout
that we want use for the buttons.
| | 00:38 | We've worked with the StackPanel before,
but that was always working vertically.
| | 00:42 | This time, we want to use
the horizontal orientation.
| | 00:45 | First, let's create an empty
tag under the header text.
| | 00:48 | On my screen, we would add a
new line under line number 53.
| | 00:51 | We'll go ahead and add in a new
StackPanel, and it automatically creates our
| | 00:55 | closing tag for that.
| | 00:57 | And with the tags in place, we
then want to customize the layout.
| | 01:00 | To change this, we need to add the
Orientation attribute to the StackPanel.
| | 01:04 | So, I'll go up to StackPanel, add in
Orientation, and we'll set this to Horizontal.
| | 01:09 | Now when we add components between
the tags, they will go from left to right,
| | 01:14 | instead of from top to bottom.
| | 01:15 | With the layout component set,
we can now add the buttons.
| | 01:18 | To do this, we need to
create a new button component.
| | 01:20 | Let's create an empty one to get started.
| | 01:23 | So, I'm going to position myself between
the StackPanel opening and closing tags,
| | 01:26 | and then we'll put in Button. We'll
use a self-closing tag for this one.
| | 01:31 | If you look at the Design view, you'll
see there is a small, white box under the
| | 01:35 | TIP PERCENTAGE header.
| | 01:36 | It is empty right now, because we
haven't added any content to it. But before we
| | 01:40 | do that, let's give it a name.
| | 01:41 | Just like before, we'll use the x:
Name attribute to name the component.
| | 01:45 | Let's call it Percent5. Add in x:Name Percent5.
| | 01:51 | With the name set, now let's add some
content into the button. Unlike the
| | 01:54 | TextBlock component, instead of using
the Text attribute, we'll use Content.
| | 01:59 | So, let's add the content attribute, and
add a label for our button. We'll add in
| | 02:03 | Content, and we'll make a
label 5, and then the % symbol.
| | 02:07 | After you enter the text into the
Content attribute, you'll see the button
| | 02:10 | update in the Design view. Great!
| | 02:12 | Now that we have our first Button,
let's add another, and see how they stack
| | 02:15 | from left to right.
| | 02:16 | Let's name this button Percent10,
and enter 10% as the button content.
| | 02:21 | With that created, you'll see again in
the Design view that the components are
| | 02:24 | indeed stacking from left to
right along the horizontal axis.
| | 02:29 | So, let's do this now for
the rest of the buttons.
| | 02:31 | We'll need to create one for 15%, 20%
and 25%, each with a corresponding
| | 02:35 | instance name and content text.
| | 02:38 | Now we have all of the user
input we need in our app laid out.
| | 02:42 | So, let's go back and see what we did.
| | 02:44 | First, we created a new StackPanel
layout component, but instead of working with
| | 02:47 | the default Vertical layout, we changed
the Orientation attribute, so we set it
| | 02:51 | Horizontal. So, now the
contents stack from left to right.
| | 02:55 | Within the StackPanel, we
added the five button components.
| | 02:57 | We gave each button a unique instance
name using x:Name, and then added Text
| | 03:02 | into the Buttons using the context attribute.
| | Collapse this transcript |
| Changing fonts| 00:00 | With the user input controls
finished, we can now turn to displaying
| | 00:03 | information back to the user.
| | 00:05 | To do this, we are going to add some
additional TextBlocks to our layout, but we
| | 00:08 | want to modify them slightly to
make the app easier to use and read.
| | 00:12 | Customizing fonts in Windows
Phone 8 has a few caveats to it.
| | 00:15 | While it is as simple as entering a
text size and font family, there are some
| | 00:19 | built-in resources to help ensure future
compatibility, and keep your app looking
| | 00:22 | consistent with the rest
of the operating system.
| | 00:25 | In this video, we will look at
some of these options for creating
| | 00:28 | consistent text in your app.
| | 00:29 | If you are continuing from the
previous video, you can keep working with the
| | 00:32 | project currently open.
| | 00:33 | If not, open the start project for
this lesson from the Exercise Files.
| | 00:37 | Let's start with the basics. Let's go
ahead and go back into Visual Studio, and we
| | 00:40 | are going to create an empty tag.
| | 00:42 | We want to place this under the tip amount
header text, which in my window, is on line 61.
| | 00:47 | So, let's go ahead and start
by adding in a new text block.
| | 00:50 | Now, let's give it a unique name. We'll go
back and say x:Name, and we'll call it TipAmount.
| | 00:57 | Now, although the value of this
TextBlock will be determined by code, which we'll
| | 01:00 | be writing in the next chapter using C#,
we should put some placeholder text in
| | 01:04 | for now to see it in context
with the rest of the layout.
| | 01:06 | So, let's go ahead and add in a
text attribute, and add in $5.25.
| | 01:12 | Now we will see the text displayed
on the left-hand side in Design view.
| | 01:16 | But as you can see, it's not very easy to read.
| | 01:17 | We need to adjust it to
make it stand out a bit more.
| | 01:20 | We can do this by adjusting the font size.
| | 01:22 | For this part, we are going to work with
the Properties panel in Visual Studio.
| | 01:25 | Depending on your layout, it might not be open.
| | 01:28 | To open it, click once on the file we
were working with in the Solution Explorer,
| | 01:32 | and then click the Wrench icon.
That will display the Properties panel.
| | 01:36 | In this case, I also have it
docked here on the right-hand side.
| | 01:39 | If you forget to click on a File in
the Solution Explorer, you might get
| | 01:42 | properties for the project
or even for a different file.
| | 01:45 | So, make sure you've clicked on the right one.
| | 01:48 | The Properties panel is contextually
sensitive to the objects selected in Design
| | 01:50 | view, or the code that the
cursor is currently on in Code view.
| | 01:54 | To display the properties of our new
TextBox, we are going to select it in Design View.
| | 01:58 | You will see the name and type at the
top of the Properties panel, confirming
| | 02:02 | that we have the right object selected.
| | 02:04 | We want to work with the Font properties of
the TextBlock, which are under the heading, Text.
| | 02:08 | We are going to click on the disclosure
triangle to show all the different options.
| | 02:12 | You will see that the current font size is 20
pixels. We can adjust this here to make it larger.
| | 02:17 | Let's go ahead and set it to 48.
| | 02:19 | You will see the text get larger in
Design View, but I also want to call
| | 02:22 | your attention to the Code view. A new
attribute font size was added to the text block.
| | 02:27 | If we go into the code, we
can also adjust it here.
| | 02:30 | Let's change 48 to 72. There. Now the
text is nice and big. In fact, it is the
| | 02:36 | same size as the calculate text at the
top, which creates a nice symmetry with
| | 02:39 | the layout, but the font is pretty bold.
| | 02:42 | We can lighten the weight of
the font by using a font family.
| | 02:44 | In Windows Phone 8, the
default font is known as Segoe WP.
| | 02:49 | This font is installed on your
system along with Visual Studio.
| | 02:52 | Now, along with this font, there are
a number of built-in styles, called
| | 02:55 | System Resources, that you can use to
apply to various components, including
| | 02:59 | our new TextBox here.
| | 03:01 | Accessing, though, is little tricky.
But let's go through that together.
| | 03:04 | First, make sure that the text block is selected.
| | 03:07 | In the Properties panel, we want to
click the little square to the right of the
| | 03:10 | Segoe WP font family drop-down. You
will see a little fly-out menu display.
| | 03:15 | Select System Resource, and you'll see
that there are a number of font styles that are
| | 03:19 | built in. They range from Bold, Light,
Normal, Semi-bold, to Semi-light.
| | 03:24 | Select PhoneFontFamilySemiLight. It
is slight, but the text is a little lighter in
| | 03:29 | weight than it was before.
| | 03:31 | As you can see, the font family
attribute was added, but instead of a specific
| | 03:35 | name, it is using the static resource to
link the value of the attribute to its
| | 03:39 | stored value that is part of the phone.
| | 03:41 | Now, you may ask yourself, "This seems
silly. Just pick the Semi Light font in the
| | 03:44 | drop-down and call it a day."
| | 03:46 | However, the power here is that if the
default font changes for some reason, your
| | 03:50 | app is future-proofed, since it
isn't dependent on a specific resource.
| | 03:54 | In the next chapter, we are going to
use the same principle with color, and you
| | 03:58 | will see that these styles can also be
dynamic at times, which allows your app to
| | 04:01 | customize itself based on
user color and theme preferences.
| | 04:04 | Let's repeat this for the second text
block we need to create at the bottom. But
| | 04:08 | this time, we'll do it in code.
| | 04:10 | Let's call the text block TotalAmounts,
and we will add in $25 as the placeholder.
| | 04:14 | So, we are going to go Underneath
TotalHeader, and create a new text block here.
| | 04:18 | x:Name. And, we will call it TotalAmount Text.
| | 04:24 | And we will add in $25.
| | 04:26 | Now, we want to add in the other two
attributes, font size and font family, here as
| | 04:30 | well. So, we can go ahead and type in
FontSize. We will make it 72. And then,
| | 04:35 | FontFamily. We are going to enter it
in exactly as we have it on line 62.
| | 04:40 | StaticResource PhoneFontFamilySemiLight.
| | 04:48 | Make sure you checked with how I have
it spelled, also on line 62. There's a
| | 04:51 | mixture of capitals and lower case
letters, and it has to be exactly spelled the
| | 04:55 | way that I have it here.
| | 04:56 | Well, I'll just go to the
end, and we'll close the tag.
| | 04:58 | With this added, we now have our new
TextBlock, and applied the font size and font
| | 05:03 | family, just like we did before, but in
this case we did it entirely in code.
| | 05:06 | All right, so we covered a few things in this
video. So, let's go ahead and take a look back.
| | 05:10 | First, we created new text block
components, and gave them unique names amd
| | 05:13 | place holder values.
[00:05:1.50]
Then, we customized them using two workflows.
| | 05:17 | The first was to open the Properties panel,
and update it there. One adjustment was
| | 05:21 | made to the font size, and the
other was to the font family.
| | 05:24 | But for the font family, we worked with
the built-in styles or static resources
| | 05:28 | for Windows Phone to derive the
font from those predefined settings.
| | 05:31 | The other workflow we used was
entirely code-based, where we used the font
| | 05:35 | size and font family attributes, and
set them to the same values to get the
| | 05:39 | same result.
| | Collapse this transcript |
| Changing colors| 00:00 | Along with fonts, colors are popular ways to
change the look and feel of your application.
| | 00:04 | Working with colors in Windows Phone 8
isn't as straightforward as you might
| | 00:08 | expect, but the color options make it
possible to adjust dynamically to user
| | 00:11 | preferences and themes.
| | 00:13 | In this video, we will create a
background behind our large text block components,
| | 00:17 | and paint them with color in a few ways.
| | 00:19 | First, using colors of your choice. And
then, we can tap into the theme colors
| | 00:23 | selected by the user, and paint using
the color to maintain consistency with the
| | 00:27 | user's personalization.
| | 00:29 | As with previous videos in this chapter,
| | 00:30 | if you're coming to this right after
the previous video, you can work with the
| | 00:33 | project that is currently open.
| | 00:35 | If not, just open up the start
project for this lesson from your
| | 00:38 | downloaded Exercise Files.
| | 00:40 | So, let's start with the bad news.
| | 00:41 | TextBlocks do not have the ability to
have background colors. You can change the
| | 00:46 | foreground color, but you
can't change the background.
| | 00:48 | To create a background color, you need
to create a container component, and give
| | 00:52 | it a color value, then place the TextBlock
component within it to get the same result.
| | 00:56 | Let's stick with what we know, and
work with a StackPanel component.
| | 01:00 | The StackPanel component supports the background
attribute, which we can set to a specific color.
| | 01:04 | Let's get started and add one.
| | 01:06 | For this, we need to add the
StackPanel after the TipHeader.
| | 01:10 | I just clicked the TipAmount field in
the Design view, and that takes me right to
| | 01:13 | the line of code in Code view.
| | 01:15 | To create our StackPanel, we need to
create it after this line of text on line 61.
| | 01:20 | So, let's create a new line here,
and then create a new StackPanel.
| | 01:23 | I am going to give it a unique name,
and we will call it TipPanel, and then
| | 01:28 | we will close the tag.
| | 01:30 | With the basic code here, we can now
move the TipAmount TextBlock, and place it
| | 01:34 | within the TipPanel StackPanel.
| | 01:35 | So, I am going to take this line of code
that we have here on line 65. I am going
| | 01:40 | to cut, go over here, and then paste.
| | 01:44 | Now we want to change the background color.
| | 01:46 | So, we can do this, first,
with the Properties panel.
| | 01:48 | So, I am going to select TipPanel, and
then open up our Properties panel. To access
| | 01:53 | the colors, open up the Brush section.
| | 01:56 | And if you look, by default, a
StackPanel has no background, or in XAML terms, no
| | 02:00 | color brush, used to paint
the background of the object.
| | 02:03 | We could adjust this by selecting
the solid color option in the panel.
| | 02:07 | Now you can adjust any of the values
here, including red, green, blue, and alpha
| | 02:11 | values, or you can work with the color selectors
here to pick whatever color you want visually.
| | 02:16 | When you select a color, you'll see
that the background attribute was added
| | 02:19 | to the stack panel.
| | 02:21 | The value for this is a 32-bit
color space constituting a red, green,
| | 02:25 | blue, and alpha color.
| | 02:26 | This is shown in hexadecimal numbers very
similar to working with CSS and websites.
| | 02:31 | In C#, there are a number of named
color values as well that you can use
| | 02:35 | English names to select.
| | 02:36 | You can enter those into the Code
view with the Background attribute.
| | 02:40 | For example, we can change this color
to Orange; just remove the hexadecimal
| | 02:44 | value that we have here, and I
can type in the phrase "Orange."
| | 02:48 | You'll see that the code hinting will
automatically give you the named values of
| | 02:52 | all the colors that you can select.
| | 02:53 | We can use things like dark violet,
deep pink. And, all of these named values are
| | 02:58 | linked to specific colors.
| | 03:00 | So, between the Properties panel and the
Code panel, you can change the color using
| | 03:03 | the color picker, your hexadecimal
values, or using static names that are
| | 03:06 | predefined in Windows Phone.
| | 03:08 | But let's think a little bit
about what makes Windows Phone unique.
| | 03:11 | One of the big tenets of the platform is
the personalization you can give your phone.
| | 03:15 | Your start screen is personalized by
your tile arrangement, size, position, but
| | 03:20 | also through a theme color that you can select.
| | 03:22 | This theme is the user's way of making the
phone their own; it makes it personal for them.
| | 03:27 | When building apps for Windows
Phone, you want to measure your app as an
| | 03:30 | extension of that personalization.
| | 03:32 | Lucky for you, the theme color that a
user selects is a style or static resource
| | 03:37 | that you can use to
customize the colors in your app.
| | 03:39 | Let's walk through how to use them.
| | 03:41 | With the object selected, we want to
switch the color picker in the Properties
| | 03:44 | panel from Editor to Color resources.
| | 03:46 | With that, you'll see that the color
picker is removed, and now you have a list of
| | 03:49 | colors to choose from.
| | 03:51 | But these aren't just colors. They are
dynamic styles that are linked to user
| | 03:54 | and system preferences.
| | 03:56 | The theme color that the user can
customize using the phone settings is listed
| | 03:59 | at the top: PhoneAccentColor.
| | 04:02 | Let's go ahead and select that.
| | 04:03 | You will see that the Code panel
has updated, and the color is now red.
| | 04:06 | Le's step through the
code and see what happened.
| | 04:09 | First, you will see that a new set of
tags has been created. While you can use
| | 04:12 | attributes within tags to define values,
you can also create child tags using dot
| | 04:16 | notation in the tag name to
set child attributes as well.
| | 04:21 | In this case, the StackPanel
name now has a new child tag called
| | 04:24 | StackPanel.Background.
| | 04:25 | Within these tags are the
values of the color we selected.
| | 04:28 | Colors that are used to change backgrounds,
borders, or foregrounds are called brushes.
| | 04:33 | In this case, we are
working with a solid color brush.
| | 04:36 | The color of this brush is set to
the system resources, PhoneAccentColor.
| | 04:40 | Now you might ask yourself, "Big whoop!
| | 04:42 | It's red. What's the big deal?"
| | 04:43 | Well, let's change a couple of things,
and preview this in other situations.
| | 04:47 | On the far left, open the Device fly-out menu.
| | 04:50 | If you're a member from our original
orientation, this panel allows you to
| | 04:53 | customize the Preferences for the
Design view panel. In this case, we can change
| | 04:58 | the theme color of the phone.
| | 04:59 | Let's go ahead and change it to Lime.
You'll see that the color now has changed.
| | 05:04 | But we didn't have to change a
single line of code in our project.
| | 05:07 | Well, let's go ahead and repeat this again
with the second text block that we need to build.
| | 05:11 | I am going to go ahead and select
TOTAL AMOUNT to jump to that area of code.
| | 05:15 | And then, let's go ahead and create our
StackPanel that we'll use to hold our
| | 05:18 | background color. x:Name to give it a
unique name. And, in this case, we will
| | 05:23 | call it TotalPanel.
| | 05:24 | We have our automatically created
closing tag. And then, I am going to go back
| | 05:28 | down to our TextBlock.
| | 05:31 | I am going to right-click, and cut. Go
in between our StackPanel opening and
| | 05:35 | closing tags, and paste. And now, I've
got the text block within our StackPanel.
| | 05:40 | So, let's go ahead back into StackPanel, and
now we can start adding in our color again.
| | 05:44 | This time, instead of using the
Properties panel, I am going to go ahead and do
| | 05:47 | this entirely in code.
| | 05:49 | So, with our StackPanel selected, I
am going to create a new line here.
| | 05:51 | And, we are going to create a
StackPanel.Background tag. Inside of this, I am
| | 05:58 | going to create a solid color brush
tag, and select the color to be a static
| | 06:05 | resource, which is called PhoneAccentColor.
| | 06:10 | So, we do the exact same thing we
did in the Properties panel, but now we
| | 06:13 | did it entirely in code.
| | 06:15 | Again, just to recap. If you take a look,
the StackPanel.Background tag we have
| | 06:19 | here is the same thing we had earlier
with the background attribute. It's just
| | 06:22 | been broken out as a separate XML node.
| | 06:25 | So again, what we did is we
added some color to our app.
| | 06:29 | Because TextBlocks don't support a
background attribute, we got around that
| | 06:32 | by placing them within the layout container,
and then changed their background attribute.
| | 06:36 | To work with a specific color,
you can enter it in, in a few ways.
| | 06:39 | First, you can use the color picker in
the Properties panel. You could enter in
| | 06:43 | an RGBA value in hexadecimal and
code, or you can use one of the dozens of
| | 06:47 | stored color names.
| | 06:48 | But another workflow for working
with color is to tap into the user
| | 06:51 | personalization by using the
PhoneAccentColor static resource.
| | 06:55 | When you do this, if the user changes
their theme accent color, your app will
| | 06:59 | automatically update to the new color,
and help it integrate with the overall
| | 07:02 | phone experience for your user.
| | Collapse this transcript |
| Working with margins| 00:00 | Spacing and alignment are things you'll
want to tweak with each app you create.
| | 00:04 | In Windows Phone, working with margins
is very similar to working with CSS.
| | 00:07 | You define a margin for the various
sides of the box surrounding your object.
| | 00:11 | In this video, we'll add margins around
the new TextBlock components and their
| | 00:15 | background containers to help add
some more visual space to the layout.
| | 00:19 | If you're continuing from the
previous video, you can continue from where we
| | 00:21 | left off. If not, open the start
project for this lesson located in the
| | 00:25 | downloaded Exercise Files.
| | 00:27 | The margins for our background containers
are off slightly from the objects above it.
| | 00:31 | If you draw a line, you'll see that the
size of the components don't line up.
| | 00:35 | We can adjust this by
adding margins to the containers.
| | 00:38 | To start, let's select the StackPanel component.
| | 00:41 | While we can do this in code, I want
to show you another way to select it.
| | 00:44 | On the left-hand side, open the
Document Outline fly-out panel.
| | 00:48 | This shows a hierarchical view of
your app, showing the parent containers
| | 00:52 | for various objects.
| | 00:53 | This panel makes it easier to select
within a complex layout. From this panel,
| | 00:56 | select the TipPanel object. To close the
panel, click the panel name on the left.
| | 01:02 | With the object selected, we can now add some
margins to help space it out on the screen.
| | 01:06 | Let's do this first using the Properties panel.
| | 01:08 | Open the Properties panel, and expand
the Layout section. This will show you the
| | 01:12 | layout attribute for the
selected StackPanel object.
| | 01:15 | You'll see here, the bottom of the
section, there are 4 boxes representing the
| | 01:19 | different sides of the StackPanel.
| | 01:21 | The arrows indicate which side you are
changing, either the left, the right,
| | 01:25 | the bottom, or the top.
| | 01:27 | Let's start by adding 12 to the left
side, and press Enter to commit the value.
| | 01:32 | You'll notice that the object is now
slightly narrower, with 12 pixels of
| | 01:35 | margin added to the left.
| | 01:37 | The Design view also displays the
number 12 to show you that there is a margin
| | 01:41 | applied to the selected object.
| | 01:42 | If you look closely, you'll also see
that the TextBlock within the StackPanel
| | 01:46 | has moved over as well. That is because
it is located within the StackPanel, so
| | 01:51 | it moves with the changes
| | 01:52 | we made to the StackPanel.
| | 01:53 | Let's go ahead and add 12 for the other values.
| | 01:56 | Now there is some comfortable space
right in the StackPanel, giving the app some
| | 02:00 | needed breathing space
between the various components.
| | 02:03 | We'll need to adjust the margin of
the TextBlock within the StackPanel.
| | 02:06 | So, let's select it, and change the values a bit.
| | 02:09 | First, select the TextBlock. Now it's
vertically spaced nicely, so we just want
| | 02:13 | to change the left and right values.
| | 02:15 | Let's set them to 10. Again, we'll use
the Properties panel to make the changes.
| | 02:19 | So, open the Properties panel, and
change left 10, and right to 10. There, now it
| | 02:25 | looks nice and spaced out.
| | 02:26 | Now, let's take a look now at
the code that was created for us.
| | 02:29 | If we look at the code, we'll see that
the two margin attributes were added to the
| | 02:32 | TipPanel and TipAmount components.
| | 02:34 | In the first example, the margin is set
to 12. This means that all four margins
| | 02:38 | are the same value (in this case, 12).
| | 02:41 | In the TipAmount component, there
are two values separated by a comma.
| | 02:45 | The first defines the right and left
margins (in this case, 10). The second defines
| | 02:49 | the top and bottom margins (or 0).
| | 02:52 | Now, while this shorthand is clean, I
find it could be confusing to remember the
| | 02:55 | differences between a single value,
a double value, or when there are four
| | 02:59 | unique values for each side. So, let's expand
each of these to show each value independently.
| | 03:05 | Let's go ahead and first change the
TipPanel. So, we're going to go ahead and
| | 03:09 | change 12 as a single value,
and put in 12, 12, 12, 12.
| | 03:15 | Now, we're actually here to
define each one individually.
| | 03:18 | Again, I find this much more readable
than just a single value, because you're
| | 03:21 | able to distinguish what each value means.
| | 03:23 | The order of these values are
left, top, right, and bottom.
| | 03:28 | It goes clockwise starting from the left side.
| | 03:30 | Now, let's repeat this with
the other margin setting.
| | 03:32 | Since we're working with only the left and
right, we would want to have 10, 0, 10, and 0.
| | 03:39 | This defines the left and right with
0 values for the top and bottom.
| | 03:43 | So, let's go ahead and back into our
Margin attribute here. And again, we'll
| | 03:47 | change this to 10, 0, 10, 0.
| | 03:51 | Now ultimately, you should see no
changes in the Design view, because we didn't
| | 03:54 | change any of the values. We're just
showing them in a more expanded and complete way.
| | 03:58 | We can also apply these
changes directly in code.
| | 04:01 | So, let's do that to
TotalPanel and TotalAmount components.
| | 04:05 | So, we go into the TotalPanel, just
like we did with TipPanel, we could add in
| | 04:10 | a margin, and set it for 12, 12, 12, 12.
| | 04:15 | Now let's go to TotalAmount, and
we'll add in Margin 10, 0, 10, 0. Great.
| | 04:24 | So, we got the same result, but
this time we did it entirely in code.
| | 04:27 | So, in this video, we added a margin to some
of the layout and text components in our app.
| | 04:32 | To help select these, we used the
Document Outline panel to select objects, and
| | 04:36 | then apply margin settings to them.
| | 04:37 | To apply margins, you could work with
the Properties panel or you can work with
| | 04:41 | them directly in code.
| | 04:42 | In code, the margins can be
shown in one of three ways:
| | 04:45 | a single value that applies equally to
all; two values that apply to the left,
| | 04:49 | right, or top, bottom; or four values
starting from the left, and rotating clockwise
| | 04:54 | around the object; or a
left, top, right, and bottom.
| | Collapse this transcript |
| Adding a background image| 00:00 | So far, we've only been working with
code and properties of objects, but we've
| | 00:04 | not worked with any external assets like images.
| | 00:07 | In this video, we will add a
background image to our app.
| | 00:09 | To do this, we need to add the image as a
resource to the project, and then create
| | 00:13 | an image brush that uses the
image, and applies it to the object.
| | 00:17 | Let's start by adding an image to our project.
| | 00:20 | Again, just like previous videos, if you
are continuing from the last video, you
| | 00:24 | can keep the project that you
currently have open, or you can open the start
| | 00:27 | project from the Exercise Files.
| | 00:29 | If you look at the Solution Explorer, you
will see that there is a folder called Assets.
| | 00:33 | If we open this folder, you'll see that
there are some images and bitmaps that
| | 00:36 | are already in there.
| | 00:38 | These are where you place
images that are used in your project.
| | 00:40 | The images that are here now are
placeholder images for our application icons, which
| | 00:45 | we'll customize in a future chapter.
| | 00:46 | In order to work with an image in our
project, it needs to be added. We can do
| | 00:50 | that here in the Solution Explorer.
| | 00:52 | We are going to right-click their
Assets folder; select Add>Existing Item.
| | 00:58 | From here, navigate to where
you save the Exercise Files;
| | 01:01 | you'll see a folder called assets.
| | 01:04 | There is a JPEG image in here called
appBackgroundImage. Select it, and click Add.
| | 01:10 | You'll see that the image is added to
the folder in the Solution Explorer.
| | 01:13 | Now that it is added, we can start
working with it, and add it to our layout.
| | 01:17 | We have been working so far in the
Title panel or Content panel sections of
| | 01:21 | the Mainpage.xaml file.
| | 01:23 | But if you go to the top, you will see
that all these are located within a grid
| | 01:26 | object called LayoutRoot.
| | 01:28 | The LayoutRoot is the parent Layout
container for the entire application, which
| | 01:32 | is why it's listed first in the file.
| | 01:34 | Since we want to add a background image,
we want to apply it to the LayoutRoot,
| | 01:38 | so it'll be visible in
all the sections of the app.
| | 01:41 | Let's start by selecting the layout grid
component, and open the Properties panel.
| | 01:45 | In the Properties panel, we apply
colors to backgrounds before. In code, these
| | 01:49 | are referred to as solid color brushes.
| | 01:52 | Images are also brushes.
| | 01:55 | In this case, they are called Image Brushes.
| | 01:57 | We can add an image brush to our
layout by selecting the Image Brush option.
| | 02:02 | Now let's select our image. The
ImageSource drop-down shows the contents of our
| | 02:06 | Assets folder, so we can
select appBackgroundImage.jpg.
| | 02:10 | By default, the Stretch setting will be
filled. This will fill the area with the
| | 02:14 | image, but this could distort the image
if it isn't proportionally the same as
| | 02:18 | the box it is being placed within.
| | 02:20 | With Windows Phone 8, there are
three resolutions. Each resolution has a
| | 02:24 | different height or width, so while it
may look good here, on another device, it
| | 02:28 | might not look right.
| | 02:29 | We can change the Stretch setting to Uniform.
| | 02:31 | This will place the image, so it won't
scale incorrectly. But it accomplished
| | 02:35 | this by stretching the pixels in the
size to fill the space, in this case, at
| | 02:39 | the top and bottom.
| | 02:40 | The final option, which is what
we want, is called UniformToFill.
| | 02:43 | This will scale the image, but keep
it proportionally correct, and center
| | 02:47 | it within the area.
| | 02:48 | Now we have one final thing to change.
| | 02:50 | As you can see, the image is pretty
intense in color, and it can be hard to see
| | 02:54 | with the text on top. We can apply an
Opacity or Transparency setting to the
| | 02:59 | image brush to darken it slightly.
| | 03:01 | The Opacity setting is hidden by default,
but if you click the chevron, you will
| | 03:05 | be able to expand this,
and show the Opacity value.
| | 03:07 | In this field, we are
going to change Opacity to 70.
| | 03:10 | There. Now we have the right
intensity, and we can read the controls on top.
| | 03:14 | Now, in the previous video, we talked a
little bit about the AccentColor of the
| | 03:17 | phone, and how it can be changed.
| | 03:20 | In addition to that, the user can also
change if they want the phone to have a
| | 03:22 | dark background or a light background.
| | 03:25 | We can see what the apple looked like with
a light background using the Device panel.
| | 03:29 | Let's go ahead and open up the
Device fly-out, and we can change the Theme
| | 03:32 | from Dark to Light.
| | 03:34 | You will now see that the
app has switched colors on us.
| | 03:36 | Now, instead of white text on
black, we have black text on white.
| | 03:40 | You'll notice, though, that the intensity
of the background image is still applied,
| | 03:43 | making the controls and text still
legible, even though we've changed the theme.
| | 03:47 | It is important to consider how
theme adjustments can affect your app.
| | 03:51 | If we were hard-coding the color values
to make everything white, we would have
| | 03:54 | an unusable app, if the
user preferred a light theme.
| | 03:57 | This is why working with static
resources and previewing them in various
| | 04:00 | scenarios can really help
prevent design challenges.
| | 04:03 | So, let's look back.
| | 04:04 | In this video, we covered how
to work with external assets.
| | 04:07 | External assets like images, need to be
added to a project before you can use them.
| | 04:11 | You do this using the Solution Explorer, and
add the existing item to the Assets folder.
| | 04:15 | We can access the LayoutRoot grid
component, which is the top parent layout
| | 04:20 | container for the project, and
add an image brush to the component.
| | 04:23 | After selecting the image, we adjusted the
Stretch properties to get the right look,
| | 04:27 | and then adjusted the opacity to create
a good balance with the rest of the app.
| | 04:31 | Finally, to preview what this would look
like with a light-colored theme, we used
| | 04:35 | the Device menu to change
the theme from dark to light.
| | 04:38 | So, that was a lot of work, but now that
we have the user interface complete, we
| | 04:42 | can now start building the logic for
our application, which we'll do using C#.
| | Collapse this transcript |
|
|
5. Building the LogicUnderstanding the starter code and code behind| 00:00 | Now that the visual interface is created,
we can start working with the plumbing
| | 00:03 | behind the scenes, and get our
application to work, and respond to events that are
| | 00:07 | created by the user.
| | 00:08 | In C#, there is a special relationship to
the XAML file and the C# code that drives it.
| | 00:13 | The most basic definition is that
they are two sides of the same coin.
| | 00:16 | The XAML file represents the layout,
and the objects that are in your
| | 00:20 | application. It defines what is there,
how it looks, and how it's arranged.
| | 00:24 | However, the XAML file doesn't
determine what the application does. C# is the
| | 00:28 | language that we will use to define
what happens on the other side of the coin,
| | 00:32 | what happens when the user
works with the application.
| | 00:35 | Now, for our tip calculator application,
the actions will be pretty basic. We want
| | 00:38 | to take the amount that the user
entered, multiply it by the tip percentage,
| | 00:42 | display the tip amount, and then add
that to the original total to get the final
| | 00:47 | total, including the tip.
| | 00:48 | This is the logic of the
application, and we will build this using C#.
| | 00:51 | Windows Phone 8 supports multiple
languages for your app development. You're
| | 00:55 | using C#, in this case, but you can
also use Visual Basic or C++, if you're
| | 01:00 | familiar with those languages.
| | 01:01 | I should also point out it is possible
to build your application entirely with
| | 01:05 | C#, and not use XAML. This is because
every object you're creating in XAML is
| | 01:10 | actually a C# class or object
that is represented as XAML tags.
| | 01:14 | Object or class properties are exposed
as tag attributes. While this is possible, I
| | 01:19 | wouldn't recommend this at first,
because it can get confusing.
| | 01:22 | But you will come across times when you
need to create visual components as the
| | 01:25 | app runs, and process the application logic.
| | 01:28 | It is possible to do this since
all the components are C# classes.
| | 01:32 | Now, when you create a new project, the
MainPage.xaml file is created for you.
| | 01:36 | Along with that is the MainPage.xaml.
cs file (the CS extension stands for C#).
| | 01:42 | This is called the code behind file.
Again, think of this as the backside of the
| | 01:46 | coin, defining more of what the
application does. In fact, in the Solution Explorer,
| | 01:51 | it is collapsed within the XAML file.
| | 01:54 | Now let's work with the project we finished
in the last video to see the code behind file.
| | 01:58 | If you're continuing from the previous
video, you can work with the file you
| | 02:01 | already have open. If not, go ahead and
open the start project for this video
| | 02:04 | from the downloaded Exercise Files.
| | 02:06 | With the XAML file open, you might ask,
"Where is the code behind file? You already
| | 02:10 | are looking at code."
| | 02:12 | Well, if you go to the Solution
Explorer, twirl the disclosure triangle for the
| | 02:15 | XAML file. There is the xaml.cs file,
which is the code behind file for this
| | 02:20 | XAML document. Double-click it
to open the file in Visual Studio.
| | 02:24 | You'll notice the Visual Studio layout
changes when you open this. Now that we
| | 02:27 | are working with application logic,
there is no Design view. That is because
| | 02:31 | we're no longer working with the XAML
Design layer of our application. We're now
| | 02:35 | working with the logic.
| | 02:37 | So, let's go ahead and step
through a bit of what's going on here.
| | 02:40 | So, at the top, from lines 1 through 10,
are a number of using statements. These
| | 02:45 | statements are referencing other
classes and objects outside of our project to
| | 02:49 | be bundled and accessible from this code file.
| | 02:51 | On line 12, we start the code for the
file by defining a namespace, in this case
| | 02:56 | the name of our app, and then create a
constructor on lines 16 through 23.
| | 03:01 | Now, if you aren't familiar with object-
oriented programming, the constructor is
| | 03:05 | essentially what is run first when the
file runs. It constructs the project, and
| | 03:10 | gets everything set up.
| | 03:11 | You'll see a lot of code here is colored
differently than the rest the code. These lines
| | 03:15 | are commented out, meaning that they
have been converted to non-executable code.
| | 03:20 | These lines, if you remove the double
slashes (//) in front of them, will add an
| | 03:23 | application bar to your project.
| | 03:25 | Our project doesn't need an app
bar, and we can remove them safely
| | 03:28 | without harming anything.
| | 03:30 | Let's go ahead and do that to make
the total a little bit easier to read.
| | 03:32 | So, I am going to select lines from 25
to 39, and then I am just going to press Delete.
| | 03:38 | We can also select lines 21
through 22, and delete those as well.
| | 03:42 | When we start adding our code to this,
we're going to do a few things. First,
| | 03:46 | we're going to define, in our code
behind file, any variables we're going to work
| | 03:50 | with in our project.
| | 03:51 | Next, we'll create an event trigger in
our XAML file that will listen for when an
| | 03:55 | event takes place with a component,
and then execute a named function of code in
| | 03:59 | this code behind file.
| | 04:00 | For example, if the 15% button is
pressed, you want to calculate tip. The XAML
| | 04:06 | code will listen for the user to do
something, and when it does, execute a piece
| | 04:09 | of code in the code behind file.
| | 04:11 | We could get all tricky and ultra streamlined
with the code, but we're going to keep it simple.
| | 04:15 | We'll have some repetition, but it
will help reinforce some of the concepts
| | 04:19 | you'll find when working on
your own with Windows Phone 8.
| | 04:22 | So, with our basic overview of how the
code behind file relates to your project,
| | 04:26 | let's go back to the XAML file,
and start creating some triggers.
| | Collapse this transcript |
| Building event handlers for components| 00:00 | In order for applications to respond to
user events, we need to tell the app which
| | 00:04 | user events we're going to respond to.
| | 00:06 | In this video, we'll add event listeners
to our XAML components that will trigger
| | 00:10 | functionality in our code behind file,
when specific user events take place.
| | 00:14 | When we're done with this project, we
will add tap events to each of our tip
| | 00:18 | percentage buttons, and make sure
they all respond to user events.
| | 00:21 | To get started, if you're coming from
the previous video, you can keep working
| | 00:24 | with the project you currently have open. If
not, open the Start project for this video.
| | 00:28 | We'll be working with the MainPage.xaml
file, so let's go ahead and open that up.
| | 00:33 | Adding listeners to events sounds
complicated, but it actually is quite easy,
| | 00:37 | Visual Studio handles a lot
of the grunt work for you.
| | 00:40 | Let's start with one and see how it works.
| | 00:43 | In Design view or Code view, select or
navigate to the 5% Button, named Percent5. In
| | 00:49 | the Button tag, navigate to the end of the tag.
| | 00:51 | We're going to add a Tap event listener.
This will listen for the Tap event, and
| | 00:56 | then execute a named block of code.
| | 00:57 | So, to add this, we're going to go
again to the end of our Button tag, and
| | 01:02 | then add in Tap. And, you'll see that
Visual Studio will show something that
| | 01:06 | says New Event Handler. This is the code
hinting support in Visual Studio asking if
| | 01:11 | you want a New Event Handler, or named
block of code, to be created for you to
| | 01:15 | tie into this event.
| | 01:16 | By default, the name of the event handler
is named the same as the object, and
| | 01:20 | underscore (_), then event type,
and then a sequential number.
| | 01:23 | So, if I press Tab, you'll see
it comes up as Percants5_Tap_1.
| | 01:29 | So, we have created a listener, but what
about the code behind file? All right,
| | 01:33 | let's go ahead and take a look. So,
open up the xaml.cs file, and let's
| | 01:38 | scroll down to line 22.
| | 01:41 | You'll see that the code was created
for you. Now, this code doesn't actually do
| | 01:44 | anything, but the overall framework is
now here for you to start building from.
| | 01:49 | Now, we want to test that
everything is working correctly.
| | 01:51 | So, let's add some code into the Event
Handler that will alter the text in the
| | 01:55 | tip amount: textblock.
| | 01:57 | If you remember, the textblock was a xaml
object that we created. And, we discussed
| | 02:01 | before, XAML objects are just classes.
And, attributes we access in <xaml> tags, we
| | 02:06 | can also access using dot
notation as object properties in C#.
| | 02:11 | So, if there is a text attribute in
XAML for the tip amount textblock, there
| | 02:16 | is then also a text property
that we can access in code.
| | 02:19 | So, let's go ahead and try it.
| | 02:20 | So, inside of my code block here,
between the two braces on line 24, I'm
| | 02:25 | going access TipAmount.
| | 02:28 | You'll see that Visual Studio will
recognize that we already have an object called
| | 02:32 | TipAmount. I can press
Tab to complete the line.
| | 02:35 | Then, I'm going to use the period (.)
| | 02:37 | to access the attributes or
properties of this object, and then access Text.
| | 02:42 | Again, the code hinting support will
show that this is a recognized property
| | 02:46 | when I can press Tab.
| | 02:47 | We're going to set this = "5%." And, with C#, you
need to end all of your lines with a semi colon (;).
| | 02:54 | There.
| | 02:55 | So, let's go ahead and try this now in
the simulator, and see how this works.
| | 02:59 | Now, although we're using the mouse, the
simulator is translating the mouse clicks to taps.
| | 03:03 | So, when we click on the 5%, it
registers the event, triggers the event handler,
| | 03:08 | and executes the code we created.
| | 03:10 | So, now that we got this one working,
let's go ahead and create the other four.
| | 03:14 | So, I am going to go Stop this, and then
we're going to go back into our xaml file.
| | 03:18 | And, we're going to replicate the same
process that we did with this Tap event,
| | 03:23 | and we're going to apply that to the other four.
| | 03:25 | We're going to create Tap event, and
we're going to create a New Event Handler.
| | 03:29 | So, now we have all five of our XAML
event listeners, and now we can go back into
| | 03:33 | our code behind file, and finish out the code.
| | 03:36 | As you can see, again, all the different
code blocks have been created for us. We
| | 03:40 | now just have to access the text
property of the TipAmount, and make the value
| | 03:44 | appropriate for the
percentage that we have clipped.
| | 03:46 | tipamount.text=10%. Go to the 15%,
tipamount.text=15%. tipamount.text=20%. And,
| | 04:02 | the last one. TipMmount.text = "25%"; there.
| | 04:09 | So, let's go ahead and save this, and try it
again in the emulator, and see how it works.
| | 04:13 | We can try it 5, 10, 15, 20, and 25.
Great. So, now all the tip percentage buttons
| | 04:20 | are now responding to the user events.
| | 04:22 | So, to recap, in this video, we created
an event listener for a XAML component
| | 04:27 | that would kick in whenever a
specific event took place on the object.
| | 04:30 | When that happened, an event handler is
then executed. When we created the listener
| | 04:34 | in code, Visual Studio
created an empty handler for us.
| | 04:38 | In addition, we also accessed properties
or components in C#, instead of XAML, to
| | 04:43 | make changes based on user input.
| | 04:45 | In C#, we have worked with object
properties of the instance name, which we
| | 04:49 | defined using x:Name attribute in XAML.
| | Collapse this transcript |
| Building application logic| 00:01 | Now it is time to build
the meat of our application.
| | 00:03 | In this video, we're working mostly in C#,
but we will do some tweaking in XAML as well.
| | 00:08 | So, here is a preview of what we're going to do.
| | 00:10 | First, we will create some variables to
hold some of the internal values we will
| | 00:13 | use in this app, and populate
those variables with values.
| | 00:17 | Second, we will create a named
function that will calculate the tip.
| | 00:20 | Within this, we will grab the value
input from the tip amount text box, and
| | 00:24 | manipulate it to determine the tip amount.
| | 00:26 | Finally, we will display the tip
amount and the total price on the screen.
| | 00:30 | At the end, we will build to enter in a
service or bill amount, select a tip, and
| | 00:36 | then display the tip amount
and total amount on the screen.
| | 00:39 | We need to store some values and
variables for our calculator to work.
| | 00:42 | These values will store the tip
percentage in the amount entered by the user.
| | 00:46 | Let's go ahead and go back into
Visual Studio, and we can get started.
| | 00:49 | We will be using floating point
numbers to store these values, since they
| | 00:53 | contain decimal numbers.
| | 00:55 | So, let's go inside of our code here,
and above the Constructor, I am going to
| | 00:59 | create a couple of lines.
| | 01:01 | Now, to create this decimal
number, we're going to use a float.
| | 01:04 | Type in float, and then we
give it a variable name.
| | 01:07 | Again, this is going to
can be called tipPercentage.
| | 01:10 | I am going to create a second one,
which we will call serviceAmount.
| | 01:14 | Now, with these two variables created, we
can start working with these inside of
| | 01:18 | our event handlers that we've already created.
| | 01:20 | Now, we don't want to actually show this
TipAmount text anymore, so we can comment this out.
| | 01:26 | A comment, if you remember,
starts with two forward slashes (//).
| | 01:30 | I'm going to quickly just go through
these, and comment these out, so that these
| | 01:33 | lines of code won't run.
| | 01:35 | Now that we have the tipPercentage
variable created for us, we can then set that
| | 01:39 | to the value that's appropriate,
based on the button that the user tapped.
| | 01:43 | So, let's go ahead and do that now.
| | 01:45 | We're going to access our
tipPercentage, and we're going to set that to .05.
| | 01:50 | Now, since we're working with a
floating point number though, we need to end
| | 01:53 | this with an f. That defines that
this value is a floating-point number.
| | 01:58 | So, then continue to do this for the other ones.
| | 02:00 | So, for this one, for 10%, tipPercentage=.1f,
tipPercentage=.15f, tipPercentage=.2f.
| | 02:15 | And, then the last one. tipPercentage=.25.
| | 02:19 | The next step is to create a named
function for our tip calculator, and add in
| | 02:23 | the code to calculate the tip in total.
| | 02:25 | We then need to start this function at
the end of each event handler, and have it
| | 02:29 | set the tipPercentage variable.
| | 02:31 | We need to start doing
some type conversion however.
| | 02:33 | The reason is because the type of value
that is stored in a text box is a string
| | 02:38 | or a chain of letters and numbers.
| | 02:40 | The number we need to store is a
floating point decimal or a float.
| | 02:43 | We will need to convert the string to a
single precision number in order to work
| | 02:47 | with it mathematically.
| | 02:48 | Essentially, you can't do math on a
string, so we have to find a way to
| | 02:52 | convert it to a number.
| | 02:53 | Okay, so let's now go inside of
our code, and add in our new function.
| | 02:57 | We're going to create a private
void function. We're going to call it
| | 03:02 | CalculateTip (). Have an opening brace
{, closing brace }. And, we have got the
| | 03:09 | basic structure set up.
| | 03:11 | So, let's go back into the
event handlers here, and access that
| | 03:14 | CalculateTip method.
| | 03:18 | So now, with those created, when a
user taps on a button, it will set
| | 03:22 | the tipPercentage variable, and
then all of these functions will
| | 03:25 | execute CalculateTip.
| | 03:27 | So, let's now go back down into
CalculateTip, and start working with our variables.
| | 03:31 | Now again, we're going to work with the
serviceAmount, and we need to access the
| | 03:36 | Amount.Text value in our XAML objects.
| | 03:39 | Now again, if you remember, I said
that we had do to some conversion.
| | 03:43 | If I mouse over this, you will see that the
arrow says, "Cannot implicitly convert
| | 03:47 | type string to float."
| | 03:48 | This is what I was mentioning before
is that we can't take a string value, and
| | 03:52 | perform mathematical functions to it,
or assign it to a mathematical variable.
| | 03:56 | Now, to get around this, we can use the
System.Convert method, and convert this to
| | 04:01 | a single floating point number.
| | 04:03 | So, I am going to in the beginning of
this, and access System.Convert.ToSingle.
| | 04:09 | Now, this will then convert this into
the right format, and you'll see that the
| | 04:13 | squiggly lines go away, because now
we are taking the text value, and we're
| | 04:17 | converting it into a single
precision floating point number.
| | 04:19 | Let's create a couple of other lines,
and we're going to create some temporary
| | 04:23 | variables that we're just
going to use inside of this method.
| | 04:25 | I am going to create a float called
tipAmount, and again, the tipAmount is going
| | 04:30 | to be based on the
serviceAmount * tipPercentage.
| | 04:36 | Then create another one, float totalAmount,
which will be the serviceAmount + tipAmount.
| | 04:44 | With the new method, CalculateTip
created an access with each event handler.
| | 04:48 | We're now calculating the tip, storing
it, and then calculating and storing the
| | 04:52 | total of the entire bill.
| | 04:53 | And now, we need to display this in the app.
| | 04:56 | The trick, though, is just like we did
the conversion from text to decimal before,
| | 05:00 | we now know how to do it in the
opposite direction, going from decimal to text.
| | 05:05 | Now, one of the easiest ways to do
this is to use a string formatter.
| | 05:09 | A string formatter will allow us to
insert a decimal or numerical value inside
| | 05:13 | of a string, and then allow us to
then assign that to a text property.
| | 05:17 | So, after each one of these lines, we're
going to go ahead and access TipAmount,
| | 05:22 | and the text property of that. And,
we're going to use a string format,
| | 05:26 | String.Format, and the string
format looks a little like this.
| | 05:31 | So, let me explain exactly what this is doing.
| | 05:34 | We have a string here;
| | 05:36 | in this case, it's a pair of
braces with a zero inside of it.
| | 05:39 | Now, this isn't actually going to be
part of the string. This is a token that's
| | 05:43 | going to take the value that's to the
right of the comma, tipAmount, and insert
| | 05:47 | that inside of the string, replacing the token.
| | 05:50 | It will then take this entire string, and
format it, and assign it to the text property.
| | 05:54 | Let's go ahead and repeat this
the second time. In this case, we'll
| | 05:58 | take TotalAmount.Text, and we'll
use the String.Format again, and we'll
| | 06:03 | access totalAmount.
| | 06:05 | Okay, so now let's go ahead and
run this, and see how this looks.
| | 06:09 | So, I can go up here to the top, and then we can
enter in a value, and then put in a percentage.
| | 06:15 | So, as you can see, everything
generally works, but there is still little bit
| | 06:18 | more that we can do.
| | 06:20 | One final touch we can do here is to
add some special formatting for the text.
| | 06:24 | Since we're dealing with currency, we
can alter the string formatter to display
| | 06:27 | the output as currency.
| | 06:30 | This will also display leading and
trailing zeroes if we need them, and round
| | 06:33 | based on the second decimal point.
| | 06:36 | So, to do this is actually pretty easy.
| | 06:38 | Let's go back into Visual Studio, and
stop our debugging, and after each of these
| | 06:42 | zeroes, put a colon and a C. C stands
for Currency, so now I can run this again
| | 06:48 | in the Emulator. We'll go ahead and
enter in the same amount, twenty dollars and
| | 06:53 | 50 cents, and then we click the percentage.
| | 06:56 | And, as you can see, now it has the
dollar sign, and it has the correct number of
| | 06:59 | decimal points for a
currency number. So let's recap.
| | 07:02 | So, in this video, we created the basic
functionality for our tip calculator app.
| | 07:06 | Along the way, you picked up
some basic C# skills as well.
| | 07:09 | We created some variables to work with
floating-point numbers, and grabbed the
| | 07:13 | value of a text field, converted it to a
decimal number, and used it to calculate
| | 07:17 | the tip based on the
amount requested by the user.
| | 07:20 | We then converted that back to a
string, formatted it as a currency, and
| | 07:24 | displayed it back in the app.
| | 07:26 | There are a few more
enhancements we can make to the app.
| | 07:28 | For example, when the app starts, we currently
display placeholder text for the tip in total.
| | 07:33 | We can hide these, and display them when
we have real values to display, and we'll
| | 07:36 | do that in the next video.
| | Collapse this transcript |
| Adjusting the layout| 00:00 | In the last video, we added the
core tip calculator logic to our app.
| | 00:04 | In this video, we will add some
refinements to help polish some of the edges.
| | 00:08 | Now, this project that I have currently open is
from where we were at the end of the last video.
| | 00:12 | When we start the app, we display, at the
bottom of the screen, the header and text
| | 00:16 | for the TIP AMOUNT and the TOTAL AMOUNT.
| | 00:18 | The thing, though, is we don't actually
have anything to really put into these
| | 00:21 | areas when the app starts. Since they
would be empty, our application would have
| | 00:26 | more focus if we didn't display them
when the app launched. And, I want to show
| | 00:29 | them when the app has
information to display there.
| | 00:32 | What we're going to do in this video
is to adjust the display of some of the
| | 00:35 | objects in our project.
| | 00:36 | We will first hide them when the app
starts, and then, when the tip is calculated,
| | 00:40 | we will display them
along with the actual values.
| | 00:43 | So, let's go ahead back into
Visual Studio, and get started.
| | 00:46 | The first thing we need to
do is go to our Constructor.
| | 00:48 | Remember when I said in a previous
video that this is the first thing that's
| | 00:53 | executed in our project?
| | 00:54 | Since we want to hide them when the app
starts, this is the perfect place to do that.
| | 00:57 | Visual Components in Windows Phone
8 have a property called visibility.
| | 01:01 | We can access this property, and set it
to a specific named value to change its
| | 01:06 | visibility from visible to collapsed.
| | 01:09 | So, let's go up to the
Constructor, and see how this works.
| | 01:11 | So, we're going to go ahead and create a
new line of code. We're going to access
| | 01:15 | TipHeader, and we're going to
access the Visibility property.
| | 01:19 | Now, this isn't set to a specific string
or other value. This is set to a named
| | 01:24 | property called System.Windows.Visibility.
| | 01:29 | Then, we access two other properties:
| | 01:31 | Collapsed or Visible.
| | 01:32 | Since we already have it visible,
we want to set this Collapsed.
| | 01:36 | So, let's go ahead and run the application,
and see how this changes the way it looks.
| | 01:40 | You'll see that the TipHeader text
that was above the tipAmount is no longer
| | 01:43 | visible, but you'll also notice something else.
| | 01:46 | The space isn't just blank;
| | 01:47 | everything else is
shifted up to fill in the space.
| | 01:51 | That's why the Property is called Collapsed.
| | 01:53 | Let's go back into the code, and we
can add this to the other objects that
| | 01:56 | we want to collapse.
| | 01:57 | Let's go ahead and stop the debugging,
and we'll go back into our code, and we'll
| | 02:01 | access the other
properties. TipPanel.Visibility =
| | 02:06 | System.Windows.Visibility.Collapsed.
| | 02:10 | TotalHeader.Visibility = System.Windows
.Visibility.Collapsed. And then, finally,
| | 02:18 | our last one. TotalPanel.Visibility =
System.Windows.Visibility.Collapsed.
| | 02:26 | All right. So, now let's go
ahead and run this app again.
| | 02:29 | So, as you can see, they are now no
longer visible in the app, but now we have
| | 02:32 | the opposite problem.
| | 02:34 | If I go in and start typing in a value,
and access a percentage, we now no longer
| | 02:38 | display them at all.
| | 02:40 | So, now I have to actually go back into
the code, and display them when they have
| | 02:43 | appropriate values to show on the app.
| | 02:45 | Let's go ahead and Stop Debugging, and
go back to our code, and go down to our
| | 02:49 | CalculateTip method at the bottom.
| | 02:51 | Now, just like when we worked with
Collapsed, the opposite of that is visible.
| | 02:55 | So, after we've set the values here
in our CalculateTip method, we can go
| | 02:59 | into this, and we can insert the
same code that we had before, but instead of
| | 03:03 | Collapsed, put in Visible.
| | 03:05 | We'll put in TipHeader.Visibility =
System.Windows.Visibility.Visible. And, we'll
| | 03:12 | do this for all of the other ones as well.
| | 03:14 | So, now let's go ahead and run the app
again, entering a bill amount. And, now
| | 03:21 | everything displays correctly.
| | 03:22 | But there is one more enhancement we can make.
| | 03:24 | If we calculate the tip once, and then
go back and edit the amount, the original
| | 03:31 | tip displays would still cause a
little bit of user confusion.
| | 03:35 | We can listen for a specific event,
and hide the tip and total if the user
| | 03:40 | manipulates the value of text box.
| | 03:42 | To do this, we need to add a manipulation-
started event listener in our XAML file
| | 03:46 | for the text box control.
| | 03:48 | So, let's go ahead and Stop Debugging,
and this time, let's go into the XAML
| | 03:51 | file. And, I am going to scroll down, and select
our text box control here, which is called Amount.
| | 03:59 | Now, inside of this, we want to access
the new manipulation-started property.
| | 04:04 | So, I am going to go the end here, and
add ManipulationStarted, and I will create
| | 04:09 | a New Event Handler.
| | 04:11 | Now, we can go into the Event Handler
that was just created, and add some code to
| | 04:15 | hide the components that we don't want to see.
| | 04:18 | Since we already have it hidden when
the app starts for the first time, we can
| | 04:22 | add an if statement to test if
it's hidden, and then skip the code.
| | 04:25 | So, we're going to go back into the C#
file, and if we scroll down, we'll see we
| | 04:30 | have that new line of code created here.
| | 04:32 | So, I am going to create an if
statement that will test to see is
| | 04:36 | TipHeader.Visibility already set to
System.Windows.Visibility.Visible.
| | 04:43 | If it is, then we want to
hide it in this particular case.
| | 04:46 | So, I am going to create an open brace, and
then a closed brace for our if statement, and
| | 04:50 | then inside this, we're going to go
ahead and take the TipHeader, and we can
| | 04:55 | repeat the same code that we had up earlier.
| | 04:57 | Now, you can also copy and paste this
from the top of the code. I am just going
| | 05:01 | to type it here just for completeness.
| | 05:03 | So, let's go ahead and run the code, just to
make sure that everything is working correctly.
| | 05:07 | So, again, we're not displaying the text
fields in the beginning. Let's go ahead
| | 05:11 | and add in our value, calculate
the Tip, and now we display them.
| | 05:16 | But now, when we click back into this,
you'll see that the two values will go away.
| | 05:21 | That's because we've now started to
manipulate the value inside of this text box,
| | 05:25 | which then hides the boxes from displaying.
| | 05:28 | Great, so let's recap for little bit.
| | 05:31 | We took the basic logic we took
in the last video, and added some
| | 05:34 | basic enhancements.
| | 05:35 | First, we accessed the Visibility
properties to collapse items that aren't
| | 05:39 | needed when the application first starts up,
then display and re-hide them when necessary.
| | 05:44 | There is one last step we need to
take, and that is to handle some possible
| | 05:48 | errors that can exist in our
application. And we will cover that in the next video.
| | Collapse this transcript |
| Handling errors| 00:00 | We now need to put our attention to
making sure the application doesn't crash or
| | 00:04 | have any unexpected errors.
| | 00:06 | There currently are a couple that
exist that we need to check for, and then
| | 00:10 | notify the users that there are
issues that they then need to resolve.
| | 00:13 | If you're continuing from the previous
video, you can work with the project
| | 00:16 | you already have open.
| | 00:17 | If not, open the start project for this
video in the downloaded Exercise Files.
| | 00:22 | Let's start the application and the
simulator, and see what issues we have.
| | 00:24 | Let's start with not entering anything
into the amount text box, and jump right
| | 00:29 | into trying to set it to percentage.
| | 00:32 | As you see, the application shuts down.
| | 00:34 | That means we have an error or a crash.
| | 00:36 | On a physical device, the
exact same thing would happen.
| | 00:39 | Now, if this was currently in Debugging
mode with Visual Studio, you would then
| | 00:43 | send a message back to Visual Studio
saying that we had encountered an error.
| | 00:47 | So, let's go ahead and restart,
and show one other possible error.
| | 00:51 | We could enter an amount, but
accidentally put in two decimal points.
| | 00:57 | If we calculate again, we also get
the same crash like we had before.
| | 01:02 | Now, because the app is very simple,
there aren't many issues that could arise.
| | 01:06 | But the errors that do happen are due to
the fact that the user can enter values
| | 01:10 | that can't be converted from strings to decimals.
| | 01:13 | We can create a block of code that
will detect if there is an error, and route
| | 01:17 | the execution of code to do
something to notify the user.
| | 01:20 | Typically, Windows Phone applications'
feedback to the user is very simple and basic.
| | 01:25 | In this case, we can change the border
of the text box to red, indicating that
| | 01:29 | they've entered in an illegal value.
| | 01:31 | To do this, we need to place our
code within a try catch block.
| | 01:34 | Let's go ahead and go back into Visual Studio.
| | 01:38 | In the try catch block, we will execute our code.
| | 01:41 | If there's an error, we will route to a
catch block that will change the border
| | 01:45 | color to red, and then wait
for the user to fix the issue.
| | 01:49 | If the user fixes the issue, then we will
restore the default border color to the text box.
| | 01:54 | So, let's go down to our
CalculateTip method, and put our code in there.
| | 01:59 | So, what we're going to do is we're
going to add a try statement here.
| | 02:04 | This is then going to try and
execute the code within the text block. So,
| | 02:09 | we're going to open this up, and then
we'll go down here to the bottom, and then
| | 02:13 | we will close this.
| | 02:15 | Now, if there is an error here, we
need to catch that error, and have a
| | 02:19 | special section that's going to
execute what we want to happen if there is
| | 02:22 | an error encountered.
| | 02:24 | So, we'll add a catch, another pair of
braces, and then, inside of these braces,
| | 02:30 | we're then going to access Amount.BorderBrush.
| | 02:36 | Now, the BorderBrush property is
that outside edge of the text box.
| | 02:40 | Just like when we were working with colors
before, we can access the BorderBrush. But in
| | 02:45 | this case, since we're not working
with XAML, we need to create a new solid
| | 02:49 | color brush object in C#.
| | 02:52 | So, we'll create a new SolidColorBrush.
| | 02:58 | You'll see that there is a little
squiggly line that appears underneath here.
| | 03:02 | The issue is that solid color brush
is not currently part of the project.
| | 03:06 | To fix this, we can press Ctrl+Period (.).
| | 03:10 | When you do that, you'll see that there
is a new dropdown that shows where we
| | 03:13 | can add in the using statement that will allow a
solid color brush to be added into the project.
| | 03:19 | So, if I go ahead and click that,
you'll see that solid color brush now
| | 03:23 | changes color, and the red
squiggly line goes away.
| | 03:26 | Just to prove this, I am going to go back
up to the top, and you'll see that using
| | 03:31 | System.Windows.Media is
now added to our project.
| | 03:34 | So, let's go ahead back down to the
bottom, and now we're going to set
| | 03:37 | SolidColorBrush to Colors.Red.
| | 03:44 | If we run this now, and we encounter
the error, it will execute this code.
| | 03:49 | But if the user fixes the error, it
will still maintain a red color around it.
| | 03:54 | So, now we need to change inside of our
try block to set this back to the system
| | 04:00 | border brush that's the
default for the application.
| | 04:03 | So, now we're going to put in Amount.BorderBrush,
and we're going to set this to a system property.
| | 04:13 | If you remember these system resources
were accessed in a specific way in XAML.
| | 04:18 | For C#, there is a new format that we have to use.
| | 04:21 | We're going to access a
SolidColorBrush type, and we're going to set this to
| | 04:26 | the ApplicationCurrentResources, and we're
going to access the resource PhoneBorderBrush.
| | 04:39 | So again, we have the
AmountBorderBrush, and we're accessing a system resource
| | 04:44 | called PhoneBorderBrush, which is the
default BorderBrush color that's part of
| | 04:47 | the system resources.
| | 04:49 | Now, we're able to assign that
to the BorderBrush by using the
| | 04:52 | SolidColorBrush type.
| | 04:54 | So, now we are able to
access the error if it happens.
| | 04:57 | So, let's go ahead and run this again, and
try to repeat the same errors we had before.
| | 05:04 | So, now if I try to execute 50% without
entering an amount, you'll see that
| | 05:10 | now that application does not crash,
but it does display the red BorderBrush
| | 05:14 | around our text block.
| | 05:15 | If I go in here, and enter in a
correct amount, and then press 15 again, the
| | 05:22 | BorderBrush goes away, back to the default color.
| | 05:25 | The other error that we had was
by entering in two decimal points.
| | 05:30 | If I execute this again, you'll
see the red BorderBrush now appears.
| | 05:34 | So, as you can see, both of our previous
issues have been detected by the error
| | 05:38 | handling, and we're now getting feedback
to our user to adjust the entry to fix
| | 05:42 | the error, and get the
desired result in the application.
| | 05:46 | With that, we've now finished the
core coding of our application.
| | 05:48 | In the next chapter, we'll dive a little
deeper into working with the simulator, and
| | 05:53 | how you can test your application on a
physical device that is connected to your
| | 05:56 | computer, and test in a real-world environment.
| | Collapse this transcript |
|
|
6. TestingTesting our application in the simulator| 00:00 | When you're working with your
application in Visual Studio, you have two options
| | 00:03 | on how you want to test your application.
| | 00:06 | You can test on your machine with the
Windows Phone Emulator, or you can test
| | 00:09 | with a connected device.
| | 00:11 | There are advantages and disadvantages
to each, and here are some reasons why.
| | 00:14 | With an Emulator, you can test on the
three resolutions that are part of the
| | 00:18 | Windows Phone ecosystem:
| | 00:19 | WVGA, WXGA, and 720p.
| | 00:23 | WVGA is 480�800; WXGA is 680
�1280; and 720p is 720�1280.
| | 00:31 | The WVGA resolution has two formats.
| | 00:34 | One is the regular version of the
device, and the other has 512 megabytes of RAM,
| | 00:39 | which is designed for emerging
markets to keep a lower price point.
| | 00:42 | As you can see, the biggest advantage to
the emulator is that you have access to
| | 00:45 | all of these device types without
needing to invest in the hardware.
| | 00:49 | The drawback with an emulator, though,
is that although you can approximate the
| | 00:53 | speeds of native hardware, it
will never be exactly like it.
| | 00:56 | In addition, you don't have the same
tactile experience with an emulator that
| | 01:00 | you do with a physical device.
| | 01:02 | So, you aren't testing it in a
completely real-world environment.
| | 01:05 | That being said, there is a lot you
can do with an emulator, and in this
| | 01:08 | video we'll go over the various
features of it to help you test your Windows
| | 01:11 | Phone 8 applications.
| | 01:13 | So far, we've only worked with the default
emulator, the 512 megabytes WVGA Emulator.
| | 01:18 | If you expand the menu, you'll see
each of the other ones listed as well.
| | 01:23 | Each one is a different emulator instance.
| | 01:25 | While you can have multiple emulators
running, only one can be connected to the
| | 01:28 | Visual Studio IDE at once.
| | 01:31 | Let's launch one of the other emulators,
and just take a look at it in more depth.
| | 01:35 | In Visual Studio again, open up the drop-down,
and let's go ahead and select WVGA Emulator.
| | 01:40 | This is the same resolution as the Nokia 920,
one of the leading phones of the platform.
| | 01:45 | The 720p emulator matches the
resolution of HTC's Windows Phone 8x.
| | 01:50 | Let's go ahead and start the
emulator by clicking on the button.
| | 01:53 | With the emulator loaded, the buttons
at the bottom map to the captive touch
| | 01:57 | buttons on a physical phone:
| | 01:58 | back, home, and search.
| | 02:00 | You can navigate through the
phone as if it were a real phone.
| | 02:03 | You can swipe to display the menu of
the various applications, and you can
| | 02:08 | navigate it, install and uninstall apps as well.
| | 02:11 | To the right of the device window are
some control buttons to help you work with
| | 02:15 | the emulator better.
| | 02:16 | You can close the emulator, you can
minimize it, you can rotate it, you can
| | 02:20 | increase the magnification, and you
can also access some advanced options.
| | 02:24 | For example, if I wanted to rotate the
emulator, I can then click this button,
| | 02:28 | which will rotate it, so that it's now
showing it in a landscape format. You can
| | 02:33 | rotate it clockwise or counterclockwise.
| | 02:35 | The magnification allows you to
increase the size of what you're
| | 02:39 | actually looking at.
| | 02:40 | In this case, this is allowing us to
change it so that will fit within the window.
| | 02:44 | We can also click this button
to change the zoom entirely.
| | 02:48 | If you select 100%, it will do a
one-to-one pixel match with your
| | 02:51 | current resolution.
| | 02:53 | As you can see, it's too big to fit into
our display here, so you can also scale
| | 02:57 | this back, and we'll do it
to say, like, 50 or 66%.
| | 03:02 | Let's go ahead and open up the expanded menu,
and take a look at some of the other options.
| | 03:05 | In the expanded menu, you can adjust
the phone in 3D space to simulate motion
| | 03:09 | for how the accelerometer works.
| | 03:12 | You can change it using these
different various orientations, or you can click
| | 03:15 | this button, and you can
actually rotate it in space.
| | 03:18 | This will send this data to the
accelerometer inside of the virtual phone, so
| | 03:22 | you can actually track and use this
if you're testing your application.
| | 03:26 | You can send all this information from
the accelerometer to your app, to test
| | 03:29 | how it's working inside of this environment.
| | 03:32 | In addition, there is a
recorded shake motion here.
| | 03:35 | If you click Play, the X, Y, and Z
will automatically shift all kinds of
| | 03:39 | different values to
simulate the phone being shaken.
| | 03:42 | The next tab is Location.
| | 03:44 | On the phone, I'm going to use the Map app.
| | 03:47 | As you can see, the default location
is Redmond, Washington, the home of
| | 03:50 | Microsoft's headquarters.
| | 03:52 | In the map, I can zoom out,
and pick a different location.
| | 03:54 | Let's go ahead and pick
San Francisco, where I live.
| | 03:57 | If I click on the map to add the
point, you'll see that the map on the
| | 03:59 | phone will also move.
| | 04:02 | The interactive map on the right is faking
the location, and sending that fake GPS
| | 04:06 | information to the device, which then
uses that information in the Map app.
| | 04:10 | I can turn Live mode off, and create a number
of waypoints, by clicking on the map as well.
| | 04:14 | I am going to turn Live off, and then I
can actually click, and zoom into this. I
| | 04:19 | am going to start adding in waypoints.
| | 04:22 | After you add the waypoints, you can
then click Play, which will then simulate
| | 04:26 | you going from each waypoint to
waypoint, and then sending that information to
| | 04:30 | the GPS on the phone.
| | 04:34 | You can also save these map points as a
file, so you can load this up later, and
| | 04:38 | retest using the exact same
parameters that you've used before.
| | 04:41 | The next tab allows you
take screenshots of your phone.
| | 04:44 | This is great for taking screenshots
of your phone, which you'll need when you
| | 04:47 | send this to the Windows Phone Store
to show off how your application looks.
| | 04:51 | This works pretty basic. You start
with by clicking the Capture button, and
| | 04:55 | then you can save it.
| | 04:56 | Notice it also shows the
resolution of the phone.
| | 04:58 | Finally, there is a Network tab,
which also shows you some of the adapter
| | 05:02 | information specific to the emulator.
| | 05:04 | So, those are the basics of
the Windows Phone Emulator.
| | 05:06 | So, as we talked about, the emulator is
great for testing your app at various
| | 05:09 | resolutions, and to help simulate
data like Accelerometer and Geolocation.
| | 05:13 | It is also perfect for taking
screenshots of your app to prep for submitting
| | 05:17 | to the App Store.
| | Collapse this transcript |
| Testing our application on a connected device| 00:00 | Working with a physical device is very
straightforward with Windows Phone 8.
| | 00:04 | Essentially, it's a two-step process.
| | 00:06 | You first register your device as
directly addressable through Visual Studio and
| | 00:10 | the SDK. And then, instead of picking
the emulator, you select "device" from the
| | 00:14 | target menu, and off you go.
| | 00:16 | To start, we need to register
the phone with the computer.
| | 00:19 | There is an application that
does this called the Windows Phone
| | 00:21 | Developer Registration.
| | 00:23 | This takes your phone's ID, and
registers it with your account.
| | 00:27 | If you go to the Start screen, and
then you right-click, and select All apps,
| | 00:31 | you'll be able to see that all the way on
the right, under the Windows Phone SDK 8.
| | 00:37 | Let's go ahead and launch the
application. And, it's currently actively
| | 00:40 | looking for your phone.
| | 00:42 | Let's go ahead and attach our phone
to the computer using a USB cable.
| | 00:48 | If your phone is locked, meaning that
the lock screen is currently on, turn it
| | 00:52 | on, and swipe up, and insert
your lock code if you need to.
| | 01:01 | Now, click Register, and sign in
with your Microsoft Developer account.
| | 01:08 | If you haven't set up your App Hub, or
your Developer account yet, we'll be going
| | 01:12 | over more of that
information in the end of the course.
| | 01:15 | Now, after you're signed in, your phone
will then be added to your Developer account.
| | 01:19 | And, now you're ready to send your app to the phone.
| | 01:21 | So, let's go ahead and click close,
and we're back in Visual Studio.
| | 01:24 | Now, instead of working with
an Emulator, we can say Device.
| | 01:29 | If we go ahead and click Play, it's
then going to build our project. And now,
| | 01:33 | instead of sending it to the Emulator,
it's going to install and send this
| | 01:37 | directly to your connected device.
| | 01:43 | As you can see, on this phone, I
can now tap and interact with the
| | 01:46 | application, just like I did in the
emulator, but now it's working on an
| | 01:50 | actual physical hardware.
| | 01:53 | There is one other application that comes
with the SDK that I wanted to point out to you.
| | 01:57 | If you look in the Windows Phone 8 SDK
folder, within all the apps in the Start
| | 02:01 | screen, you'll see an application
called Application Deployment. Let's start
| | 02:05 | this, and I'll explain what it's used for.
| | 02:07 | You may be working with others on your
Windows Phone project, and get a XAP file.
| | 02:12 | A XAP or X-A-P file is the native
app execution file for Windows Phone.
| | 02:17 | It's like an .exe file in
Windows, or an IPA file for iOS.
| | 02:22 | If you get this file, you can send it
to an Emulator, or unlocked device without
| | 02:26 | having to go through Visual Studio.
| | 02:27 | In this application, you can select
the target, which can include a physical
| | 02:31 | device, or any of the emulators we have
talked about before, including Windows
| | 02:35 | Phone 7-based emulators.
| | 02:37 | In this case, I am going to go to
PhoneGap Build, where I currently have an app
| | 02:40 | that's been created for Windows Phone.
| | 02:43 | I am going to download this file, which
is a XAP file. I am just going to save
| | 02:47 | this to the Desktop. Going to minimize
the browser. And, now I can browse for that
| | 02:55 | particular file on my Desktop.
| | 03:01 | I am now going to send
that to a specific target.
| | 03:04 | Let's set it to the Emulator we've
been using, the WVGA 512 megabytes.
| | 03:09 | And, then I can click Deploy.
| | 03:12 | Now, as you can see, it launches the
Emulator. But now, instead of having to have
| | 03:15 | the code inside of Visual Studio,
it's able to take this XAP file, and then
| | 03:20 | install that directly into the
Emulator, or a physical device.
| | 03:25 | Now, one thing, though. It doesn't
automatically start the application, so you do
| | 03:29 | have to click and drag this. And, then when
we can go down here, and we would see our
| | 03:33 | application installed down here at the bottom.
| | 03:36 | This is helpful if you're working
with others that are building native
| | 03:39 | or cross-platform-based Windows Phone 8
apps, and you need to test them on your device.
| | 03:43 | Another valuable use of this is if you have
an application you want others to test for you.
| | 03:47 | Providing them with the SDK, and
instructions on how to install the application
| | 03:51 | will allow them to test the
app, and send you feedback.
| | 03:54 | So, as you can see, it's very easy to work
with a physical device to test your application.
| | 03:59 | By registering your phone, you can
send your app for real-world testing.
| | 04:02 | In addition, we covered how you can use
the Application Deployment tool to send
| | 04:06 | any XAP application to an Emulator or
Device to help expand your test workflow.
| | 04:11 | In the next chapter, we'll cover more
about the design side of Windows Phone
| | 04:15 | 8, and take a look at how to create
icons and assets for your app to match the
| | 04:19 | Windows Phone 8 style guide, and how
you can integrate them into your Windows
| | 04:23 | Phone 8 project.
| | Collapse this transcript |
|
|
7. Building Design AssetsGraphics requirements for Windows Phone 8| 00:00 | With the application logic and user
interface of our application done, we can
| | 00:04 | now point our attention towards the
packaging and marketing assets of the app.
| | 00:08 | These include the application icons,
Windows Phone Store background images, and
| | 00:12 | getting them added to our project, and
integrated into the application manifest,
| | 00:15 | which we haven't looked at yet.
| | 00:17 | In this video, we will walk through
some of the design assets that Microsoft
| | 00:20 | provides you to help you make icons
and graphics that will mesh well with the
| | 00:24 | rest of the icons that are
part of the operating system.
| | 00:27 | You, of course, can make your own, and
not follow these guidelines, but I'll walk
| | 00:30 | you through the materials that are available.
| | 00:32 | To start, we need to get the
design assets from Microsoft.
| | 00:35 | They are not part of the SDK, and are
downloaded separately from the Microsoft
| | 00:38 | Windows Phone Developer Center website.
| | 00:40 | So, to get to that website, you want to
go to dev.windowsphone.com. Fom here,
| | 00:46 | click on the Design tab. This will
take you to all the different information
| | 00:50 | that is available for how to create design
assets that match the Windows Phone 8 design style.
| | 00:55 | We can then go into the Library.
| | 00:57 | Within this, you can go to a
whole bunch of different resources.
| | 00:59 | If you scroll to the bottom, there
is a section called Design assets.
| | 01:03 | We can then go to Design
resources to download this file.
| | 01:06 | Scrolling down on this page, you'll see
there is a link here for Icon templates
| | 01:09 | for Windows Phone 8.
| | 01:11 | If you click this, you'll download a zip file.
| | 01:13 | The files that you'll download are in
PDF and PSD format, so you'll need Acrobat
| | 01:18 | and Photoshop to work with them.
| | 01:19 | I already have downloaded the
files here, and have expanded them.
| | 01:22 | Let's take a look at the AssetTemplateGuide.
| | 01:25 | Within applications, there are a
number of assets that are used for
| | 01:28 | various parts of the app.
| | 01:29 | The template guide gives you an
overview of all the assets that are part
| | 01:32 | of Windows phone apps.
| | 01:34 | Although you might not need all of them
for your specific app, it also lets you
| | 01:38 | know which versions are required for
the three various resolutions of Windows
| | 01:41 | Phone: WVGA, WXGA and 720p.
| | 01:46 | Let's start with assets that
are used within the application.
| | 01:49 | The first is the Splash Screen.
| | 01:51 | Not all applications need Splash Screens,
but if you have one that has a lengthy
| | 01:55 | startup time, or needs to connect to
remote service before it can start, the
| | 01:59 | Splash Screen provides a better startup
experience for your users, and can break
| | 02:02 | up any load time that your app may require.
| | 02:04 | Since our application launches
so quickly, we won't need this.
| | 02:08 | Next is the Panorama Background.
| | 02:10 | There is an application
type called the Panorama App.
| | 02:14 | If you load the music or photos app on the
phone, you'll see what this can look like.
| | 02:18 | The Panorama Background is the
background for these types of apps.
| | 02:21 | Next are App Bar Buttons.
| | 02:23 | These are button icons that are used
in the app bar that is located at the
| | 02:26 | bottom of the screen.
| | 02:28 | The next page of this document goes to
the various icons you'll need to make for
| | 02:32 | your tip calculator.
| | 02:33 | Let's go through these one at a time.
| | 02:34 | The icons that you see here are used
for the listings and the alphabetical list,
| | 02:39 | or when pinned to the
start screen at various sizes.
| | 02:42 | If you remember, apps can have
a small, medium, or large tile.
| | 02:46 | The large tile type is optional,
and isn't required for your app.
| | 02:49 | However, you do need to provide the
small and medium sizes for your application
| | 02:53 | to meet Microsoft's design requirements.
| | 02:55 | Page 6 has the other two
assets we'll need to make.
| | 02:58 | The first is the Catalog Image, which
is the icon that will display in the
| | 03:01 | Windows Store, either on the
phone or the store website.
| | 03:04 | In addition, if your application is
promoted or featured on one of the
| | 03:08 | Windows Store categories, you'll need
to have a merchandising image, which is
| | 03:11 | a large image used to phonetically highlight
that section of the store to tie in with your app.
| | 03:16 | These are the basic file types that
we'll need to work with for Windows Phone.
| | 03:20 | Now, I've already created
some assets for our project.
| | 03:22 | Microsoft's PSDs are annotated
to make it easier to follow the
| | 03:26 | design requirements.
| | 03:27 | So, let's switch to Photoshop, and take a look.
| | 03:29 | The application icon is the graphic
that is displayed in the alphabetical list
| | 03:33 | of apps when you swipe the Start screen.
| | 03:35 | If you want the theme accent color to
be used, you need to make sure the icon
| | 03:38 | has a transparent background.
| | 03:40 | Now, the icon that I've created
here, I brought in from Illustrator.
| | 03:43 | I'm going to go ahead and hide that,
and show the layers here that Microsoft
| | 03:46 | has prebuilt into these PSDs to give you a
little bit more information to get started.
| | 03:50 | If you see, there's a red layer
here called *HIDE* spec ' application.
| | 03:54 | This shows the padding recommendations for
how your icon should be placed within the tile.
| | 03:59 | As you can see, it's recommended that
there is 14 pixel padding around the icon.
| | 04:04 | There also are three different examples.
| | 04:06 | They show a phone version, an sms version,
and an email version to help get you started.
| | 04:12 | Now, when you hide these, I also have
created my own for our tipped application,
| | 04:17 | and I'll place that here.
| | 04:18 | If I show the spec, you'll see that
this fits within the 14-pixel padding that
| | 04:23 | is recommended by Microsoft.
| | 04:25 | There's also a background layer here.
I want to show the theme accent colors,
| | 04:29 | the background of my graphic here, so I
want to make sure this is a transparent icon.
| | 04:34 | So, by hiding the background, and using
the transparency that's already part of
| | 04:37 | the Photoshop file, now, whether it's
orange, or lime, or blue, the white icon
| | 04:42 | that I've created here will now blend in nicely
with whatever theme color the user has chosen.
| | 04:47 | Let's switch to the Catalog Image.
| | 04:48 | A Catalog Image is what is
shown in the Windows Phone Store.
| | 04:52 | The store images don't work with the
phone theme color, so you should make them
| | 04:56 | with a specific color, and not use transparency.
| | 04:58 | You'll notice that these
images are larger than others.
| | 05:01 | That is because these images are
used at varying sizes based on different
| | 05:04 | locations, either on a device, in
the store, or on the store website.
| | 05:08 | Again, it's showing you some
recommendations here by showing the icon size. And
| | 05:12 | then, also there's a
background here if you wish to use it.
| | 05:15 | The next is the medium-sized
tile called the FlipCycleTileMedium.
| | 05:20 | We aren't going to create
a large tile for this app.
| | 05:22 | Large tiles are usually reserved for apps
that have tile information to display in them;
| | 05:26 | for example, rotating images from a
photo library, the most recent email on an
| | 05:30 | inbox, or your next calendar appointment.
| | 05:33 | Since our app doesn't do that, we
don't need to use the large tile format.
| | 05:37 | Now again, there are hidden layers
here that show additional information.
| | 05:40 | They show recommended padding, and then
there are also additional examples here
| | 05:44 | including music, the local
scout application, and the camera.
| | 05:48 | Let's take a look at the local scout.
| | 05:50 | You'll see that this goes
beyond the recommended padding.
| | 05:53 | Generally, in Windows Phone, you
should always try and constrain within the
| | 05:56 | height of the padding, but you can
overlap from the left to the right to
| | 05:59 | expand the icon a little bit
beyond the recommended padding.
| | 06:02 | Now, let's go ahead and take a look at
the small version, FlipCycleTileSmall.
| | 06:07 | Again, this is for when we pin our
app on the start screen, and we reduce it
| | 06:10 | to its small format.
| | 06:12 | Just like the medium version, it also
shows the spec information, as well as
| | 06:16 | various examples, or camera,
music, and local scout.
| | 06:20 | With all these assets, we now need to
export them for us to use in our project.
| | 06:24 | We can't work with the PSDs themselves;
we need to export them as a PNG file.
| | 06:28 | I need to make sure I turn off
the layers that are marked as HIDE.
| | 06:32 | We don't want to use
these when we export our file.
| | 06:34 | So, I'm going to take those off, and then
keep the vector logo that I've added in
| | 06:39 | here from Illustrator, so we can
now export this for save to web.
| | 06:42 | To export, we are going to go to the
File menu, and select Save for Web & Devices.
| | 06:46 | Now, to preserve the transparency, we
are going to export this as PNG-24.
| | 06:50 | I already have that selected here, but
if that's not selected, you can open up
| | 06:54 | the drop-down, and select PNG-24.
| | 06:57 | Now I click Save, and I select a
location where I want to save the file.
| | 07:01 | You need to repeat this with all the
different icons or files you are going to
| | 07:05 | be using to create your
Windows Phone application with.
| | 07:07 | I usually like to also keep the
same name as the original templates.
| | 07:10 | It helps me to remember what they
are, and keep the terms consistent.
| | 07:14 | Once you've exported all the files, we
can now start adding them to our project,
| | 07:17 | and linking them with the
various icon types for the project.
| | 07:20 | We'll do that in the next video.
| | Collapse this transcript |
| Adding design assets to your project| 00:00 | Adding our icons and other artwork to
our project is pretty straightforward in
| | 00:03 | Windows Phone 8, because Visual Studio
gives you a visual way to manipulate and
| | 00:07 | change the design assets in your project.
| | 00:10 | In this video, we are going to add
the Application icon to our project.
| | 00:13 | We'll do that by adding them to the
application manifest through Visual Studio.
| | 00:17 | In the Solution Explorer, expand the
Properties folder, and you'll see a few files.
| | 00:22 | The WMAppManifest.xml file is where all
the information we need to enter is located.
| | 00:28 | Double-click it to open.
| | 00:29 | Even though it's an XML file, instead
of showing the RAW code, Visual Studio
| | 00:33 | shows a visual
representation of the manifest contents.
| | 00:36 | We are going to focus on just the icons
for now, but we'll go through the other
| | 00:40 | sections of this in the next chapter.
| | 00:42 | As you can see, there are
areas here for all the icons.
| | 00:45 | The first is the app icon, which is the
small icon shown in the alphabetical list.
| | 00:49 | To link this to the file, we are
going to click on the Ellipse button at
| | 00:52 | the bottom. And then, we can go to our
Exercise Files, and then select the icon asset.
| | 00:58 | There. Now that's been added to our
project, and it's been linked to the App icon.
| | 01:03 | Next, we need to choose what type of
tile we want to have with our application.
| | 01:07 | Now, although we have an app logo that
looks like an icon style, we aren't adding
| | 01:11 | any other information into it.
| | 01:12 | So, we are going to use the flip style,
and use this as the full size of the
| | 01:16 | icon space for our logo.
| | 01:18 | We need to provide two
versions, small and large.
| | 01:21 | Now, let's go ahead and add those in by
clicking on the ellipse button. And, we can
| | 01:25 | select our small icon and our medium icon.
| | 01:29 | Now, with everything in place, let's go ahead
and launch the Emulator, and see how this looks.
| | 01:33 | So, Visual Studio
automatically launches the application.
| | 01:36 | So, let's go ahead and Stop
Debugging, but then go back to the Emulator.
| | 01:40 | The application is still installed.
| | 01:42 | So, let's go ahead and swipe over to
see the list of applications, and then
| | 01:45 | scroll down to the bottom.
| | 01:47 | You will see that Tipd has given the
app icon that we defined earlier, and if
| | 01:51 | I hold and pin to start, you will
see that the medium-sized icon that we
| | 01:55 | created is also then used.
| | 01:57 | Now, just like on a physical device, I
can click and hold, make this smaller,
| | 02:02 | which then uses the smaller version of the icon.
| | 02:05 | Now, we can also personalize this, and actually
use a different accent color in the Emulator.
| | 02:10 | I am going to swipe over, and access
the Settings, and then change the theme.
| | 02:15 | Let's change it to blue, and then press Start.
| | 02:18 | Now, if I scroll down to the bottom, our
icon is now using the new theme color that
| | 02:22 | we used, and we didn't have to
provide a different icon for it.
| | 02:25 | As you can see, our App icon is now
visible in the application list, and also now
| | 02:29 | when it's pinned to the Start screen.
| | 02:31 | Now, since we aren't supporting the large
tile size, the interface won't allow us
| | 02:34 | to use the wide version of the Emulator.
| | 02:37 | If you test this on an actual phone,
you'll see exactly the same thing, just
| | 02:40 | turned to the accent color that you choose.
| | 02:43 | In the next chapter, we'll go through the
necessary step to get your app in the store.
| | 02:47 | This will involve creating a Windows
Phone Developer account, putting some
| | 02:49 | additional information in your
application manifest, and submitting to the store,
| | 02:53 | and waiting for it to get approved.
| | 02:55 | We'll start all of this in the next video.
| | Collapse this transcript |
|
|
8. Deploying to the Windows Phone StoreCreating a Windows Phone Developer account| 00:00 | In order to submit your application to
Microsoft to distribute in the Windows
| | 00:03 | Phone Store, you need to create a
Developer account with Microsoft.
| | 00:07 | When you create a Windows Phone
Developer account, you'll pay Microsoft an
| | 00:10 | annual subscription, and have the
ability to submit your application for review
| | 00:14 | by the Microsoft App team.
| | 00:15 | In addition, you will get
information and statistics on your application
| | 00:18 | downloads, sales, crash counts, and other
information that will be helpful if you
| | 00:23 | are going into App development
as a side or primary business.
| | 00:26 | Creation of a Developer account
requires a Microsoft Account ID.
| | 00:29 | The ID can be any email that you currently
have, or you can create a new one with Microsoft.
| | 00:34 | To get started, go to dev.windowsphone.com/join.
| | 00:40 | You will get to the page that I
currently have displayed here.
| | 00:43 | Go ahead and click on Join Now, and
then I'll ask you to get started.
| | 00:47 | If you currently already are logged
in through a service like outlook.com, it
| | 00:50 | might automatically sign you in.
| | 00:52 | In this case, I'm able to now get started
on registering for my Developer account.
| | 00:56 | I first need to provide information about
what country of residence is my business;
| | 00:59 | in this case, I'll pick the United States.
| | 01:02 | If you're working as a company, you can
select Company, or if you are doing this
| | 01:05 | as an individual, you can select individual.
| | 01:08 | You also need to agree to the
Windows Phone Store Application
| | 01:10 | Provider Agreement.
| | 01:12 | Click on the link to open and display it
here, and once you've read it, check the
| | 01:15 | checkbox, and then click next.
| | 01:17 | You then need to provide contact
information to add to your account.
| | 01:21 | In this case, I'll go ahead
and enter in my information here.
| | 01:24 | You need to enter in a Publisher name here.
| | 01:27 | Click the Check availability button to make
sure that this isn't used by another developer.
| | 01:31 | Now click Next.
| | 01:32 | You then have the option of purchasing
your subscription, paying for it as an
| | 01:36 | annual subscription. If you are
currently a student, enrolled with a DreamSpark
| | 01:40 | account, you can click that, or if you
have a promotional code, provided by a
| | 01:43 | third party or from Microsoft, you
can select that, and enter the code.
| | 01:47 | Now, you need to provide your payment,
either through a credit card or a PayPal
| | 01:51 | account, provide your billing
address, and then you would click Next.
| | 01:56 | Once you have submitted your payment, and
your account is created, you can then log
| | 01:59 | into your account, and access the Dashboard.
| | 02:01 | The Dashboard is your central
repository for all the information about your
| | 02:04 | account and your apps.
| | 02:06 | When you create your account, and after
you have provided all of your personal
| | 02:09 | information, there are a couple
additional steps you need to take, if you wish
| | 02:12 | to get paid for the apps that you
sell in the Windows Phone Store.
| | 02:15 | In the Dashboard, go to your account,
and you'll see that there are two sections
| | 02:20 | down here in the middle: Tax
profile and Payment account.
| | 02:23 | By clicking on the Tax profile, Edit, or
Create button, you will need to fill out
| | 02:27 | a US Department of Treasury Tax form
that indicates that you will potentially be
| | 02:30 | receiving app sale payments from
Microsoft that will not have taxes withheld.
| | 02:35 | Microsoft will report these payments
to the IRS, which you'll need to include
| | 02:38 | when you file your taxes.
| | 02:40 | In addition, if you're selling your
application, you also will need to provide a
| | 02:43 | method of receiving payments from Microsoft.
| | 02:45 | At the time of this recording, Microsoft
supported a checking account and PayPal.
| | 02:50 | Once you set up your
account, you are ready to go.
| | 02:52 | One important note is that a Windows
Phone Developer account is separate from
| | 02:55 | a Windows 8 account.
| | 02:56 | The two programs are different from each
other, and you need to apply, and pay for
| | 03:00 | each one separately.
| | 03:01 | Now that the Developer account is
created, we can go back to the application,
| | 03:04 | and configure the last pieces of our
application manifest, and get ready to
| | 03:08 | submit our app.
| | Collapse this transcript |
| Configuring the application manifest| 00:00 | Before we can package and submit our
app, there are few things we need to
| | 00:03 | complete in the application
manifest within Visual Studio.
| | 00:06 | If you're a member, the
Application Manifest is where we added our
| | 00:09 | application icons to the app.
| | 00:11 | We didn't look at the other tabs, but
we'll do that in this video, and define
| | 00:14 | some of the unique parameters that
you'll need to work with in your own apps
| | 00:18 | before you send them to Microsoft.
| | 00:19 | If you still have the project open
from the previous chapter, you can
| | 00:22 | keep working with it. If not,
| | 00:24 | open the project from the
downloaded Exercise Files.
| | 00:27 | Since we need to work with the
AppManifest file, expand the Properties folder in
| | 00:31 | the Solution Explorer, and
double-click on WMAppManifest.xml.
| | 00:36 | Here we can see the app icons that we
attached to our project in the previous chapter.
| | 00:40 | One other field we should
populate is the application description;
| | 00:43 | just provide a simple description
in here about what our app does.
| | 00:46 | As a general hint, you may find it
helpful to keep app descriptions and other
| | 00:50 | descriptive text in a Word
document, or in some other separate file.
| | 00:53 | It makes it easier to update them
as you add new versions, and keep them
| | 00:57 | consistent if you're
using them in multiple places.
| | 00:59 | In addition, not all areas where you enter
descriptions will have spell-checking support.
| | 01:03 | Next, we need to define the
capabilities of the application.
| | 01:06 | When you submit your app, you need
to define all the hardware and network
| | 01:10 | capabilities of the device.
| | 01:11 | This is used to notify the user before
they purchase or use the app that the app
| | 01:15 | requires specific capabilities on the device.
| | 01:19 | For instance, it may require access to
the Internet, access to media services,
| | 01:23 | access to your user account,
file access, or other capabilities.
| | 01:27 | Some users that are sensitive to
access to their hardware, may not permit the
| | 01:30 | use of these certain capabilities.
| | 01:32 | It also provides extra security by
notifying what an application can do.
| | 01:36 | If you build an app, and not specifically
request access to a capability, and then
| | 01:40 | try to access it, the app
will be denied that access.
| | 01:43 | In fact, an app may not successfully
compile if you violate your defined
| | 01:47 | capabilities rule, or it could be
rejected during the app review cycle.
| | 01:50 | Since our app doesn't require access to
any unique hardware, we can uncheck all
| | 01:54 | of the capabilities.
| | 01:56 | The Requirements tab continues the list of
allowable services that your app can work with.
| | 02:00 | In this case, it is focused on
hardware capabilities like cameras, near field
| | 02:03 | communications, the compass, and motion sensors.
| | 02:07 | Again, since our app doesn't require
any of these, we can leave them unchecked.
| | 02:10 | Finally, we have the Packaging tab.
| | 02:12 | When we create our app and build the
package or zap file, within it is metadata
| | 02:16 | about the author, version number,
and other information of the app.
| | 02:20 | Some of the information on this
tab is automatically generated.
| | 02:23 | So, unless you have a specific
reason to do so, keep the Product ID and
| | 02:27 | Publisher ID unchanged.
| | 02:29 | These are the unique identifiers for
your Application and Developer account
| | 02:32 | that will link everything together in the
distribution and reporting system at Microsoft.
| | 02:36 | Let's go ahead and finish the
rest of the information on this page.
| | 02:39 | I'll put in my name as the Author.
Publisher, I'll also make me. Since this is the
| | 02:43 | first version of the app, we'll leave it at 1.
0.0.0. And, this is the unique Product ID
| | 02:48 | that's been assigned to my app, as
well as my personal Publisher ID.
| | 02:52 | Below, also are the
default languages for the app.
| | 02:54 | In this case, United States English, as
well as other supported languages that
| | 02:58 | the app can work with.
| | 02:59 | With this tab finished, we are ready
to build our release version, and begin
| | 03:02 | the submission process.
| | 03:04 | We'll do that in the next movie.
| | Collapse this transcript |
| Packaging and uploading| 00:00 | We are now at the last step.
| | 00:02 | Congratulations on getting to this point.
| | 00:04 | What we have to do now, though, is to
build our project as a release version,
| | 00:07 | get screenshots of our app, to add to the
Windows Phone Store, and submit the app to Microsoft.
| | 00:12 | So, let's go ahead and get started.
| | 00:13 | When we have been building our app before,
we have been creating a debug version
| | 00:17 | that allows for more integration
with the Visual Studio environment.
| | 00:20 | Now that we are ready to release, we
need to use the Release version in the
| | 00:23 | Compiler to build the final
version for us to submit to Microsoft.
| | 00:27 | Let's switch to Visual Studio, and get started.
| | 00:30 | To make this adjustment, we need to change
the drop-down that says Debug to Release.
| | 00:35 | With that made, we can now get
started with the next step, which is to get
| | 00:38 | screenshots of our app to go along
with the submission in the store.
| | 00:41 | To get started with that, we need to
create screenshots for all the resolutions
| | 00:44 | that are supported by our app.
| | 00:46 | In this case, we have
three: WVGA, WXGA, and 720P.
| | 00:51 | Let's pick the WVGA Emulator,
and launch the app from there.
| | 00:56 | Now, when you start the app in the
Emulator, you will see a bunch of numbers
| | 00:59 | written along the side of the phone.
| | 01:01 | Since we don't want these, we should
stop debugging, and launch the app outside
| | 01:04 | the integration with Visual Studio.
| | 01:06 | So, I'll click Stop Debugging. I'm going to
switch back to the Emulator. And, now I can
| | 01:11 | swipe to the application
list, and select the app.
| | 01:14 | The control bar here on the right,
I can then expand out, and select
| | 01:17 | the Screenshot tab.
| | 01:19 | Here, I can then create a capture,
and I can save this to my computer.
| | 01:23 | I am going to create a folder called
WVGA, and save it in here. appStartup.
| | 01:29 | Now you have to have at least one
screenshot for each of the resolutions, which
| | 01:33 | means you'll end up with three:
| | 01:35 | one for WVGA, WXGA, and 720P.
| | 01:39 | It's best to have multiple
screenshots to show all the different states and
| | 01:43 | capabilities of what your application can do.
| | 01:45 | Once you have all the
screenshots, it's now time to submit.
| | 01:48 | What we are going to do now is we are
going to close the Emulator, and we are
| | 01:51 | going to go back to the Visual Studio.
| | 01:53 | I am then going to go
into BUILD, and Build Solution.
| | 01:56 | This is now going to be
creating a release version of this.
| | 01:59 | I am going to then go to
BUILD, and Deploy Solution.
| | 02:02 | If you look, this line here says that our
XAP file has been created, and has succeeded.
| | 02:08 | With the XAP file created, we can
now go back to the Dashboard of Windows
| | 02:11 | Phone Development Center.
| | 02:13 | Here we are then, going to click on SUBMIT APP.
| | 02:15 | Submitting an app is a step-by-step process.
| | 02:18 | We first need to provide App
information, then upload and describe the XAP
| | 02:22 | files that are part of our project. Let's get
started with step one, providing the app info.
| | 02:27 | Here we need to provide some
information around the application.
| | 02:30 | I am going to create an alias for our
app, which I am just going to name the
| | 02:33 | same as our App name, and then you need
to provide some categorization for how
| | 02:37 | the app would be organized
within the Windows store.
| | 02:40 | If I open up the category, this would
be a tools and productivity application.
| | 02:43 | Some categories have subcategories,
but in this case, there isn't any.
| | 02:47 | So, we can leave that one alone.
| | 02:49 | If you wish to sell your application,
you can pick a price point within
| | 02:52 | this drop-down list.
| | 02:53 | Your rate is all the way from $.99 to $499.99.
| | 02:58 | We are going to keep this app free.
| | 03:00 | Under Market distribution,
there are of couple options here.
| | 03:03 | You can distribute to all available
markets at the base price tier, or distribute
| | 03:06 | to all markets except
those with stricter content rules.
| | 03:09 | It defaults to the second one, and
I am going to leave that one alone.
| | 03:12 | There are additional options
here to talk about distribution
| | 03:15 | channels, publishing and other
things, but we don't need that for our
| | 03:18 | particular application.
| | 03:20 | I am then going to click Save.
| | 03:22 | The next step is to
upload and describe your XAPs.
| | 03:24 | Here, we need to browse for and upload the
XAP file that we created in Visual Studio.
| | 03:30 | You will see that there is a Bin folder.
Double-click the Release folder, and
| | 03:33 | then we see our XAP file listed here.
| | 03:35 | I could then open this. It's then going to
take the XAP file, and upload that to Microsoft.
| | 03:40 | Now the XAP file already contains some
information inside of it, including the
| | 03:44 | version number, capabilities, file size,
language, supported operating systems.
| | 03:49 | So these things are already provided
for us. In addition, it provides a little
| | 03:53 | bit of information around the language
details, but one of the things we do have to
| | 03:57 | provide, though, is the description for the store.
| | 03:59 | So, in this case, I am going to re-enter
what we had before. And then, I have the
| | 04:03 | option of providing some specific
keywords that if people use to search, would
| | 04:06 | bring up my application.
| | 04:08 | I am going to use tip,
calculator, bill, gratuity, and dining.
| | 04:14 | Next, we have the Upload images section.
| | 04:16 | Here, we need to provide two specific
files, our app icon and the required
| | 04:22 | screenshot for each one of the
resolutions, in this case, WVGA, WXGA, and 720P.
| | 04:28 | To add these assets, just click on the
plus (+) icon, and select the file that
| | 04:32 | matches to that particular asset.
| | 04:36 | Once you have uploaded all the
required assets, you can then save, and it
| | 04:40 | will submit the app.
| | 04:41 | With the app submitted, we now need to
wait from Microsoft to approve the app.
| | 04:45 | Microsoft testers will thoroughly review
the app, and test it in various scenarios.
| | 04:49 | The process can take up to a week.
| | 04:51 | If your app passes, you will get an
email that says, "Your app is all approved,
| | 04:54 | and is in the App Store."
| | 04:56 | If it fails, you will get a detailed
report of what part of the submission
| | 04:59 | guidelines the app failed, and in some
cases, you will get steps they used to
| | 05:02 | reproduce the error.
| | 05:04 | You can then go back, fix the
errors, and resubmit the app to Microsoft.
| | 05:07 | Once you have an approved app, you can
then see it live in the Windows Phone store.
| | 05:11 | We'll do that in the next movie.
| | Collapse this transcript |
| Seeing your app in the Windows Phone Store| 00:00 | Now that our app is in the
app store, we can see it live.
| | 00:03 | If you get your approval email, it may
take a full day for the store to index,
| | 00:07 | and have the app searchable.
| | 00:08 | So, if it isn't there immediately,
give it a little bit more time.
| | 00:11 | There are two places we can view our app.
| | 00:13 | The first is in the store on the device.
| | 00:15 | Since the Emulator is a full-featured
Windows Phone, you can see it there.
| | 00:19 | So, I can go into the Windows
Store, and then search for my app.
| | 00:25 | As you can see, it uses the icon that we
created earlier, and if I go into this,
| | 00:29 | it shows the icon any reviews that
you might have received for the app, and
| | 00:33 | also the screenshots.
| | 00:36 | It shows the screenshots that are
matching the phone that you are actually
| | 00:38 | looking at the store on.
| | 00:40 | So, if you are using a 720P phone,
it will show the 720P screenshots.
| | 00:44 | You can also view your app on the
online store using a web browser.
| | 00:47 | If I go back to the Developer center,
and I go to the Dashboard, and I access my
| | 00:51 | specific application, if I go to the
Details tab, it will then give me all those
| | 00:56 | additional details to the location
of where our app is on the store.
| | 01:00 | If I click this link, it will
take me directly to the app.
| | 01:03 | As you can see, it also shows the same
product image, screenshots, and all the
| | 01:07 | other information we
provided when we created our app.
| | 01:10 | With that, we've now completed
our app, and it's now in the store.
| | 01:13 | From this point, if you decide to add
new features or enhancements to your app,
| | 01:17 | you can work on them, and then
submit updated versions to Microsoft.
| | 01:20 | Remember, if you're updating an existing
app, you don't want to create a new app
| | 01:24 | submission, but update the existing app.
Otherwise, you might have two versions
| | 01:27 | of the same app in the store,
which could lead to confusion.
| | 01:30 | In the next video, we'll wrap
everything up, and I'll give you some pointers
| | 01:33 | on where to go next.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Windows Phone provides a unique take on
the smartphone, the unique life tiles,
| | 00:04 | the bold and simple design of the
hardware and user interface. And, the
| | 00:08 | integration of the services like Xbox
Live, SkyDrive, and Office make Windows
| | 00:12 | Phone a great platform.
| | 00:13 | In addition, authoring for the platform
is very straightforward and easy to do,
| | 00:17 | if you have experience working
with C#, Visual Basic, or C++.
| | 00:20 | But where do you go from here?
| | 00:22 | In this course, we cover the basics
of getting started with development
| | 00:25 | for Windows Phone 8.
| | 00:26 | To go further, a great resource is
the MSDN website and the Windows
| | 00:30 | Phone Developer Center.
| | 00:31 | These sites have extensive sample
applications, code snippets, and helpful forums
| | 00:35 | to ask questions, and
communicate with other developers.
| | 00:38 | In addition, if you're new to
programming, I would recommend that you find out
| | 00:41 | more about C#, Visual Basic, or C++,
which are the main languages for building
| | 00:46 | native apps for Windows Phone.
| | 00:47 | As you work more with Visual Studio,
there are resources available on some of
| | 00:51 | the more advanced time-saving,
productivity features of Visual Studio 2012 that
| | 00:55 | can make your development
for Windows Phone easier.
| | 00:57 | Finally, if you haven't already,
you may want to consider looking at
| | 01:00 | developing for Windows 8.
| | 01:02 | Windows Store applications for Windows 8
use the same basic technologies of XAML
| | 01:06 | and C# that we have used in this course.
| | 01:08 | And, in some cases, you can share code
across Windows Phone 8 and Windows 8 projects.
| | 01:13 | So with that, thank you,
for completing this course.
| | 01:15 | I hope it has been helpful and informative.
| | 01:17 | If you have any feedback, please feel
free to use the Feedback Form on the
| | 01:20 | course page to send your feedback
on your experiences with this course.
| | 01:23 | Thanks again, and have fun
developing apps for Windows Phone 8.
| | Collapse this transcript |
|
|
