IntroductionWelcome| 00:05 | My name is David Gassner, and I'd like
to welcome you to Building Your First
| | 00:09 | Windows Store App
with XAML and Visual Basic.
| | 00:13 | In this course, I'll show you how to
install the free Visual Studio Express
| | 00:18 | 2012 for Windows 8, and how to
create a new application using one of the
| | 00:23 | included templates.
| | 00:25 | Then I'll describe how to use Visual
Basic's new asynchronous programming model
| | 00:31 | to retrieve and parse an RSS feed from
the Web, how to display the feed's data
| | 00:36 | in a dynamic screen that's laid out with
XAML, and controlled with Visual Basic,
| | 00:42 | and how to integrate new Windows 8
features, such as the app bar, the share
| | 00:47 | contract, and live tiles.
| | 00:51 | This course just touches the surface of
what's possible in Windows Store apps,
| | 00:56 | but I hope it will help you get
started building your own apps for this
| | 01:00 | new platform.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Windows Store apps for Windows 8
| | 00:03 | are built with a set of technologies
and programming languages that are already
| | 00:07 | familiar to many developers.
| | 00:09 | At the core is the operating system,
| | 00:12 | represented in this diagram
by the Windows Kernel Services.
| | 00:16 | Then there's a set of
libraries called the application model
| | 00:20 | and then the libraries that you
call directly, the WinRT APIs.
| | 00:25 | Regardless of which
programming language or languages you use,
| | 00:29 | you'll be working with these
APIs in Windows Store apps.
| | 00:32 | If you're a web developer, you
might have chosen HTML and JavaScript.
| | 00:37 | But if you're watching this course you've
likely decided to go with XAML and Visual Basic.
| | 00:43 | When you're trying to decide which
programming language or languages to use,
| | 00:47 | I recommend starting with
something you're already familiar with.
| | 00:50 | If you use Visual Basic, C#, or C++
and you want to use those languages,
| | 00:56 | you'll be using XAML, or Extensible
Application Markup Language, to define
| | 01:01 | your screens or layouts,
| | 01:03 | and then you'll be using your favorite
programming language as the code behind language,
| | 01:09 | and that's where you put
all of your programming logic.
| | 01:12 | Visual basic has the advantage
of having been around for years,
| | 01:16 | and many developers already know the language
and are ready to use it in this new environment.
| | 01:22 | For C+#or Java developers, C# offers
a managed code environment, with C-like syntax.
| | 01:29 | And if you have to achieve the best
possible performance and you need strong
| | 01:33 | graphical presentation,
you should check out C++.
| | 01:38 | You'll get that great performance
| | 01:39 | and support for the DirectX
graphical programming interfaces.
| | 01:44 | Regardless of which programming languages you use,
| | 01:47 | you'll be using Visual Studio 2012
to build your Windows Store apps.
| | 01:52 | You can choose from one of the
fee-for-license editions listed here,
| | 01:56 | or you can use the free version,
Visual Studio 2012 Express for Windows 8,
| | 02:02 | and that's the version of Visual Studio
that I'll be using throughout this course.
| | 02:06 | If you'd like to learn a little bit
more about the languages and technologies
| | 02:09 | used in this course, check out these existing
lynda.com courses. For more about this XAML
| | 02:15 | watch Silverlight 5 Essential Training.
Silverlight and Windows Presentation Foundation, or WPF,
| | 02:23 | both use XAML as their presentation language.
| | 02:26 | If you learn how to use XAML in one environment,
| | 02:29 | you've learned a lot of what you
need to know for another environment.
| | 02:32 | And to learn more about Visual Studio,
| | 02:35 | checkout Visual Studio 2010 Essential Training.
| | 02:39 | Both of these courses teach
skills that you might find valuable
| | 02:42 | as you learn how to build Windows
Store apps with XAML and Visual Basic.
| | 02:46 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | This course includes exercise files
that you can use to follow along as
| | 00:05 | you watch the videos.
| | 00:06 | I've placed the Exercise Files
on my Desktop,
| | 00:09 | but you can put them
anywhere on your hard disk.
| | 00:13 | The exercise files are created as
Visual Studio projects that you can open up
| | 00:18 | in Visual Studio Express 2012 for
Windows 8, or in any pay for license version
| | 00:24 | of Visual Studio 2012.
| | 00:27 | To open one of the exercises, go
to the chapter for that exercise.
| | 00:31 | For example, I will go to 01_GettingStarted,
to HelloWorldComplete, and look
| | 00:38 | for the solution file.
| | 00:39 | Double-click the solution file, which you
can identify by the Visual Studio icon,
| | 00:44 | and the project should open in Visual Studio.
| | 00:48 | If you have more than one version of
Visual Studio Express installed, you might
| | 00:53 | be prompted to choose the one you want to use.
| | 00:55 | Make sure you choose Visual
Studio Express 2012 for Windows 8.
| | 01:00 | After opening the project,
I recommend rebuilding it.
| | 01:03 | This will clear any errors that
might occur from moving files around.
| | 01:08 | Go to the menu, and
choose Build > Rebuild Solution,
| | 01:13 | and you should see output in the Output
panel that indicates that the rebuild succeeded.
| | 01:19 | Then you can run the application by
going to the menu and choosing Debug > Start
| | 01:25 | Debugging, or Start Without Debugging.
| | 01:28 | There are keyboard shortcuts
associated with both operations;
| | 01:32 | F5 to debug, and Ctrl+F5 to start without.
| | 01:37 | I'll run without debugging, and that
installs the application, and runs it.
| | 01:42 | After running the application, if you
want to close it completely, press Alt+F4.
| | 01:47 | That will take you back to the start screen.
| | 01:50 | Then press Alt+Tab to
move back to Visual Studio.
| | 01:54 | To uninstall an application, go back to
the start screen, scroll over and find
| | 02:00 | the tile for the application, right-click
on it to select it, choose Uninstall
| | 02:06 | from the app bar
that appears, and confirm.
| | 02:09 | You should then be able to remove
the application from your hard disk
| | 02:12 | completely, or make any
other changes that you like.
| | 02:16 | The Exercise Files also
include a Solutions folder.
| | 02:19 | Here, you'll find finished versions of
each application, and it's possible to
| | 02:25 | open up more than one instance of the same
application in two copies of Visual Studio.
| | 02:31 | In the Solutions folder, for example,
I'll go to the HelloWorldComplete folder
| | 02:35 | there, double-click that solution, and
now I have two copies of Visual Studio,
| | 02:41 | with the two different
versions of the project.
| | 02:44 | I can then lay them out side by side by
dragging and snapping them into place,
| | 02:50 | and then you'd be able to compare
code in two different versions of a file.
| | 02:55 | By using these exercise files, and
following along with the code, you'll be able
| | 02:59 | to understand better how the code works,
and how you can apply these lessons to
| | 03:04 | building your own Windows Store apps.
| | Collapse this transcript |
|
|
1. Getting StartedInstalling Visual Studio 2012 Express for Windows 8| 00:00 | To get started building Windows 8
Store apps, install Visual Studio Express
| | 00:07 | 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.
| | 00:19 | That takes me to the Developer home page.
| | 00:21 | From there, I'll click the Downloads
link, and then, under Download the tools and
| | 00:26 | SDK, I'll click Download now.
| | 00:29 | That brings up a prompt at the
bottom of the screen, and I'll click Run to
| | 00:33 | download 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 checkbox,
you'll see an Install link at the bottom.
| | 00:50 | Click the link, and then after responding
to the user account control dialog, the
| | 00:55 | installation will begin.
| | 00:58 | The installation will
take a quite a bit of time.
| | 01:01 | In addition to downloading and
installing Visual Studio, Windows will create
| | 01:06 | a system restore point that will allow you to
back up to this point on your Windows computer.
| | 01:11 | After the system restore point,
the rest of the download and
| | 01:15 | installation continues.
| | 01:17 | This would be a good time to pause the
video, because the installation will take
| | 01:21 | quite a few minutes.
| | 01:24 | Once the installation is complete,
you'll see this screen, with a link that lets
| | 01:28 | you launch Visual Studio Express.
| | 01:33 | When Visual Studio Express first opens,
it will display in a dark background.
| | 01:39 | If you'd like to change it to a lighter
background to match previous versions of
| | 01:42 | Visual Studio, go to the menu, and choose
Tools > Options, and then on the General
| | 01:50 | panel, change the 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 Visual Basic| 00:00 | Just as with any new technology, the
first step in learning how to program a
| | 00:05 | Window Store application is to create
a hello world app; an application that
| | 00:10 | simply outputs some text to the screen.
| | 00:13 | I'm working in Visual Studio Express 2012
for Windows 8, and I'll create a new project.
| | 00:19 | If you see the Start page, you can
click on the New Project link, or you can
| | 00:23 | always go to the menu and
select File > New Project.
| | 00:27 | The New Project dialog offers
templates for the four supported programming
| | 00:31 | languages: JavaScript, Visual
Basic, Visual C#, and Visual C++.
| | 00:37 | If you choose JavaScript, you'll
be laying out your pages using HTML.
| | 00:42 | If you choose any of the other three
languages, you'll be working with XAML,
| | 00:47 | Extensible Application Markup Language;
the same markup language that's used in
| | 00:52 | Silverlight, and WPF-based
desktop applications.
| | 00:56 | I'll choose Windows Store for Visual Basic.
| | 00:59 | Then I'll set my
application Name as HelloWorld.
| | 01:04 | By default, the new application will
be placed in a folder of the same name
| | 01:09 | underneath the selected location.
| | 01:11 | I'll click Browse, and I'll start off
at my Desktop. From there I'll go to the
| | 01:17 | Exercise Files folder
to 01_GetttingStarted.
| | 01:19 | I'll select that folder as the parent
folder, and then I'll click OK, and that
| | 01:27 | will create the project,
and the application.
| | 01:30 | When the project first opens,
you'll see that the default page is
| | 01:33 | called App.xaml.vb.
| | 01:36 | This is the code behind file that
contains the logic that goes with a XAML-based
| | 01:42 | page, and the name of that page is App.xaml.
| | 01:46 | If you double-click that file in the
Solution Explorer on the right, you'll
| | 01:50 | open it to XAML code.
| | 01:51 | A XAML file is an XML file.
| | 01:55 | The root element of the app file is
always application, and it's the high level
| | 02:00 | container for your application, but
it's not the page the user actually sees.
| | 02:06 | Instead, that file is called MainPage.xaml,
and you can double-click to open it.
| | 02:12 | When you first open MainPage.xaml, you
should see this split display, with the
| | 02:18 | design environment at the top, and
the code view down at the bottom.
| | 02:22 | You can swap the two panes back and
forth by clicking on this icon, and then the
| | 02:27 | code is at the top, the designer at the
bottom, and click to switch back again, and
| | 02:32 | you can hide either pane by
clicking on the collapse icon here.
| | 02:36 | So now I'm only looking at the design
environment, and then I can click on the
| | 02:40 | tab at the bottom for XAML,
and I see the equivalent code.
| | 02:44 | To output simple text in a XAML page,
you use a visual control, and I'm going to
| | 02:50 | add a visual control in Design mode,
| | 02:52 | so I'll click the Design tab at the
bottom. Then I'll go over to the left side
| | 02:57 | of the screen,
and I'll click the Toolbox tab.
| | 03:00 | When the Toolbox opens, it shows a list
of common XAML Controls at the top, and a
| | 03:06 | listing of all available
XAML Controls at the bottom.
| | 03:09 | I'm going to click and
drag a TextBlock control.
| | 03:12 | You use a TextBlock to display text.
| | 03:16 | I'll click and drag it on to the page,
and when I release the mouse button, the
| | 03:21 | toolbar snaps into its hidden spot.
| | 03:23 | Now, with the TextBlock control
still selected, I'll go to the Properties
| | 03:28 | panel over on the right, and I'll
scroll down to the Common category, which
| | 03:33 | should already be open.
| | 03:34 | I'll change the text that the TextBlock
is displaying from TextBlock to Hello World.
| | 03:42 | When I press Enter, that
results in displaying the text in the
| | 03:46 | Design environment.
| | 03:47 | Now, I'm going to change the font settings.
| | 03:50 | When you first create a TextBlock, it
will come out in this very small font, but
| | 03:55 | I'll go to the Properties panel, I'll
close the Common category, and I'll go to
| | 04:00 | the Text Properties category.
| | 04:03 | I'll scroll down a bit, and then I'll
pull down the list of available fonts.
| | 04:08 | The standard recommended font for
Windows Store apps is called Segoe UI.
| | 04:14 | I'll scroll down to the Segoe
section, and then select Segoe UI.
| | 04:19 | Then I'll change the size of the
font from 11 pixels to 50 pixels.
| | 04:25 | And now that font looks like something
similar to what I might have seen in
| | 04:29 | other Windows Store applications.
| | 04:32 | Next, I'll place the control
in its recommended location.
| | 04:36 | The Windows 8 Design Guidelines say
that the heading for a page should be 120
| | 04:42 | pixels from the left side of the screen.
| | 04:44 | I'll close the Text category,
and go to the Layout category.
| | 04:49 | I'll go down to the margins, and I'll
change my left margin from whatever it
| | 04:54 | shows here -- the actual number will depend
on where you dropped your control -- to
| | 04:59 | 120, and that places the
object 120 pixels from the left.
| | 05:04 | Next, I'll move the object up.
| | 05:07 | I'll talk more in a later video about
the recommended specific location of this
| | 05:12 | control, but for now, I'll
just set the top margin at 45.
| | 05:17 | So now my page is looking about the
way I want it, and I'm ready to launch it
| | 05:22 | for the first time.
| | 05:23 | To launch the application, go
to the menu, and select Debug.
| | 05:28 | There are options to Start with
Debugging, and Without Debugging.
| | 05:32 | Typically, you'll get better performance
by starting without debugging, so you
| | 05:36 | can either select that
menu option, or press Ctrl+F5.
| | 05:41 | When you launch without debugging,
that results in installing the application
| | 05:46 | into your operating system, and
then launching it for the first time.
| | 05:50 | The application will now
take up the entire screen.
| | 05:53 | That's the nature of a Windows Store app.
| | 05:55 | Now I'll go to the Start screen, and
scroll way over to the right, and show that
| | 06:01 | my application was installed, along with a tile
that's automatically added to the Start screen.
| | 06:07 | I can run the application from
here by clicking on the tile.
| | 06:10 | With the application open, if you want
to close it completely, press Alt+F4.
| | 06:16 | That will take you back to the Start
screen, and then you can press Alt+Tab to
| | 06:21 | return to Visual Studio.
| | 06:23 | Now let's take a look at the XAML that
was generated when I dragged the control
| | 06:27 | in, and set its properties
through the visual environment.
| | 06:31 | I'll click on the XAML tab, and
then I'll close the Output panel.
| | 06:35 | Here's what the XAML code looks like.
| | 06:38 | In a page XAML file, the root element,
by default, will be Page, and then its
| | 06:44 | class attribute will point to a Visual
Basic class file that's associated with
| | 06:49 | it as what's known as the code-behind file.
| | 06:53 | You can get to the code-behind
file in a couple of different ways.
| | 06:57 | With the name of the class selected,
you can right-click, and select View Code,
| | 07:02 | or press Ctrl+Alt+0.
| | 07:04 | If you select View Code, that will take
you to the Visual Basic file, and this is
| | 07:09 | where you would put in the logic
that controls the behavior of that page.
| | 07:14 | I'll close that file, and then go over
to the Solution Explorer, and show that
| | 07:20 | the file is available there too as
an item under the MainPage.xaml tree.
| | 07:25 | I can open up the tree, and then
double-click to open the file again.
| | 07:29 | I'll return to the XAML file, and point
out a Grid control that's inside the page.
| | 07:37 | Every page of a Window Store app uses
XAML to lay out its objects using a grid.
| | 07:43 | I'll show you some ways of using this
grid in later videos, but it's important
| | 07:47 | to know that you have to have the grid
there, and all other visual controls get
| | 07:51 | placed within the grid.
| | 07:53 | Finally, the TextBlock
control is placed within the grid.
| | 07:57 | The TextBlock control has some properties
that I set, such as the margins of 120,
| | 08:02 | and 45, the text property of Hello World,
and the font family, and size, but it
| | 08:08 | also has properties that were
added automatically by Visual Studio.
| | 08:12 | I encourage you to go back into Design
view, and try adding different kinds of
| | 08:17 | controls from the Toolbox, and see
what an application can look like,
| | 08:22 | but in pursuit of the goal of building
the simple application that this course
| | 08:25 | is all about, I'll now go on to the
next video, where I'll show you how to use
| | 08:30 | styles to affect
the look and feel of a font.
| | 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
| | 00:07 | Metro Design Language, but now simply
known as Windows 8 Design Guidelines, or
| | 00:12 | Modern Design Guidelines.
| | 00:14 | These guidelines fall into six
categories: Navigation, Commands, Touch
| | 00:20 | interaction, Advertising and
Branding, and User experience.
| | 00:26 | Applications follow navigation
patterns that range from hierarchical to flat.
| | 00:31 | A hierarchical navigation design is
one where you have a hub page, and then
| | 00:37 | 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:49 | In this application, you start with a
set of icons indicating the location or
| | 00:55 | source of your photographs.
| | 00:57 | Then you can drill down into a section;
from there, into a set of items, and from
| | 01:02 | there, into the detail
for a particular item.
| | 01:05 | Then, when you click on the page,
an icon appears that lets you go back
| | 01:09 | through the hierarchy.
| | 01:12 | Hierarchical applications are good for
content systems; that is, collections of
| | 01:17 | content, such as photographs, or news
articles, or where your content can be
| | 01:22 | 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
| | 01:40 | get 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
| | 01:47 | Microsoft Website: microsoft.com.
| | 01:51 | From there, I'll go to Google,
| | 01:53 | and you'll see that you're replacing the
content, but still staying within the same frame.
| | 01:59 | Other examples of flat navigational
applications include games, or document
| | 02:05 | creation applications.
| | 02:07 | For more information about navigation
patterns, go to the Bing search engine, and
| | 02:12 | search for this string: hh761500.
| | 02:14 | I'll go to Internet Explorer, and type in
that string, and automatically I'll be
| | 02:23 | searching Bing for the string.
| | 02:26 | From there, I can get to the
documentation about navigation design for
| | 02:30 | Windows Store apps.
| | 02:32 | You'll find a lot more detail here,
including useful diagrams showing different
| | 02:37 | 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
| | 02:49 | they want to do next,
and where they want to go.
| | 02:51 | Wherever possible, you'll want to handle
navigation by using the content of your
| | 02:57 | application. That is, instead of
choosing an item, and then saying what you want
| | 03:02 | to do with it, if possible, you should
allow the user to express a user gesture
| | 03:07 | directly with that content item.
| | 03:09 | 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 | 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:31 | There are many common commands that
are used by many applications, such as
| | 03:36 | searching, sharing, 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
| | 03:52 | the right, either top or bottom, or on a
touch device, by swiping in from the right side.
| | 03:58 | For example, the Search contract
gets you the search functionality for
| | 04:03 | all Windows Store apps.
| | 04:05 | A great example of this
is the Store application.
| | 04:09 | From the Start screen, I'll type the
word store, and then press Enter, and that
| | 04:14 | takes me to the start screen.
| | 04:16 | Now, I can scroll around, and look at
applications that I might want to purchase,
| | 04:21 | but if I want to find a specific
application, I might not find it by
| | 04:26 | 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
| | 04:36 | notes that 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
| | 04:54 | tempting to think that functions like
searching, and sharing, and configuration
| | 04:59 | should be a part of the main application
user interface, but in Windows 8 Store
| | 05:04 | apps, those are all handled
through the charms.
| | 05:07 | Finally, there's the app bar.
| | 05:09 | 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
| | 05:18 | actions in your application
| | 05:19 | 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
| | 05:30 | swipe from the top to bottom, and that
takes me to the app bar, which appears at
| | 05:35 | the bottom of the application
in the Photos app,
| | 05:38 | 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 too.
| | 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
| | 06:07 | pinching and stretching.
| | 06:09 | Most of the functionality in your
application will probably work just fine out
| | 06:13 | of the box, but you'll want to test your
application on a touch device, such as a
| | 06:18 | Surface RT, or other
device that has a touchscreen.
| | 06:22 | For more on touch patterns,
search the string hh465415.
| | 06:25 | 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:42 | For example, while there are recommended
typefaces, you don't have to use those
| | 06:48 | typefaces. Instead, you should mix
those typefaces with those that give your
| | 06:53 | application strong branding.
| | 06:54 | But you should be familiar with what's
known as the grid layout, and the Windows
| | 06:59 | silhouette; strongly prescribed
locations of items on the screen that are
| | 07:05 | common across applications, that make
all Windows Store apps feel like they're
| | 07:10 | a 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
| | 07:21 | best possible Windows Store app; one
that will fit into the store, feel like
| | 07:26 | a part of Windows 8, but also give
your application the strong branding that
| | 07:31 | you want.
| | Collapse this transcript |
| Applying themes and styles| 00:00 | In my Hello World application, I
used a TextBlock control, and applied a
| | 00:05 | specific font and size.
| | 00:07 | Now I'm going to do the same
thing, but this time using styles.
| | 00:12 | I'm working in a project called
UsingStyles, which is available in
| | 00:15 | 01_GettingStarted, and I'll double-click
on the solution file, which you can
| | 00:20 | recognize by the Visual Studio icon.
| | 00:22 | When the project opens, it takes
me to MainPage.xaml in Design view.
| | 00:29 | When you create a brand new application
in Visual Studio 2012, by default, it
| | 00:34 | will have a dark background
and a light font color.
| | 00:38 | Taken together, these attributes are
known as the Dark theme, and a new XAML
| | 00:43 | application has two themes
that you can choose from;
| | 00:46 | the dark theme,
and the light theme.
| | 00:49 | To change the theme,
open the file App.xaml.
| | 00:54 | That file always opens in Code view.
| | 00:57 | Then place the cursor inside the
beginning tag, and add an attribute
| | 01:02 | called RequestedTheme.
| | 01:04 | You'll see the two options;
Dark, and Light.
| | 01:07 | The default is Dark.
| | 01:09 | If you want Light,
you just have to select it.
| | 01:12 | I'll save my changes, and then go to the menu,
and select Debug > Start Without Debugging.
| | 01:19 | And when the application opens, I see the
light background, and the dark font face.
| | 01:25 | I'll go back to Visual Studio, and go
back to MainPage.xaml, and you'll see that
| | 01:31 | the designer still is showing
the older style,
| | 01:34 | and that's because the design
environment is sensitive to settings that are a
| | 01:39 | part of the environment,
not the application.
| | 01:42 | To change this so that your designer
looks the same as the application, go to
| | 01:47 | the Device tab on the left.
| | 01:49 | Notice the Theme is set to Default.
| | 01:51 | You can change it to Light.
| | 01:54 | You'll see that the design surface
changes to mimic what you're going to see
| | 01:58 | when the application really runs.
| | 02:00 | Now, for the rest of this application,
I'll be working in the Dark theme,
| | 02:04 | so I'm going to switch it all back again.
| | 02:07 | I'll go back to App.xaml, I'll change
from Light to Dark, I double-clicked
| | 02:12 | on the word Light to select it, then pressed
Ctrl+Space to bring up the list of options.
| | 02:19 | I'll choose Dark.
| | 02:20 | I'll save my changes.
| | 02:22 | I'll go back to MainPage.xaml
to the Design view.
| | 02:26 | I'll go again to the Device panel, and
I'll change the Theme from Light to Dark.
| | 02:32 | I'll save my changes, and I'll run my
application again, this time pressing
| | 02:36 | Ctrl+F5 to run without debugging,
| | 02:41 | and my application is back
to the Dark theme.
| | 02:44 | A theme is nothing more than a
collection of styles, and there are a number of
| | 02:48 | predefined styles that are included
with any new XAML-based application.
| | 02:54 | You'll find these styles in a file
called StandardStyles.xaml that's located in
| | 02:58 | the common folder within the project.
| | 03:01 | When you open StandardStyles.xaml, it
will open in Code view, and if you try to
| | 03:06 | look at it in Design, you won't be able to.
| | 03:09 | Going back to the XAML view, I'm going to
search for one of the predefined styles.
| | 03:14 | I'll press Ctrl+F for Find,
and I'll type in PageHeader.
| | 03:19 | I'll press Esc to clear the Find Box,
and now I can explore the styles.
| | 03:25 | A style is declared using a
Style element in XAML code;
| | 03:29 | x:Key is the identifier,
| | 03:32 | and that's how you'll use
the style in your XAML code.
| | 03:35 | XAML-based styles are very similar to
cascading style sheets in a Web browser.
| | 03:40 | Each style can have its own properties.
| | 03:43 | This style has properties for text
wrapping, vertical alignment, and margin,
| | 03:47 | but it can also inherit properties from
another style, and this is done through
| | 03:52 | the BasedOn attribute.
| | 03:54 | This style inherits from HeaderTextStyle,
| | 03:57 | so any settings that are in that style, or
any of its parent styles, will be reflected here.
| | 04:03 | I'm going to use this style
in the file MainPage.xaml.
| | 04:07 | I'll click on the XAML file, and
then click on the TextBlock that's
| | 04:10 | outputting Hello World.
| | 04:12 | In this version of the project, I don't
have any specific font or size settings,
| | 04:17 | and so it's showing the default.
| | 04:19 | With the textbox selected, I'll go to
the Properties panel, I'll scroll down, and
| | 04:25 | select the Miscellaneous category,
and here is the Style selector.
| | 04:29 | I'll click on the square icon, which
will open up a context menu, and I'll
| | 04:34 | choose Local Resource, and here are
all the styles that are defined in the
| | 04:39 | standard styles file.
| | 04:41 | And I'll choose this one:
PageHeaderTextStyle,
| | 04:44 | and that changes my TextBlock to the
font and size that are the standard for all
| | 04:50 | beginning applications.
| | 04:52 | Now I'll take a look at the
actual font and size that were selected.
| | 04:56 | Going back to the Properties panel,
I'll go to the Text category, and I'll see
| | 05:01 | that this style implements a font-family
of Segoe UI, and a size of 56 pixels.
| | 05:08 | I'll save again by pressing Ctrl+S, and
then run the application, and I'll see
| | 05:13 | the change has taken hold.
| | 05:15 | So, that's a look at how you can get
started with themes and styles in a
| | 05:18 | XAML-based application.
| | 05:20 | This is exactly the same process
regardless of whether you're working in
| | 05:24 | Visual Basic, C#, or C++.
| | 05:28 | In any XAML-based application, you
can use styles and themes to manage the
| | 05:32 | appearance of your app.
| | Collapse this transcript |
| Testing apps with Visual Studio and the Windows 8 Simulator| 00:02 | Visual Studio 2012 gives you a few
tools you can use to test your application
| | 00:06 | without having 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
| | 00:14 | which you're doing your development,
| | 00:16 | and you do that simply by running the
application from the Visual Studio menu.
| | 00:21 | When you select Debug > Start Without
Debugging, or press Ctrl+F5, you'll install
| | 00:28 | and run the application.
| | 00:30 | And then you can return to the
Start screen, and you'll see that the
| | 00:34 | application has been 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.
| | 00:45 | Then you can go to the Start screen,
right-click on it, and Uninstall it from
| | 00:50 | the app bar icon that appears.
| | 00:53 | When you confirm the request, the
application will have been uninstalled from
| | 00:57 | the operating system, but it's
still there in Visual Studio.
| | 01:01 | You might only have a single monitor
connected to your development system,
| | 01:05 | though, and so you need a way to see
how your application will look and behave
| | 01:10 | 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
| | 01:43 | in the documentation as the minimum for running
applications side by side or in Snapped mode.
| | 01:50 | When you look at your application in
this view, you'll see approximately what
| | 01:55 | it will look at on these
medium-size devices.
| | 01:58 | By default, your screen
might be truncated, or cut off,
| | 02:02 | but you can look at the entire
screen by going to the Zoom selector in the
| | 02:06 | lower left, and selecting Fit all.
| | 02:11 | If you want to see what this XAML
page might look like on a very large
| | 02:14 | screen, you can go to the Device panel,
and set the display from 1366 by 768 to
| | 02:22 | perhaps 1920 by 1080.
| | 02:23 | 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 2560 by 1440.
| | 02:37 | And once again, after you select each one,
you'll need to reset your Zoom to Fit
| | 02:42 | all to see what it will look like.
| | 02:45 | What it looks like at design time is one thing,
but how it behaves at run time is another,
| | 02:50 | and for that purpose, Visual
Studio includes the Windows 8 simulator.
| | 02:55 | The simulator does exactly what it says.
| | 02:58 | It simulates an actual Windows 8 device,
and has support for rotating the device,
| | 03:04 | and also 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:17 | After that, the first time you run
an application, either with or without
| | 03:22 | debugging, it will launch the
Simulator application, which is included
| | 03:27 | 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
| | 03:41 | screen, and then scroll over to the right,
you'll see all the applications that
| | 03:46 | you've previously installed or run.
| | 03:49 | To get back to an application, just
click on the tile, and then you can start
| | 03:54 | 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
| | 04:06 | again counterclockwise to return
it to its original orientation.
| | 04:11 | You can also use the
hand icon to mimic touch.
| | 04:14 | I'll click the hand icon, I'll come
back here and click the Start button, and
| | 04:21 | now I can click and drag, and see what
would happen if I put my finger on the
| | 04:25 | 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
| | 04:47 | right, and I'll 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 word pad to open up a word
| | 05:06 | processor, and then I'll
paste my graphic into place.
| | 05:11 | You can take this screenshot, and put it
into documentation, or use it to show in
| | 05:17 | the Windows Store
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
| | 05:30 | just leave it open, and this will save
you time each time you make a change to
| | 05:35 | your application in Visual
Studio, and want to launch it again.
| | 05:38 | So, I'll simply switch back to Visual
Studio, and I'll click on my text block
| | 05:43 | that says Hello World.
| | 05:44 | I'll go down to my Common category in
the Properties panel, and I'll change the
| | 05:50 | text to Hello World Complete.
| | 05:53 | I'll save my changes,
| | 05:55 | and once again,
I'll run the application.
| | 05:59 | And because I had already run the
Simulator, and left it open, the Simulator
| | 06:03 | re-launches automatically,
and comes to the foreground.
| | 06:07 | If you want to get the Simulator out of
the way, you can click on the Minimize icon,
| | 06:12 | 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
| | 06:21 | Simulator icon, and select Close Window,
| | 06:25 | 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
| | 06:35 | back to the selector, and change
from Simulator back to Local Machine,
| | 06:40 | and now you're back
to your beginning state.
| | 06:42 | I'll once again run the application,
this time by pressing Ctrl+F5, and now I'm
| | 06:48 | running the application on my own system.
| | 06:50 | So, you can use the combination of
the Device panel for design time, and the
| | 06:57 | Windows 8 Simulator for run time testing
to see what your application might look
| | 07:01 | 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:02 | Visual Studio 2012 includes a couple of
application templates that let you see
| | 00:06 | how to build simple
data-centric applications.
| | 00:10 | One of these is called the Split
Application template, and the resulting
| | 00:14 | 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 onto one of
the groups, and see the details, and there
| | 00:29 | they'll see a list of data on the
left, and detail data on the right.
| | 00:33 | And when they click on one of the
items in the list, they see the details
| | 00:37 | displayed through bindings.
| | 00:38 | I'll show you how to build this
type of application using data that's
| | 00:43 | 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 a list, and the details,
| | 00:54 | but by learning how to code this
application, you'll get a good understanding of
| | 00:58 | how data binding works in
XAML-based applications.
| | 01:02 | In Visual Studio, I've opened a beginning
project. It's named SplitPage, and you
| | 01:08 | can 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 TextBlocks.
| | 01:19 | In XAML, a StackPanel
is used to lay out objects.
| | 01:25 | You can have a StackPanel with an
orientation of vertical or horizontal to
| | 01:30 | lay out objects from top
to bottom or left to right.
| | 01:34 | This StackPanel has an orientation
of vertical, and as a result, the two
| | 01:38 | TextBlocks 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
| | 01:46 | vertically, so that there's a
left column and a right column,
| | 01:51 | 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:58 | The outer component is already a grid.
| | 02:01 | 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
| | 02:21 | dimensions of my rows.
| | 02:23 | After the Grid tag, I'll add a tag
set called Grid.RowDefinitions,
| | 02:29 | and within the RowDefinitions,
I'll add two RowDefintion objects.
| | 02:35 | The first one will have a height of 180.
| | 02:39 | That means 180 pixels.
| | 02:41 | Then I'll add a second RowDefinition,
and it will have a height of star, or asterisk.
| | 02:47 | The star in XAML means everything else,
| | 02:50 | so however tall the screen is that
this application is displayed on, the first
| | 02:56 | 180 vertical pixels will be for the
StackPanel, and the rest of the vertical
| | 03:00 | space will be for
everything else in the page.
| | 03:03 | The StackPanel already has a
Grid.Row attribute set to 0.
| | 03:08 | That means the StackPanel
is the Grid's first row.
| | 03:12 | We use 0 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.
| | 03:28 | I'll set its Grid.Row attribute to 1.
| | 03:33 | 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:40 | I'll set a margin of 40, 0, 40, 0, and
that means that grid will stretch from 40
| | 03:49 | pixels from the left side to
40 pixels from the right side.
| | 03:53 | Now, my outer grid is separated into rows.
| | 03:56 | My nested grid will be
separated into columns, and
| | 04:00 | to do that, I'll add a
Grid.ColumnDefinitions tag set.
| | 04:05 | That will be placed as the
first element within the grid.
| | 04:09 | And then, just us I did with the
RowDefinitions, I'll create two
| | 04:13 | ColumnDefinition objects.
| | 04:17 | The first ColumnDefinition object
will have a minimum width of 320 pixels.
| | 04:24 | The second ColumnDefinition
initially won't have any attributes.
| | 04:28 | Now, if I leave this dimension attributes
as is, the columns will actually show
| | 04:33 | up as 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
| | 04:44 | a minimum width of 320 pixels, and my
second column to take up two thirds of
| | 04:49 | the available space.
| | 04:50 | And to make that happen, I'll
add width attributes to each one.
| | 04:54 | The first one will be 1, asterisk, and then
the second one will have width of 2, asterisk,
| | 05:00 | and what I'm saying is that the first
column is one third of the available space,
| | 05:05 | and the second column is two
thirds of the available space.
| | 05:08 | If I were to set this at one and
three, it will be 25% and 75%, and so on.
| | 05:15 | I'll leave it at one and two.
| | 05:17 | Now I'm ready to define the two columns.
| | 05:20 | Each column of the grid has to be of
visual component; a view of some sort.
| | 05:26 | The view that I'll use for my
first column will be a list view.
| | 05:31 | Eventually, it's going to show data
that I download from the Internet.
| | 05:34 | I'll create a ListView tag, and I'll
set its Grid.Column attribute to 0.
| | 05:41 | This is just like setting
the rows as I did before.
| | 05:44 | Zero means the first column, one
means the second column, and so on.
| | 05:50 | And I'll set some margins.
| | 05:52 | The ListView will have
a margin of 25, 0, 0, 0.
| | 05:57 | So, it will be inset from the left
side of its parent container by 25 pixels.
| | 06:03 | I'll also set its
horizontal alignment to left,
| | 06:07 | and that means that all of the object
within the ListView will hug the left
| | 06:11 | side of the parent grid.
| | 06:13 | Then I'll type in a greater than
character, and that auto-completes the End
| | 06:17 | tag of the ListView.
| | 06:18 | 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.
| | 06:25 | The second column
will be another StackPanel.
| | 06:28 | It will have a Grid.Column attribute
of 1, so it will be the second column of
| | 06:33 | my outer grid, and it will have a margin of
25, 0, 0, 0, and a horizontal alignment of left.
| | 06:44 | Within the StackPanel,
I'll add two TextBlocks.
| | 06:48 | The first TextBlock will have a font
size of 24 pixels, and it will have a
| | 06:54 | placeholder Text of Title.
| | 06:56 | Eventually, that will be
filled in using a data binding.
| | 06:59 | That is, a dynamic binding
that adds dynamic values.
| | 07:03 | I'll add a second TextBlock, and this
one will have a font size of 14; a little
| | 07:09 | bit smaller than the first one,
at a Text value of Description.
| | 07:13 | This TextBlock is going to contain
longer prose, and I want it to eventually
| | 07:19 | word wrap, so I'm going to add an
explicit width of 500 pixels, and a
| | 07:25 | TextWrapping attribute of Wrap.
| | 07:29 | Now I'll take a look at
the page in Design view,
| | 07:32 | and I'll see that the title and description
are over on the right, and there's a
| | 07:36 | column over on the left as well.
| | 07:39 | I can move the cursor over the
object and see how they're laid out.
| | 07:43 | Be careful not to click too much,
because you might accidentally add rows and
| | 07:48 | columns you really don't want.
| | 07:50 | And now run the application by selecting
Debug > Start Without Debugging, and
| | 07:56 | that will install and run the
application in the operating system.
| | 08:00 | So, that's the begging
of the application layout.
| | 08:02 | We're ready now to go get some data, and
I'll show you now to retrieve data from
| | 08:08 | an Internet-based 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'll 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
| | 00:16 | the artist's biography and an
image; one of their artworks.
| | 00:19 | The user will be able to select an
item, and see the information that they've
| | 00:24 | selected on the right side.
| | 00:26 | All of this data will come from a feed
that's available on a public Web site on
| | 00:31 | the Internet, 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.
| | 00:40 | Then, in the version of Internet
Explorer that's available from the Desktop, I
| | 00:44 | 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
| | 00:58 | Desktop, it looks like this,
| | 01:00 | but if you'd like to see the XML
structure in a more raw format, copy that
| | 01:05 | link to the clipboard. It's
| | 01:07 | 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
| | 01:20 | Explorer from there.
| | 01:23 | I'll paste in that URL, and then, when
prompted, I'll save the XML file to my
| | 01:29 | Downloads folder, and then I'll click
Open, and I see the actual structure of the
| | 01:35 | XML file displayed, with a
little bit of color coding.
| | 01:40 | This is a standard RSS file.
It has a channel element.
| | 01:45 | Under channel, there is a title, description,
and link, and then multiple items.
| | 01:50 | Each item has a title,
link, and description as well.
| | 01:54 | I'll use all these 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
| | 02:06 | app can use, and I'll show you all the
code you will need to do that in the
| | 02:10 | next video.
| | Collapse this transcript |
| Asynchronous programming with Async and Await| 00:00 | Regardless of what programming
language you work in, or environment you're
| | 00:04 | programming for, at some point, if you're
working with data that's retrieved over
| | 00:08 | the Web, you'll need to deal with
the difference between synchronous and
| | 00:11 | asynchronous programming.
| | 00:13 | Synchronous programming means that you
make a request on a single thread of your
| | 00:18 | application, and then that thread
pauses until the response comes back.
| | 00:23 | While you're waiting for the response, the
thread can't do anything else. It's blocked.
| | 00:28 | This sort of programming works fine in
a desktop environment where you have a
| | 00:32 | single user, and where you have plenty
of processing power, and multiple threads
| | 00:37 | to work with, but in a mobile environment
where you have less processing power,
| | 00:42 | asynchronous programming dominates.
| | 00:44 | In asynchronous programming, you make
the request, and then the current thread is
| | 00:48 | freed up to do other things.
| | 00:51 | When the response comes back, you use
some sort of programatic architecture to
| | 00:55 | trigger code that will run only
when the response is available.
| | 00:59 | In Windows 8 store apps, you can only
use asynchronous programming to make
| | 01:04 | requests over the Web, or to create
or read files on the local disc.
| | 01:09 | Remember that Windows Store apps are
built both for conventional computers,
| | 01:13 | where you might have plenty of
processing power, but also for lower power
| | 01:17 | devices, such as tablets.
| | 01:19 | So, to guarantee the best possible
performance, you can only use asynchronous
| | 01:24 | programming, and then while the request
is active, the device will still be able
| | 01:28 | to respond to user gestures, run animations,
and do other things it needs to do.
| | 01:34 | Older versions of Visual Basic
supported asynchronous programming using
| | 01:39 | architecture called a callback method.
| | 01:41 | A callback method is a separate
subroutine or function that you create to
| | 01:46 | respond to
and handle a request.
| | 01:49 | Here is a greatly simplified code
snippet that uses a callback method.
| | 01:54 | Imagine that this code is a part of a
larger class, and there is a variable code
| | 01:59 | StringResult that's declared before
any subroutines. Then, when the first
| | 02:03 | subroutine is called, StartWebRequest,
| | 02:06 | a request object is created, and then
after a little bit of preparation, the
| | 02:10 | request is sent off with
the method BeginGetResponse.
| | 02:14 | That method receives an instance of the
separate class named here AsyncCallback.
| | 02:21 | We're dealing with that subroutine
as an object; a callback method.
| | 02:25 | When the response comes back from
the remote server, the code within the
| | 02:29 | callback method is executed.
| | 02:31 | Again, I've simplified this enormously,
and the amount of code we have to write
| | 02:36 | using callback methods can be
fairly complex, and hard to maintain.
| | 02:40 | In Windows 8 store apps, and in .NET
Framework 4.5, you can use a newer style of
| | 02:47 | programming that uses two
words called Async, and await.
| | 02:52 | Now, again, this architecture is only
available starting in Visual Basic 11; the
| | 02:57 | version of the language
that's used in Windows 8.
| | 03:00 | Here is the code I now need to write to
make an asynchronous request over the Web.
| | 03:05 | I've created a function that I've named
GetFeed, and it returns an instance of an
| | 03:10 | object called a task.
| | 03:12 | A task is a wrapper around any data
type that you need to return from an
| | 03:17 | asynchronous method.
| | 03:19 | I'm saying that my task contains a
string, and then I've marked this method
| | 03:24 | GetFeed with the keyword Async.
| | 03:27 | Typically, the Async keyword goes after the
access modifier; in this case, the word private.
| | 03:33 | Now, within the method, I can make an
asynchronous request, and I'm doing that
| | 03:38 | using a class called HttpClient.
| | 03:40 | I create a variable indicating where my
data is, then I create my client object,
| | 03:46 | and then I call the client objects
GetStringAsync method, and I place the keyword
| | 03:51 | Await before the call to the method.
| | 03:54 | The Await keyword means wait for the
response; don't do anything until the
| | 03:59 | response comes back. But more importantly,
it frees the current thread to go do
| | 04:05 | other stuff while it waits.
| | 04:07 | When the response comes back from the
remote server, this thread picks up and
| | 04:11 | continues executing, and you can add as
much code after the call as you need to.
| | 04:16 | In this example, I'm just
returning the string value as a response.
| | 04:21 | So, where you might have needed a
dozen or more lines of code using callback
| | 04:25 | methods, using Async, and await, you can
enormously simplify your code, making it
| | 04:31 | more readable, and easier to maintain.
| | 04:34 | So, in the following videos, I'll
show you how to use these new features of
| | 04:39 | Visual Basic to make a remote request
over the Web to retrieve an RSS feed,
| | 04:45 | parse it, and provide that
data to a Window Store app.
| | Collapse this transcript |
| Retrieving, processing, and RSS data feeds| 00:00 | In a previous video, I described where
the data for this application would come
| | 00:04 | from; an RSS Feed on a public Web site.
| | 00:08 | I also described conceptually how asynchronous
programming is done with Visual Basic.
| | 00:13 | Now we'll put the two things together.
| | 00:15 | I'm working in a version of
my project called RetrieveData.
| | 00:19 | In this version of the project,
I've added three new classes.
| | 00:22 | They're named ArtistItem, ArtistData,
and ArtistDataSource. Let's look at
| | 00:28 | them one at a time.
| | 00:29 | I'll start with ArtistItem.vb.
| | 00:32 | In my application, each artist is
going to require four data elements;
| | 00:37 | the artist name, a picture of the artist, a
picture of their artwork, and their biography.
| | 00:43 | Each of these four values will be a
string, and I've modeled this data entity
| | 00:49 | using this class ArtistItem.
| | 00:51 | Each property is set up as a public
property, with an explicit getter, and setter.
| | 00:56 | The getter is returning a private
variable called ArtistName, and the setter
| | 01:00 | is setting that value.
| | 01:02 | I've modeled all four
properties in exactly the same way.
| | 01:06 | Next, let's take a look
at the class ArtistData.
| | 01:09 | This is going to be a higher level class
that contains a list of artist objects,
| | 01:15 | but also has a couple of values
that are for the entire application.
| | 01:19 | Just as with ArtistItem, there are a
couple of public properties with an
| | 01:23 | explicit getter, and setter;
the title, and the subtitle.
| | 01:28 | Then down towards the bottom, there
is a list of the ArtistItem class.
| | 01:33 | The list class in Visual
Basic is an ordered collection.
| | 01:37 | It keeps data in the same order
in which it's put into the data.
| | 01:41 | The items property is a list of
artist items, and once again, it has an
| | 01:45 | explicit getter, and setter.
| | 01:47 | The explicit getter is particularly
important for all of these classes.
| | 01:52 | It's what allows you to bind data to a
visual interface to find with XAML code.
| | 01:57 | We'll get to that binding architecture
later on in the course, but for now, I'll
| | 02:01 | just say that when you're modeling
your data, you want to use these explicit
| | 02:05 | getters, and setters,
and private properties.
| | 02:08 | Now let's take a look
at ArtistDataSource.
| | 02:11 | The job of the ArtistDataSource class
is to actually make the request, and
| | 02:15 | process the response, and then to take
the raw RSS feed, and turn it into the data
| | 02:21 | in the form we need it.
| | 02:22 | Let's look at the RSS DataSource
one more time.
| | 02:25 | The channel element has properties
called title, description, and link, and
| | 02:30 | then there are multiple item elements, each of
which also has a title, link, and description.
| | 02:35 | We're going to take the title, and
description, and turn those into the
| | 02:39 | application's title, and subtitle, and
then I'll take each item element, and turn
| | 02:44 | its data into the artist.
| | 02:46 | All of that data taken together will
show up as an instance of the ArtistData
| | 02:51 | class, and will be exposed as a public
property of the data source simply called
| | 02:56 | data, once again,
with a getter, and a setter.
| | 03:00 | Now let's talk through how the
data is requested, and then processed.
| | 03:03 | There is a variable called BaseURIString,
and it points to the root URI of my RSS feed.
| | 03:11 | Then, within the GetFeedAsync method,
which is marked as asynchronous with the
| | 03:15 | Async keyword, I'm declaring a
feedURIString that appends the name of the
| | 03:21 | file I'm retrieving,
| | 03:22 | artists.xml, and then wraps
that inside the URI object.
| | 03:28 | Then the private version of the data
object is instantiated; it starts off empty.
| | 03:35 | Now, within a Try-Catch block,
I'm creating an instance of a class
| | 03:38 | called SyndicationClient.
| | 03:41 | SyndicationClient is included with the
WinRT SDK, and it knows how to download
| | 03:47 | and parse RSS and atom based XML feeds.
| | 03:51 | I instantiate the client, and then I call
its RetrieveFeedAsync method, passing in
| | 03:57 | the URI object that knows where
the RSS feed is, and this is where the
| | 04:02 | asynchronous request happens.
| | 04:05 | The keyword Await means make the request,
and wait for the response, and when the
| | 04:11 | response comes back, expose
it as this variable: feed.
| | 04:15 | The syndication feed class has
properties of title and subtitle.
| | 04:20 | Their values are filled in automatically
by the SyndicationClient from these
| | 04:25 | elements: title, and description.
| | 04:28 | Then we're looping through a
list of objects called items.
| | 04:32 | That's a member of SyndicationFeed, and
each item in that collection will show up
| | 04:37 | as an instance of SyndicationItem.
| | 04:39 | Just as with the SyndicationFeed, the SyndicationItem
translates the elements from the RSS feed.
| | 04:46 | The title becomes the title, the
description becomes the summary, and then any
| | 04:52 | links show up as an ordered collection,
where you can retrieve the items one at a time.
| | 04:57 | In my RSS feed, each item only has one
link, and so it will be referenced as Item(0).
| | 05:03 | So, for each item that's retrieved, I
create an instance of the ArtistItem class,
| | 05:08 | I fill in its ArtistName, and Biography
from the title, and summary, and then I set
| | 05:13 | the ArtistPhoto, and ArtworkPhotos by
using the link from the RSS feed, and
| | 05:19 | attaching to that names of folders that
are on the public Web site, that contain
| | 05:24 | the actual graphics I'll be using.
| | 05:26 | Finally, at the end of the loop, I add
the artist object to the list of items.
| | 05:31 | When the loop is done, the data is
ready to use by the rest of the application.
| | 05:36 | So, now I'm going to add a
very small amount of code.
| | 05:39 | This code will be executed as the
application starts up, and it'll go into this
| | 05:44 | file: MainPage.xaml.vb; the
code-behind file for my main page.
| | 05:50 | I'll open the file, and then place
the cursor after the existing sub I'm
| | 05:54 | navigated to, and I'll
create another subroutine.
| | 05:59 | I'll start this off
with private, and then async.
| | 06:03 | I'm going to be doing asynchronous operations
in this method, so I have to mark it this way.
| | 06:08 | Then I'll use the keyword sub, and I'll
give this method a name of RetrieveData.
| | 06:15 | When I press Enter, the required
keywords End Sub are added for me.
| | 06:20 | Within the subroutine, I'll create a new
variable called DataSource, and I'll set
| | 06:25 | it's data type as ArtistDataSource, and
that's one of the classes that I included
| | 06:30 | in this version of the project, and I
will instantiate that with the class'
| | 06:35 | automatic constructor method.
| | 06:38 | Now I'm ready
to do the asynchronous request.
| | 06:41 | I'll start with Await,
then DataSource.GetFeedAsync.
| | 06:48 | At this point, the request goes off to
the remote Web site, and this thread is
| | 06:53 | released until the data comes back.
| | 06:55 | When the data is returned as the feed
response, I can then get to the data
| | 07:00 | through the data source object.
| | 07:02 | For the moment, I'm just going to
do a little bit of debug output.
| | 07:06 | I'll use Debug.WriteLine, and I'll
first output the title, which I'll get from
| | 07:11 | DataSource.Data.Title.
| | 07:14 | Then I'll copy and paste that code, and
for the second one, I'll output subtitle.
| | 07:21 | Those are the two string-based properties of
the ArtistDataSource class' data object.
| | 07:27 | Next I'll loop through the
list of items using this code.
| | 07:31 | For Each artist As ArtistItem -- I'm
declaring a local variable named artist; data
| | 07:36 | type is ArtistItem --
In DataSource.Data.Items.
| | 07:41 | So now any code within the For Each loop
will be executed once for each artist I
| | 07:46 | retrieved, and I'll keep it simple;
| | 07:48 | I'll once again use Debug.WriteLine,
and I'll output artist.ArtistName,
| | 07:55 | and that's all I need.
| | 07:57 | The only two critical
functional lines of code are right here.
| | 08:01 | Everything else is debug output.
| | 08:03 | Finally, to execute this code,
I'll go to the OnNavigatedTo method.
| | 08:08 | This method will be executed automatically
as the page comes to the screen, and
| | 08:13 | I'll call the new method RetrieveData.
| | 08:16 | I'll save those changes,
and now I'm ready to test.
| | 08:19 | I'll run the application in
debug mode by pressing F5.
| | 08:25 | When the page comes to the screen,
I'll return to Visual Studio, and then I'll
| | 08:29 | look at the Output panel.
| | 08:31 | If it's not visible, press Alt+2 to
bring it to the screen, and you'll see that
| | 08:35 | the data has been successfully retrieved.
| | 08:38 | I'm outputting the title and subtitle
here, and then the list of artist names.
| | 08:43 | So if you've gotten that far, then you
know you're successfully retrieving data
| | 08:47 | asynchronously from the RSS feed on the
public Web site, and you're ready to go on
| | 08:52 | to the next step:
displaying this data in a list.
| | Collapse this transcript |
| Displaying a list of data with XAML and bindings| 00:00 | In previous videos, I created a two
column display, and then added code to
| | 00:05 | retrieve data at run time
from a Web site.
| | 00:08 | I'm working in a version of the project,
DisplayList, that has all of that code in place.
| | 00:13 | The code to retrieve the data is in the
code-behind the file; MainPage.xaml.vb.
| | 00:19 | I'm going to start in this file. The
only two lines of code in the RetrieveData
| | 00:23 | Sub routine that are doing useful work
are the one that create the DataSource
| | 00:28 | object, and then call
the GetFeedAsync method.
| | 00:31 | I'm going to comment out all the rest
of the code. That's just debug output.
| | 00:36 | I'll select those lines of
code, then go to the menu, and chose
| | 00:39 | Edit > Advanced > Comment Selection.
| | 00:43 | The next step is to make the data
accessible to the rest of the page, and I'll do
| | 00:48 | that using a property of the
page called the data context.
| | 00:52 | The data context is how you'll bind
data from the data source object to the
| | 00:57 | visual controls that the user sees.
| | 01:00 | I'll place the cursor after the call
to the GetFeedAsync method, and then I'll
| | 01:04 | set the data context using this code:
Me.DataContext = DataSource.Data.
| | 01:13 | Remember that the data object is an
instance of this class: ArtistData.
| | 01:18 | It has a title, and a
subtitle, and a list of artists.
| | 01:24 | I'll go back to the code-behind file, and
save those changes. Then go back to the
| | 01:28 | visual file, MainPage.xaml,
and look at it in XAML view.
| | 01:33 | Let's review the code
that's already in place.
| | 01:36 | Within the outer grid,
there are two rows;
| | 01:39 | one with a height of a 180 pixels,
and one that takes up the rest of
| | 01:43 | the available space.
| | 01:44 | Then there is a stack panel, and
it contains two TextBlock controls.
| | 01:49 | Right now these TextBlock controls are outputting
static text; PageHeader, and PageSubheader.
| | 01:55 | I'm going to replace those
values with binding expressions.
| | 01:59 | Remember that the page has a data
context that's already pointing to my data.
| | 02:04 | So, for a simple value that's a property
of that data, all I need to do is refer
| | 02:09 | to the property by its name
using this sort of code.
| | 02:13 | I'll delete the static text, and then put
in a pair of braces, and I'll start with
| | 02:18 | the keyword Binding, and then I'll
type in the name of the property.
| | 02:22 | You won't get code help.
| | 02:24 | That is, it won't
autocomplete for you,
| | 02:26 | so you just need to make sure
that you're spelling it correctly.
| | 02:30 | I recommend frequently going back to
your data object code, and checking the name
| | 02:34 | of the public property, and in fact, to
make sure you're getting it right, you
| | 02:38 | can select and copy it, and then
you can paste it into the XAML code.
| | 02:43 | That's what I'll do with the SubTitle.
| | 02:46 | I'll go to the second TextBlock, and I'll get
rid of the static text in the Text property.
| | 02:52 | Once again, I'll create a Binding
expression, and now I'll paste in the name of
| | 02:56 | the property, SubTitle.
| | 02:58 | Before I go any further, I'll
save, and test that much code.
| | 03:01 | Remember that these values
are coming from the RSS feed,
| | 03:05 | so if they show up correctly when I
run the application, which I'll do without
| | 03:10 | debugging, then I know that the data
is coming through correctly. And there is
| | 03:14 | the result, Roux Academy 2012 Art
Conference and Featured Artists are values
| | 03:19 | coming from the RSS feed,
so I'm in pretty good shape.
| | 03:23 | I'll go back to Visual Studio, and
now I'll work on the artist list.
| | 03:28 | Scrolling down a little bit further,
within the outer grid, there is a nested grid
| | 03:33 | which is serving as the
second row of the outer grid.
| | 03:36 | This grid is separated into two columns.
| | 03:40 | The first has a minimum
width of 320 pixels.
| | 03:43 | That's a very specific value, and the
reason I'm using that is because when an
| | 03:48 | application is snapped; that is, when
it's laying side by side with another
| | 03:53 | application, and it's taking up the smaller
column, it will always be 320 pixels wide.
| | 03:59 | So, my first column has a minimum width
of 320, and my second pixel is taking up
| | 04:05 | the remaining space, but I'm using
ratio sizing, or star sizing to say that if
| | 04:11 | there us enough space, the first
column should be one third, and the second
| | 04:15 | column should be
two thirds of the space.
| | 04:17 | Within that grid, I have a ListView,
and that's making up the first column, and
| | 04:23 | that's the code that I'm going to
fill out to display the list of artists.
| | 04:27 | First I'm going to
assign this ListView a name.
| | 04:30 | I'll assign x:Name, and
I'll call it ItemListView.
| | 04:34 | I'm going to need that identifier later
on when I bind values from the list to
| | 04:39 | the detail view on the right.
| | 04:42 | Next, I'll pass data into the
item ListView, once again, using a
| | 04:46 | Binding expression.
| | 04:48 | I'll place the cursor at the end of the
begin tag, and make a little bit of extra
| | 04:52 | space, and then I'll set a property
called ItemsSource, and I'll use a Binding
| | 04:58 | expression, and I'll bind it to the
Items property of my data object.
| | 05:04 | Once again, going back to the ArtistData
class, I'm using the named property,
| | 05:09 | which is exposed here
as a Public Property.
| | 05:12 | That's the list of artist objects.
| | 05:14 | So, now I'll go back to the ListView, and
the next step is to define how each row
| | 05:20 | of the list is going to look.
| | 05:22 | I'll make some space between the
beginning and ending tags, and I'll add a
| | 05:26 | property called ListView.ItemTemplate.
| | 05:33 | Initially, put that in as simply
a beginning and an ending tag.
| | 05:39 | I'll close up some of that extra white
space, and then, within the ItemTemplate,
| | 05:44 | I'll create an instance of an
object called a DataTemplate.
| | 05:49 | Once again, that's defined
as a pair of tags.
| | 05:52 | Now, within the DataTemplate, you
can add any visual controls you want.
| | 05:57 | I'm going to use an image, and a textblock,
and I'm going to lay them out side by side.
| | 06:03 | To do that, I'll use a StackPanel,
with an Orientation of Horizontal.
| | 06:09 | Then, within the StackPanel,
I'll create an Image.
| | 06:13 | Initially, I'll just put in the tag
with a closing tag syntax, and a TextBlock,
| | 06:19 | and I'll do the same thing here.
| | 06:21 | Now I'll come back to the Image.
| | 06:23 | Remember that the ListView has a Binding
to the Items property of the data object.
| | 06:29 | As a result, each instance of my
DataTemplate will have a binding to one item
| | 06:34 | in the Items object, and I can bind to
the individual properties of that item,
| | 06:39 | such as the ArtistPhoto, and the
ArtistName, and that's what I'll do next.
| | 06:44 | I'll go to the Image tag, and
I'll set its Source attribute.
| | 06:49 | I'll use a Binding expression,
and I'll bind to ArtistPhoto.
| | 06:52 | Let's take a look
at the ArtistItem.vb file.
| | 06:56 | ArtistPhoto is a public property of
that file; that's what I'm binding to.
| | 07:01 | And this getter method is what will be
called each time the binding is executed.
| | 07:06 | Going back to MainPage.xaml, I'll set some
dimensions, with a Width of 100, and a Height of 100.
| | 07:15 | I'll open up this window to full
screen by pressing Alt+Shift+Enter, so I can
| | 07:19 | see all of the code,
| | 07:21 | and then I'll add code to the TextBlock.
| | 07:24 | Just as with the Image tag, I'll use a
Binding, this time to the Text property,
| | 07:28 | and I'll set it to
a Binding of ArtistName.
| | 07:35 | I'll set an explicit FontSize of
18 pixels, and a Margin of 5,0,0,0.
| | 07:43 | That will create a 5 pixel horizontal
gap between the image and the text block.
| | 07:49 | So, now let's save, and
run the application again.
| | 07:55 | When the application opens, the request
for the remote date is sent out, and when
| | 08:00 | the data comes back, it's transformed
by my code in the DataSource class into
| | 08:05 | something I can bind to.
| | 08:07 | The XAML file has the Binding expressions,
and this results in displaying the
| | 08:12 | list of artists that you see here.
| | 08:14 | Once you have the list, you can scroll
up and down, you can click to select
| | 08:19 | individual artists, and eventually you'll
be able to do some more with this data,
| | 08:24 | including displaying the details of the
selected data on the right, and sharing
| | 08:28 | that data with other
applications installed in Windows 8.
| | Collapse this transcript |
| Displaying detailed data with bindings| 00:00 | So far, I've described how to retrieve
data, and then display that data in a
| | 00:05 | list using bindings.
| | 00:07 | Now I'll show you how to use bindings to
move data from one visual control to another.
| | 00:12 | In the current version of my
application, in this version of the project,
| | 00:16 | DisplayDetail, when I run the application,
it successfully displays the data in a list.
| | 00:22 | Now I'd like to set things up so that
when the user clicks on one of the items
| | 00:27 | in the list, the details of the data
from that item are shared with visual
| | 00:32 | controls on the right side
to create a detailed display.
| | 00:36 | So, I'll go back to Visual Studio, and
I'll look at MainPage.xaml in XAML view.
| | 00:44 | I'll scroll down toward
the bottom of the code.
| | 00:46 | Previously, when I created my
ListView control, I assigned it a name of
| | 00:52 | ItemListView, and I'm going to use
that identifier to get the data from the
| | 00:57 | currently selected item in the list, and pass
it to the visual controls in the right column.
| | 01:03 | My right column consists currently of a
StackPanel, with a default orientation
| | 01:08 | of vertical, and two TextBlock
controls nested within it.
| | 01:13 | I'm going to set the StackPanel's data
context, to get the data from the ItemListView.
| | 01:19 | I've already used the DataContext
property once at the page level, but you can
| | 01:24 | assign a data context to any visual
control; not just the entire page,
| | 01:30 | and if you assign it at the visual
control level, it'll override the page.
| | 01:35 | So, I'll place my cursor after the
name of the tag, StackPanel, and I'll make
| | 01:39 | a little bit of extra space, and then I'll
set a DataContext attribute using a Binding.
| | 01:45 | This binding will be a little bit more
complex than the ones I've used previously.
| | 01:49 | For simple bindings, where you're binding,
say, to a simple string, you just need
| | 01:54 | to name the property you
want from a data object.
| | 01:57 | But when you're getting data from
another visual control, you need to say
| | 02:01 | both which control you want, and which property
of the control you want to get the data from.
| | 02:07 | You do this with two values
of the binding expression.
| | 02:11 | The first one is ElementName, and
you set that to the name of the object
| | 02:15 | you want to bind to.
| | 02:17 | For this one, it will be ItemListView.
| | 02:20 | Then after a comma,
| | 02:21 | put in a path, and set the value of
the path to the property SelectedItem.
| | 02:28 | The SelectedItem property of the
ListView control is filled in automatically
| | 02:33 | each time the user clicks on an item.
| | 02:36 | Whenever it changes, that will
trigger this binding to update.
| | 02:40 | It'll get the data, and pass it
to its nested visual controls.
| | 02:46 | So now, within the visual controls,
the two TextBlocks, I can use Binding
| | 02:51 | expressions to set their Text values.
| | 02:53 | I'll set the Text property of the first
TextBlock using a Binding, and I'll set
| | 03:00 | it to ArtistName, just like I did
with the TextBlock in the item itself.
| | 03:06 | Then I'll go to the second one, and
I'll set a Binding again, and this time I'll
| | 03:11 | use the property Biography.
| | 03:14 | Remember again that I'm getting these
property names from the ArtistItem class.
| | 03:19 | The list is showing a list of
ArtistItems, and each ArtistItems has the
| | 03:24 | properties ArtistName,
ArtistPhoto, ArtworkPhoto, and Biography.
| | 03:31 | So, I'll test just that much
code and see how I'm doing.
| | 03:37 | I'll run the application, and when it
first appears, it shows the list of artists.
| | 03:42 | Then I'll click on one of the
artists, and I see the data is successfully
| | 03:47 | transferred from the item in the
list to the detail objects on the right,
| | 03:52 | and each time I click on an item, I'm
seeing the data on the right update.
| | 03:57 | Now, in addition to the two textblocks,
I'd also like to show an image of one
| | 04:02 | of the artist's artworks, and I already have
that information in my data class; the ArtistItem.
| | 04:08 | So, I'll go back to Visual Studio, and
I'll open up my code to full screen, so
| | 04:13 | I can see all of it.
| | 04:15 | Then I'll add some space under this second
TextBlock, and I'll create an Image control.
| | 04:22 | I'll set its Source attribute to a Binding,
and I'll use the property name ArtworkPhoto.
| | 04:30 | I'll set its Height to 400 pixels, but
I'm not going to set its Width. I'm going
| | 04:35 | to allow that to adjust automatically.
| | 04:38 | If I set an explicit Height and Width
on this Image control, it will result
| | 04:42 | in skewing at least some of the images,
because they aren't all the same dimensions.
| | 04:47 | Then I'll set a Margin of 20,20,0,0.
That will result in placing the image 20
| | 04:56 | pixels from the left side of the
column, and 20 pixels from the bottom of the
| | 05:01 | previous text block.
| | 05:03 | I'll save my changes, and
run the application again.
| | 05:07 | I'll click on an item, and I see both the
artist's name, and biography, but also an
| | 05:13 | image of one of their artworks.
| | 05:15 | And each time I click now, I'm
seeing the data from that selected artist.
| | 05:20 | So that's a look at some of the many
ways that you can use bindings to get data
| | 05:25 | from a data object that's set to
the data context of a visual control.
| | 05:30 | Bindings make it incredibly simple to
display data in whatever form you need to
| | 05:35 | in your Windows 8 store application.
| | Collapse this transcript |
|
|
3. Integrating Windows 8 FeaturesAdding an app bar| 00:00 | One of the defining features of a
Windows Store app is the placement of
| | 00:04 | commands in the app bar.
| | 00:06 | I'm working in the Pictures app that's
included with Windows 8, and I've opened
| | 00:10 | up a catalog of photos.
| | 00:12 | I'm going to right-click on one of the
photos, and that results in bringing up an
| | 00:17 | app bar that has commands that
apply to that selected photo.
| | 00:21 | In this application, I can then select
other photos, and then, for example, I
| | 00:26 | might select Slide show, and that would open
up a slide show of just the selected photos.
| | 00:32 | I can right-click again, and that brings
up other commands, or right-click to
| | 00:37 | make the app bar go away.
| | 00:39 | If I were working on a touch-based device,
such as a tablet, I could bring up the
| | 00:44 | app bar by swiping in from the top
or the bottom of the application.
| | 00:49 | I'm going to describe how to create a
very simple app bar in the application
| | 00:53 | that I've been building.
| | 00:55 | I'm working in a version of my
project named AppBar from Chapter 03 of
| | 00:59 | the Exercise Files.
| | 01:01 | In my current application, I'm downloading
data from an RSS feed on a public
| | 01:05 | Web site, displaying it in a list, and
allowing the user to select individual
| | 01:11 | artists to display their details.
| | 01:14 | Now I'm going to add an app bar to the
application that has a single command.
| | 01:20 | I'll go back to Visual Studio, and
look at MainPage.xaml in XAML view.
| | 01:26 | An app bar can be placed either at the
top or at the bottom of the screen, and you
| | 01:30 | control it as the developer.
| | 01:33 | I'll scroll down to the bottom of the
code, and place the cursor after the Grid,
| | 01:37 | and I'll create a new
property called Page.BottomAppBar.
| | 01:45 | This is how you control
where the app bar appears.
| | 01:47 | On a touch device, the user can swipe
from the top or the bottom, but that has
| | 01:52 | nothing to do with
the position of the app bar.
| | 01:54 | The only thing that determines it is whether
you use tags of BottomAppBar or TopAppBar.
| | 02:00 | Within the BottomAppBar tags, I'll
create an AppBar tag set, and I'll give the
| | 02:05 | AppBar object a
name attribute of MyAppBar.
| | 02:10 | Now, within the AppBar, I can
add as many buttons as I like.
| | 02:15 | App bar buttons have a very specific
appearance, and I'm going to create a button
| | 02:20 | that has a Refresh icon.
| | 02:23 | In order to create these icons, you
need implement styles, and these styles are
| | 02:29 | predefined in the
StandardStyles.xaml file.
| | 02:32 | But in a brand new application,
the styles are commented out.
| | 02:36 | This reduces the size of the application by
not including graphics that you're not using.
| | 02:41 | But if you want to include one of
these styles, you have to uncomment it.
| | 02:46 | So, I'll go to StandardStyles.xaml, and
I'll press Ctrl+F to search, and I'll
| | 02:51 | search for RefreshAppBar, and that
takes me to the RefreshAppBarButtonStyle.
| | 02:58 | I'll activate this style
by adding comment tokens.
| | 03:02 | Above the style, I'll close the previous
comment, and then after the style,
| | 03:07 | I'll start a new comment, and now
RefreshAppBarButtonStyle is available to my application.
| | 03:15 | When I use this button, it will show an
icon, and the icon is defined by this code.
| | 03:21 | If you scroll around a bit in the
StandardStyles.xaml file you'll find
| | 03:25 | predefined styles for a lot
of common commands.
| | 03:29 | Here I'm seeing commands for Mail, Search,
Help, and Upload, and there are many, many others.
| | 03:36 | I'll save those changes, and return to
MainPage.xaml, and within the AppBar, I'll
| | 03:41 | create a Button, and then I'll set
its Style attribute, and I'll use a
| | 03:46 | StaticResource expression.
| | 03:49 | I'll start with a pair of braces then
the keyword StaticResource and then the
| | 03:53 | name of the style RefreshAppBarButtonSyle.
| | 04:00 | I'll finish up the Button tag, save my
changes, and run the application, and when
| | 04:06 | it comes to the screen, I'll right-click
in the empty area over on the right, and
| | 04:11 | I'll see the app bar appear from the
bottom showing the Refresh button.
| | 04:16 | The button doesn't do anything yet.
| | 04:18 | In order to make the button do something,
I need to add a click event handler,
| | 04:22 | just like any other button.
| | 04:25 | So, I'll go back to the code, and I'll
select the Button tag name, and then I'll go
| | 04:30 | over to the Properties
panel on the right.
| | 04:32 | With the button selected, I can affect the
properties and event definitions for the control.
| | 04:37 | I'll click on the event handler icon;
that's the little square button with
| | 04:42 | the lightning bolt.
| | 04:43 | Then I'll double-click into the
text box next to the Click event.
| | 04:48 | That generates a new click event handler;
a subroutine called Button_Click_1,
| | 04:55 | and all I'm going to do in this code is recall
the code that's retrieving the data from the Web.
| | 05:02 | I'm going to call the
method RetrieveData.
| | 05:08 | I'll save my changes;
| | 05:09 | I'll run the application again.
| | 05:12 | When the application opens, it automatically
downloads the data from the Web, and
| | 05:17 | I can select items from the list, but
now I'll right-click in the detail area,
| | 05:23 | and when I click Refresh, the data is
re-retrieved, the list refilled with data,
| | 05:28 | and the details are cleared on the right,
| | 05:31 | And that's the visual
indicator that my refresh has worked.
| | 05:35 | I encourage you to play with the app bar
architecture adding your own buttons, and
| | 05:40 | looking at examples from the Windows 8
store apps examples and documentation.
| | 05:45 | There are guidelines in the documentation
describing how you should arrange your
| | 05:50 | buttons; when you have multiple buttons,
which buttons should hug the right side,
| | 05:54 | which buttons should be
on the left, and so on.
| | 05:56 | Buttons in app bars are essentially a
replacement for many of the functions that
| | 06:01 | might have gone into menus
in traditional Windows apps.
| | 06:05 | Learning how to create your own
app bars can add enormous functionality to
| | 06:09 | your Windows Store app.
| | Collapse this transcript |
| Using the sharing contract| 00:00 | Many features that you might have
exposed through menus in traditional Windows
| | 00:04 | applications are instead handled
through the charms in Window Store apps.
| | 00:10 | The charms appear when you move the
mouse cursor to the top left or top right
| | 00:15 | corner if you're using a mouse, or when you
swipe in from the right on a touch device.
| | 00:20 | There are five charms:
| | 00:22 | Search, Share, Start,
Devices, and Settings.
| | 00:26 | In this video, I'm going to describe
how to intergrate with the Share charm;
| | 00:31 | that is, how to share data
from an application.
| | 00:34 | I've opened up the photos app that's
included with Windows 8, and I'm going to
| | 00:38 | right-click on one of the photos, and
then move the cursor to the top right
| | 00:43 | corner, and choose Share.
| | 00:45 | When I do this, this sends an event to
the application, and the application then
| | 00:51 | tries to share data to whatever
other applications can handle it.
| | 00:55 | In the case of the photos app, it's
going to share the actual photo, and Windows
| | 01:00 | 8 shows a list of all applications
that have registered to say that they can
| | 01:04 | handle this kind of sharing.
| | 01:06 | If I click on the Mail application,
that generates a new e-mail, and attaches
| | 01:11 | the selected photo.
| | 01:12 | So, now I'm going to describe how to use
Visual Basic code to do this sort of sharing.
| | 01:18 | I'm going to keep it simple.
| | 01:19 | I'm not going to do something complex,
like sharing a photo, but I am going to
| | 01:23 | show you all the code you
need to share simple text.
| | 01:27 | I'm working in a version of the
project called SharingContract, and I'll open
| | 01:32 | the code-behind file for my
main page; that's Mainpage.xaml.vb.
| | 01:38 | The first step is to create a field
in your class that's an instance of the
| | 01:43 | class data transfer manager.
| | 01:46 | I'll place the cursor after the class
declaration, and I'll create a new field,
| | 01:50 | which I'll declare with Dim, and
I'll add the keyword WithEvents.
| | 01:55 | This tells the compiler that this
object will be generating events that I can
| | 02:00 | listen to, and handle.
| | 02:02 | I'll name the object transferManager,
and I'll set its data type to
| | 02:09 | DataTransferManager.
| | 02:11 | Notice that I'm not getting
autocomplete help.
| | 02:14 | That's because this class is a
member of an assembly that is not
| | 02:19 | automatically imported.
| | 02:20 | To add the required import statement,
I'll move the cursor off the class name,
| | 02:25 | then I'll move the cursor over the
little icon that appears, and I see the
| | 02:29 | message, Type DataTransferManager
is not defined.
| | 02:33 | Then I'll move the cursor around a
little bit until I see this red icon with
| | 02:38 | the X. I'll open the list of available
options, and I'll select the first one,
| | 02:43 | ImportWindows.ApplicationModel.DataTransfer;
that's the name of the assembly
| | 02:49 | that defines this class.
| | 02:51 | By selecting the item, I've added an
import statement to the top of the code,
| | 02:56 | and now I can use the DataTransferManager
class, and any other classes that are
| | 03:01 | members of that assembly.
| | 03:03 | Now, I've only defined the object, but
I haven't instantiated it yet, and I'm
| | 03:07 | going to do that work in the OnNavigatedTo
method that's called automatically
| | 03:13 | as the main page comes to the screen.
| | 03:15 | I'll place the cursor within that method
before the call to the RetrieveData method.
| | 03:20 | Here, I will instantiate the object.
| | 03:23 | I'll use this code: Me.transferManager =
DataTransferManager.GetforCurrentView.
| | 03:33 | That means, give me the DataTransferManager
object that's associated with the current page.
| | 03:40 | I'll move the cursor off the
line, and all the errors go away.
| | 03:44 | Now, the next step is to create a method
that will be called whenever the Windows
| | 03:48 | 8 operating system tells the application,
I want to share something from you.
| | 03:53 | I'm going to create the method first,
then I'll come back here and register it.
| | 03:58 | I'll place the cursor
after the current sub routine.
| | 04:01 | I'll scroll down a bit, and then I'll go
into full screen mode, because I'm about
| | 04:05 | to type quite a bit of code.
| | 04:07 | I'll declare a new Private Sub routine.
| | 04:10 | I'll name it OnDataRequested, and
it's going to received two arguments;
| | 04:15 | a sender argument, which will be an
instance of the DataTransferManager method,
| | 04:22 | and then an EventArguments object.
This EventArguments object will be used to
| | 04:27 | communicate with the sharing
contract, and I'll set it's data type as
| | 04:31 | DataRequestedEventArgs.
| | 04:35 | When I press Enter, the
End Sub keywords are added.
| | 04:39 | The event arguments have a
property called the DataRequest.
| | 04:43 | The DataRequest object is how you'll attach
data to send back to the sharing contract.
| | 04:50 | So, I'll create a new variable, which
I'll name request, and I'll set its data
| | 04:55 | type as DataRequest, and I'll
get its value from e.Request.
| | 05:02 | Now, in my application, I want to
share data from the currently selected
| | 05:06 | artist, and I can get information about that
artist from the selected item of the list view.
| | 05:12 | So, I'll create a
new variable called artist,
| | 05:15 | I'll set its data type to ArtistItem,
and I'll get its value from ItemListView --
| | 05:21 | that's the list view that I
declared in XAML code -- .SelectedItem.
| | 05:27 | So, now I have data that I can share.
| | 05:29 | Now I need a little bit
of conditional code.
| | 05:32 | If the user selected an artist from
the list, then my artist object will
| | 05:36 | have data to share,
| | 05:37 | but if they didn't, then the artist object
will be null, which in Visual Basic we
| | 05:42 | refer to as nothing.
| | 05:44 | So, I'll add an If clause, and I'll say,
If artist Is Nothing Then, and then
| | 05:52 | I'll send a message back to the sharing
contract that tells it to display an error message.
| | 05:59 | You'll do this using the request
objects method, FailWithDisplayText.
| | 06:04 | So the code will be request.FailWithDisplayText,
and then I'll pass in a static message,
| | 06:11 | Select an artist to share.
| | 06:15 | So, I'm not just telling the user
they've done something wrong; I'm telling
| | 06:19 | them how to correct it.
| | 06:20 | Then I'll add an Else clause, and here
is where I can actually share some data.
| | 06:26 | The request object has a property called
Data, and it has an object called Properties.
| | 06:31 | Within the properties, you can
set a title, and a description.
| | 06:35 | I'll start with the title using this code:
request.Data.Properties.Title, and I'll
| | 06:43 | set that value to the ArtistsName
for the currently selected artist.
| | 06:47 | Then I'll set the description with
request.Data.Properties.Description, and I'll
| | 06:55 | set that value to a static
string of Featured Artist.
| | 06:59 | Finally, I'll call a method
called SetText of the data object.
| | 07:04 | I'll use request.Data.SetText.
| | 07:09 | Notice that there are
a bunch of Set methods.
| | 07:12 | This is how you can supply a bitmap --
that is, a graphic -- complex data, a data
| | 07:17 | provider, and a lot of other formats.
Again, my goal is to keep this simple,
| | 07:23 | so I'm going to use SetText, and
I'll pass in the artist's biography.
| | 07:29 | So, that's my completed
event handler on data requested.
| | 07:33 | Now I have to register the event handler
method with the data transfer manager,
| | 07:38 | so that when the event data requested happens,
I tell it where to get the data from.
| | 07:44 | I'll come back to the method OnNavigatedTo,
and place the cursor after the
| | 07:49 | instantiation of the transferManager,
and I'll add this bit of code:
| | 07:54 | I'll use AddHandler, and then I'll
pass in the event I'm listening for,
| | 07:59 | Me.TransferManager.DataRequested. Then
I'll put in a comma, and then a reference
| | 08:06 | to the on data requested method.
| | 08:08 | It will look like this,: AddressOf Me.
OnDataRequested, and that's this method that
| | 08:16 | I already created
defined as a Sub routine.
| | 08:19 | Now, when the request from the sharing
contract comes in, it will be routed to
| | 08:24 | this method, and this
method will pass the data back.
| | 08:27 | So, that's all the code I need to share data
with the sharing contract when it's requested.
| | 08:33 | There is one other very important
step, though, and that's to de-register the
| | 08:37 | event handler when the user
moves away from this page.
| | 08:40 | That's so you don't end up creating a
whole stack of identical event handlers.
| | 08:45 | You do this in a method
called OnNavigatedFrom.
| | 08:49 | It looks very similar to OnNavigatedTo,
so I'm going to select just the method
| | 08:53 | signature for OnNavigatedTo, and I'll
copy that, and I'll paste it down here, and
| | 09:00 | I'll press enter there to add the End
Sub, and I'm going to change the name of
| | 09:04 | this method from
OnNavigatedTo to OnNavigatedFrom.
| | 09:09 | Then I'll come up here, and I'll select the
line that's adding the handler. I'll copy that.
| | 09:15 | I'll paste it here, and then I'll
change AddHandler to RemoveHandler.
| | 09:25 | So, now the logic is that when the user
opens the page, I'm registering the event
| | 09:30 | handler method, and when they move away
from the page, I'm de-registering it.
| | 09:35 | Now I'm ready to test the application.
| | 09:37 | I'll save, and run the
application without debugging.
| | 09:43 | Without an artist selected, I'll go to
the charms, and I'll select Share, and I
| | 09:48 | see my error message, Select an artist
to share, and that's because there was no
| | 09:54 | artist selected;
therefore, the artist was nothing.
| | 09:57 | So I'll go back to the application,
and I'll choose the first artist.
| | 10:02 | I'll go back to the sharing contract,
and now I see some of the selected data;
| | 10:08 | the title, and the description, and I
see a listing of applications that have
| | 10:12 | registered to receive
this kind of data: text.
| | 10:16 | In my new installation of Windows 8, the
only application that qualifies is Mail.
| | 10:22 | I'll select the Mail application, and
that generates a new e-mail message, and it
| | 10:26 | shows the data that I passed in:
the artist's name, and the biography.
| | 10:31 | This application allows me to click in
here, and type a custom message, or I could
| | 10:35 | just fill in the recipient,
and send it off.
| | 10:39 | So, those were the critical pieces to
building a Window Store app that knows how
| | 10:43 | to share data with the rest of the apps
in the operating system using the Share
| | 10:47 | charm, and the share contract.
| | 10:50 | I encourage you to explore a lot of
other features of the share contract,
| | 10:54 | including how to share different kinds
of data, and also how to register your own
| | 10:59 | application to receive data
from other apps.
| | Collapse this transcript |
| Customizing splash screen and start screen icons| 00:00 | Windows Store apps are represented on
the Start screen by tiles, and the tile's
| | 00:05 | image can be controlled either with static
images, or with what are known as live tiles.
| | 00:11 | I've set my Start screen to only show
the static images that are included
| | 00:14 | with the applications.
| | 00:16 | In some applications, you
can set them to live tiles.
| | 00:20 | For example, if I go to the Photos
app, and right-click, and then Turn live
| | 00:24 | tile on, I'll see images that are
being selected by the application, and sent
| | 00:29 | to the Start screen.
| | 00:31 | But before getting into the mechanics
of live tiles, you should first create
| | 00:36 | your own static graphics.
| | 00:39 | When you create a brand new Windows
Store app, it's populated with very
| | 00:43 | boring static graphics that display
this box with an X. It's up to you to
| | 00:49 | create graphics to brand your
application, so it can be represented fairly
| | 00:54 | on the Start screen.
| | 00:55 | I'll go to Windows Explorer, and show you
where these graphics are stored, and how
| | 01:00 | they're registered with the application.
| | 01:02 | Each new project that you create in
Visual Studio will have an Assets folder, and
| | 01:07 | it'll contain these four PNG files:
| | 01:10 | Logo, SmallLogo, SplashScreen, and StoreLogo.
| | 01:16 | All of these graphics
are pretty much the same.
| | 01:19 | They all have that square with the X,
but they're different dimensions.
| | 01:23 | These files are registered in the
application manifest, which you can find at the
| | 01:27 | bottom of the list named
Package.appxmanifest.
| | 01:29 | I'll double-click to open it, and then
scroll down a ways to the Logo section.
| | 01:37 | The tile images and logos are listed here.
| | 01:40 | Their names are Logo, Wide Logo,
Small Logo, and Store Logo.
| | 01:46 | There's also the Splash Screen logo.
| | 01:48 | In a basic application, you'll have
four of these files; simple files for all
| | 01:54 | but the Wide Logo,
and the Splash Screen.
| | 01:56 | For example, if I go to the Logo
setting, and then look at the path, it's
| | 02:02 | pointing to Logo.png.
| | 02:04 | Small is pointing to Small Logo,
Store to Store Logo, and Splash Screen
| | 02:09 | to SplashScreen.png.
| | 02:12 | Because there is no Wide Logo,
you're application will not be able to be
| | 02:16 | represented by a Wide Logo
on the Start screen,
| | 02:18 | but if you want to create one, you
can easily, and the required dimensions
| | 02:23 | are right down here.
| | 02:24 | Now, to give my application a nicer
look and feel, I've already created some
| | 02:29 | logos, and they match the dimensions
of the files that are already included
| | 02:33 | in the application.
| | 02:35 | So, I'll go to my Exercise Files, and from
there, to the Assets folder, and then to
| | 02:40 | LogoGraphics, and I'll find five files.
| | 02:44 | The names of these files match
the names that are included in my
| | 02:47 | default application.
| | 02:49 | There's also a source PNG.
| | 02:52 | This file can be opened in Illustrator,
or Fireworks, or any other graphics
| | 02:57 | application that supports layered PNG files.
| | 03:00 | I'm not going to use that in the actual
application. That's just a model that
| | 03:04 | you can use to build your own logos.
| | 03:07 | But I'll select these four files, and
I'll copy them to the clipboard, then
| | 03:13 | I'll go back to my Exercise Files, and I'll go
to the folder for the current project, AppIcons.
| | 03:20 | I'll drill down to the project folder,
then to the Assets Folder, and here are
| | 03:25 | the logo files I'm currently using, and
then I'll paste, and replace the files.
| | 03:31 | After the files are put in place, I'll
return to Visual Studio, and I'll see the
| | 03:37 | new files reflected automatically.
| | 03:39 | I'll run the application without making
any code changes, and as the application
| | 03:45 | comes to the screen, I see my new
Splash Screen icon, and when I return to the
| | 03:50 | Start screen, I see the icon
shown in the application tile.
| | 03:55 | So, that's how easy it is to create your
own custom graphics, and add them to your app.
| | 04:01 | Now, in the next video, I will show
you how to make these tiles even more
| | 04:04 | interesting by implementing live tiles,
and doing something similar to what you
| | 04:09 | see in the Photos app; displaying
graphics that are shared by the application
| | 04:14 | at run time.
| | Collapse this transcript |
| Creating Live Tile notifications| 00:00 | The Start screen in Windows 8 can
be a very lively environment, because
| | 00:04 | each Window Store app is capable of sharing
information through the live tile architecture.
| | 00:11 | For example, the Photos app, when you
turn live tile on, displays a scrolling
| | 00:16 | screen, showing one photo at a time,
| | 00:19 | and the Weather app shows the current
weather in your current location.
| | 00:23 | You can add your own code to display
live tiles from your application, and I'll
| | 00:28 | show you one example of that here.
| | 00:31 | The first step is to learn
about the various tile templates.
| | 00:34 | Each template is XML based, and you can
find them on this page, which is named
| | 00:40 | Hh761491.aspx in the MSDN library.
| | 00:46 | There are three types of square
templates: text-only, image-only, and what are
| | 00:51 | known as square peek templates, and
then there are also wide templates.
| | 00:56 | Each template is an XML packet that has
a root element of tile, a child element
| | 01:02 | of visual, and then a set of
elements which could be text or images.
| | 01:07 | I'm going to describe how to
use one of the simplest templates.
| | 01:10 | This is known as the TileSquareImage
template. The name of it is here, and the
| | 01:16 | XML template looks like this.
| | 01:18 | Within the binding,
there's an image tag.
| | 01:21 | The image tag has an src
attribute, and an alt attribute,
| | 01:25 | and by setting these values, I can
affect what my live tile looks like.
| | 01:30 | I'll go to Visual Studio, where I'm working
with the version of my project called LiveTiles.
| | 01:37 | When I run the application currently,
its tile shows up as the static graphic
| | 01:41 | that I included from the app icons video.
| | 01:45 | I'm going to drag the tile for
this application way over to the left,
| | 01:49 | so I can easily see it each time
I come back to the Start screen.
| | 01:53 | Then I'm going to turn of some of
these other live tiles to eliminate
| | 01:57 | distractions, and I'll only be
looking at my applications tile.
| | 02:02 | Then I'll go back to Visual Studio, and
I'll go to my main page file's code-behind
| | 02:07 | file, MainPage.xaml.vb, and I'll
look at it in full screen mode.
| | 02:14 | I would like to trigger a live tile
each time the user selects an artist from
| | 02:19 | the list, and so I'm going to add code
to an event handler for the list control.
| | 02:25 | I'll go to the MainPage.xaml file.
| | 02:28 | I'll scroll, and locate the list view
control, and I'll add a new attribute
| | 02:36 | called SelectionChanged.
| | 02:39 | Then I'll double-click on the icon that
appears that let's me create a new event handler.
| | 02:44 | That added the name of
the event handler method,
| | 02:48 | ItemListView_SelectionChanged_1.
| | 02:50 | I'll select it, right-click, and choose
Navigate to Event Handler, and that takes
| | 02:56 | me to the newly generated method.
| | 02:59 | This is where I'm going to add code to grab
the current data, and display it as a live tile.
| | 03:06 | This event will be triggered when the
user clicks on an item from the list,
| | 03:10 | so I'll know for sure that there is a
valid artist item available, and I'll get a
| | 03:15 | reference to it by creating a new
variable that I'll name artist, and I'll set
| | 03:20 | its data type to ArtistItem, and I'll get
its value from the list control, that's
| | 03:25 | ItemListView, and its
SelectedItem property.
| | 03:29 | Now I need to create a
reference to the XML template.
| | 03:34 | You can do this by putting in raw XML
code, or you can use document object model
| | 03:40 | style programming, and I'm going to the
latter. The code is cleaner, easier to
| | 03:45 | read, and easier to maintain.
| | 03:47 | So, I'm going to create a new variable
that I will call tileXmlDoc, and I'll set
| | 03:52 | its data type as
something called XmlDocument.
| | 03:55 | This is a class that's not already
imported into my class, so I'll move the
| | 04:00 | cursor off the class name, then go to
the error, click on the list of available
| | 04:06 | fixes, and choose to import the assembly
that includes that class, XmlDocument.
| | 04:11 | The import statement gets added
to the top of the class right here.
| | 04:19 | I'll go back down to the method I'm
working on, and then I'll get the value of
| | 04:24 | the XML doc using the following code:
| | 04:27 | I'll set its value by starting with an
Equals operator, then I'll call a
| | 04:31 | class called TileUpdateManager.
| | 04:34 | Once again, this is a
class that I need to import.
| | 04:39 | After it's been imported, I'll move
the cursor after the class name again, and
| | 04:42 | type in a dot, and I'll call a
method called getTemplateContent.
| | 04:48 | Next, I'll use a class called
TileTemplateType that includes properties for
| | 04:53 | each of the available XML templates, and I'll
use the template that matches the name
| | 05:01 | of the template I saw on the
documentation, TileSquareImage.
| | 05:06 | So, now I have an XML
template that I can fill in.
| | 05:10 | Let's look at the template again.
| | 05:11 | There is an image element that has
attributes of src, or source, and alt, and I'm
| | 05:19 | going to fill in those two attributes.
| | 05:21 | So, my next step is to get a reference
to that image element, and I'm going to
| | 05:26 | use methods that are a part of the document
object model, or DOM style of programming.
| | 05:33 | I'll create a new variable that I will
call imageElements, and I'll set it to
| | 05:38 | a data type of XmlNodeList, and I'll
get its value by calling tileXmlDoc, and
| | 05:44 | I'll call a method called GetElementsByTagName,
and I'll pass in the value of the image.
| | 05:52 | That's the name of the
element that I want to grab.
| | 05:55 | GetElementsByTagName returns a list
of all elements that have that tag name.
| | 06:01 | I know, because I looked at the template,
that there's only one, but I need to get
| | 06:05 | a reference to that specific element.
| | 06:07 | So, I'll create a new variable that I'll
call imageElement, and I'll set its data
| | 06:12 | type to XmlElement, and I'll get its
value from imageElements, and then I'll pass
| | 06:18 | in the Item method, and the
index of the object, which is 0.
| | 06:23 | So, I ask for all elements of the same
name, and then I got a reference to the one
| | 06:28 | and only element that should be returned.
| | 06:31 | Now I'm ready to pass data in.
| | 06:35 | I'm going to call a method of the
Element tag called SetAttribute.
| | 06:40 | SetAttribute takes two string values:
the first is the name of the attribute, and
| | 06:45 | again, I'm getting that from this
listing, src, and then I'm going to pass in
| | 06:50 | the URL of the artwork photo
that's currently selected with the code
| | 06:55 | artist.ArtworkPhoto.
| | 06:59 | Next, I'll set the alt
attribute to the artist's name.
| | 07:04 | Once again, I'll call SetAttribute.
| | 07:07 | I'll pass in the alt
attribute name; an artist.ArtistName.
| | 07:14 | So, now I have an XML
packet that contains my data.
| | 07:19 | I have one more important step.
| | 07:21 | I'm going to create two objects: a tile
notification that's a wrapper around the
| | 07:26 | XML document, and then a tile updater
that knows how to update the live tile.
| | 07:31 | I'll create a variable that I'll call
notification, and I'll set its data type
| | 07:35 | to TileNotification, and I'll
instantiate it using the TileNotification
| | 07:41 | constructor method.
| | 07:42 | I'll put in the keyword New, then the
name of the class, and I'll pass in my XML
| | 07:47 | document that contains my tile
template that's been filled in with data.
| | 07:52 | Next, I'll create the tile updater.
| | 07:55 | I'll create a variable called updater.
| | 07:58 | I'll set its data type to TileUpdater,
and I will instantiate it by calling a
| | 08:04 | method of TileUpdateManager named
CreateTileUpdaterForApplication.
| | 08:11 | This is a Sub routine, so you don't
need to pass in any arguments, but if you
| | 08:16 | like, you can add the
parentheses at the end.
| | 08:19 | Finally, update the tile; call updater.Update,
and pass in the notification, and that's it.
| | 08:27 | Now, whenever the user selects an item
from the list, this method will be called.
| | 08:33 | We'll get a reference
to the selected data.
| | 08:35 | We'll get the XML template for
how we want our live tile to look.
| | 08:39 | We'll fill in the data, create the
notification, create the updater, and
| | 08:44 | call the update method.
| | 08:46 | Here is the result.
| | 08:48 | I'll run the application, and
come back to the Start screen.
| | 08:52 | Because I haven't selected an
artist yet, I see the static graphic.
| | 08:58 | I'll go back to the application.
| | 08:59 | I'll click on one of the artists.
| | 09:02 | I'll come back to the Start screen,
| | 09:05 | move the cursor off the tile, then back
over it, and after a moment, the graphic is
| | 09:09 | updated with the live tile.
| | 09:11 | Notice that in this template,
the original graphic is still used.
| | 09:16 | It's laid over the live
tile content that we specified.
| | 09:20 | I'll go back to the application again,
and I'll choose another artist. I'll come
| | 09:25 | back to the Start screen, and this time
I don't have to move the cursor over the
| | 09:29 | tile. I just wait a few
moments, and the image updates.
| | 09:33 | So, that's a bit of code that you
can use to create your own live tiles.
| | 09:38 | Again, refer back to the documentation,
the live tile catalog, for various types
| | 09:44 | of templates that you can use.
| | 09:46 | If your application only includes a
square graphic as its logo, and not a wide
| | 09:50 | graphic, then you can only use
square graphics for your live tiles.
| | 09:55 | If you want to use live tiles that
are wide, you'll need to also provide a
| | 09:59 | static wide logo file.
| | 10:01 | But this is a great way to brand your
application, and let it participate in the
| | 10:05 | liveliness of the Windows 8 Start screen.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Thanks for watching this course,
Building Your First Windows Store App with
| | 00:04 | XAML and Visual Basic.
| | 00:06 | If you're just getting started with XAML,
you can buff up your skills with the
| | 00:10 | lynda.com course Silverlight 5 Essential
Training, or you can watch a variety of
| | 00:15 | lynda.com courses about the features of
Visual Studio. You can learn more about
| | 00:20 | how to program most features of Windows
Store apps from the documentation and
| | 00:24 | sample apps that Microsoft provides.
| | 00:27 | Start your exploration of
these resources at dev.windows.com.
| | 00:32 | I hope this course helps you get
started on your road to creating and
| | 00:36 | distributing these new kinds
of apps for the Windows Store.
| | Collapse this transcript |
|
|
