IntroductionWelcome| 00:04 | My name is David Gassner,
and I'd like to welcome you to
| | 00:07 | Building Your First Windows Store App with XAML and C#.
| | 00:11 | In this course, I'll show you how to install
the free Visual Studio Express 2012 for Windows 8
| | 00:17 | and how to create a new application
using one of the included templates.
| | 00:23 | Then I'll describe how to use C# 5.0's new
Asynchronous Programming Model to retrieve
| | 00:29 | and parse an RSS feed from the web, how to
use that data to define a dynamic display
| | 00:36 | that's laid out with XAML and XML based language
and controlled with code-behind files written in C#.
| | 00:43 | This course just touches the surface of
what's possible in Windows Store Apps,
| | 00:48 | but I hope it will help you get started
building your own apps for this new platform.
| | Collapse this transcript |
| What you should know before watching this course| 00:01 | This course is designed to help you get started
building Windows Store Apps for Windows 8 using XAML and C#.
| | 00:09 | The set of technologies that you use to build
Windows Store Apps is familiar to many developers.
| | 00:16 | You can choose between web-based
technologies such as HTML and JavaScript, or traditional
| | 00:21 | Microsoft technologies, including XAML
and the .NET languages C# and Visual Basic.
| | 00:29 | This course, as I mentioned, focuses on XAML
and C#, but all of the applications that you'll
| | 00:34 | see in this course and in many of the
examples provided by Microsoft can be built
| | 00:39 | with any of these technologies.
| | 00:42 | Regardless of which programming languages
you choose, underlying all of this is a set
| | 00:46 | of technologies known as the WinRT APIs, and
that's all supported by the Windows 8 operating system.
| | 00:55 | As a developer, you'll get started most quickly by
using the languages that you're already familiar with.
| | 01:01 | If you've already learned how to use C# or
Visual Basic, and you've already built XAML-based
| | 01:07 | applications for Silverlight or for
WPF, then I recommend using those.
| | 01:13 | But if you're an experienced C++ developer,
you can also start down that road.
| | 01:18 | XAML is an XML-based layout language.
| | 01:22 | It's used heavily in other Microsoft development
technologies, such as Windows Presentation Foundation,
| | 01:27 | or WPF, which is used to build traditional
desktop applications, and Silverlight,
| | 01:34 | which can be used to build web-
based Rich Internet Applications.
| | 01:37 | When you choose XAML, you also need to
choose a code-behind language for your programming
| | 01:44 | logic, and your choices here are C# which
is Java-like, and the most popular of these
| | 01:50 | three languages, Visual Basic which will be popular among
developers who have used it for many years, and C++.
| | 01:59 | C++ has the advantage of achieving better
performance than the managed languages, and
| | 02:04 | it's especially good for games because it supports
graphical programming with the DirectX libraries.
| | 02:12 | You also have choices among Development Tools.
| | 02:15 | You'll use Visual Studio 2012 to build
both Windows Store apps and other applications
| | 02:21 | using the newest version of C#.
| | 02:24 | But within the Visual Studio family,
there are many choices as well.
| | 02:28 | There are three primary editions that you can pay for,
including the Professional, Premium, and Ultimate editions.
| | 02:35 | But there are also these free editions of
Visual Studio 2012, Visual Studio 2012 Express
| | 02:42 | for Web, Windows 8, Windows Desktop,
and Windows Phone.
| | 02:47 | I'll be using the version for Windows 8.
| | 02:49 | That's the free version that you can use to build Windows Store
Apps regardless of which language or languages you select.
| | 02:57 | To learn more about the languages and tools used in this
course, you can watch these existing lynda.com courses.
| | 03:04 | Silverlight 5 Essential Training will give you
a great background in all of the flexibility
| | 03:09 | and power of XAML when used with C#.
| | 03:13 | C# Essential Training will help you get
started with the programming language that's used
| | 03:18 | in the code-behind segments of this course.
| | 03:21 | If you decide to use C++, we have a course
for that as well, C++ Essential Training.
| | 03:28 | To learn more about Visual Studio, look
at Visual Studio 2010 Essential Training.
| | 03:33 | It will show you many of the features that are
available in that version and in this newer version.
| | 03:40 | So, with those resources available, you can get started
building Windows Store Apps with XAML and C# very quickly.
| | Collapse this transcript |
| Using the exercise files| 00:01 | This course includes exercise files that
you can use to follow along as I describe how
| | 00:06 | to build a simple Windows Store app.
| | 00:08 | I've placed the exercise files on my desktop,
but you can put them anywhere on your hard disk.
| | 00:14 | To use the exercise files, you'll need a
copy of Visual Studio Express 2012 for Windows 8
| | 00:20 | or any of the versions of Visual Studio
where you pay for the license.
| | 00:25 | I'll describe how to install
Visual Studio Express in a later video.
| | 00:29 | The exercise files include both starting
and finished versions of each exercise.
| | 00:35 | To work through an exercise, go to the
folder for that exercise and open it--
| | 00:39 | for example, I'll go to this folder named
RetrieveData--and then double-click the Solution file.
| | 00:46 | You'll recognize it by the Visual Studio icon.
| | 00:49 | The project opens in Visual Studio, and
then you can follow along with the code.
| | 00:54 | When you run an application, it's installed
in your Windows 8 operating system, and the
| | 00:59 | application tile will
show up on the start screen.
| | 01:03 | I recommend uninstalling that version of the
application from your operating system when
| | 01:07 | you're done with an exercise.
| | 01:09 | That way, you won't have a bunch of
applications appear on your system.
| | 01:13 | To uninstall an app, go to the tile for the app,
right-click it, click Uninstall and confirm.
| | 01:21 | The application is removed, and then you can
remove the project from your hard disk if you like.
| | 01:27 | If all you want to do is review the finished
code for any project, you can go to
| | 01:32 | the Solutions folder in the exercise files.
| | 01:35 | I've placed finished versions of each project
here, and you can open up more than one copy
| | 01:40 | of Visual Studio at a time.
| | 01:42 | So it's possible to have both the starting
code and the original code open simultaneously.
| | 01:47 | Finally, the Exercise Files folder includes
some assets that I'll use during the course.
| | 01:54 | These include application icons and copies
of the artist and artwork graphics that I
| | 02:00 | use throughout the course.
| | 02:02 | I've placed these files there for your convenience,
but I encourage you to try creating and using
| | 02:07 | your own application assets as well.
| | 02:10 | So, let's get started building a first
Windows 8 Store Application with XAML and C#.
| | Collapse this transcript |
|
|
1. Getting StartedInstalling Visual Studio Express 2012 for Windows 8| 00:00 | To get started building Windows 8 Store apps,
install Visual Studio Express 2012 for Windows 8.
| | 00:08 | This software is completely free.
| | 00:10 | I'm starting at my Windows 8 desktop,
and I'll go to Internet Explorer.
| | 00:15 | From there, I'll navigate to dev.windows.com.
That takes me to the developer homepage.
| | 00:22 | From there, I'll click the Downloads link
and then under Download the tools and SDK,
| | 00:27 | I'll click Download now.
| | 00:29 | That brings up a prompt at the bottom of
the screen, and I'll click Run to download it
| | 00:34 | and run a very small starter application.
| | 00:37 | Most of what you need will be
downloaded during the installation.
| | 00:41 | When the installer first starts up, it
asks you to agree to the license terms.
| | 00:46 | After checking the appropriate check box,
you'll see an Install link at the bottom.
| | 00:51 | Click the link and then after responding to the User
Account Control dialog, the installation will begin.
| | 00:58 | The installation will take quite a bit of time.
| | 01:01 | In addition to downloading and installing
Visual Studio, Windows will create a system
| | 01:06 | restore point that will allow you to back
up to this point on your Windows computer.
| | 01:12 | After the system restore point, the rest
of the download and installation continues.
| | 01:17 | This would be a good time to pause the video
because the installation will take quite a few minutes.
| | 01:24 | Once the installation is complete, you'll
see this screen with a link that lets you
| | 01:28 | launch Visual Studio Express.
| | 01:33 | When Visual Studio Express first opens,
it will display in a dark background.
| | 01:38 | If you'd like to change it to a lighter
background to match previous versions of Visual Studio,
| | 01:44 | go to the Menu, and choose Tools > Options
and then on the General panel, change the
| | 01:52 | color theme from dark to light.
| | 01:55 | Click OK, and now you'll be ready to
create your first Windows 8 Store app.
| | Collapse this transcript |
| Hello World with XAML and C#| 00:00 | Once you've installed Visual Studio, you're
ready to create your first simple application.
| | 00:06 | If you've closed Visual Studio,
you can open it in one of two ways.
| | 00:11 | You can go to the Start screen, and you
should find the tile there that was created when
| | 00:15 | you installed the application, or you can type
the name of the application from the Start screen.
| | 00:22 | Type VS for Visual Studio, and you'll
see it appear as VS Express for Windows 8.
| | 00:30 | When the application opens up, it shows a Start
page with links to various documentation resources.
| | 00:37 | I'm going to close the Start page
and then create my first project.
| | 00:42 | I'll go to the menu and
select File > New Project.
| | 00:46 | On this screen, you'll find that there are templates
for JavaScript, Visual Basic, Visual C#, and Visual C++.
| | 00:56 | Because we're using this particular version
of Visual Studio, Express for Windows 8,
| | 01:01 | you can only build Windows Store apps.
| | 01:04 | If you're working in another version of
Visual Studio--for example, Professional--
| | 01:08 | you'll see many other templates available.
| | 01:11 | I'll choose the Windows Store templates
for Visual C# and then the Blank Application.
| | 01:17 | There's a Blank App, a Grid App,
and a Split App to choose from.
| | 01:22 | After selecting my template, I'll type the
name of the project which I'll set as HelloWorld.
| | 01:28 | Notice that the project and application name and
the solution name match each other automatically.
| | 01:34 | Next, I'll select the location, the
place where I want to create the project.
| | 01:39 | I'll browse, and I'll go to my desktop.
| | 01:42 | From there I'll go down to my Exercise Files
folder, and from there to the 01_GettingStarted
| | 01:48 | folder, and I'll click Select Folder.
| | 01:51 | And then I'll leave the option to Create
the directory for the new solution selected.
| | 01:57 | That will create a new folder named HelloWorld
under the location that I selected, and I'll click OK.
| | 02:03 | A brand-new project
consists of a number of files.
| | 02:08 | You'll see that there's a file called App.xaml.
| | 02:11 | That's the top level container for the
entire application and then because I selected C#
| | 02:17 | as my code-behind language, there's also a
code-behind file called App.xaml.cs, and that's
| | 02:25 | the file that's displayed
automatically when the project first opens.
| | 02:30 | There's also a file called MainPage.xaml, and
that's the page that will be loaded automatically
| | 02:36 | when the application first fires up.
| | 02:39 | That's where you should set
your initial user interface.
| | 02:43 | I'll double-click the
MainPage.xaml file to open it.
| | 02:47 | Depending on your computer's speed and memory,
it might take a little while to open up the
| | 02:51 | designer for the first time.
| | 02:53 | Be patient and eventually you
should come to this display.
| | 02:58 | You'll see these panels, a design panel at
the top, a code panel in the middle, and possibly
| | 03:04 | an output panel at the bottom.
| | 03:07 | You might not see the output panel the
first time, and regardless, I'm going to close it
| | 03:11 | to get back a little bit of screen space.
| | 03:14 | Now, I'm going to shrink down my code pane by
clicking on the Collapse Pane icon on the right.
| | 03:21 | Finally, I'll zoom so that
I can see the entire design.
| | 03:25 | In the lower left, I'll
change my zoom from 67 to Fit All.
| | 03:30 | Now, I'm ready to add some text.
| | 03:33 | I'm going to build a very
basic HelloWorld application.
| | 03:37 | You define the layout of a
Windows Store app using XAML, X-A-M-L,
| | 03:43 | but Visual Studio gives you a WYSIWYG--or
What You See Is What You Get--design interface
| | 03:48 | that lets you get started
very quickly adding XAML code.
| | 03:52 | On the left side of the Visual Studio
interface, I'll click the Toolbox tab.
| | 03:58 | Now, I'll add a control called a TextBlock.
| | 04:01 | A TextBlock is essentially a label, a bit
of text that you can control programmatically
| | 04:07 | but that has certain default settings.
| | 04:10 | I'll click and drag the
TextBlock into the application.
| | 04:14 | When I drop the TextBlock object into place,
the Toolbox pane snaps back into place and
| | 04:20 | lets me see my entire design surface.
| | 04:23 | Now with the TextBlock selected, I'll go to
the Properties Pane in the lower right, and
| | 04:28 | I'll make some changes.
| | 04:30 | First, I'll make sure I'm looking at the
Common section, labeled Common Properties,
| | 04:35 | and I'll change the Text property
from TextBlock to HelloWorld.
| | 04:40 | After I finish typing the string, I'll just
press Enter, and I'll see it change in the design
| | 04:45 | surface on the left as well.
Now, I'm going to set the font.
| | 04:50 | For this first exercise, I'm going
to set certain font types explicitly.
| | 04:55 | I'll go to the Text properties, and I'll change the
Font from Global User Interface to a specific font.
| | 05:03 | For this exercise, you
can use any font you like.
| | 05:07 | I'll keep it simple.
| | 05:08 | I'll choose Arial, and then
I'll set the size of the font.
| | 05:12 | Changing it from 11 pixels to 48 pixels, and that turns
the object into something that's much more readable.
| | 05:19 | Finally, I'll position the object on screen.
| | 05:23 | I can click and drag the object around in
the design environment, and that's actually
| | 05:27 | changing the underlying code, or I
can set the properties explicitly.
| | 05:32 | I'll go to the Layout
Properties in the Properties pane.
| | 05:35 | I'll scroll down a little bit, and
I'll change the properties as follows.
| | 05:40 | I'll change my Left Margin to 120 pixels,
and I'll change my Top Margin to 55 pixels,
| | 05:47 | and that places the object
approximately where I want it to be.
| | 05:50 | Now, I'm ready to save and run
the application for the first time.
| | 05:54 | I'll press Ctrl+S to Save, and then I'll go to the
menu, and I'll choose Debug > Start Without Debugging.
| | 06:03 | When you start the application from Visual Studio,
regardless of whether you're debugging
| | 06:07 | or not, you're actually installing the
application into your Windows 8 operating system.
| | 06:14 | You're then taken directly over to the application
running in full screen mode, as is the case
| | 06:19 | with all Windows Store apps.
| | 06:21 | Now, to get back to Visual Studio,
press the Windows key.
| | 06:25 | That's the key right next to the Ctrl key,
and that will take you back to the Start screen.
| | 06:31 | Scroll way over to the right in the start screen,
and you should now see a tile for your new application.
| | 06:37 | The graphic is a default graphic.
| | 06:39 | Later on, we'll be replacing that with our own
custom graphic and the name of the application
| | 06:44 | appears on the tile automatically.
| | 06:46 | If you want to get rid of the application,
right-click it to check it and then choose
| | 06:51 | uninstall from the App bar and confirm.
| | 06:54 | Now, let's take a look at the
XAML code that was generated.
| | 06:59 | I'll close the Output pane and then at the
bottom, I'll click on the XAML link, and this
| | 07:04 | will take me to my code.
| | 07:06 | Then I'll look at the code in full screen by
holding down the Alt and Shift keys and pressing Enter.
| | 07:12 | The code comes out very wide and to make it a
little bit more readable, I'll add some hard returns.
| | 07:18 | So this is what my beginning page looks like.
| | 07:21 | The page is the container and within
that there's something called a grid.
| | 07:26 | We'll learn how to use grid
based layouts later on in the course.
| | 07:31 | Within the grid, there's a TextBlock and the
margins that I had set of 120 and 55 are reflected
| | 07:37 | in the margin property settings of 120,55,0,0.
| | 07:45 | The Text value that's being displayed HelloWorld is
shown there as is the FontFamily and the FontSize.
| | 07:52 | So that's how you get started building a
simple HelloWorld application laying everything out
| | 07:57 | with the XAML, XML language.
| | Collapse this transcript |
| Exploring design principles of Windows Store apps| 00:01 | Windows 8 Store Apps follow a set of design
principles formerly known as the Metro Design
| | 00:08 | Language but now simply known as Windows 8
Design Guidelines or Modern Design Guidelines.
| | 00:15 | These guidelines fall into six categories,
Navigation, Commands, Touch interaction,
| | 00:22 | Advertising and Branding, and User experience.
| | 00:27 | Applications follow navigation
patterns that range from Hierarchical to Flat.
| | 00:32 | A Hierarchical navigation design is one where you have
a hub page and then perhaps section and detail pages.
| | 00:40 | You go from the first page--the hub--
and drill down into your data.
| | 00:44 | A good example of this is the Photos
application that's included with Windows 8.
| | 00:50 | In this application, you start with the set of icons
indicating the location or source of your photographs.
| | 00:57 | Then you can drill down into a section, from
there into a set of items, and from there into
| | 01:03 | the detail for a particular item.
| | 01:05 | Then when you click on the page, an icon
appears that lets you go back through the hierarchy.
| | 01:12 | Hierarchical applications are good for
content systems, that is collections of content such
| | 01:18 | as photographs or news articles or where your
content can be defined into distinct sections.
| | 01:24 | Another common navigation
pattern is the Flat application.
| | 01:28 | A Flat application has a single container
that shows one page or one display at a time.
| | 01:35 | The most common example of this is the new
version of Internet Explorer that you get
| | 01:40 | to from the Windows 8 Start screen.
| | 01:43 | I'll go to the Start Screen and fire up Internet Explorer,
and I'll go to the Microsoft website, microsoft.com.
| | 01:51 | From there I'll go to Google, and you'll see
that you're replacing the content but still
| | 01:57 | staying within the same frame.
| | 02:00 | Other examples of flat navigational applications
include games or document creation applications.
| | 02:07 | For more information about navigation patterns,
go to the Bing Search Engine and search for
| | 02:13 | this string, hh761500.
| | 02:18 | I'll go to Internet Explorer and type in
that string and automatically I'll be searching
| | 02:24 | Bing for the string and from there I can get to the
documentation about Navigation design for Windows Store Apps.
| | 02:32 | You'll find a lot more detail here, including
useful diagrams showing different kinds of navigation.
| | 02:39 | The next pattern that you should learn
about is called the Commanding pattern.
| | 02:43 | A commanding pattern is how the user controls
the application and indicates what they want
| | 02:49 | to do next and where they want to go.
| | 02:52 | Wherever possible, you'll want to handle
navigation by using the content of your application.
| | 02:59 | That is instead of choosing an item and then
saying what you want to do with it, if possible,
| | 03:04 | you should allow the user to express a
user gesture directly with that content item.
| | 03:10 | Going back again to the Photos
application, this is a great example.
| | 03:14 | To get to a particular photo
I simply click on the content.
| | 03:18 | I go down to the Flowers
and then to a specific flower.
| | 03:23 | And so I'm clicking and
pointing at the thing I want.
| | 03:26 | There's no additional chrome or user
controls necessary with this sort of pattern.
| | 03:32 | There are many common commands that are used
by many applications such as searching, sharing,
| | 03:38 | managing external devices, and
setting the configuration of the app.
| | 03:43 | These functions should always be
accessed through the charm contracts.
| | 03:48 | The charms are accessed by moving the cursor
to one of the hot corners on the right, either
| | 03:53 | top or bottom or on a touch device
by swiping in from the right side.
| | 03:59 | For example, the Search contract gets you to
search functionality for all Windows Store Apps.
| | 04:05 | A great example of this
is the store application.
| | 04:10 | From the Start Screen, I'll type the Word Store and then
press Enter, and that takes me to the Start Screen.
| | 04:16 | Now I can scroll around and look at applications
that I might want to purchase, but if I want
| | 04:22 | to find specific application, I might
not find it by scrolling back and forth.
| | 04:28 | Instead, I'll open up the Search charm.
| | 04:31 | Let's say that I was looking for Evernote,
a popular application for keeping notes that
| | 04:36 | synchronize across multiple devices.
| | 04:39 | I'll type Evernote, and because I started at
the Store App, I'm searching the Store App.
| | 04:45 | I'll click, and that takes me to
the detail for the selected item.
| | 04:50 | If you're coming from a conventional Windows
Programming background, it's tempting to think
| | 04:55 | that functions like searching and sharing
and configuration should be a part of the
| | 05:00 | main application user interface, but in Windows 8
Store Apps, those are all handled through the charms.
| | 05:07 | And finally, there is the App bar.
| | 05:10 | The App bar is something over
which you have complete control.
| | 05:13 | It's a place where you can put buttons or icons that
take users to particular actions in your application.
| | 05:20 | For example, I'll go back to
the Photos application once again.
| | 05:24 | With a detail photo selected, I'll right-click,
or if I'm on a touch device, I'll swipe from
| | 05:30 | the top or bottom, and that takes me to the
App bar which appears at the bottom of the
| | 05:35 | application in the Photos app.
And here I can control my photo.
| | 05:40 | I can rotate it, crop it, delete it, and take
other actions that are specific to photographs.
| | 05:47 | For more on commanding patterns,
search Bing for hh761499.
| | 05:54 | There are also Touch Patterns
to pay attention to.
| | 05:58 | Most of the touch patterns you
need are handled automatically.
| | 06:02 | These include swiping, tapping, pressing and
holding, sliding to pan, and pinching and stretching.
| | 06:09 | Most of the functionality in your application
will probably work just fine out of the box,
| | 06:14 | but you'll want to test your application on
a touch device such as a Surface RT or other
| | 06:20 | device that has a touch screen.
| | 06:23 | For more on touch patterns,
search the string hh465415.
| | 06:29 | And finally, the overall user
experience, including screen layout.
| | 06:34 | Microsoft provides extensive
guidelines for laying out your applications.
| | 06:40 | The goal isn't to make all
applications look the same.
| | 06:43 | For example, while there are recommended typefaces,
you don't have to use those typefaces,
| | 06:49 | instead you should mix those typefaces with
those that give your application strong branding.
| | 06:55 | But you should be familiar with what's known
as the grid layout and the Windows Silhouette,
| | 07:01 | strongly prescribed locations of items on
the screen that are common across applications
| | 07:07 | that make all Windows Store Apps
feel like they are part of the whole.
| | 07:11 | For more on user experience design,
search for the string hh465424.
| | 07:18 | The documentation you'll find there can help
guide you through designing the best possible
| | 07:22 | Windows Store App, one that will fit into
the store and feel like a part of Windows 8,
| | 07:27 | but also give your application
the strong branding that you want.
| | Collapse this transcript |
| Applying themes and styles| 00:01 | Your Win RT XAML-based applications have the ability
to define their visual appearance using themes and styles.
| | 00:10 | And I'll show you how to use both in this video.
| | 00:12 | I'll start with an application
that's included in the exercise files.
| | 00:17 | I'll go to the Menu and
select File > Open Project.
| | 00:21 | From the 01_GettingStarted folder, I'll go
to UsingStyles, and then I'll open up the
| | 00:27 | UsingStyles Solution file.
And that opens the project in Visual Studio.
| | 00:32 | Now, in the Solution Explorer, I'll open up
the file in directory tree, and I'll double-click
| | 00:38 | to open the file MainPage.xaml.
| | 00:41 | When the application first opens, you'll see
that it has a dark background, and the font
| | 00:47 | is in a light color.
| | 00:49 | This is controlled using
something called a theme.
| | 00:52 | A theme is essentially a collection of styles,
and a brand-new XAML-based application has
| | 00:58 | two built-in themes simply named Dark and Light.
| | 01:02 | The default theme is Dark, meaning that the
background is dark and the font is light.
| | 01:08 | I'll show you how to change that.
| | 01:10 | I'll go to the file App.xaml, and then I'll
place the cursor inside the beginning application
| | 01:16 | tag after the local
attribute, and I'll press Enter.
| | 01:20 | You control the theme using an
attribute or property called Requested Theme.
| | 01:26 | I'll type Req, and then I'll press Enter to select
requested theme, and then I'll select the Light theme.
| | 01:33 | I'll save those changes with Ctrl+S,
and then I'll go back to MainPage.xaml.
| | 01:39 | You'll see that the designer has not
changed its appearance, and that's expected.
| | 01:45 | To change the designer, you
actually have to configure Visual Studio.
| | 01:49 | And to do that, I'll go to
the Device panel on the left.
| | 01:54 | If you don't see the Device panel there, you can go
to the Menu and select Window > Reset Window Layout,
| | 02:00 | and you should see three panels on the
left after the layout is reset, including
| | 02:06 | Toolbox, Device, and Document Outline.
| | 02:10 | Now, with the Device panel open, I'll go to my
Themes setting, and I'll change it from Default to Light.
| | 02:18 | And that changes the look of
the designer in the background.
| | 02:22 | I'll save my changes, and now I'll run the
application, selecting Debug > Start Without Debugging.
| | 02:30 | And that results in installing and
running the application in the operating system.
| | 02:35 | You'll see that the application as it's running
matches what I'm seeing in Visual Studio's designer.
| | 02:40 | Now, I'll press Alt+F4 to close the
application and return to Visual Studio.
| | 02:46 | For all the applications in this course,
I'm going to be using the Dark theme, and so
| | 02:51 | I'll switch this back again.
| | 02:53 | I'll go back to App.xaml, I'll change
the requested theme from Light to Dark.
| | 02:59 | To bring up the list, I pressed Ctrl+Space.
| | 03:02 | Then I selected the item I
wanted, and pressed Enter.
| | 03:06 | I'll save those changes,
I'll go back to MainPage.xaml.
| | 03:11 | I'll click the Device panel, and I'll
change the theme here as well from Light to Dark.
| | 03:17 | I'll come back to the Designer,
and I'll run the application again.
| | 03:23 | And now it looks again
exactly as it does in the Designer.
| | 03:26 | So, let's go back to Visual Studio.
| | 03:29 | A theme is a collection of styles, but there
are also individual styles that you can apply
| | 03:35 | to visual controls.
| | 03:37 | When you create a brand-new XAML-based application,
it always includes a file called StandardStyles.xaml
| | 03:45 | which you'll find in the projects common folder.
| | 03:48 | I'll double-click to open StandardStyles.xaml,
and then I'll close the Output panel,
| | 03:54 | and I'll press Alt+Shift+Enter to
look at this file in full screen.
| | 03:59 | I'll scroll down the file and show you that each
style is defined in XAML-based code, XML code.
| | 04:06 | Styles in XAML are very similar in functionality
to CSS or Cascading Style Sheets in web browsers.
| | 04:14 | Each style can inherit its
capabilities from a parent style.
| | 04:18 | I'll press Ctrl+F, and I'll search for the string Page Header,
and here's a style called PageHeaderTextStyle.
| | 04:28 | The PageHeaderTextStyle inherits many of its
capabilities from another style called HeaderTextStyle,
| | 04:35 | and there are also styles called
PageSubheaderTextStyle, SnappedPageHeaderTextStyle, and so on.
| | 04:43 | You can look through this StandardStyles.xaml
file and see what each of the available styles is.
| | 04:49 | But my real goal here is to
show you how to use these styles.
| | 04:53 | So, I'll press Alt+Shift+Enter again to get out
of full screen, then I'll go back to MainPage.xaml,
| | 05:00 | and I'll select the text block control
that's displaying the text using styles.
| | 05:05 | With that control selected, I'll scroll down
to the bottom of the Properties panel in the
| | 05:10 | lower right, and I'll open up the
Miscellaneous properties category.
| | 05:14 | Here's a selector called Style.
| | 05:17 | I'll click the Picker icon, and from there,
I'll open the Local Resource Menu, and I'll
| | 05:22 | select that style I showed you
in code, PageHeaderTextStyle.
| | 05:27 | And when I select it, the
style is applied to the control.
| | 05:31 | Now, I'll show you how that
style is set in XAML code.
| | 05:35 | I'll click the XAML tab at the bottom, and
show you that this text block has a style
| | 05:39 | attribute that's set using a binding.
| | 05:43 | The braces indicate a runtime binding, and
the particular binding is to a property called
| | 05:49 | StaticResource and the name of
the resource, PageHeaderTextStyle.
| | 05:54 | Now, notice that there aren't
any explicit font settings here.
| | 05:58 | Those are all a part of the style.
| | 06:01 | But if you want to see what the style has
done to your control, you can go back to the
| | 06:05 | Properties panel, and from there go to the
Text category, and you'll see the actual font
| | 06:12 | and font size that have been applied.
| | 06:14 | For a PageHeaderTextStyle, you'll get Segoe UI
which is the common standard font for
| | 06:21 | Windows 8 Store Applications, and 56 pixels.
| | 06:24 | I'm going to make one more
change before I run the application.
| | 06:28 | Right now, my text block is set 54 pixels
from the top of the screen, but the Windows 8
| | 06:34 | design guidelines say that this top control,
that is this text block, should have its baseline
| | 06:41 | 100 pixels from the top of the page.
| | 06:44 | So, if my font is 56 pixels, then to make
the baseline 100 pixels from the top, I'll
| | 06:50 | reset my top margin from 54 to 44.
| | 06:55 | And that's done in the Margin Setting in XAML,
or you could also do it in the Design view.
| | 07:00 | I'll switch back to Design view, and I'll
see my control move up a little bit, and I'll
| | 07:06 | save my changes, and I'll run the
application in the operating system by selecting
| | 07:11 | Debug > Start Without Debugging.
| | 07:14 | When the application opens, it now displays
that control at the right position, 120 pixels
| | 07:20 | from the left, and with its
baseline 100 pixels from the top.
| | 07:24 | So, that's a look at how you can use themes and styles
to affect the visual appearance of your application.
| | 07:31 | I'll be using some other styles and setting
some explicit visual properties on other visual
| | 07:36 | controls as we work through the course.
| | Collapse this transcript |
| Testing apps with Visual Studio and the Windows 8 Simulator| 00:01 | Visual Studio 2012 gives you a few tools you
can use to test your application without having
| | 00:07 | to have a lot of different monitors and devices.
| | 00:10 | The first and simplest way to test your application is on
the same computer on which you're doing your development.
| | 00:16 | And you do that simply by running the
application from the Visual Studio Menu.
| | 00:22 | When you select Debug > Start Without Debugging, or
press Ctrl+F5, you'll install and run the application.
| | 00:31 | And then you can return to the start screen,
and you'll see that the application has been
| | 00:35 | installed and can be restarted from there.
| | 00:39 | When you want to get rid of an application,
close it first by pressing Alt+F4, then you
| | 00:45 | can go to the start screen, right-click on it, and
uninstall it from the App bar icon that appears.
| | 00:53 | When you confirm the request, the application
will have been uninstalled from the operating
| | 00:58 | system, but it's still there in Visual Studio.
| | 01:01 | You might only have a single monitor
connected to your development system, though, and so
| | 01:06 | you need a way to see how your application will
look and behave on other monitors and on other devices.
| | 01:14 | For simple design work,
you can use the Device panel.
| | 01:18 | The Device panel is only available when
you're working in Design view on a XAML page.
| | 01:24 | But from this panel, you can change
the appearance of your design surface.
| | 01:30 | The default is 1366 pixels wide
by 768 pixels high.
| | 01:37 | That's the size of a Surface RT device,
and it's also the size that's declared in the
| | 01:43 | documentation as the minimum for running
application side by side or in Snapped mode.
| | 01:50 | When you look at your application in this
view, you'll see approximately what we will
| | 01:55 | look at on these medium-size devices.
| | 01:58 | By default, your screen might be truncated
or cut off, but you can look at the entire
| | 02:04 | screen by going to the zoom selector
in the lower-left and selecting Fit All.
| | 02:11 | If you want to see what this XAML page
might look like on a very large screen,
| | 02:16 | you can go to the Device panel and set the
display from 1366x768 to perhaps 1920x1080.
| | 02:25 | Then once again reset your zoom to fit
all, and that's what it might look like.
| | 02:31 | The Device panel has support for displays
all the way up to 2560x1440, and once again
| | 02:38 | after you select each one, you'll need to reset
your zoom to fit all to see what it will look like.
| | 02:45 | What it looks like a design time is one thing,
but how it behaves at runtime is another.
| | 02:51 | And for that purpose, Visual Studio
includes the Windows 8 simulator.
| | 02:56 | The simulator does exactly what it says.
| | 02:59 | It simulates an actual Windows 8 device and
has support for rotating the device and also
| | 03:05 | for other features that
might be used by a device user.
| | 03:09 | To get to the simulator, go to the Toolbar
and change from Local Machine to Simulator.
| | 03:18 | After that, the first time you run an
application--either with or without debugging--
| | 03:23 | it will launch the Simulator application
which is included with Visual Studio.
| | 03:30 | The Simulator application
opens and sizes to your monitor.
| | 03:34 | It's actually running your copy of Windows 8.
| | 03:38 | And so, if you click the Start button on the
simulator to go back to the start screen and
| | 03:43 | then scroll over to the right, you'll see all the
applications that you've previously installed or run.
| | 03:49 | To get back to an application, just click on the tile,
and then you can start playing with features of a device.
| | 03:57 | These icons let you rotate the device.
| | 04:00 | I'll rotate it clockwise and see how my application
adapts, and I'll rotate it again counterclockwise
| | 04:07 | to return it to its original orientation.
You can also use the hand icon to mimic touch.
| | 04:16 | I'll click the hand icon, I'll come back
here and click the Start button, and now I can
| | 04:22 | click and drag and see what would happen if I put my
finger on the display and simply drag back and forth.
| | 04:30 | There are also tools for Pinch, Zoom,
Touch mode, and also for Rotation Touch mode.
| | 04:37 | There's also a feature you can use here
to take a screenshot of your application.
| | 04:43 | I'll click on the pointer to go back to Mouse
mode, I'll scroll over to the right, and I'll
| | 04:48 | restart my application, Hello World Complete,
| | 04:52 | then I'll go to the icon
and click Copy screenshot.
| | 04:56 | That takes whatever is in the
Simulator and copies it to the clipboard.
| | 05:01 | From there, I'll go to my start screen,
I'll type WordPad to open up a word processor,
| | 05:08 | and then I'll paste my graphic into place.
| | 05:11 | You can take the screenshot and put it into
documentation or use it to show in the Windows Store
| | 05:17 | of what your application looks like.
| | 05:20 | I'll close WordPad, and I won't save,
and then I'll return to the Simulator.
| | 05:26 | Once you've started debugging or testing
with the Windows 8 Simulator, you can just leave
| | 05:31 | it open, and this will save you time each
time you make a change to your application
| | 05:35 | in Visual Studio and want to launch it again.
| | 05:39 | So I'll simply switch back to Visual Studio, and
I'll click on my text block that says Hello World.
| | 05:46 | I'll go down to my Common category in the
Properties panel, and I'll change the text
| | 05:51 | to Hello World Complete.
I'll save my changes.
| | 05:56 | And once again, I'll run the application.
| | 05:59 | And because I had already run the Simulator
and left it open, the Simulator re-launches
| | 06:04 | automatically and comes to the foreground.
| | 06:08 | If you want to get the Simulator out of
the way, you can click on the Minimize icon.
| | 06:13 | But you'll see that the
Simulator does not have a Close icon.
| | 06:17 | Instead, to close it completely, go down
to the Taskbar, right-click on the Simulator
| | 06:23 | icon, and select Close Window.
| | 06:26 | And that will close down that Windows 8
session and that copy of the Simulator.
| | 06:30 | To go back to testing and debugging your
application on your native computer, go back to the Selector
| | 06:37 | and change from Simulator back to Local Machine.
And now you're back to your beginning state.
| | 06:43 | I'll once again run the application, this
time by pressing Ctrl+F5, and now I'm running
| | 06:48 | the application on my own system.
| | 06:51 | So, you can use the combination of the Device
panel for design time and the Windows 8 Simulator
| | 06:58 | for runtime testing to see what your application might
look like on a variety of screens and devices.
| | Collapse this transcript |
|
|
2. Creating a Cloud-Connected Windows Store AppCreating a split-screen app project| 00:01 | Visual Studio 2012 includes a couple of
application templates that let you see how
| | 00:07 | to build simple data-centric applications.
| | 00:10 | One of these is called the Split Application Template,
and the resulting application is shown here.
| | 00:16 | It displays data in groups.
| | 00:19 | The main page--or the first page that's
displayed--shows three groups of data.
| | 00:24 | The user can then click on to one of the
groups and see the details, and there they will see
| | 00:29 | a list of data on the left and detailed data
on the right, and when they click on one of
| | 00:34 | the items in the list, they see the
details displayed through bindings.
| | 00:39 | I'll show you how to build this type of
application using data that's acquired from a web service.
| | 00:45 | It's not going to be the complete application.
| | 00:48 | Our application will have a single page displaying
just the list and the details, but by learning
| | 00:54 | how to code this application, you'll get a
good understanding of how data binding works
| | 01:00 | in XAML-based applications.
| | 01:02 | In Visual Studio, I've opened a beginning
project, it's named SplitPage, and you can
| | 01:09 | open the same project from
chapter 2 of the exercise files.
| | 01:14 | In the beginning state of this application,
there's a StackPanel containing two text blocks.
| | 01:20 | In XAML, a stack panel
is used to layout objects.
| | 01:25 | You can have a StackPanel with an Orientation
of Vertical or Horizontal to layout objects
| | 01:31 | from top to bottom or left to right.
| | 01:34 | This StackPanel has an orientation of Vertical, and as
a result, the two text blocks appear one above the other.
| | 01:41 | I'm going to add the code you need to split
the rest of the page in two parts vertically
| | 01:47 | so that there's a left column and a right column,
and I'll do this using a component called a grid.
| | 01:55 | I'll go back to the XAML view and
look at the page in Full Screen mode.
| | 01:59 | The outer component is already a grid.
| | 02:03 | Each XAML grid can be
split into rows or columns.
| | 02:07 | The outer grid of this
page will be split into rows.
| | 02:10 | The StackPanel will be the first row
and a split grid will be the second row.
| | 02:16 | I'm going to add code above the StackPanel to
define the measurements or dimensions of my rows.
| | 02:24 | After the Grid tag, I'll add a
tag set code Grid.RowDefinitions.
| | 02:29 | And within the RowDefinitions,
I'll add two RowDefinition objects.
| | 02:35 | The first one will have a Height of 180.
That means 180 pixels.
| | 02:42 | Then I'll add a second RowDefinition, and
it will have a Height of a star or asterisk.
| | 02:47 | The star in XAML means everything else, so
however tall the screen is that this application
| | 02:54 | is displayed on, the first 180 vertical
pixels will be for the StackPanel and the rest
| | 03:00 | of the vertical space will be
for everything else in the page.
| | 03:03 | The StackPanel already has a
Grid.Row attribute set to zero.
| | 03:08 | That means the StackPanel
is the grid's first row.
| | 03:12 | We will use zero to mean the first row,
1 to mean the second row, and so on.
| | 03:17 | So now, the rest of my job is to define
that second row of the vertical display.
| | 03:22 | I'll place the cursor after the StackPanel,
and I'll add a nested grid, and I'll set its
| | 03:29 | Grid.Row attribute to 1.
| | 03:33 | And then I'll add some margin settings so
that the grid is a little bit narrower
| | 03:38 | than the rest of the page.
| | 03:41 | I'll set a Margin of 40,0,40,0, and that
means that the grid will stretch from 40 pixels
| | 03:49 | from the left side to 40 pixels
from the right side.
| | 03:53 | Now my outer grid is separated into rows.
My nested grid will be separated into columns.
| | 04:00 | And to do that, I'll add a
Grid.ColumnDefinitions tag set.
| | 04:05 | That will be placed as the first element within
the grid, and then just as I did with RowDefinitions,
| | 04:12 | I'll create two ColumnDefinition objects.
| | 04:17 | The first ColumnDefinition object will have
a minimum width of 320 pixels, and the second
| | 04:25 | ColumnDefinition initially
won't have any attributes.
| | 04:27 | Now, if I leave these dimension attributes
as is, the columns will actually show up as
| | 04:34 | 50% each of the available space but I want
to carve them up a little bit differently.
| | 04:40 | I'd like my first column to take up one-third
of the available space but with a minimum
| | 04:44 | width of 320 pixels and my second column to
take up two-thirds of the available space.
| | 04:51 | And to make that happen, I'll
add Width attributes to each one.
| | 04:54 | The first one will be 1* and then
the second one will have Width of 2*.
| | 05:01 | And what I'm saying is that the first column
is one-third of the available space and the
| | 05:05 | second column is two-
thirds of the available space.
| | 05:09 | If I were to set this at 1 and 3,
it would be 25% and 75% and so on.
| | 05:15 | I'll leave it at 1 and 2.
Now I'm ready to define the two columns.
| | 05:20 | Each column of the grid has to be a visual
component, a view of some sort, and the view
| | 05:27 | that I'll use for my first
column will be a ListView.
| | 05:30 | Eventually, it's going to show data
that I download from the Internet.
| | 05:35 | I'll create a ListView tag, and I'll
set its Grid.Column attribute to zero.
| | 05:41 | This is just like setting
the rows as I did before.
| | 05:45 | Zero means the first column,
one means the second column, and so on.
| | 05:50 | And I'll set some margins.
The ListView will have a margin of 25,0,0,0.
| | 05:58 | So it will be inset from the left side
of its parent container by 25 pixels.
| | 06:04 | I'll also set its Horizontal alignment to
left, and that means that all of the objects
| | 06:09 | within the ListView will hug
the left side of the parent grid.
| | 06:13 | Then I'll type in a greater than character,
and that auto completes the end tag of the ListView.
| | 06:19 | That's all I'm going to do on
the ListView for the moment.
| | 06:22 | Now I'm ready to create the second column.
The second column will be another StackPanel.
| | 06:29 | It will have a Grid.Column attribute of one,
so it will be the second column of my outer
| | 06:34 | grid, and it will have a margin of 25,0,0,0
and a Horizontal alignment of left.
| | 06:45 | Within the StackPanel, I'll add two text blocks.
| | 06:48 | The first TextBlock will have a FontSize of 24
pixels, and it will have placeholder Text of Title.
| | 06:55 | Eventually that will be filled in using a data binding,
that is a dynamic binding that adds dynamic values.
| | 07:03 | I'll add a second TextBlock, and this one
will have a FontSize of 14, a little bit smaller
| | 07:09 | than the first one, and a
text value of Description.
| | 07:14 | This TextBlock is going to contain longer
prose, and I want it to eventually word wrap,
| | 07:20 | so I'm going to add an explicit width of 500 pixels
and a TextWrapping attribute of Wrap.
| | 07:28 | Now, I'll take a look at the page in Design
view, and I'll see that the title and description
| | 07:34 | are over on the right, and there's
a column over on the left as well.
| | 07:38 | I can move the cursor over the
object and see how they are laid out.
| | 07:43 | Be careful not to click too much because you
might accidentally add rows and columns you
| | 07:48 | really don't want, and I'll run the application
by selecting Debug > Start Without Debugging,
| | 07:56 | and that will install and run the
application in the operating system.
| | 08:00 | So that's the beginning
of the application layout.
| | 08:03 | We're ready now to go get some data, and I'll
show you how to retrieve data from an Internet-based
| | 08:08 | web service in the next video.
| | Collapse this transcript |
| Exploring the app's data feed| 00:01 | The application I'm building
eventually will look like this.
| | 00:05 | It will have a list of data on the left
and detailed information on the right.
| | 00:11 | The list will have names and photographs of
artists, and the details will have the artist's
| | 00:16 | biography and an image, one of their artworks.
| | 00:20 | The user will be able to select an item and see the
information that they have selected on the right side.
| | 00:27 | All of this data will come from a feed that's
available on a public website on the Internet,
| | 00:32 | and I'll show you where that feed is now.
| | 00:36 | I'll go to my desktop and double-click a link
that I've added there and then in the version
| | 00:41 | of Internet Explorer that's available from the
desktop, I see the feed displayed. It's an RSS feed.
| | 00:49 | RSS is a common XML format that's
used to share data over the web.
| | 00:54 | When you load it into the version of Internet Explorer
that's included in the desktop, it looks like this.
| | 01:00 | But if you'd like to see the XML structure in a
more raw format, copy that link to the clipboard.
| | 01:07 | It's datafeeds.rouxacademy.com/rss/artists.xml.
| | 01:16 | I'll copy that, then I'll go to my Start screen,
and I'll open up Internet Explorer from there.
| | 01:23 | I'll paste in that URL and then when prompted,
I'll save the XML file to my Downloads folder,
| | 01:31 | and then I'll click Open, and I see the
actual structure of the XML file displayed
| | 01:37 | with a little bit of color coding.
This is a standard RSS file.
| | 01:43 | It has a channel element, under channel there's
a title description and link, and then multiple items,
| | 01:49 | and each item has a title,
link, and description as well.
| | 01:54 | I'll use all this information to
populate my application with data and images.
| | 02:01 | My job will be to take this data and turn
it into something that my Store App can use,
| | 02:08 | and I'll show you all of the code
you'll need to do that in the next video.
| | Collapse this transcript |
| Asynchronous programming with async and await| 00:01 | The Windows Store App that I'm building is
going to retrieve data asynchronously from
| | 00:06 | a REST-based web service on a public website.
| | 00:10 | Before I show you the programming for this,
I'll talk a little bit about asynchronous
| | 00:14 | versus synchronous programming.
| | 00:17 | Synchronous programming means that you do
everything in a single thread of your application.
| | 00:22 | You make a request and then your code
pauses until the response comes back.
| | 00:28 | In some Microsoft development environments
such as WPF or ASP.net, you can choose this
| | 00:34 | sort of programming, but in Windows Store Apps,
this sort of programming would be disastrous.
| | 00:39 | When you make the request and then wait for
the response, if you freeze the thread, it
| | 00:44 | would result in your user
interface also freezing.
| | 00:48 | The user wouldn't be able to make
gestures and any animations would just stop.
| | 00:53 | So instead, Windows Store Apps
use asynchronous programming.
| | 00:58 | In asynchronous programming you make the
request again, but then the current thread is
| | 01:02 | freed up to do other things.
| | 01:04 | Again, responding to user gestures or
running animations and then only when the response
| | 01:10 | comes back from the server does
any processing code gets executed.
| | 01:15 | In Windows Store Applications, you can't
use synchronous programming for file creation
| | 01:20 | or reading or processing web services or anything
else that might cause this sort of pause or freezing.
| | 01:27 | In earlier versions of C#, asynchronous
programming certainly was supported.
| | 01:33 | It was done with something
called Callback Methods.
| | 01:36 | A Callback Method is a separate method that
you define to handle and process responses.
| | 01:43 | You then pass that Callback Method into the
Requesting Method and say when the response
| | 01:48 | comes back, execute that method over there.
The code might look like this...
| | 01:54 | In this example, I have two separate methods,
one to start the request and one to finish it.
| | 02:01 | In the BeginGetResponse method of the HttpWebRequest
class, I'm passing in my Callback Method
| | 02:08 | as an object, FinishWebRequest.
| | 02:11 | And then only when the response comes
back is the processing code executed.
| | 02:16 | Now, this sort of code works fine, and in fact,
you can still program this way, but in Windows
| | 02:22 | Store Apps which use C# 5.0, we
have new features of the C# Language.
| | 02:29 | Two new keywords called async and await.
And here's how they work.
| | 02:34 | When you use async and await, you can put
all of your requesting and responding code
| | 02:40 | in a single linear method.
| | 02:42 | The method itself gets marked as an asynchronous method
by adding the keyword async into the method signature.
| | 02:51 | In this example, I start with the keyword
async and then say that I'm going to pass
| | 02:56 | back the result wrapped
in something called a task.
| | 03:00 | The method is now called MakeWebRequest, and
it defines an HttpClient object and then calls
| | 03:06 | a method called GetStringAsync which it
returns as a task, then I use the await keyword to
| | 03:14 | indicate that I'm going to wait at this
point of the code, until the response comes back.
| | 03:20 | With the await keyword, I'm freeing up the
current thread to do other things and the
| | 03:26 | application's user interface can respond and
other code can be executed until that data comes back.
| | 03:33 | When the data is returned from the server, the thread
will come back to this code and continue executing it.
| | 03:40 | The result is code that's all in one place.
| | 03:43 | It's easier to create and
easier to maintain in the long run.
| | 03:47 | And this is the sort of code that I'll use
to get the data from the server, asynchronous
| | 03:52 | programming in C# 5.0, using async and await.
| | Collapse this transcript |
| Retrieving, processing, and RSS data feeds| 00:00 | I've described so far where the data for
my application will come from, this XML file
| | 00:05 | which will be retrieved from a website and
what it will look like when the application
| | 00:10 | is done with the data displayed in a list
on the left and with details on the right.
| | 00:15 | Now, it's time to do some coding, to take
the data from the web service and turn it
| | 00:20 | into something we can
use within our application.
| | 00:23 | Our dataset will need the following elements:
first, the entire dataset will need a title
| | 00:29 | and a subtitle, which will be
displayed at the top of the screen.
| | 00:33 | Those will come from the XML file, and then
for each artist we'll need the artist's name,
| | 00:39 | the artist's photo, the artist's biography--
that's the prose that you see above the
| | 00:43 | image on the right--and an
image showing one of their artworks.
| | 00:48 | To represent that data, I've created a special C#
class which is available in the project RetrieveData.
| | 00:56 | The name of the class is ArtistItem, and it
has one public field for each of those values:
| | 01:02 | the ArtistName, the ArtistPhoto,
the ArtworkPhoto, and the Biography.
| | 01:07 | All four are strings and all four are
defined with automatic getters and setters.
| | 01:13 | The getter is important because it's going
to allow us to automatically bind the data
| | 01:18 | from these data objects to visual
controls in our application layout.
| | 01:23 | Now, here's how I'm going to use that class.
| | 01:26 | I've also created a class called ArtistData,
and this is the higher level class that will
| | 01:31 | represent all the data
for the entire application.
| | 01:35 | It has two public fields, one for the title and
one for the subtitle and then a list of artist items.
| | 01:42 | The list can expand as much as I need it to
and the data in that list will appear in the
| | 01:47 | application on the left side.
| | 01:49 | Now, it's time to actually retrieve the
data and put it into these data objects.
| | 01:55 | The code for that is in
the class ArtistDataSource.
| | 01:59 | I'll double-click to open that file and then
press Alt+Shift+Enter to look at it in full screen.
| | 02:04 | This code is a little bit more complex,
and I'll go through it step by step.
| | 02:10 | First, there's a BaseUriString variable.
| | 02:13 | It points to the location of my
REST-based web service, that is my RSS feed.
| | 02:19 | It's in the URL datafeeds.rouxacademy.com/rss.
The www prefix is optional.
| | 02:28 | Next, there's an instance of the
ArtistData class that I already described.
| | 02:34 | It's declared as a private field named _Data and
then there's a public version of it simply named Data.
| | 02:41 | That data will be accessed from the rest
of the application from this getter method.
| | 02:46 | The use of the getter method ensures
that I can bind to the data dynamically.
| | 02:51 | Next, there's an
asynchronous method called GetFeedAsync.
| | 02:56 | Notice that it's marked with the async keyword,
and that it returns a task class wrapped around
| | 03:01 | an instance of the ArtistData object.
| | 03:05 | Within this method, I've created an
instance of a class called SyndicationClient.
| | 03:10 | This class is built into the Windows 8 runtime,
and it allows you to easily retrieve and parse
| | 03:16 | both RSS and Atom-based XML feeds.
| | 03:20 | I'm specifically using it for an RSS
feed, but you can use it for either.
| | 03:25 | SyndicationClient uses asynchronous programming,
similar to what I showed in a previous video.
| | 03:32 | Just as in those code samples, I've marked
the method that's going to use this class
| | 03:36 | with the async keyword and then when I want
to make a call to an asynchronous method of
| | 03:42 | the class, I placed the await
keyword before the method call.
| | 03:46 | There's a little bit of code here to create
a string representing the location of my XML
| | 03:50 | file on the website and then the creation
of a URI object that's wrapped around that string,
| | 03:57 | and I'm ready to retrieve the data.
Here's the data retrieval.
| | 04:02 | It's asynchronous, so it's marked with the
await keyword, and that will result in releasing
| | 04:07 | the main application thread while the
request goes out and the response comes back.
| | 04:13 | But when the data comes back,
I'll be ready to process it.
| | 04:17 | On the next line, I'm creating an instance
of my ArtistData class, and I'm placing it
| | 04:21 | in the private field that was already declared.
| | 04:24 | Now, the magic of the SyndicationFeed class is
that it already knows how to read my RSS file.
| | 04:30 | The RSS file has elements called
channel, title, description, and link.
| | 04:36 | Those are automatically transformed by the
SyndicationFeed class into properties called
| | 04:41 | Title and Subtitle, and I'm retrieving those values on
the next two lines and passing them into my data object.
| | 04:49 | Next, I'll loop through the items
that are a part of the RSS feed.
| | 04:53 | In RSS, each item is represented by an
item element and within the item is a title,
| | 04:59 | a link, and a description.
| | 05:01 | I'll go get those values, and I'll place them
into an instance of my ArtistItem class which
| | 05:06 | I've named rssItem here, and I'm taking
the title from the RSS element and turning it
| | 05:12 | into the ArtistName property of my artist.
| | 05:16 | Next, I'm making absolutely sure that I'm
getting a valid RSS feed by checking the SourceFormat
| | 05:23 | of the feed object, and if that comes back true,
then I'm ready to get the rest of the data.
| | 05:29 | I'm getting the biography from an element
that's been turned into an object called Summary.
| | 05:35 | In RSS, that's the description element, but
the SyndicationItem class exposes it as summary.
| | 05:41 | Then I'm taking the one and only link which
is accessed through the expression Links bracket 0 bracket,
| | 05:49 | and I'm getting the NodeValue which is the
text within the link, and I'm taking that,
| | 05:53 | which represents an image name, such as this
one, Barot_Bellinghgam.jpg, and I'm appending
| | 06:00 | that to the BaseUriString, plus the name of
a folder which exists on the public website,
| | 06:07 | artistsSmall in this case, and then I'm
appending to that the NodeValue, which is the actual
| | 06:12 | file name, and all those together are being
placed in the ArtistPhoto property of my ArtistItem.
| | 06:18 | I'm doing the same thing for the Artwork.
| | 06:20 | On the public website, the two images have the
same name, but they're just in different directories.
| | 06:26 | Finally, I'm taking that item, and
I'm adding it into my data collection.
| | 06:31 | So, that's how the data is being transformed
from RSS into something I can use in my application.
| | 06:37 | Now, let's add the code we need to make a
call to this class, the ArtistDateSource.
| | 06:44 | I'll go to my Solution Explorer,
and I'll go to the MainPage.xaml file.
| | 06:49 | I'll open up that tree item, and I'll double-
click to open the code-behind file, MainPage.xaml.cs.
| | 06:58 | All of the code I need to trigger the data retrieval
will go into this event handler method, OnNavigatedTo.
| | 07:05 | In the Windows Store app, this event handler
method will be called automatically the first
| | 07:10 | time this page is seen, and then as long as
the page is cached the data will persist.
| | 07:17 | Before I add any code within the method, I'll place the cursor
at the beginning of the method signature and add async.
| | 07:23 | I have to do that because I'm going to be
making an asynchronous data call and without
| | 07:29 | the keyword, the code just won't work.
| | 07:32 | Now within the method, I'll create an
instance of my ArtistDataSource class.
| | 07:38 | I'll set the data type, ArtistDataSource, and
I'll name it DataSource, and I'll instantiate
| | 07:44 | it with the class' no arguments constructor
method using new ArtistsDataSource.
| | 07:49 | Now, I'll trigger the
call to the remote website.
| | 07:54 | I'll start with the await keyword, and then I'll
call the DataSource object's .GetFeedAsync method.
| | 08:01 | That's the method where I just
did the extensive code review.
| | 08:05 | That's it. The request goes out to the website,
the data comes back, and then I can add any
| | 08:11 | processing code to see what came back.
| | 08:14 | For the moment, I'm just
going to add some debug code.
| | 08:17 | Up at the top of the page, I've already added
this using statement for System.Diagnostics,
| | 08:24 | and this will allow me to use the debug class
and output some content to the output window.
| | 08:30 | I'll output data from the data object like
this: Debug.WriteLine and the first value I'll
| | 08:36 | output will be DataSource.Data.Title, then
I'll copy and paste that code, and I'll change
| | 08:45 | the second one to SubTitle.
| | 08:48 | Then I'll loop through the artist objects
that are in the Items Property of the data
| | 08:53 | object, and I'll output
each of the artists' names.
| | 08:56 | I'll use the foreach statement and within the
foreach statement, I'll declare an ArtistItem
| | 09:04 | object which I'll name simply item, and
I'll get that from DataSource.Data.Items.
| | 09:14 | I'll scroll down a bit and then within the
foreach, I'll use Debug.WriteLine again,
| | 09:19 | and I'll output the item's ArtistName property.
| | 09:25 | And so these eight or so lines of code are
all I need at the top level of the application
| | 09:31 | to trigger the asynchronous request and
get data back from the remote website.
| | 09:36 | I'll save and test the application, pressing Ctrl+S
to save and then selecting Debug > Start Debugging.
| | 09:44 | Make sure you run with debugging so that
you get the output in the Output panel.
| | 09:49 | When the application comes to the screen,
back to Visual Studio, and then I'll look
| | 09:54 | at my Output panel, and sure
enough, there is the result.
| | 10:00 | I'm outputting the title and subtitle from
the data collection, then I'm looping through
| | 10:06 | the artist items and outputting their names.
| | 10:09 | So if this much is working, you're ready for
the next step, taking this data that's retrieved
| | 10:14 | dynamically from the web and binding it to
visual controls in your application layout.
| | Collapse this transcript |
| Displaying a list of data with XAML and bindings| 00:00 | I've described in previous videos how to
retrieve the XML data from the remote website
| | 00:06 | and how to package it using C# code so that
it's usable in your Windows Store App.
| | 00:12 | Now I'll show you how to create the visual
appearance of the application, focusing first
| | 00:17 | on how to display the list of artist photos and
names that's shown on the left side of the application.
| | 00:24 | Going back to Visual Studio, I'm working in
a version of my project called DisplayList
| | 00:29 | from the course's exercise files.
| | 00:32 | I'll open the MainPage.xaml file and
its code-behind file MainPage.xaml.cs.
| | 00:39 | In this version of my application, I already have
the code that's retrieving the data asynchronously.
| | 00:45 | And there's a little bit of debug code
that I'm using to look at the data at runtime.
| | 00:50 | But now I'm ready to expose that
data to the rest of the application.
| | 00:55 | I'll do that using a property of all visual
controls in Windows Store Apps called DataContext.
| | 01:03 | Placing my cursor after the asynchronous call,
I'll use this code: this.DataContext = DataSource.data.
| | 01:15 | The DataContext property exposes data in a
way that it can be bound to visual controls.
| | 01:21 | And by setting the DataContext at the page level, it will
then be inherited by all visual controls on the page.
| | 01:29 | That's all I need to do in the main page code.
| | 01:32 | And in fact, I don't need
this debug code anymore.
| | 01:36 | So I'll select it, and then I'll comment it out
by selecting EDIT > Advanced > Comment Selection.
| | 01:43 | I'll save those changes, and now I'll go back to
my XAML page and start binding some of the data.
| | 01:50 | Here is where the data is stored.
| | 01:52 | There is the ClassArtistData.cs, which has
public properties of title and subtitle and
| | 01:59 | a list of artist items and then ArtistItem.cs,
which has public properties of ArtistName,
| | 02:05 | ArtistPhoto, and so on.
| | 02:08 | Any public property that has a getter
can be used in a binding expression.
| | 02:13 | Now I'll go to MainPage.xaml.
| | 02:16 | I'll start in the TextBlocks, which are
displaying the static text, Page Header, and Page SubHeader,
| | 02:22 | and I'll start by replacing
those strings with bindings.
| | 02:26 | In the first TextBlock, I'll delete the
static string, and I'll replace it with a binding.
| | 02:33 | I'll start with a pair of braces and the keyword
Binding, and then I'll type in the name
| | 02:38 | of the property whose value I
want to display, it's Title.
| | 02:43 | Notice that Visual Studio doesn't give you any
help in auto completing the name of the property.
| | 02:49 | You just have to type it correctly.
| | 02:51 | To make sure you're typing it correctly, you
could go back to the class that defines the
| | 02:55 | property and simply Copy and Paste it.
And that's what I'll do for the SubTitle.
| | 03:00 | I'll select the SubTitle and copy it, then
I'll go back to my XAML page, I'll go to my second
| | 03:07 | TextBlock and delete the
static text in the text property.
| | 03:11 | I'll put it a pair of
braces and the keyword Binding.
| | 03:15 | And then I'll paste in the name of the property.
| | 03:17 | At runtime, when the data appears from the
asynchronous request and is set to the DataContext
| | 03:24 | of the page, these two bindings will do their
work and display these values. I'll test it now.
| | 03:32 | I'll save my changes and
start without debugging.
| | 03:36 | And when the application appears, it displays
the values from the XML file, instead of the
| | 03:42 | old static values that I had in there before.
| | 03:45 | Now I'll close the application
and return to Visual Studio.
| | 03:49 | And I'll close my Output panel and
scroll down to do some more coding.
| | 03:53 | I go into to full screen mode, because
now I'm adding some fairly wide code.
| | 03:58 | And now I'm going to modify
this ListView that I added earlier.
| | 04:03 | The ListView appears as the left
column underneath the TextHeadings.
| | 04:08 | I'll start by modifying my Margin a bit.
I'll set it to a left margin of 60 pixels.
| | 04:14 | I encourage you to play with these margins
and see what happens with different dimensions.
| | 04:20 | Then in order to bind the list of artist
objects to this ListView, I'll use a property
| | 04:26 | of the ListView object called ItemsSource.
| | 04:29 | I'll place the cursor inside the closing
character of the begin tag and press Enter.
| | 04:35 | And I'll set ItemsSource using a Binding once
again, and this time Binding to the Items object.
| | 04:42 | The Items object is defined in the
artist data class as a list of ArtistItems.
| | 04:49 | And so now the ListView will
generate one row for each item in the list.
| | 04:54 | Next, I'll add some XAML code that
defines how each of these rows will appear.
| | 05:00 | I'll do this using a property of
the ListView called the ItemTemplate.
| | 05:05 | I'll open up some space between the ListView tags,
and I'll create a tag set called ListView.ItemTemplate.
| | 05:14 | And within the ItemTemplate, I'll
create an element called DataTemplate.
| | 05:19 | The DataTemplate gets nested within the
ItemTemplate and then whatever visual code you add
| | 05:25 | to the DateTemplate will be generated
for each data item in the collection.
| | 05:30 | I'll use a StackPanel.
| | 05:32 | I'm going to be placing an
image next to a TextBlock.
| | 05:35 | And I want them to layout side by side.
| | 05:38 | So I'll use a StackPanel with
an Orientation of Horizontal.
| | 05:42 | I'll start with the StackPanel tag, I'll set the
Orientation to Horizontal, and then I'll create the Ending Tag.
| | 05:51 | Within the StackPanel, I'll create an Image.
| | 05:54 | I won't put any attributes in
yet, and I'll create a TextBlock.
| | 05:59 | And then I'll come down here and close up this extra
white space and then come back to these visual controls.
| | 06:06 | Remember that this Items
object is a list of Data Objects.
| | 06:12 | Each of the Data Objects has these
properties: ArtistName, ArtistPhoto, and so on.
| | 06:18 | And I'll use these values to populate the
visual controls in each row of the list.
| | 06:24 | Going back to MainPage.xaml, first,
I'll set the Image source using a Binding.
| | 06:30 | The Image tag uses a Source attribute.
| | 06:34 | And just as I did with the TextBlocks, I'll use a
Binding Expression, and I'll set it to ArtistPhoto.
| | 06:41 | Make sure you spelled this exactly correctly,
remembering that C# is a case-sensitive language.
| | 06:48 | Then I'll set both the width and the
height of the image object to 100 pixels each.
| | 06:53 | Next, I'll set Bindings in the TextBlocks.
| | 06:58 | I'll set the Binding to ArtistName, that's
the name of the Property in the ArtistItem.
| | 07:05 | And then I'll set an explicit FontSize
of 18 pixels and a Margin of 5,0,0,0.
| | 07:14 | That will create a 5-pixel gap between the
image on the left and the TextBlock on the right.
| | 07:21 | So in order to display both the labels at
the top and all the data on the list on the
| | 07:26 | left, I've just added
Visual Controls and Bindings.
| | 07:30 | I'll Save and test my application.
| | 07:33 | I'll run Without Debugging
for better performance.
| | 07:37 | And when the application appears,
the list of data is shown on the left.
| | 07:41 | I can move the cursor on to the
list and then scroll up and down.
| | 07:46 | And if I'm working in a touch environment, I
can touch and drag the list up and down too.
| | 07:51 | And I'm also able to click and
select one item in the list at a time.
| | 07:55 | Now remember, both the data and the
images are coming from a remote website.
| | 08:01 | This application currently will only
work if you're connected to the web.
| | 08:05 | And it might take a few seconds to populate the
images the first time you run the application.
| | 08:10 | But if everything is working correctly, then
you've successfully requested data asynchronously,
| | 08:16 | packaged it using C# code, and then
displayed it using Visual Controls and Bindings.
| | Collapse this transcript |
| Displaying detailed data with bindings| 00:00 | So far in my application I've retrieved data
successfully from the web, and I've displayed it in a list.
| | 00:06 | I'm working in a version of the
project now called DisplayDetail.
| | 00:11 | And in this version of the project, when I
run it without debugging, I see that the data
| | 00:15 | is successfully retrieved
and displayed in the list.
| | 00:19 | Now I want to add functionality so that when
the user clicks on a row, I update the detail
| | 00:25 | view on the right, and I'll do that using the
same sort of bindings that I used previously
| | 00:31 | to populate the TextBlocks at
the top and the list itself.
| | 00:35 | I'll return to Visual Studio, and I'll scroll
down toward the bottom of the code of MainPage.xaml.
| | 00:41 | I have already defined the ListView, and I
have a StackPanel down toward the bottom of
| | 00:46 | the code that will be the
right column of my page.
| | 00:50 | It has the two placeholder TextBlocks.
| | 00:53 | When the user clicks on of a row of the ListView,
that updates a property of the ListView object
| | 00:59 | called SelectedItem, and I combined to that
SelectedItem from the StackPanel so that the
| | 01:05 | StackPanel and its
contents update automatically.
| | 01:09 | The first things I have to do is add an identifier to
the ListView object, so I can refer to it in my Binding.
| | 01:17 | I'll go up to the ListView, I'll place my cursor
after the tag name and press Enter a couple of times,
| | 01:23 | and then in the white space, I'll add an attribute
called x:Name, and I'll set its value to ItemListView.
| | 01:32 | That will be the identifier for the
ListView, and I will need that in my Bindings.
| | 01:37 | Now I'll go down to the StackPanel.
| | 01:39 | Every visual control that you
define in XAML can have a DataContext.
| | 01:44 | I set the DataContext of the page itself using C#
code, but I can do the same thing in XAML code.
| | 01:52 | And I'm going to set the data context of
the StackPanel so that instead of getting all
| | 01:56 | of the data, it only gets the data
that the user has selected in the list.
| | 02:01 | So, I'll make a little bit of space after the
tag name, and I'll add a DataContext attribute,
| | 02:07 | and I'll use a Binding
just as I have previously.
| | 02:10 | This is going to be a
slightly more complex Binding.
| | 02:13 | It's going to use two properties
called ElementName and Path.
| | 02:17 | The ElementName will point to the source
control that currently contains the data,
| | 02:22 | and that's going to be the identifier
I just set up, ItemListView.
| | 02:26 | Make sure you spell it
exactly the same as you did above.
| | 02:29 | Then I'll set the Path, and I
will set that to SelectedItem.
| | 02:35 | That's the property of the ListView object
that gets updated when the user clicks on
| | 02:40 | a row, and it's how I will access the
underlying data object, the ArtistItem.
| | 02:45 | Now, I'll go to the two TextBlocks.
| | 02:48 | I'll take a look at this code in full screen
to make it a little bit easier to read, and
| | 02:53 | in the first TextBlock I'm
going to bind to the ArtistName.
| | 02:58 | The container of the StackPanel
already knows which artist I'm talking about.
| | 03:02 | So, all I need to do in the TextBlock is
add another Binding and add ArtistName, which
| | 03:09 | is a property of the ArtistItem class
that I defined before. It's right here.
| | 03:16 | Then I'll go to the second TextBlock, and
I'll change its static Text to a Binding,
| | 03:23 | and I'll use the property Biography.
| | 03:26 | And again, that's the
property of the ArtistItem class.
| | 03:31 | I'll save, and I'll run the
application without debugging.
| | 03:36 | And when the application opens, I'll click on an item,
and I see the two TextBlocks are correctly updated.
| | 03:42 | And I can move around and select each item in
turn, and I'll see the data update automatically
| | 03:48 | without any C# coding at all.
Now, I'll fill in the rest of the page.
| | 03:53 | I would like to display an image of one of
the artist's artworks at the bottom of the screen,
| | 03:58 | and fortunately I
already have the data I need.
| | 04:02 | When I created the artist item objects,
I set a property called ArtworkPhoto.
| | 04:08 | It contains a URL pointing to
an image on a remote website.
| | 04:12 | So, I'll select and copy
that property name in the class.
| | 04:16 | Then I'll return to MainPage.xaml, and after the
TextBlocks, but still within the StackPanel, I'll add an image.
| | 04:25 | I'll set the source attribute of the Image
to a Binding, and I'll use that property name
| | 04:30 | that I just copied, ArtworkPhoto.
| | 04:34 | I'll set the Height of the
image control to 400 pixels.
| | 04:38 | I won't set the Width, that's because the
images that are on the remote website are
| | 04:43 | of differing dimensions and aspect ratios.
| | 04:46 | If I were to set an explicit width, then
some of the images would come out skewed.
| | 04:51 | By only explicitly setting one of the
dimensions, I'm allowing the image control
| | 04:56 | to set the other one dynamically.
And then I'll set a Margin of 20,20,0,0.
| | 05:04 | That's 20 pixels from the left side of the container,
but 20 pixels from the bottom of the previous TextBlock.
| | 05:10 | I'll close up that tag and
save and run the application.
| | 05:17 | Then when I select an item from the list,
I see both the artist's name and biography
| | 05:23 | but also the image of their artwork.
And so, now my basic application is complete.
| | 05:30 | I'm downloading data asynchronously from the
web, I'm using that data to create a dynamic
| | 05:36 | display, and my application is
pretty close to being ready to use.
| | 05:41 | All I need to do is add a few more features
that leverage specific capacities of Windows 8,
| | 05:46 | and I'll show you how to do
that in the next chapter of the course.
| | Collapse this transcript |
|
|
3. Integrating Windows 8 FeaturesAdding an app bar| 00:00 | In this chapter of the course, I'm going to
describe how to use a few common Windows 8
| | 00:05 | features and integrate them into your apps,
and I'm going to start with App bar Commands.
| | 00:11 | The App bar is a user interface component
that flies in from the top or bottom of the
| | 00:16 | application when the user right-clicks with a mouse
or swipes from the top or bottom with a touch device.
| | 00:23 | I'm in the Photos Application that's
included in Windows 8, and I'm going to right-click
| | 00:28 | on a photo, and I see the App bar
appear from the bottom of the screen.
| | 00:32 | The position of the App bar is controlled
by the application code, not by the user.
| | 00:37 | And so, on a touch device, it doesn't matter
whether the user swipes in from the top or bottom.
| | 00:43 | In this application, the App bar
would always appear at the bottom.
| | 00:46 | So, let's take a look at how to build a very simple
App bar and add one command to it in our application.
| | 00:54 | In Visual Studio, I've loaded a version of the
application called App bar, which is available
| | 00:59 | in the Chapter 3 folder of the exercise files.
| | 01:03 | In this version of the application, I'm
downloading data from the Internet, and I'm displaying
| | 01:08 | it in a list and then showing the details
of the items when they're clicked in the list.
| | 01:13 | Now, I'm going to add a command in the
bottom App bar that lets the user refresh the data,
| | 01:19 | recall the data from the Internet.
| | 01:23 | Going back to Visual Studio, I'll
start in the file MainPage.xaml.
| | 01:28 | You define the App bar as an element of the
page, and you can use a property called either
| | 01:33 | Page.TopAppBar or Page.BottomAppBar.
| | 01:38 | And that's how you decide
where the App bar will appear from.
| | 01:42 | I'll move down to the bottom of the
existing code and place the cursor after the Grid,
| | 01:47 | but before the ending page tag.
| | 01:50 | And I will add a tag set
called Page.BottomAppBar.
| | 01:55 | Regardless of whether you use a top or a bottom App bar,
the next step is to add a child element called AppBar.
| | 02:02 | And that's the actual visual element.
| | 02:06 | If you're going to deal with the App bar programmatically,
you should assign a name attribute which always has an X prefix.
| | 02:14 | I'll assign this App bar a Name of MyAppBar.
Now, within the App bar, I can add buttons.
| | 02:22 | Each button should have a style using one of the styles
that's assigned in the applications StandardStyles.xaml file.
| | 02:31 | Let's take a look at that
first before we create the button.
| | 02:34 | I'll go to the Common Folder,
and I'll open StandardStyles.xaml.
| | 02:39 | Then I'll do a search.
| | 02:40 | I'll press Ctrl+F, and I'll look
for a style called RefreshAppBar.
| | 02:47 | I'll type in the beginning of
the style name and press Enter.
| | 02:50 | And that takes me to a style element
with a key of RefreshAppBarButtonStyle.
| | 02:54 | You will find dozens of these
styles in the StandardStyles.xaml file.
| | 03:01 | Each of the predefined styles which include
things like Refresh, Copy, Paste, Delete,
| | 03:08 | and so on has a content setting which determines
the actual graphic that appears in the button.
| | 03:15 | This is the value for this button.
| | 03:17 | All of these styles, though, are
commented out by default in a new application.
| | 03:22 | So, if you want to use one of the styles, it's up
to you to change the commenting in this XAML file.
| | 03:28 | I want to use the RefreshAppBarButtonStyle.
| | 03:31 | So, I'll place the cursor above that Style
tag, and I'll close the previous quote with
| | 03:37 | a "-- >", then I'll begin a new quote after
the RefreshAppBarButtonStyle tag set,
| | 03:45 | I'll place the cursor after the etch tag,
and I'll add a beginning CommentToken.
| | 03:50 | So, now that style is
available for use in my application.
| | 03:54 | I'll save the changes to that file and go to
MainPage.xaml, and now I'm ready to add the button.
| | 04:02 | I'll add a button tag, and I set it style
attribute using the following dynamic
| | 04:07 | expression, StaticResource,
RefreshAppBarButtonStyle.
| | 04:11 | Now, to make sure I'm spelling this correctly,
I'll go back to StandardSyles, I'll double-click
| | 04:18 | and copy that string, the key.
I'll come back to the MainPage and paste it in.
| | 04:25 | I'll finish up the button tag, and then
I'll test the application without debugging.
| | 04:31 | Now, when I right-click anywhere in the application, the
AppBar flies in from the bottom and the button appears.
| | 04:40 | And you will see this little
Refresh graphic is displayed.
| | 04:44 | That's what's being controlled by the
Style definition in the StandardStyles file.
| | 04:48 | Now, I'd like to make something
happen when the user clicks the button.
| | 04:52 | You do that by handling the buttons click
event just like you would with any button
| | 04:57 | in a Windows Store application.
| | 05:00 | I'll go back to my code, and I'll close this
Output panel to make a little bit more space,
| | 05:06 | and I'm going to add an event handler.
| | 05:08 | I'll select the button, then I'll go over
to the Properties panel, and I'll make sure
| | 05:13 | that the button is selected here, and I'll
click this little button with a lightning
| | 05:17 | bolt that lets me define event handlers.
| | 05:21 | Then I'll double-click on the click event, and that
generates a new event handler method called Button_Click_1.
| | 05:29 | I can Refactor and Rename this event
handler if I want, but I'll just leave it as is.
| | 05:35 | Now, when the user clicks the button, I'd
like to re-execute the code that's being executed
| | 05:40 | when the page is first navigated to.
| | 05:43 | That's these three lines of code up here
that are downloading the data from the web
| | 05:48 | and setting the data context.
| | 05:50 | I'll select those three lines of code, and
I'm going to refactor them, extracting them
| | 05:55 | into their own separate method so that that code is a
little bit easier to call from anywhere in the page.
| | 06:02 | With the three lines of codes selected,
| | 06:04 | I'll go to the Menu then I'll
select EDIT > Refactor > Extract Method.
| | 06:11 | I'll name the method RetrieveData.
When I click OK, the code is refactored.
| | 06:19 | Those three lines of code are extracted to
this new method, which is also marked async
| | 06:24 | just like the previous version of the method,
and then the existing code in the OnNavigatedTo
| | 06:29 | method has been changed to
call the new extracted method.
| | 06:34 | I'm going to take this code and copy it, then I'll go
down to my Button_Click event method, and paste it in.
| | 06:42 | Because I'm doing an asynchronous call
within the click event handler, I'll need to add
| | 06:47 | the async keyword to the method signature.
| | 06:51 | You can add the async keyword either before or
after the word private, either one will work.
| | 06:58 | I'll save my changes, and
I'll test the code again.
| | 07:04 | When the application opens, I'll right-click
anywhere, I see the App bar appear, and I'll
| | 07:09 | click Refresh, and you might see a little bit of
animation occur, that's because the data is being refreshed.
| | 07:16 | To make this a little more obvious that
something is happening, I'll select an item
| | 07:20 | in the list, I'll right-click, and I'll refresh
again, and I'll see that the list is refreshed
| | 07:26 | and the details are cleared.
| | 07:28 | Finally, I'll add a little bit of code so that when
the user clicks the refresh button, the App bar goes away.
| | 07:36 | So that it's clear to the user that
they can interact with the content again.
| | 07:41 | I'll go back to my code, and I'll close this Output
panel, and I'll go down to my Button_Click event method.
| | 07:49 | When I created the App bar in the
MainPage, I assigned a name of MyAppBar.
| | 07:55 | Now, I'm going to use that to address the
App bar and hide it after the data has been refreshed.
| | 08:02 | Going back to the C# file, I'll place the
cursor after the call to retrieve data,
| | 08:08 | and notice that because of the await keyword,
this next bit of code will only be executed
| | 08:14 | after the data has been retrieved and is newly displayed in
the application, I'll add the following code: MyAppBar.IsOpen = false.
| | 08:25 | IsOpen is a property of the AppBar object, and
when it's set to false, that means that it closes.
| | 08:32 | I'll once again run the application, this
time I'll use the keyboard shortcut of Ctrl+F5
| | 08:38 | to run without debugging.
| | 08:41 | I'll scroll down the little ways
in the list and select an item.
| | 08:45 | I see the details on the right,
I'll then right-click and refresh.
| | 08:50 | And I see the data is
refreshed and the App bar is hidden.
| | 08:54 | So, that's to look at how you can
add an App bar to your application.
| | 08:59 | You control whether the App bar appears at
the top or the bottom of the application by
| | 09:04 | your selection of the
element, Top or BottomAppBar.
| | 09:08 | You can place this code either at the
top of the page or the bottom of the page.
| | 09:12 | That doesn't really matter.
| | 09:13 | It just has to be outside of the
grid that contains the user interface.
| | 09:18 | And then you can add as
many App bar icons as you want.
| | 09:22 | Look at Microsoft's
documentation about designing App bars.
| | 09:26 | Specifically, their guidelines for how to
place buttons, whether they should be on the
| | 09:31 | left or the right, and how they should be
grouped together so that you can create an application
| | 09:36 | that follows the
standards for Windows Store Apps.
| | Collapse this transcript |
| Using the sharing contract| 00:00 | Windows 8 introduces a concept called
Contracts that allows you to share functionality with
| | 00:06 | the rest of the Operating System.
| | 00:08 | Certain features that are common to
applications should be implemented through these contracts.
| | 00:14 | For example, if you want to implement search
or you want to share content with other apps,
| | 00:19 | you'd do that through the contract architecture.
| | 00:22 | Here's an example of contract using one of the
applications built into Windows 8, the Maps App.
| | 00:29 | In the Maps App, when you go to a particular location--
such as here, I've navigated to Seattle, Washington--
| | 00:35 | you can then share information through
that location using the sharing contract.
| | 00:41 | With the application open, I'm moving my
cursor to the top-right hot corner, then down
| | 00:47 | and selecting the Share charm.
| | 00:49 | Then I see a listing of applications that
have registered to receive this kind of data.
| | 00:55 | I'll select the Mail application, and as
result, my Email is seeded with text and an image.
| | 01:03 | Alternatively, if I go to the Search Contract, I can then
search the Maps applications for a particular location.
| | 01:11 | In this video, I'm going to describe how
to implement a very simple version of one of
| | 01:15 | these contracts, the Sharing Contract.
| | 01:18 | So, I'll go over to Visual Studio where I've opened
a version of my application called SharingContract.
| | 01:25 | In this version of the application, I'm
downloading and displaying the data, and I have my App
| | 01:33 | bar with the Refresh button that I
showed how to do in the previous video.
| | 01:38 | Now I'm going to add functionality that lets
me share information about a selected artist.
| | 01:45 | So that when a user clicks on an artist and
then goes to the ShareContract, the author's
| | 01:50 | name and biography will be shared with
applications that can receive simple text.
| | 01:56 | I'll go to my MainPage.xaml file, and specifically
to its code-behind file which is written in C#.
| | 02:04 | And I'll close the Output
panel and go into full screen.
| | 02:08 | The first step in implementing the SharingContract
is to create an instance of a class called
| | 02:13 | the DataTransferManager.
| | 02:15 | The best practice is to
implement this as a field of the class.
| | 02:20 | So, I'll place the cursor inside the class
declaration for the MainPage, and I'll create a new variable.
| | 02:26 | I'll data type it as something
called DataTransferManager.
| | 02:30 | Now the using clause for this class isn't
the part of my class yet, so I'll hold down
| | 02:35 | the Control key and press Period and select
using Windows.ApplicationModel.DataTransfer.
| | 02:43 | And now that class can be used.
| | 02:45 | I'll scroll up a bit, and I'll name this new
variable dataTransferManager with the lower case D.
| | 02:51 | Now, I'll go to the OnNavigatedTo method.
| | 02:55 | This method will be called
automatically the first time I go to this page.
| | 03:00 | I'll place the cursor above the call to retrieve
data, and I'll call this .dataTransferManager,
| | 03:07 | and I'll set it using this expression,
DataTransferManager, and I'll make sure I use
| | 03:13 | the version with an upper case D,
.GetForCurrentView, and that's the method call.
| | 03:20 | So I'll add the opening and
closing parentheses at the end.
| | 03:23 | Now that instance of the DataTransferManager is
filled in and will persist for the lifetime of this page.
| | 03:30 | Next, I'll use the DataTransferManager,
and I'm going to add an event handler method.
| | 03:36 | The name of the method can be anything you want, but it's
going to be attached to an event called DataRequested.
| | 03:42 | When the application is active, if the user
goes to the charms and clicks on the Share
| | 03:48 | charm, that would trigger the event
DataRequested, which in turn will call my method.
| | 03:54 | So I'll save this.
dataTransferManager.DataRequested.
| | 04:00 | And then I'll add the new event handler
method by simply pressing the Tab key.
| | 04:05 | That fills in the name, and then I can press Tab again,
and that actually generates the method stub below.
| | 04:11 | The name of the method will be
dataTransferManager_DataRequested,
| | 04:16 | and it receives two arguments, the sender,
| | 04:19 | which is the dataTransferManager itself,
and a collection of arguments named args.
| | 04:25 | And this is where I'll add code to send the
data back to the dataTransferManager, thereby
| | 04:30 | sharing the data with other
apps in the operating system.
| | 04:34 | So, now I'm ready to fill in the
code for the DataRequested method.
| | 04:38 | I'll get rid of this throw statement, that's
only there just in case I don't fill in this method.
| | 04:44 | And my first step will be to create a variable
that's data typed as something called DataRequest,
| | 04:51 | and I'll name the variable request, and
I'll get its reference from the args that were
| | 04:56 | passed in when this method was called.
| | 04:59 | The argument collection contains a property called
Request, and this is how I'll communicate with the Manager.
| | 05:06 | Now the next step is to get data
above the currently selected artist.
| | 05:11 | And I'll do that by addressing my ListControl.
| | 05:15 | When the user clicks on an item in the
ListControl, that fills in a property
| | 05:19 | of the ListControl called SelectedItem.
| | 05:22 | So I'm going to create a variable, data typed
as my ArtistItem class, and I'll name it artist,
| | 05:28 | and I'll get its value from
ItemListView.SelectedItem.
| | 05:34 | Now the selected item property returns an
untyped object, but I know it's going to contain
| | 05:39 | an ArtistItem object, so I'll add casting syntax
at the beginning of the declaration, (ArtistItem).
| | 05:49 | So now I have my Request object to communicate with
the dataTransferManager, and I have my Artist data.
| | 05:56 | The next step is to check whether
the user actually selected something.
| | 06:01 | If they selected something,
then the item will have data.
| | 06:04 | But if they don't select
something, then it will be null.
| | 06:08 | So I'm going to add an if clause and my
condition will look like this, if (artist == null).
| | 06:17 | If the user hasn't selected an artist from
the list, then I'd like to display a message
| | 06:22 | telling them exactly what to do.
| | 06:25 | And the request object has a method called
FailWithDisplayText, that's perfectly suited to this task.
| | 06:32 | So I'll use the code request.FailWithDisplayText,
and I'll pass in a static string,
| | 06:38 | "Select an artist to share".
| | 06:47 | But if the Artist object isn't null, that
means that I have data that I can share,
| | 06:52 | and here's how I'll pass the data back.
| | 06:54 | The request object has a property
called Data which in turn has Properties.
| | 06:59 | This Properties object has properties of
Title and Description, and you can fill them in
| | 07:04 | with any strings you want.
| | 07:06 | So I'll say request.Data.Properties.Title,
and I'll set that value to artist.ArtistName.
| | 07:15 | ArtistName is a property of my ArtistItem class.
| | 07:20 | Then I'll set the Properties.Description
to a static string of, "Featured Artist!"
| | 07:26 | You can put in any text if you want.
| | 07:29 | Finally, I'll call one of
the data object Set methods.
| | 07:34 | I'll use request.Data.SetText.
| | 07:39 | Notice that there are Set methods for Bitmaps,
Data, Data Providers, HTML, and many other settings.
| | 07:46 | I'll use SetText, and I'll pass in
the artist object .Biography Property.
| | 07:52 | That's a longer bit of text.
So here is all the code and the logic.
| | 07:57 | I get through reference to the selected Artist.
| | 07:59 | If the reference is null, then that means
the user hasn't selected an Artist from the
| | 08:03 | list yet, and I'll just
display an error message.
| | 08:07 | But if I get back a valid reference, then
I'll use two properties of the selected Artist,
| | 08:12 | the Name and the Biography, and I'll
send those back to the ShareContract.
| | 08:17 | So let's test the whole system.
| | 08:19 | I'll Save and Run the application Without
Debugging, and when the application opens,
| | 08:26 | I'll test the ShareContract
without selecting an artist.
| | 08:31 | I'll move the cursor to the top-right hot
corner, I'll select the Share charm, and I
| | 08:36 | get the message, "Select an artist to share".
| | 08:39 | So, great! I'll click back on the application,
and I'll choose one of the artists, and I'll
| | 08:45 | try to ShareContract again, and this time
I'm shown a listing of applications that can
| | 08:51 | support my data, simple text.
| | 08:55 | On a default Windows 8 installation, as of
the time of this recording, the only built-in
| | 09:00 | application that can handle this Share is Mail.
| | 09:04 | I'll select the Mail application, a new
Email appears, and my selected artist's name
| | 09:10 | and biography are a part of the Email.
| | 09:12 | I can then complete the email by filling in
a recipient, adding a custom message above
| | 09:17 | the text that's seeded there,
and then I can send it off.
| | 09:21 | So that's to look at a way to use the
Contracts that are a part of Windows 8.
| | 09:26 | There are lots of demonstrations and
documentation about sharing other kinds of data, including
| | 09:31 | Bitmaps and structured data, and also about
how to use other contracts that are a part
| | 09:37 | of Windows 8, such as the SearchContract.
Look at the documentation for more details.
| | Collapse this transcript |
| Customizing splash screen and start screen icons| 00:00 | When you create a new Windows Store App in
Visual Studio, it's automatically populated
| | 00:05 | with a set of graphical files.
These are placed in the Assets Folder.
| | 00:10 | I'm working in the version of project now
called Appicons, and if you open up the Assets
| | 00:15 | subfolder, you'll find these four PNG files,
named Logo, SmallLogo, SplashScreen, and StoreLogo.
| | 00:23 | These graphics are registered automatically
in the application manifest, that's this file,
| | 00:29 | Package.appexmanifest.
| | 00:31 | I'll double-click to open it and then scroll
down a little ways to show the image assets
| | 00:37 | that are registered in the file.
| | 00:39 | You'll find them here, the Logo, the
Small Logo, the Store Logo, and the Splash Screen.
| | 00:46 | There's also a place for a Wide Logo.
| | 00:49 | I'm not using that in this application, and
as a result, this app will only be allowed
| | 00:54 | to have a square tile on the start screen.
| | 00:57 | If you want a wide tile, you
have to add a Wide Logo here.
| | 01:01 | Now the easiest thing to do is simply figure
out what are the dimensions of the files that
| | 01:06 | are already in the application,
| | 01:09 | and then create your own PNG
graphics that match those dimensions.
| | 01:13 | So there's a Logo that's a 150x150, a
Small Logo that's 30x30, a Store Logo that's 50x50,
| | 01:22 | and a Splash Screen Logo.
| | 01:24 | Now to make this go a little bit more quickly,
I've already created these files for you.
| | 01:30 | So if you go to the exercise files, which
I've placed on my desktop and then go to
| | 01:35 | the Assets subfolder to LogoGraphics,
| | 01:39 | you'll find graphical files that
match these required dimensions.
| | 01:43 | There's also a Source file, this is a layered
PNG file that you can open up an Illustrator
| | 01:49 | or Fireworks or any other
application that supports that format.
| | 01:54 | But I'm interested in these four files.
| | 01:57 | These have the same names as
the files that are in my app.
| | 02:01 | So I'm going to Select and then
Copy these four files to the Clipboard.
| | 02:07 | Then I'll go to my Exercise Files folder
in Windows Explorer, then I'll drill down to
| | 02:11 | my Solution folder, Appicons, from there down to
the Project Folder and then into the Assets Folder.
| | 02:19 | I'll select and delete these four files.
| | 02:22 | Notice when I select them you can see the X in
the box that appears in the application, I'll
| | 02:27 | delete those and paste in my files.
| | 02:30 | Then I'll switch back to Visual Studio, and
I'll run the application again by pressing Ctrl+F5.
| | 02:38 | This time, as the application opens, you see
the Custom Splash Screen icon appear briefly.
| | 02:44 | And then when I go back to the Start screen
and scroll over to the right, I'll see that
| | 02:49 | my tile has that same customized look and feel.
| | 02:53 | So that's the simplest way to get started,
building custom icons for your Windows Store App.
| | 02:59 | Create your own custom graphics, drop them
into place, make sure they match the names
| | 03:04 | that are already registered, or change the
names in your application manifest file
| | 03:09 | and then retest the application and the
graphics should appear automatically.
| | Collapse this transcript |
| Creating live tile notifications| 00:00 | One of the interesting capabilities of
Windows 8 is the ability of Windows Store Apps to
| | 00:05 | display data through the tiles
that are exposed on the Start screen.
| | 00:10 | On my Start screen, I've turned on the live
tiles for three of the included applications
| | 00:14 | of Windows 8: photos, which shows one of the
photos at random; weather, which shows
| | 00:21 | the location and current weather; and the
Calendar, which shows the current date.
| | 00:26 | I'm going to show you how to affect
Live Tiles in your own application.
| | 00:30 | In this example, I'm going to limit myself
to only showing square tiles, not wide tiles.
| | 00:36 | But by learning the basic strategy, you'll
be able to extend it to other kinds of tiling.
| | 00:42 | A live tile is defined by an XML Packet, and
you can learn about the XML packets that are
| | 00:48 | available on this page at msdn.microsoft.com.
| | 00:53 | Search for the page name, hh761491, and
you'll find the tile template catalogue.
| | 01:01 | Scroll down, and you'll see the XML that
you have to create to generate a live tile.
| | 01:06 | The first one is a simple square
block that accepts two text values.
| | 01:12 | The first value is displayed in large
text and the second one in a small text.
| | 01:17 | And as you scroll down,
you'll find other tiles available.
| | 01:21 | Each of these tile templates
is identified by a string.
| | 01:25 | So for instance, this one is TileSquareText03.
| | 01:29 | So now let's take a look at how to
use this XML in your application.
| | 01:33 | In Visual Studio, I've opened the
version of my project called LiveTiles.
| | 01:39 | In this version of my application, I'm
using a Splash Screen icon and a Tile icon.
| | 01:45 | So then I'm not seeing the generic X in a box
that's created with a default application.
| | 01:50 | Now because I'm going to be working with this
tile quite a bit, I'm going to click and drag it
| | 01:55 | over to the left and put it
way over here on the left.
| | 01:59 | So each time I come back to the
Start screen, I can see it easily.
| | 02:03 | My goal in the code I'm about to create is
that whenever the user selects one of the
| | 02:08 | artists in the list, the artwork for that artist
will be used in the live tile on the Start screen.
| | 02:14 | So I'll go to Visual Studio, and I'll go to
the file MainPage.xaml.cs, and I'll also open
| | 02:24 | the accompanying XAML file, MainPage.xaml.
| | 02:29 | I'm going to create an event handler that
will trigger whenever the user selects
| | 02:34 | an item from the list.
| | 02:36 | I'll scroll down to the ListView, and
then I'll click into the beginning tag.
| | 02:41 | Then over on the Properties view I'll click
on the event handler's icon, I'll scroll down,
| | 02:48 | and I'll locate an event
called SelectionChanged.
| | 02:51 | This is the event that will occur
whenever the user selects an item from the list.
| | 02:56 | I'll double-click in the event handler,
and that creates the event handler method and
| | 03:01 | takes me to the C# file.
| | 03:03 | The next step is to construct the XML
packet that will represent the live tile.
| | 03:09 | You can create the XML either through DOM-style
programming or by creating the literal XML string.
| | 03:16 | DOM-style programming takes a little bit less code,
but I want you to see clearly what the XML looks like.
| | 03:23 | So I'm going to create the raw XML string.
| | 03:26 | I'll start by creating a
string that I'll call LiveTilePart1.
| | 03:31 | And I'll create it using the
literal string character, the @ character.
| | 03:36 | And then after a beginning quote,
I'll start typing in my XML.
| | 03:41 | I'll start with the beginning Tile tag, then
I'll nest within that a visual tag with
| | 03:47 | the version set to 1.
| | 03:49 | For all quoted values within
the XML, use two double quotes.
| | 03:53 | That escapes the double quote
character so that it survives processing.
| | 03:58 | Then I'll close the visual tag, and I'll go down
to the next line, and I'll create a Binding tag.
| | 04:05 | And I'll give my template
a name of TileSquareImage.
| | 04:07 | Again, remember, two double
quotes in each quote location.
| | 04:14 | I'll close the tag and
next I'll create an image.
| | 04:18 | And this is where I'm going to place the
image for the currently selected artist.
| | 04:23 | I'll set an ID value again of 1, and
I'll type in a source attribute of src.
| | 04:29 | I'll start with another pair of double quotes,
and then this is the point at which I would
| | 04:34 | insert the URL for the image I want to display.
| | 04:38 | So I'm going to close out the statement
with one more double quote and a semicolon.
| | 04:43 | Now I'm going to create the
second part of the packet.
| | 04:45 | I'll create another string which I'll call
LiveTilePart2, and once again I'll use the
| | 04:50 | @ character which allows me to put in
literal characters into my string, then I'll start
| | 04:56 | it with a single double quote
character and then two more double quotes.
| | 05:01 | That's the escaped double quote that
will go at the end of the image URL.
| | 05:05 | Next, I'll put it in an alt value.
| | 05:08 | This can be any string you want, I'm just
going to put in a static string of Web Image.
| | 05:15 | Then I'll put in the slash and the greater than
character, and that closes out the Image tag.
| | 05:21 | And then I have to finish up my XML packet
with an ending binding tag, an ending visual tag,
| | 05:29 | and an ending tile tag.
| | 05:34 | I'll finish up the entire string with the double quote
character and finish the statement with a semicolon.
| | 05:41 | So if you put these two bits of XML together,
you'll end up with a well-formed XML packet,
| | 05:46 | but where the source is empty.
| | 05:49 | And now my job is to put
this information all together.
| | 05:53 | The next step is to go get the
artist's information from the ListView.
| | 05:58 | I'll create a variable data typed as ArtistItem,
I'll name it artist, and I'll get its value
| | 06:04 | from ItemListView.SelectedItem, and I'll add
casting syntax at the beginning of that expression
| | 06:13 | to say that what I'm getting back is
an instance of the ArtistItem class.
| | 06:18 | So now I have the artist object, and I can use
that to pass the artwork URL into the XML packet.
| | 06:25 | So I'll create another string which I'll
call LiveTileXML, and I'll put it together from
| | 06:31 | LiveTilePart1, plus the artist's artwork URL
which looks like this, artist.ArtworkPhoto,
| | 06:42 | and then I'll close it with LiveTilePart2.
| | 06:45 | And LiveTileXML is now a well-
formed XML packet with the data I need.
| | 06:52 | Now I'm ready to turn this
into an actual XML document.
| | 06:57 | I'm going to create a new
object data typed as XmlDocument.
| | 07:01 | I'll type in the name of the class, then press
Ctrl+Period, and select using Windows.Data.Xml.Dom,
| | 07:09 | and that adds a required input
statement at the top of the code.
| | 07:13 | Then I'll name this domdoc for a DOM document.
| | 07:20 | I'll instantiate the object with the class'
constructor method, and then I'll call domdoc.LoadXml,
| | 07:28 | and I'll pass in my XML string, LivetileXML.
| | 07:34 | So now I have a DOM
document that represents my tile.
| | 07:38 | The next step is to create an
instance of a class called TileNotification.
| | 07:43 | I'll type in the name of the class and select
the using statement for that class, and I'll
| | 07:49 | name the object notification.
| | 07:52 | Then I'll instantiate the object by
calling the TileNotification class, and I'll pass
| | 07:57 | in the XML document, domdoc.
| | 08:00 | The next step is to create an
instance of a class called TileUpdater.
| | 08:06 | That class is in the same assembly as TileNotification,
so I don't need to explicitly add a using statement for it.
| | 08:13 | I'll name this object updater, and I'll instantiate it
with this code, TileUpdateManager.CreateUpdaterForApplication.
| | 08:24 | That method doesn't need any arguments.
| | 08:27 | And finally, I'll call the TileUpdater object
Update method, and I'll pass in the notification.
| | 08:34 | I missed an equal's operator in the middle
of that code, so I'll go back and add it in.
| | 08:40 | And now all of the code is clean.
| | 08:42 | So let's review all the
code before we try running it.
| | 08:45 | First, I'm creating an XML packet, and I'm
stuffing it with the data that I want to use
| | 08:51 | to display content in the live tile.
| | 08:53 | I'm taking that XML packet as a
string and turning it into a DOM document.
| | 08:59 | I'm wrapping that DOM document inside a
TileNotification and then using the notification with
| | 09:05 | the TileUpdater class to create the new tile.
| | 09:08 | So now I'll save all my code,
and I'll run the application.
| | 09:15 | When the application first opens,
the tile has its default appearance.
| | 09:20 | I haven't added a live tile to it yet.
| | 09:22 | But then I'll come back to the
application, and I'll select one of the artists.
| | 09:28 | And remember, I used this image,
the ArtworkPhoto in my live tile.
| | 09:33 | So now I'll press the Windows key to return
to the Start screen and watch what happens
| | 09:38 | when I move my cursor over the tile.
It changes to display the selected artwork.
| | 09:44 | The tile icon is still displayed by
default in this particular template.
| | 09:49 | It's just reduced and put
down in the lower left corner.
| | 09:53 | I'll press the Windows key again and go back to
my application, and I'll choose another artist.
| | 09:58 | I'll come back to the Start screen, move
the cursor, and I see the live tile update.
| | 10:04 | So again, that's just one sort of live
tile that you can use in your applications.
| | 10:10 | Take a look at the templates that are available in the
tile template catalog in the Windows documentation.
| | 10:16 | Experiment with them and see what kind of live
tiles you can create for your own Windows Store app.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Thanks for watching this course,
Building Your First Windows Store App with XAML and C#.
| | 00:06 | If you're just getting started with either
language, you can buff up your skills with
| | 00:10 | the lynda.com courses, C# Essential Training, or
for more on XAML, Silverlight 5 Essential Training.
| | 00:18 | Or you can watch a variety of lynda.com
courses about the features of Visual Studio.
| | 00:23 | You can learn more about how to program most
features of Windows Store Apps from the documentation
| | 00:28 | and sample apps that Microsoft provides.
| | 00:31 | Start your exploration of
these sources at dev.windows.com.
| | 00:36 | I hope this course will help you get
started on your road to creating and distributing
| | 00:41 | these new kinds of apps for the Windows Store.
| | Collapse this transcript |
|
|
