IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I'm Walt Ritscher and I want to welcome
you to my Building Window Store Apps
| | 00:09 | Essential Training Series.
| | 00:11 | The apps that I'll be building during
the course are intended to run on the new
| | 00:15 | modern runtime known as WinRT.
| | 00:16 | I'll start the series with an overview
of this new system and show how to test
| | 00:21 | your apps on actual and
virtualized ARM hardware.
| | 00:24 | Next, I'll take a look on how to use
Visual Studio and Expression Blend to
| | 00:28 | create and edit your applications.
| | 00:31 | I'll cover layout panels, controls, and I talk
about how to add images and media to your app.
| | 00:38 | I'll have section on working with the
application Lifecycle and another on
| | 00:42 | Data and Data Binding.
| | 00:44 | I'll cover application-wide like topics like
live tiles, charms, and application contracts.
| | 00:49 | Then I'll wrap up by showing you some
interesting topics like working with the
| | 00:53 | camera, the accelerometer,
and other installed devices.
| | 00:57 | I can't wait to get started.
Let's go!
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a member of lynda.com, you
have access to the exercise files used
| | 00:05 | throughout this title.
| | 00:06 | I've copied the exercise files
to my desktop. Let's take a look.
| | 00:10 | I'll open the exercise folder.
The exercise files are arranged by chapters.
| | 00:15 | I'll open up Chapter 6.
| | 00:17 | Inside each chapter are the individual
exercise files. I'll open Video 3.
| | 00:22 | This video has a start and a
final version of the project.
| | 00:26 | I'll open the Start folder.
| | 00:28 | When you open this folder,
you'll see there is an .sln file.
| | 00:31 | This is the file that you open in
Visual Studio or Expression Blend.
| | 00:34 | Since I have Visual Studio installed on
this computer, I can double-click on the
| | 00:38 | .sln file and it will launch Visual Studio.
| | 00:42 | Here's the project loaded inside Visual Studio.
| | 00:45 | Now that we've seen how to open the
exercise files, let's get started.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding the Windows 8 ecosystem| 00:00 | Microsoft allows us to confuse
us with long-winded obtuse names.
| | 00:04 | Occasionally, they come up with great
names like Outlook or Silverlight, but
| | 00:08 | often, the names look like something
dreamed up in a legal committee.
| | 00:12 | I'd like to start up by clarifying
the names around the operating system.
| | 00:15 | There are three names that you will hear:
Windows 8, Windows RT and WinRT.
| | 00:22 | Windows 8 is the next version of the
Microsoft flagship operating system.
| | 00:27 | If you have an app that works on
Windows 7, it's probably going to work on
| | 00:31 | Windows 8, as they kept backwards
compatibility for desktop and console
| | 00:35 | applications, but it has worthwhile
improvements over the previous versions.
| | 00:39 | Of course, it has a new interface, the start screen.
Let's talk about some of the other improvements.
| | 00:45 | It has a much improved boot cycle.
| | 00:47 | On my computer, it takes about eight
seconds to boot to the logon screen.
| | 00:51 | Shutdown time is also snappy.
| | 00:54 | There are a ton of security updates.
| | 00:56 | For example, it now uses a secure boot
to prevent rootkit infections, stopping
| | 01:01 | the boot process cold, if it
detects problems with the system files.
| | 01:06 | Networking support is better.
| | 01:07 | I'm happy that the Internet is available
as soon as the login screen is visible.
| | 01:11 | Microsoft finally gets touch right on
its main operating system, it's built
| | 01:16 | in, and it just works.
| | 01:19 | There are lots of other improvements
like better file copying, which you can
| | 01:22 | learn more about Windows 8 on the
lynda.com online training library.
| | 01:27 | Here's a course on the library
called Windows 8 Essential Training.
| | 01:31 | Windows RT is also an operating system.
| | 01:34 | It is a constrained version of Windows 8
that is optimized to run on ARM devices.
| | 01:39 | If you have a Windows 8 phone,
it's running Windows RT, same with the
| | 01:43 | Microsoft Surface Tablet.
| | 01:45 | You cannot buy a copy of Windows RT.
| | 01:48 | It can only be installed on ARM devices by OEMs.
| | 01:51 | It has a Windows desktop, but only a pre-approved
list of applications are available.
| | 01:56 | You cannot install any other desktop
application, Adobe Photoshop, no,
| | 02:02 | Intuit Quicken, no.
| | 02:04 | There are thousands of apps available
though, you just have to install them
| | 02:08 | through the Windows Store.
| | 02:09 | I want to make this clear,
Windows RT is Windows 8.
| | 02:14 | You can run all the usual Window
utilities like the Command line, File
| | 02:18 | Explorer, or Task Manager.
| | 02:20 | Now we come to WinRT.
| | 02:22 | No, this is not an abbreviation of Windows RT.
| | 02:25 | It is a completely different part of the Ecosystem.
| | 02:28 | It is the new low level runtime engine.
| | 02:31 | It's unfortunate that Microsoft named
two different parts with similar names.
| | 02:36 | Windows RT is part of both
Windows 8 and Windows RT.
| | 02:40 | That means that if I create a Window
Store App based on WinRT, it will run on
| | 02:45 | Win32 and ARM devices.
| | 02:48 | WinRT is like other well-known runtime
engines like the Java Runtime or .NET.
| | 02:53 | You can think of it as a
host for you application code.
| | 02:56 | The runtime sits between your compiled
code and the low level operating system.
| | 03:01 | If you are a .NET developer, you might be
fooled into thinking that WinRT is based on .NET.
| | 03:06 | That is not true.
| | 03:08 | They are entirely different runtime engines.
| | 03:10 | In fact, Windows 8 has both runtimes installed.
| | 03:13 | WinRT was written to support a broad
set of languages including scripts.
| | 03:17 | It is truly integrated with the core "Windows API"
Because it works directly
| | 03:22 | with native OS Kernel, it is fast and
efficient and also collaborates closely
| | 03:27 | with DirectX, so you can be sure that
if a pixel is drawn on the screen, it is
| | 03:32 | done in the fastest way possible.
| | 03:33 | Microsoft spent a lot of time and
effort to ensure that WinRT runs fast on
| | 03:37 | limited hardware and is battery friendly
for mobile devices. Here's a surprise.
| | 03:42 | WinRT is based on COM.
| | 03:44 | If that brings back bad memories of registry hacks,
gooids and interface trouble, don't fret.
| | 03:50 | The WinRT COM specification has been
modernized and it works more like .NET.
| | 03:54 | It was deliberately made to
work with multiple languages.
| | 03:58 | It has new Metadata scheme, which
means component definitions are no
| | 04:01 | longer registry based.
| | 04:02 | It uses the successful CLI metadata
language invented for .NET to describe the
| | 04:07 | code items defined inside each component.
| | 04:10 | Therefore, each component is
standalone and self describing.
| | 04:14 | One of the most fascinating
features of WinRT is projections.
| | 04:18 | A language team that that
wants to target WinRT must create a
| | 04:21 | projection definition.
| | 04:23 | This is basically a wrapper around
the WinRT API that redefines how it
| | 04:27 | appears to the language.
| | 04:29 | Then tools like Visual Studio can use
the projections to show tips and code
| | 04:32 | help that seem language specific, even
though the APIs are not written in the
| | 04:37 | projection language.
| | 04:39 | There are three projections available
at the moment: C++, C# and JavaScript.
| | 04:45 | Here's what some code looks like to call
the retrieveFeedAsync method in the API.
| | 04:51 | From the JavaScript perspective, you
will notice that the method name on line 40
| | 04:55 | has a lowercase "r" and that the
rest of the code looks like JavaScript.
| | 05:00 | If you are a C# developer, you will
notice that on line 43 and it called
| | 05:04 | RetrieveFeedAsync, it has a capital R and the
syntax looks like you'd expect in a C# language.
| | 05:11 | Finally, if you still write code in C++,
here's what the language looks like
| | 05:15 | from the C++ perspective.
| | 05:17 | Look at line 33, here I'm calling retrieveTask
and I'm using an angle bracket in front of that.
| | 05:23 | Let's summarize what we've seen.
| | 05:25 | There are two versions of Windows,
one that's optimized for Win32 devices,
| | 05:29 | that's Windows 8, and one that's
optimized for ARM devices, that's Windows RT.
| | 05:34 | WinRT is a new runtime engine
that supports Windows Store Apps.
| | 05:38 | These Store Apps can run on
either version of the operating system.
| | 05:42 | You'll learn more about
Store Apps later in this course.
| | Collapse this transcript |
| Understanding Windows Store apps| 00:00 | In this video, I'll try and clarify what
makes a Window Store App a Windows Store app.
| | 00:06 | Before I go any further, I should
address the different names that Microsoft has
| | 00:09 | applied to these apps.
| | 00:11 | The original name for Store
apps back in 2011 was Metro Apps.
| | 00:17 | Due to legal issues, Microsoft
changed the name to Windows Store Apps.
| | 00:21 | Unfortunately, there were some
interim names used before the final name was
| | 00:25 | approved; as you can see from this
list, there a number of these names.
| | 00:30 | The side effect of alternate names
is that the Internet is littered with
| | 00:33 | articles using the older names.
| | 00:34 | At the most basic level, a Window Store App
is one that is built on the WinRT runtime.
| | 00:41 | You may recall from an earlier video that
WinRT is the new runtime built into Windows 8.
| | 00:46 | Apps targeting WinRT run on
both Win32 and ARM devices.
| | 00:51 | From a developer's point of view, a
Windows Store App has access to all the
| | 00:54 | features exposed in the WinRT components.
| | 00:57 | If you choose to build your Store App
with C# and XAML, you should also have
| | 01:02 | access to the .NET libraries.
| | 01:04 | To be more accurate, you have access
to a sub-set of .NET libraries that are
| | 01:08 | approved for WinRT development.
| | 01:10 | Windows Store Apps have a
restricted installation model.
| | 01:14 | If you are a developer, you install an app
by getting a developer license from Microsoft.
| | 01:19 | Once the developer license is installed,
you open Visual Studio or Expression
| | 01:24 | Blend and build your application.
| | 01:26 | When you debug the app in Visual Studio, it
automatically deploys it to your computer.
| | 01:30 | There is also a deploy menu in Visual
Studio that allows you to deploy the app
| | 01:34 | to tablets and other devices.
| | 01:36 | Before you can install on your tablet,
you'll need to get a developer license
| | 01:40 | for that device, too.
| | 01:42 | Most Windows Store App are
destined for the consumer market.
| | 01:45 | Consumers install the app by visiting
the Windows Store App on their computer
| | 01:50 | and choosing to install your app.
| | 01:52 | It's a simple painless process that makes
installing and uninstalling apps a breeze.
| | 01:56 | To get your app into the store,
you need a Window Store account.
| | 02:00 | Once you have the account, you
submit your app to the Store and Microsoft
| | 02:03 | takes care of the rest.
| | 02:05 | If you are building an App for your
company, then there are a couple of other
| | 02:08 | ways you can install the app.
| | 02:10 | Your company can create an enterprise store.
| | 02:12 | You, then submit your app to this private store.
| | 02:16 | Also, you can do what's called "sideloading."
| | 02:18 | Essentially, this is a way to copy the
application file to corporate computers.
| | 02:22 | Note, for this to work, you need
to purchase sideloading licenses for
| | 02:26 | each employee computer.
| | 02:28 | Apps are not installable in any other fashion.
| | 02:31 | For example, providing a link to an
exe download on your website is not an
| | 02:35 | option, nor is building a custom
installer package like an msi file.
| | 02:40 | You can give other developers a copy of
your application file, but that is not
| | 02:44 | an approved way to
install the app for consumers.
| | 02:47 | This only works on computers
with an installed developer license.
| | 02:51 | For security and performance reasons, a
Window Store App runs in a special sandbox.
| | 02:56 | Your code can only access approved libraries.
| | 02:59 | Microsoft verifies that your
application complies with this restriction when
| | 03:03 | your app goes through the approval process.
| | 03:05 | If you try and sneak a call outside the
approved libraries, your app is rejected
| | 03:09 | from the market place.
| | 03:10 | Microsoft also verifies that your app
is safe to use during the same process.
| | 03:15 | There are other tests supplied
to your app during this phase.
| | 03:18 | For example, Microsoft checks to see if
you're using trade mark images that you don't own.
| | 03:22 | It also looks for adult material
and other age restricted content.
| | 03:26 | Poorly written hardware drivers are a known
problem area and prior releases at Windows.
| | 03:30 | Bad drivers can bring performance to a
crawl or open security holes in the system.
| | 03:36 | Windows 8 includes a new driver model.
| | 03:38 | The new model keeps your environment
safe and performing well by restricting
| | 03:41 | access to devices which have not been
specifically produced with WinRT apps in mind.
| | 03:46 | The good news, if the driver is
installed and on the sanctioned list, it is easy
| | 03:50 | to use from your application.
| | 03:53 | Let's review the criteria that
makes an app a Window Store App.
| | 03:56 | It uses the WinRT runtime, it is
deployed through the Windows Store or
| | 04:00 | other approved channels and it works with the
restricted drivers and from within a sandbox.
| | 04:05 | WinRT exposes a common set of features
that show up in all good Windows Store Apps.
| | 04:10 | I've listed the features on this screen.
| | 04:13 | I'll show you these features in other videos.
| | 04:15 | Microsoft has done a lot of research
into what makes it a good Window Store App
| | 04:19 | and they've published a series of
App of guidelines and UI suggestions.
| | 04:22 | These guidelines were
followed by Microsoft's own apps.
| | 04:26 | Check out the default apps on the
Windows computer, like the mail app or the
| | 04:29 | weather app; they were designed
according to these guidelines.
| | 04:33 | These guidelines are
optional, but highly recommended.
| | 04:35 | I encourage you to read more
about them at this Microsoft URL.
| | 04:39 | The Guidelines cover a number of areas.
| | 04:41 | Here are just a few: Touch, how to
design a clean and open layout, working
| | 04:47 | with landscape and portrait form
factors, and roaming app settings across
| | 04:51 | devices through the cloud.
| | 04:53 | The implementation details are up to you.
| | 04:55 | You'll see more about these
features as you work through the course.
| | Collapse this transcript |
| Exploring features common to all Windows Store apps| 00:00 | All Windows Store Apps have access to some
common features like the Charms Bar and Snap mode.
| | 00:06 | In this video, I will show you
some of these common features.
| | 00:10 | When you install a Window Store App, a tile
is automatically added to the Start screen.
| | 00:15 | When you press the Windows key on your
keyboard or touch the Windows icon on the
| | 00:20 | tablet, the Start screen appears.
| | 00:22 | The Start screen
contains tiles of various sizes.
| | 00:25 | To launch an app, touch the tile
or click the tile with your mouse.
| | 00:29 | For example, I will touch the Store tile.
| | 00:32 | All apps start in full-screen mode.
| | 00:35 | Gone are the task bar in min-max buttons.
| | 00:38 | When you create your app UI, remember
that you have the entire screen to work with.
| | 00:42 | I want to search for an app within the Store.
| | 00:45 | In Windows 8, search is
located in the Charms Bar.
| | 00:48 | On the tablet, swipe in from the right
side of the screen to show the charms.
| | 00:53 | If you are using a keyboard,
use the Windows key C combination.
| | 00:58 | There are five standard
charms available for all apps.
| | 01:02 | All start at the bottom.
| | 01:03 | The Settings Charm allows users to
change settings for the app or the PC.
| | 01:09 | You can add your own settings
and help information to this charm.
| | 01:15 | The Devices Charm, lists all the
devices that are connected to this PC,
| | 01:19 | both wired and wireless.
| | 01:21 | Here, you can print from an app, sync with
your phone, or stream you music to your Xbox.
| | 01:27 | The Start Charm provides another
way to get back to the Start screen.
| | 01:31 | I'll touch the Start Charm once
and I return to the Start screen.
| | 01:35 | Now I'll bring up the Charm Bar again
and touch the Start Charm a second time,
| | 01:41 | which takes me back to the Store App.
| | 01:45 | The Share Charm provides a way to
share files and other info with people you
| | 01:48 | know or send info to another app
without leaving the app you are in.
| | 01:53 | At the top of the Charms
Bar is the Search Charm.
| | 01:56 | I'll touch the Search Charm.
| | 01:58 | The search text box appears
as does the on-screen keyboard.
| | 02:02 | I'll type the word "paint" and
then touch the search button.
| | 02:10 | The search result shows several
apps available in the market place.
| | 02:14 | What's important to note is that the app
is getting to search words from Windows
| | 02:17 | and looking to its own internal
data and showing these results.
| | 02:21 | You can do the same in your apps,
showing whatever custom results make
| | 02:25 | sense for you app data.
| | 02:27 | This Fresh Paint app looks
interesting, so I'll touch the yellow item.
| | 02:32 | On this screen, I can look at screen
shots of the app, click on the details, and
| | 02:39 | read more about the
application or look at User Reviews.
| | 02:46 | I can also touch the
Install button to install the app.
| | 02:54 | The Store App now, shows information
about the install process in the upper
| | 02:58 | edge of the screen.
| | 03:00 | Now the application is installed.
| | 03:02 | I'll touch the Window icon
and return to the Start menu.
| | 03:06 | Remember that I said each
installed app is a tile.
| | 03:09 | The tile for Fresh Paint is
at the end of the Start screen.
| | 03:14 | That action selects a tile.
| | 03:16 | See the check mark in the corner of the
tile and it makes a context bar visible
| | 03:20 | across the bottom of the screen.
| | 03:23 | This context bar is called an "app bar"
and any app can have one.
| | 03:27 | As you can see, in the Start screen app
bar, there are several action buttons.
| | 03:31 | There is one button for uninstalling
the app and others for changing the
| | 03:34 | tile size and so on.
| | 03:36 | Think what this means for your app.
| | 03:38 | It's easy to install from the Store
and painless to uninstall at anytime.
| | 03:43 | I'll touch the Fresh
Paint tile to launch the app.
| | 03:47 | I will choose My Paintings, this
February painting, and I'll touch
| | 03:53 | this painting here.
| | 03:56 | This takes me to the main UI.
| | 03:58 | This is beautiful painting application.
| | 04:00 | At the top and bottom of
the screen are two app bars.
| | 04:03 | They look fancier than the app bar on
the Start screen, but it's the same API.
| | 04:08 | To paint, I touch the desired brush,
select a color, then touch the art board to
| | 04:15 | dismiss the app bars.
| | 04:17 | Now I drag my finger to
paint on the screen. Very nice!
| | 04:23 | To bring back the app bar, drag your
finger in from the top or bottom of the screen.
| | 04:29 | Windows Management is different on the
tablet, let me start another app and show
| | 04:33 | you the snap feature.
| | 04:34 | I will press the window icon
to return to the start screen.
| | 04:37 | The weather app is included
on the default Start screen.
| | 04:40 | I will touch the tile to start this app.
| | 04:44 | This is a straightforward app that shows
weather information for any location you want.
| | 04:48 | To change the locations, bring up the
app bar and touch the Places button.
| | 04:54 | I'll touch the Seattle icon to
switch to the Seattle Weather Station.
| | 04:59 | The Fresh Paint app is still available.
| | 05:02 | I can switch to other apps by swiping
in from the left side of the screen.
| | 05:07 | I can switch back to the weather
app by swiping in from the left side.
| | 05:11 | You can snap an app to the side of the
window by swiping slowly down from the
| | 05:15 | top until a small version of the app is
visible on the screen and dragging back
| | 05:20 | to the left until a split bar shows.
| | 05:23 | Then lift your finger from the screen.
| | 05:25 | Now one-third of the screen
is inhabited by the weather app.
| | 05:29 | To add another app to the screen, I can
left swipe and move the app to the larger area.
| | 05:35 | Now I have two apps available on the screen.
| | 05:38 | Notice how both apps have rearranged their UI.
| | 05:41 | When writing your app, you must change
your UI layout when you detect that your
| | 05:44 | app is in snapped mode.
| | 05:47 | Next, I will snap the paint app.
| | 05:49 | Drag the splitter to the right until
the splitter appears on the right side of
| | 05:54 | the screen, then lift your finger.
| | 05:57 | Again, note how both apps have changed their UI.
| | 06:01 | Finally, to close an app, drag your
finger in from the top of the screen until
| | 06:05 | you see the small app rectangle, then keep
dragging until you exit the screen at the bottom.
| | 06:10 | I've closed one app, now I will close
the other app with the same motion and I'm
| | 06:16 | back to the Start screen.
| | 06:18 | These features, snap mode, the app bar, the
charms bar, and many more are baked into WinRT.
| | 06:25 | Keep watching the course videos to
see how to integrate them in your app.
| | Collapse this transcript |
| Windows Store Apps for the Silverlight or WPF developer| 00:00 | XAML is without question the
primary markup language to come out of the
| | 00:04 | Microsoft Developer Division.
| | 00:06 | No, I haven't forgotten about HTML.
| | 00:09 | The Microsoft asp.net teams are fully
invested in HTML5 support,
| | 00:13 | but XAML is a markup language
conceived by Microsoft and it is
| | 00:17 | used in many of their different UI platforms.
| | 00:19 | XAML is used in WPF to create UI
for complex desktop applications.
| | 00:25 | It's a key part of Windows Phone development.
| | 00:27 | XAML made a big splash a few years ago
when Microsoft released Silverlight as a
| | 00:32 | web plug-in technology.
| | 00:34 | You could create a fancy graphic UI
for your website with Silverlight, very
| | 00:38 | similar to Adobe Flash in this manner.
| | 00:40 | Silverlight was enhanced to be more of
a desktop platform in later versions.
| | 00:44 | XAML is also used for creating UI for
massive touch screen apps as part of the
| | 00:49 | new PixelSense API; and of course, XAML
is one of the mark-up languages available
| | 00:55 | for Windows Store Apps development.
| | 00:57 | If you already know XAML from WPF,
Silverlight or other platforms, you can have
| | 01:02 | a marked advantage over developers with
no prior XAML experience, but you still
| | 01:05 | have to learn the WinRT API features.
| | 01:08 | It is full of new concepts and
different ways to interact with your users.
| | 01:12 | Even though WPF and Sliverlight get
little marketing love from Microsoft, I feel
| | 01:17 | that both technologies have a
place in the development world.
| | 01:20 | WPF is still the best way to create
powerful complex applications that run
| | 01:25 | on the user's desktop.
| | 01:26 | Visual Studio, which is written in WPF,
is a prime example of this type of app,
| | 01:32 | full of menus, ribbons and tool
windows for development tasks.
| | 01:37 | My guess, if Microsoft was starting
fresh with Office, they'd write it in WPF.
| | 01:43 | WPF works on Windows versions
from Windows XP to Windows 8.
| | 01:48 | There are some differences in the XAML.
| | 01:50 | WPF is the biggest, most
complicated version of XAML.
| | 01:55 | The version in WinRT is a subset
of the older XAML implementation.
| | 01:58 | Silverlight is still used in some
development shops to build apps that run in
| | 02:02 | the browser or in desktop mode.
| | 02:04 | These apps will run in
Windows 8 with one exception;
| | 02:06 | they won't run in the WinRT IE browser.
| | 02:10 | I have a confession to make.
| | 02:12 | I love the Silverlight name, but
somewhere deep inside the Microsoft campus,
| | 02:16 | someone decided that it was time for a change.
| | 02:19 | So the XAML specification was updated,
a new runtime was created and the
| | 02:24 | Silverlight name faded away.
| | 02:25 | Whether you call it Silverlight or not
this new version of XAML is a lot like
| | 02:30 | the old Silverlight.
| | 02:32 | Most of the features are identical.
| | 02:34 | Data binding is largely unchanged, for example.
| | 02:37 | New features were added to WinRT.
| | 02:39 | This is necessary as WinRT is
basically a mobile, touch-friendly system that
| | 02:43 | carries the Windows name.
| | 02:45 | There are some differences though.
| | 02:46 | WinRT apps are native apps running on
the Windows OS whereas, Silverlight runs
| | 02:51 | in a browser plug-in.
| | 02:52 | Both systems have their own dedicated runtimes.
| | 02:55 | If you have XAML experience, you should
be confident that your skills are ready
| | 02:59 | to help you become a
Windows Store app developer.
| | Collapse this transcript |
| Setting up your developer computer| 00:00 | You've heard about Windows Store Apps and are
ready to start learning this new UI Platform.
| | 00:05 | But first, you need to install
some tools on your developer computer.
| | 00:08 | In this movie, I will show you how to
set up your computer so that you can
| | 00:12 | create your WinRT Applications.
| | 00:13 | Windows Store Apps can only
be developed on Windows 8.
| | 00:17 | So the first thing you'll
need to do is install Windows 8.
| | 00:20 | In order to test your apps in a snap
mode, you'll need a monitor with a minimum
| | 00:24 | of 1366 x 768, resolution.
| | 00:29 | That is a bare minimum, of course.
| | 00:30 | For productivity purposes while
running Visual Studio, I recommend
| | 00:34 | higher resolutions.
| | 00:35 | I personally run at 1920 x 1080 on three monitors.
| | 00:40 | Touch is a central part of Windows Store Apps.
| | 00:43 | While you can test touch interaction
with a mouse, you will get better results
| | 00:47 | with a touch screen.
| | 00:48 | You can buy touch monitors for
a reasonable price now-a-days.
| | 00:52 | To truly test your app in real world
conditions, you need to run the app
| | 00:55 | on actual hardware.
| | 00:57 | It's vital to test on various ArM Devices.
| | 01:00 | One popular ArM Device is the Microsoft Surface.
| | 01:03 | Any developer working in the
Microsoft world should install Visual Studio.
| | 01:07 | It is the premier development tool for
creating apps that target Microsoft tools.
| | 01:12 | For Windows Store Apps, you
must use Visual Studio 2012.
| | 01:16 | It contains tools that help you
develop, test, and deploy your apps.
| | 01:20 | There are many versions
of Visual Studio available:
| | 01:23 | Professional, Premium, and Ultimate.
| | 01:26 | These versions cover a wide price
range with the higher price versions
| | 01:30 | containing more tools.
| | 01:32 | Any version is suited for Store App development.
| | 01:34 | You can find information and
downloadable versions at this link location.
| | 01:39 | There is also a free version of
Visual Studio called Visual Studio Express
| | 01:42 | 2012, for Windows 8.
| | 01:45 | Even though it is free, it contains all
the tools you need for Store App development.
| | 01:49 | You can get your free copy at this URL.
| | 01:52 | Regardless of which Visual Studio
version you choose, you will need an hour or
| | 01:55 | more to install Visual Studio.
| | 01:58 | For many years, Microsoft
promoted a special UX Design tool called
| | 02:01 | the Expression Blend.
| | 02:03 | It was available as a separate
tool with separate cost and licensing.
| | 02:07 | But that is no longer the case.
| | 02:09 | Expression Blend is now part of
the Visual Studio 2012 installation.
| | 02:13 | It will be on your computer
whether you want it or not.
| | 02:16 | Personally, I find Blend to be a great
tool for designing certain user interactions.
| | 02:20 | For example, I find it invaluable for
creating animations and storyboards.
| | 02:26 | Blend is fully integrated with the
Visual Studio project file formats.
| | 02:29 | I'll show you how to use
Blend as we go through the course.
| | 02:32 | Microsoft has rebranded their live ID system.
| | 02:36 | It's now known as a Microsoft account.
| | 02:38 | Windows 8 takes full
advantages of these accounts.
| | 02:42 | If you log in to your Windows with your
Microsoft account, you'll get automatic
| | 02:45 | synching of your email, pictures,
Skydrive files and account settings.
| | 02:50 | If you have an email address at hotmail,
live.com, or outlook.com, you already
| | 02:56 | have a Microsoft account.
| | 02:57 | If not, you can create one in a few
minutes or register an existing email with
| | 03:03 | the Microsoft account system.
| | 03:05 | You might be asking yourself,
What is all the fuss about having a
| | 03:08 | Microsoft account?"
| | 03:09 | Well, in order to create a Windows Store
App with Visual Studio, you must have a
| | 03:13 | valid developer license.
| | 03:15 | To get your developer license,
you must use your Microsoft account.
| | 03:19 | Also, if you plan on selling your apps
in the Microsoft Store, you will need to
| | 03:23 | create a Microsoft Store account.
| | 03:25 | Your Store account is linked
to your Microsoft account, too.
| | 03:28 | Let me show you how to get a developer license.
| | 03:31 | The easiest way to get your license is to use
Visual Studio to create a Windows Store App.
| | 03:35 | When you try to build your app it will
automatically prompt you to apply for your license.
| | 03:40 | To open a Visual Studio, I'm going to
press the Windows key on my keyboard.
| | 03:45 | And then I'm going to
type vis for Visual Studio.
| | 03:49 | And then I'll click on
this Visual Studio 2012 tile.
| | 03:53 | Here I am inside Visual Studio.
| | 03:55 | I'm going to create a new project
by clicking on the New Project Link.
| | 04:00 | Then I'll choose my language.
| | 04:01 | I want to choose Visual C# and then
I'm going to choose Windows Store and I'm
| | 04:07 | going to choose this first
template called Blank App (XAML).
| | 04:09 | I'll going to leave it at the
default name for now at App1 and click OK.
| | 04:18 | Since this is the first time I'm using
Visual Studio, I'm automatically prompted
| | 04:21 | to get a developer license.
| | 04:24 | I will click on the I Agree button.
| | 04:32 | Here is the Sign in screen.
| | 04:33 | I need to enter my Microsoft account
email address and my Password, then
| | 04:38 | click the Sign In button.
| | 04:44 | If I'm successful, I'll see this dialog.
| | 04:46 | You now have a Developer License and you can
develop apps for Windows 8 until it expires.
| | 04:51 | You'll need to renew your license before
it expires to continue developing apps.
| | 04:55 | A standard developer
license is good for 30 days.
| | 04:58 | If you have a Windows Store account
tied to the same Microsoft Developer
| | 05:02 | account, you get a 90-day license.
| | 05:04 | It takes one to three weeks to get
approved for the Windows Store account.
| | 05:07 | So you might need to start that
process as soon as possible.
| | 05:10 | It's easy; I'll show you how.
| | 05:12 | I'm going to close this dialog, then
go to the Project menu, the Store menu
| | 05:22 | and then choose Open Developer Account.
| | 05:25 | Then on this Microsoft site, you'll sign
up for a Windows Store developer account.
| | 05:29 | Now you're ready to start
creating your first application.
| | 05:32 | The next movie shows you more
about the Visual Studio environment.
| | Collapse this transcript |
| Setting up Visual Studio 2012 for this course| 00:00 | Most developers I know have a strong
opinion on how they want their developer
| | 00:04 | tools to look and behave.
| | 00:07 | Visual Studio 2012 is a powerful code tool.
| | 00:09 | I have a few settings that I use during this
course that are different from the defaults.
| | 00:13 | Follow the steps in this video to make your
copy of Visual Studio look the same as my copy.
| | 00:18 | There are a ton of options you
can set for your work environment.
| | 00:21 | If you want to find out more, watch the
Visual Studio 2010 Essential Training,
| | 00:26 | here in the lynda.com online training library.
| | 00:30 | I'm in Visual Studio, and I've opened a
project called Setting Up Visual Studio.
| | 00:35 | There are two user interface features
in the Visual Studio that I dislike.
| | 00:39 | I'm not alone in my feelings.
| | 00:40 | Both these issues are frequently
lambasted in the Microsoft community.
| | 00:44 | The first UI gaff is the all cap top level menu.
| | 00:48 | This is a recognized, readability
killer and Microsoft should know better.
| | 00:53 | The second UI annoyance is
the washed out color schemes.
| | 00:56 | Visual Studio is configured
with two colorless UI themes.
| | 01:00 | These themes are supposed to make the
environment designer-friendly, but I
| | 01:04 | need a bit color in my UI.
| | 01:06 | Both of these issues are fixable by
installing some Visual Studio extensions
| | 01:10 | that modify the default settings.
| | 01:11 | Visual Studio extensions are applications
that alter the behavior of Visual Studio.
| | 01:15 | To add this extensions, open the Tools menu
and choose the Extensions and Updates menu.
| | 01:24 | This shows all my installed extensions.
| | 01:26 | I can search for more extensions
by clicking on the Online node.
| | 01:31 | I'm looking for an app called Remove CAPS.
| | 01:37 | Here it is, right at the top of the list.
| | 01:40 | I'll click on the Download button
and then click on the Install button.
| | 01:45 | And the bottom of the screen it says,
"You must restart Visual Studio in order
| | 01:49 | for the changes to take effect."
| | 01:51 | I'm not going to start immediately because
there's one more thing I want to install.
| | 01:55 | This time I'll search for color theme.
| | 02:03 | Here it is again, it's at the top of the list.
| | 02:05 | I'll click Download, Install and at
this point I'll restart Visual Studio.
| | 02:17 | When Visual Studio restarts, it asks
me which theme I would like to pick.
| | 02:22 | My favorite is blue, but as you can see, there
are a number of default themes. I'll choose blue.
| | 02:29 | That changes the design of the
inside of Visual Studio to a blue theme.
| | 02:33 | And now I'm going to use the Remove CAPS tool.
| | 02:38 | Now I'll restart Visual Studio, much nicer.
| | 02:42 | A new theme, and the All CAPS menu is removed.
| | 02:45 | Now that I'm back in the Visual
Studio, I'll re-open my Project.
| | 02:49 | Next, I will change a few code editor options.
| | 02:52 | Before you change your options, you
may want to save your current settings.
| | 02:56 | Open the tools menu and then
choose Import and Export settings.
| | 03:02 | Choose the Export selected
environment settings then click Next.
| | 03:06 | Choose the settings that you want to
export by checking these check boxes in
| | 03:10 | this dialog and clicking Next,
and then name your file and choose a
| | 03:14 | location and click Finish.
| | 03:16 | I will choose the defaults and click Close.
| | 03:20 | Now that our settings are saved
in a backup file, let's get to work
| | 03:23 | configuring our editors.
| | 03:24 | You'll find the settings
dialog in the Tools Options menu.
| | 03:31 | The first thing I'm going to
change is my Fonts and Colors.
| | 03:36 | I'm going to change my main Font to be
14 points and then if I click on OK, it
| | 03:43 | will save my settings, but
also close the Option dialog.
| | 03:45 | So I'm going to wait before I click OK.
| | 03:48 | Next, I want to look at the
settings for the Text Editor.
| | 03:52 | Those are down here in this Text Editor Node.
| | 03:55 | This node lists all of the
installed Text Editors inside Visual Studio.
| | 04:00 | The editors that I spend the most time
in are the C# Editor and the XAML Editor.
| | 04:05 | XAML stands for Extensible
Application Markup Language.
| | 04:08 | I'll start by changing
some All Language features.
| | 04:12 | I'll open this node and then in the
general section, I'll make sure that
| | 04:17 | Line Numbers is checked.
| | 04:18 | I like having Line Numbers on when
I'm coding; and also make sure that the
| | 04:22 | Word wrap is checked.
| | 04:24 | Next, I'll set my Tab sizes
by clicking on this Tabs node.
| | 04:29 | I will use two units for the Tab
size and two units for the Indent size.
| | 04:34 | Then you get to choose whether you
want to insert spaces, or keep tabs.
| | 04:38 | Next, I will go down and modify my XAML Editor.
| | 04:41 | We'll start by looking at the Formatting section.
| | 04:45 | Here, I like to have Single quotes enabled
instead of Double quotes for my attributes.
| | 04:51 | In the Spacing section, I like to
position each attribute on a separate line.
| | 04:55 | I'll show you what that means in one minute.
| | 04:58 | I also like to collapse multiple empty
lines in content into a single line and
| | 05:02 | I'll click OK to persist my settings.
| | 05:06 | Now let's look at the XAML Editor in Visual Studio.
| | 05:09 | I'm going to open this mainpage.xaml by
double-clicking on it in Solution Explorer.
| | 05:16 | This shows the default designer.
| | 05:17 | On the top half of the screen inside
Visual Studio, is the Visual Editor.
| | 05:22 | And on the bottom half of the
screen is the XML or Text Editor.
| | 05:26 | These two screens are synchronized.
| | 05:28 | What I want to do is go down to my XAML.
| | 05:30 | I am going to make this a little
bit smaller on the top half for now.
| | 05:34 | I am going to scroll down here to this Image Section.
| | 05:42 | Here's an image and I want to put
on some extra spaces in here and some
| | 05:47 | extra spaces down here.
| | 05:49 | And then I want to move this Stretch
attribute up to a different line, like so.
| | 05:59 | Now I can automatically format this document
using the rules I specified in the Text Editor.
| | 06:05 | To do that, I go to Edit, Advanced and
then I choose Format Document or you can
| | 06:12 | use this keystroke, Ctrl+K, Ctrl+D.
And did you see what happened?
| | 06:18 | The extra spaces inside this file
between the two tags are removed.
| | 06:23 | And all of the attributes are
aligned underneath the top level attribute.
| | 06:27 | I find this makes XAML much more readable.
| | 06:30 | Visual Studio has a ton of options
you can set for your work environment.
| | 06:34 | Spend a few minutes examining
the options menu to learn more.
| | Collapse this transcript |
| Preparing a Windows 8 tablet for development| 00:00 | You can test your app on your local
developer computer, on a device simulator or
| | 00:05 | use remote debugging to
test on actual tablet hardware.
| | 00:08 | I always strive to test on real hardware.
| | 00:11 | Currently, I have several
devices including the Asus Vivo Tab.
| | 00:15 | Testing on ARM processors will give a sense of
what your app behaves like in the real world.
| | 00:21 | ARM processors are not as powerful
as the CPU on your developer computer.
| | 00:25 | You'll smoke out problems,
especially performance trouble when testing
| | 00:29 | on different tablets.
| | 00:30 | You can run on any Windows RT
device as long as that device has the
| | 00:34 | necessary software.
| | 00:36 | You must install the remote debugger
application on each tablet that you want to test.
| | 00:42 | The remote debugger is a desktop app.
| | 00:44 | Microsoft locks down Windows RT.
| | 00:47 | Only a small approved list of
desktop apps can be installed on a device.
| | 00:52 | The good news is that the
remote debugger is one of those
| | 00:55 | privileged applications.
| | 00:57 | Let's look at what you need to do on the tablet.
| | 01:00 | Open the desktop version of Internet Explorer
and download the installer from this URL.
| | 01:05 | You have to install with the desktop browser.
| | 01:08 | Don't try to use the app store one.
| | 01:11 | Once the debugger is installed, run the
application and click the Options menu
| | 01:16 | to configure the port number and
security settings for the debugger.
| | 01:19 | Note, the tablet and dev computer
need to be on the same network sub-net.
| | 01:25 | When the remote debugger is
running it broadcasts its identity to the
| | 01:29 | local network sub-net which allows Visual
Studio on the same sub-net to find the device.
| | 01:35 | You will have to get a
developer license on your computer.
| | 01:39 | The way you do that is you run
Power Shell as an administrator.
| | 01:43 | As you can see on the screen shot I
have to type in Show-Windows Developer
| | 01:48 | License Registration that
causes this dialog to pop up.
| | 01:52 | You'll either be renewing license
or adding it for the first time.
| | 01:56 | You then click on the I Agree button.
| | 01:59 | After a few seconds, you'll see this
dialog that says, "You now have a developer
| | 02:03 | license" and the expiration
date for that developer license.
| | 02:07 | On the developer computer, you just
have to run Visual Studio and open a
| | 02:11 | Windows Store project.
| | 02:13 | Change the deploy location to the Remote
Machine and attempt it deploy it in the machine.
| | 02:17 | Visual Studio will show a screen that
lets you pick the remote computer and
| | 02:21 | enter your credentials if necessary.
| | 02:24 | It's time to switch to my tablet PC.
| | 02:27 | The first step to installing the remote
debugger is to open the desktop version
| | 02:31 | of the Internet Explorer.
| | 02:32 | Touch the desktop tile on the Start
screen, then touch the Internet Explorer
| | 02:37 | icon on the bottom of the screen.
| | 02:39 | I'm going to go to My Favorites,
touch the Favorites icon and click on this
| | 02:45 | remote debugger install, which is
the location for downloading the remote
| | 02:49 | debugger and then I'll touch
this ARM version of the install.
| | 02:54 | At the Download prompt, I'll touch the
Run button, then accept the license terms
| | 02:59 | and touch the Install button.
| | 03:02 | On the User Account Control dialog,
I'll touch Yes and then I'll close
| | 03:08 | the Success dialog.
| | 03:09 | I'm going to run the remote debugger now.
| | 03:13 | I'll swipe in from the right side of the
screen and touch the Search charm, then
| | 03:19 | type in "REM" then touch
this remote debugger tile.
| | 03:24 | Now the remote debugger is running.
| | 03:27 | I'll change a few options in the
tool before switching to Visual Studio.
| | 03:31 | I'll touch Tools, Options.
| | 03:34 | And here, I can pick the port number
that I want to communicate on and I can
| | 03:39 | also pick the Authentication mode.
| | 03:40 | You need to decide what security mode to
use for the connection from your developer PC.
| | 03:45 | The most secure is Windows Authentication.
| | 03:47 | If you use this setting, you might be
prompted for a name and password when you
| | 03:51 | connect to the device.
| | 03:52 | It's time to switch to Visual Studio.
| | 03:55 | In Visual Studio, I've opened the
project called FilePickers and ready to
| | 03:59 | deploy to the tablet.
| | 04:01 | I'll choose this dropdown and pick
Remote Machine from the bottom of the list.
| | 04:06 | Visual Studio finds on my sub-net the
Lynda Surface device. So I click here.
| | 04:12 | It will give me some information about
this device, the IP address, what kind
| | 04:17 | of authentication mode it's using, and when
the developer license expires on that computer.
| | 04:22 | I click on Select and at this moment, I
am now connected and ready to debug or
| | 04:28 | deploy to the computer.
| | 04:29 | Now you can use Ctrl+F5 to deploy.
| | 04:33 | You can press F5 to debug and you can also
choose this menu and choose to Deploy Solution.
| | 04:40 | I'll try this one. Click here.
| | 04:43 | Keep an eye on the bottom of the screen
and I see I have one deploy succeeded.
| | 04:48 | Now I'll switch back to the surface and
see the application running on that device.
| | 04:54 | Here on the surface, I'll press the Window key
to open the Start screen, scroll to the end.
| | 05:00 | There is my FilePickers tile.
| | 05:03 | I'll touch the tile to open the app,
and it's successfully running on this PC.
| | 05:09 | It takes a few steps to get
the tablet ready for development.
| | 05:11 | But now that the tablet is configured,
it is dead simple to deploy and debug on
| | 05:16 | this fancy new tablet PC.
| | Collapse this transcript |
|
|
2. Windows Store App FundamentalsCreating a Windows Store app project with Visual Studio 2012| 00:00 | If you are a .NET developer, you are
probably familiar with Visual Studio.
| | 00:05 | It excels as a developer
tool for many types of projects.
| | 00:08 | If you are new to Visual Studio, I
recommend you watch the Visual Studio
| | 00:12 | Essential Training Course on lynda.com.
| | 00:15 | In this video, I will show you how to
create a Windows Store App with Visual Studio.
| | 00:19 | You have to use Windows 8 if
you're working with Windows Store Apps.
| | 00:23 | I'm running Windows 8.
| | 00:24 | To open Visual Studio, I'm going to
press the Window key on my keyboard and then
| | 00:29 | at the Start screen, I'm going to
type in VIS to find Visual Studio.
| | 00:34 | Then I can either touch or
click this Visual Studio 2012 tile.
| | 00:41 | I'd like to create a brand new project.
| | 00:43 | As you can see on the left side of the
screen, there are several hyperlinks over here.
| | 00:47 | The one I want is this first one, New Project.
| | 00:53 | Next, I have to pick a template.
| | 00:56 | A template contains preset files
and settings for Visual Studio.
| | 01:00 | You can see there are templates for Visual
Basic, for Windows Store Apps, for Visual C#.
| | 01:06 | There's Windows Store Apps and
there's also an area for the C++ Developer.
| | 01:11 | I will work with the Visual C#.
| | 01:13 | So I open this node and then I choose
the Windows Store node and then here are
| | 01:19 | the different templates available for this project.
| | 01:22 | I'll start with the basics, Blank App.
| | 01:24 | I'll come down here and give it a
decent name, Demo1, and then I get to choose
| | 01:29 | whether or not I want a
separate folder for a solution or not.
| | 01:33 | I'll go ahead and take the default.
| | 01:34 | You notice that it's going to put it
in this default location in this Visual
| | 01:38 | Studio 2012 Project folder.
| | 01:41 | So I'll click in OK, wait about two
seconds, and I have a brand new project.
| | 01:49 | If you go to your File Explorer and
look in this Projects folder, Visual
| | 01:53 | Studio 2012 Projects, there is my Demo1
folder and there's my sln file and the other files.
| | 02:02 | I'll talk further about this in other videos.
| | 02:06 | I just created a standard
Windows Store App based on a template.
| | 02:10 | The Solution Explorer on the right
side of the screen is where I can see
| | 02:14 | the Project Structure.
| | 02:15 | You notice there are several standard files in here.
There is map manifest;
| | 02:18 | there is some sort of temporary key file in here;
| | 02:22 | there's two xaml files that I can see:
App.xaml and MainPage.xaml.
| | 02:25 | The one I want to look at is MainPage.xaml.
| | 02:29 | If I double-click on MainPage.xaml, it
loads it into this portion of the Window,
| | 02:34 | the center area of the screen.
| | 02:36 | Now I have a split screen over here.
| | 02:38 | The top half of the screen represents
the Visual Designer and the bottom half of
| | 02:42 | the screen represents the
text editor or the xaml editor.
| | 02:46 | What I'm going to do is add a
background color to this first grid.
| | 02:50 | We'll scroll down, until I find the grid element.
| | 02:53 | Then I'm going to change what's in the background
attribute and just type in a color name here.
| | 02:58 | We'll type in Orange.
| | 03:00 | Notice that Visual Studio gives a list of choices.
| | 03:04 | I can just press the tab key now to finish typing.
| | 03:07 | That's very bright.
| | 03:09 | Let's see what this look like
when you run the application.
| | 03:12 | There are two ways to run the
application from within Visual Studio.
| | 03:15 | You can choose F5, which launches
the app and attaches the debugger.
| | 03:20 | You can also do that through
this menu here, start debugging.
| | 03:24 | You can choose start without debugging which is Ctrl+F5.
| | 03:26 | For today, I'm going to
choose this second option Ctrl+F5.
| | 03:34 | Visual Studio compiles my app,
then starts the app and runs it on my
| | 03:38 | developer computer.
| | 03:39 | As you can see, I have a giant orange screen.
| | 03:42 | Since this is a Windows Store App, it
defaults through the Chromeless full screen view.
| | 03:47 | This is a very basic app, but it
still supports many of the default
| | 03:50 | Windows Store features.
| | 03:51 | For example, I can grab the top
edge of my Window with my mouse.
| | 03:56 | Notice how that cursor turns to a hand and
then I can drag downwards to resize the Window.
| | 04:02 | Now I can drag it to the left side
of the screen and put it in what's
| | 04:06 | called the snapped view.
| | 04:09 | I can then grab this splitter bar and drag to
the right, to put it back in full screen mode.
| | 04:15 | I get all of that functionality
without having to write any special code.
| | 04:19 | If I was running the app on a tablet, I
could use touch, to do the same tasks.
| | 04:24 | I can invoke the charms by pressing the
Window key and the "C" key. Isn't that great?
| | 04:30 | I get the standard charms for my app even
though this is a simple, 'do nothing app'.
| | 04:35 | I'll go over and press the settings charm.
| | 04:39 | You can see that at the top of this list,
I can see some information about my app.
| | 04:44 | It's called Demo1, it's by Walt Ritscher.
| | 04:46 | So that information was pulled from my
app and put in the Settings bar and if I
| | 04:50 | click on the Permissions, you'll see
that my app has permissions to use that
| | 04:55 | Internet connection.
| | 04:56 | Again, this is great.
| | 04:57 | All this functionality is built
right into my "do nothing app".
| | 05:00 | The way you close the app, you can
press Alt+F4 or you can go and drag the top
| | 05:05 | of the window down, all the way to
the edge of the screen on the bottom.
| | 05:09 | Now Because I'm inside Windows 8, when I
close the window in that fashion, I end
| | 05:14 | up back in the Start screen.
| | 05:16 | If I want to return back to Visual Studio,
I can choose Alt+Tab and switch back.
| | 05:22 | I like to modify this app slightly
and show how it works in snap mode.
| | 05:27 | I'll click on my designer;
| | 05:29 | I'll add a rectangle to my xaml.
| | 05:36 | You can see my rectangle in
the center of this designer.
| | 05:39 | It's a 400 x 200 red rectangle
and I need to give it a name.
| | 05:44 | Another way to work with items is to
click on it in the designer and then go to
| | 05:48 | your properties window.
| | 05:49 | Press F4 if you don't see the properties window
and I'm going to give it a name
| | 05:53 | by typing here, rect1, is the name I use.
| | 05:57 | Now I'm going to go to my code behind.
| | 05:59 | I'm going to do that by opening up
this node in Solution Explorer and then
| | 06:03 | double-clicking on MainPage.xaml.cs.
| | 06:08 | That takes me to what's called the code behind view.
| | 06:10 | I'm going to write a few lines of code in this code behind.
| | 06:13 | I'm going to start on this OnNavigatedTo method.
| | 06:18 | You can think of this as this method runs
when our page is viewed in the application.
| | 06:26 | The first thing I'm going to do
here is set up an event handler.
| | 06:30 | Let's say Window.Current.SizeChanged.
| | 06:35 | What I'm doing is I want to react
to whenever the Window size changes.
| | 06:39 | I want to run some code of my own.
| | 06:41 | I'll type in "+=" Visual Studio is
prompting me to just type in some code.
| | 06:46 | So I'll press Tab and then it says
press tab to generate the handler.
| | 06:50 | I'll press Tab the second time.
| | 06:52 | So it's written the rest of this
line and added this method down here.
| | 06:57 | Now I'm going to paste in a little
bit of code here, to save some time.
| | 07:01 | I'm getting some red lines or squiggles
under a couple of portions of my code,
| | 07:06 | that because these classes are not in scope.
| | 07:08 | The Visual Studio has this awesome
tool where I can automatically fix this
| | 07:12 | problem by pressing Ctrl+Period (.)
| | 07:15 | and I get these choices.
| | 07:16 | I'm going to choose this first choice, add
a using statement to the top of my document.
| | 07:22 | I'll do a Ctrl+K, Ctrl+D to reformat my code.
| | 07:26 | Now let's look at this code.
| | 07:28 | I'm checking to see if I'm in the
snap mode and if I am, I set the
| | 07:33 | rectangle with the 200.
Otherwise, it's set to 400.
| | 07:37 | I'll press Ctrl+F5 to run the application.
| | 07:41 | There's our red rectangle,
in the center of the screen.
| | 07:45 | Now I'm going to snap the app to
the side and my code ran and resized the
| | 07:51 | rectangle, so it fits in the location.
| | 07:54 | That concludes our first look
at the Visual Studio Projects.
| | 07:57 | At this point, you've seen how to use
the blank template to create an app.
| | 08:02 | Later in this chapter, I'll show you
how to work with the other app templates.
| | Collapse this transcript |
| Familiarizing yourself with the Visual Studio interface| 00:00 | Visual Studio is a big sprawling developer tool.
| | 00:03 | It has dozens of powerful tools tucked into its interface.
| | 00:07 | Mastering some of these tools will make your
daily coding chores easier and more rewarding.
| | 00:12 | In this video, I will demonstrate
a few of these important tools.
| | 00:15 | I have already opened a solution in Visual Studio.
| | 00:19 | On the right side of my screen is
something called the Solution Explorer.
| | 00:23 | It allows me to look at all of
the files inside my projects.
| | 00:27 | At the top of this list is something called a Solution.
| | 00:31 | A Solution is a container for zero or more projects.
| | 00:35 | This solution has two projects:
| | 00:37 | the App Library Project, which is a
delow project and heading a single class,
| | 00:43 | and it has a Sample App Project that
contains a Windows Store App example.
| | 00:50 | Now you'll notice one thing happened
when I clicked on the Class it loaded a
| | 00:54 | temporary viewer for that Class1.cs file.
| | 00:56 | I'll close that tab by clicking the X button.
| | 01:00 | Each project is a container for files.
| | 01:02 | Each project also produces a
compiled file when the solution is built.
| | 01:06 | So if I were to compile my app
right now, I'd end up with two binaries;
| | 01:10 | one for Sample App and one for the App Library.
| | 01:14 | In Visual Studio 2012, you can
filter these project file list through the
| | 01:18 | Search box at the top.
| | 01:21 | I will type the word gauge,
and here is the filtered list.
| | 01:25 | I can see that there are two PNG
files and a number of files down here.
| | 01:30 | There's a XAML file and a CS file and
some sort of code that's available here.
| | 01:36 | Again, as I touch this with my mouse,
it's letting them in this temporary viewer
| | 01:40 | here on the right side of the screen.
| | 01:42 | If you double-click on a file,
like let me double-click on this,
| | 01:46 | GaugeControl.xaml, then it loads in on a
permanent tab on the left side of the screen.
| | 01:52 | Let me close both these.
| | 01:56 | To stop filtering, I click on this X button.
| | 01:59 | I use this Search feature on a daily basis.
| | 02:02 | Let's look at the xaml designer.
| | 02:04 | I'll double-click on this Demo.xaml file to
load it into the center area of the screen.
| | 02:10 | Double-click.
| | 02:12 | This is the standard view you will get for a XAML file.
| | 02:15 | The top half is a visual designer that
shows the application as it's going to
| | 02:20 | look when it runs, and the bottom
half is an XML editor which works with a
| | 02:24 | special dialect of XML called XAML or X-A-M-L.
| | 02:29 | These two views are linked.
| | 02:31 | If I choose an item on the top half of
the screen, you will see that it moves to
| | 02:35 | the bottom on the bottom half of the screen.
| | 02:37 | If I click on this slider, you'll
see that it moves to the slider.
| | 02:41 | If I make a change, let's say that I
come down here to the slider and I change
| | 02:47 | the horizontal alignment to the right, I
made that in my XML editor, but you see
| | 02:52 | that's reflective in the designer.
| | 02:54 | If I move this gauge control with my
mouse to a new position, you'll see that
| | 02:58 | that brought a new margin value here in the XML.
| | 03:01 | I'll press Ctrl+Z to go back to where it was.
| | 03:04 | That's the Undo key.
| | 03:05 | Let me show you how to add a control to this designer.
| | 03:08 | I'm going to open the toolbox.
| | 03:11 | If you did not see the toolbox, you should
go to your View menu and enable the toolbox.
| | 03:15 | Currently, it's a little nub
on the left side of the screen.
| | 03:19 | If I click on it, it pops out, and then
I can click on this Auto Hide button to
| | 03:24 | stick it to the left side of the screen.
| | 03:25 | Now I'm going to take a toggle switch.
| | 03:30 | Scroll down and you'll find this toggle switch.
| | 03:32 | I'm going to drag that over and
drop that somewhere on my designer.
| | 03:36 | We'll scroll it up so it's a little bit easier to see.
| | 03:40 | Again, I can change the settings here
in the designer in the XML or I can also
| | 03:47 | use this thing called Properties Viewer
or the Properties Grid it's sometimes called.
| | 03:51 | If you do not see the Properties Grid, you can press F4.
| | 03:54 | Now the Property Grid is
arranged by default in a category view.
| | 03:58 | You can change that by selecting this
dropdown and choosing Name or Source.
| | 04:02 | So if I choose Name, they're sorted in
alphabetical order for the properties.
| | 04:06 | I'm going to change the header property. Here it is.
| | 04:15 | I click on the Enter key and you
see that the header changed over here.
| | 04:18 | There's another tool that I use all
the time in Visual Studio, it's called
| | 04:21 | the Document Outline.
| | 04:22 | If you do not see the Document Outline,
you go to View>Other Windows>
| | 04:29 | Document Outline or Ctrl+Alt+T. Now
I'm going to auto hide this window too.
| | 04:35 | In a real app, the XAML will get complicated.
| | 04:37 | The Document Outline provides another
way to view the UI elements in their
| | 04:41 | hierarchical relationships.
| | 04:43 | Once the Document Outline is open,
I can see my elements.
| | 04:45 | Here, I have a user control at the top
that contains a grid, and within that
| | 04:50 | grid are a number of children elements.
| | 04:52 | Selecting an item in the Document
Outline also selects it in the designer
| | 04:56 | and the XAML editor.
| | 04:58 | I can also rearrange the order of the
elements by picking it up with my mouse
| | 05:02 | and dragging them to a new location.
| | 05:04 | Let me try this gauge down here.
| | 05:06 | You don't see any changes in the
designer, but I've just changed what's called
| | 05:11 | the Z index of those controls.
| | 05:12 | Now I'll press Ctrl+Z to undo that action.
| | 05:16 | Next, I'd like to look at
something called the Device Window.
| | 05:19 | To see the Device Window,
use the Design>Device Window.
| | 05:23 | The purpose of the Device Window is to
change settings in the designer to match
| | 05:27 | the possible conditions on the tablet device.
| | 05:29 | When I switch to a different XAML file,
this BlankPage.xaml, which is using a
| | 05:36 | default theme, a black background with white text.
| | 05:39 | Now the user on their computer can
choose to use what's called a Light Theme
| | 05:44 | instead of a Dark Theme.
| | 05:45 | So when I click on this light version
here in the Theme Box, my application is
| | 05:51 | told that we're working in a
machine with the light theme.
| | 05:54 | What should happen is my UI
should change to match that.
| | 05:58 | This is how you test your UI to
make sure that's it's readable in light
| | 06:02 | themes and dark themes.
| | 06:03 | Remember, you need to test this because
Microsoft is also going to test it when
| | 06:07 | you submit it to the store.
| | 06:09 | They're also going to look for
things high contrast mode.
| | 06:13 | You can also test for different
screen sizes and different Visual states.
| | 06:17 | I'll change this 140 scale, and what happened
is my check box here got larger.
| | 06:25 | That's good; it's making itself larger
based on the screen size.
| | 06:29 | Speaking of testing your code on a
device, Visual Studio lets you deploy and
| | 06:33 | debug your app into three
locations that are listed in here:
| | 06:36 | The Simulator, the Local
Machine and the Remote Machine.
| | 06:41 | Let me show you the Simulator.
| | 06:42 | I'll click here and then I'm going to
run the application by pressing Ctrl+F5.
| | 06:52 | After about five to ten seconds, the
simulator is loaded and my application is
| | 06:57 | loaded within the simulator.
| | 06:59 | Now I can interact with it with my mouse.
| | 07:03 | I can also interact with these buttons on this side.
I can simulate touch mode.
| | 07:08 | I can simulate rotation touch mode.
| | 07:10 | I can simulate the users switching this tablet
orientation by clicking on this button here.
| | 07:16 | When you're done with the simulator,
you can click on this minimize button.
| | 07:19 | The simulator continues to run even
while I'm back in Visual Studio, so it's
| | 07:25 | ready for me to load it the next
time I want to try out my application.
| | 07:29 | The final tool I want to show you
is the Store menu; Project>Store.
| | 07:35 | It is here where you acquire your
developer license, take screen shots and
| | 07:39 | configure the App Manifest.
| | 07:41 | Let's choose Edit App Manifest.
| | 07:46 | The manifest is where you set up your
standard store images and app logos.
| | 07:50 | It's here while you tell your user
what capabilities your app needs in order
| | 07:53 | to run successfully.
| | 07:55 | For example, I can state that I
need the microphone capabilities.
| | 07:59 | That concludes this quick tour of the
important XAML and Windows Store App
| | 08:03 | tools and Visual Studio.
| | 08:04 | I'll provide more details about
all these tools in other chapters.
| | Collapse this transcript |
| Knowing when to use Expression Blend instead of Visual Studio| 00:01 | Visual Studio is, without a doubt, the
best developer tool produced by Microsoft.
| | 00:05 | In Visual Studio 2012, the XAML
UI designers are first-rate.
| | 00:10 | Expression Blend is a separate tool
that is also an excellent XAML design tool.
| | 00:14 | That shouldn't be a surprise;
| | 00:15 | they share a common designer engine.
| | 00:17 | Some XAML developers never leave Visual Studio.
| | 00:20 | But that is a mistake.
| | 00:22 | There are some UI tasks that are hard
to do in Visual Studio that only take a
| | 00:26 | few minutes in Blend.
| | 00:27 | Are you afraid it will
interrupt your workflow? Stop worrying.
| | 00:31 | It's trivial to switch to Blend,
and both tools share the same formats.
| | 00:36 | At the bottom of this screen are list of
the activities that I always do in Blend.
| | 00:41 | For example, I always use it for
making my animations and story boards and my
| | 00:45 | style and template editing.
| | 00:48 | I'm inside this project called Blend Collaboration.
| | 00:50 | There are two files that I
want to edit in Expression Blend:
| | 00:53 | this Octopod.xaml file and this Demo.xaml file.
| | 00:57 | I'll start by looking at octopod.
| | 00:58 | I'll double-click on the file.
| | 01:01 | Octopod is a cute animal I created a few years
ago out of a set of ellipses and custom paths.
| | 01:06 | I need to modify the colors and the
angles of the gradients, and that's a
| | 01:10 | perfect job for the Blend Gradient tool.
| | 01:12 | The second file, Demo.xaml -- looks like I
need to build the project so I'll do a
| | 01:18 | Ctrl+Shift+B -- contains a pie chart.
| | 01:24 | In Blend, I'll animate the large blue pie slice.
| | 01:27 | Let's start with octopod.
| | 01:29 | How do you switch to Expression Blend?
| | 01:31 | Well, you right-click on the file you want to
open and choose Open in Blend. It's that simple.
| | 01:39 | Here is the octopod file in Blend.
I can see the bottom of one of his legs.
| | 01:43 | I'm going to hold down the spacebar and
then mouse drag down to pull him into view.
| | 01:49 | There he is.
| | 01:50 | If you look on the left side of the
window, you'll see there's a projects tab.
| | 01:54 | This is similar to the Solution
Explorer inside Visual Studio.
| | 01:58 | If I double-click on this Demo.xaml
file, it will load it into the designer
| | 02:03 | inside the Expression Blend.
| | 02:05 | This designer area is called
the Art Board in Expression Blend.
| | 02:09 | Let me switch back to octopod.
| | 02:12 | On the left side, the
farthest left, is this tool palette.
| | 02:17 | You can see there's a number of tools here.
| | 02:19 | Some of these tools have a
small white triangle on the corner.
| | 02:22 | That means there are additional
tools available for you to work with.
| | 02:25 | For instance, I want to add an ellipse to octopod.
| | 02:29 | So I'm going to go to my toolbar and choose
this dropdown and pick the ellipse tool,
| | 02:34 | and you see that my
cursor changes to a cross hair.
| | 02:37 | Now if I hold down the shift key
while I'm drawing, it'll get a circle
| | 02:43 | instead of an ellipse.
| | 02:45 | Notice that it's using whatever brush
I have selected in the Properties Grid.
| | 02:50 | So it's a transparent blue brush.
| | 02:53 | Once I have the ellipse, I can size it,
I can rotate it, I can do other
| | 02:59 | fun things in Blend.
| | 03:01 | You can also do this in Visual Studio.
| | 03:03 | I'll do a Ctrl+Z to remove the ellipse.
| | 03:06 | What I want to show you next is how to
change the brush that is assigned to the head.
| | 03:12 | To pick the head element out of octopod,
I'm going to go to the section called
| | 03:15 | the Objects and Timeline.
| | 03:16 | I'm going to open this section under
the User Control and I'm going to drill
| | 03:21 | down until I find the head canvas
section and then the head itself, down here.
| | 03:26 | On the right-side of the screen is
the Properties pane, and at the top of
| | 03:31 | Properties pane is the section
where I can choose the colors.
| | 03:34 | You can see I'm currently painting
the head with something called the Head
| | 03:37 | brush, but I can quickly change
to other brushes by clicking here.
| | 03:40 | Let's go back to the head brush.
| | 03:42 | The head brush is painted with a gradient fill.
| | 03:44 | I'm going to edit that gradient.
| | 03:47 | I could edit it for just the head, but
what I want to do is edit it for all of
| | 03:52 | the elements that are using this brush.
| | 03:54 | So what I'm going to do is go to the
section that says Fill, where the little
| | 03:58 | green square is and click here and then
I'm going to choose to edit the brush resource.
| | 04:04 | Now that pops up in the center of the screen.
| | 04:09 | I have a brush currently that's got a blue
and a white color, both of them transparent.
| | 04:14 | I'm going to click on this white color
fill and I'm going to dial in a green value.
| | 04:20 | Do you see what's happening in the art board?
| | 04:22 | Every single element that is painted
with that brush updates to the new color.
| | 04:26 | I'm going to click on OK.
| | 04:28 | Then I'll show you one of my favorite tools.
| | 04:31 | I use this all the time when I'm
working with gradients, and I want to change
| | 04:34 | the rotation or angle or the way
that gradient looks on the page.
| | 04:38 | It's called the Gradient tool and at
lives on the tool bar.
| | 04:42 | Here it is. You can also press the G key.
| | 04:46 | I've clicked on the Gradient tool.
| | 04:47 | Notice the arrow in the center of the art board.
| | 04:50 | There are two circles on this arrow,
there's a blue circle at one end of the
| | 04:53 | arrow and a green circle at
the other end of the arrow.
| | 04:56 | These correspond to the two gradient
stuffs that are part of the brush.
| | 05:00 | If I grab this green circle and
slide it up the arrow, it's changing the
| | 05:06 | location of the gradient stuff.
| | 05:07 | See how it's changing over here, too, to match?
| | 05:11 | If I drag this blue icon over here,
it changes the location on the arrow.
| | 05:15 | I can also do something else with this arrow.
| | 05:17 | I could change the angle of the gradient.
| | 05:21 | I'll drag the head and the tail of the arrow
to change the look of the octopod.
| | 05:26 | Now my octopod is cute, but not
something you see in a practical application.
| | 05:31 | Let's go add an animation to our pie chart.
| | 05:33 | I'm going to double-click on Demo.xaml
and then I'm going to select this
| | 05:40 | large blue pie slice.
| | 05:42 | You can verify that it's
selected in the objects in timeline.
| | 05:46 | See this white bar across the pie slice?
That means it's selected.
| | 05:50 | The next thing I want to do is
set the pie size property to zero.
| | 05:54 | To do that, I'm going over this Property
pane and I'm going to type in slice size.
| | 06:01 | The current slice size is 255.
I'm going to change this to zero.
| | 06:06 | There's a couple of ways I can do it.
One, I could type in a new value.
| | 06:10 | Click and type in 0.
| | 06:13 | But another way of doing that is with this
feature of Blend, which is the four headed mouse.
| | 06:18 | When I hold my mouse over this area,
it changes to a four headed arrow.
| | 06:22 | Now I can hold down the left mouse
button and drag up and down to set the values.
| | 06:27 | So what my animation is going to
do is start at zero and go up to 255.
| | 06:32 | So I'll set this back to zero
and then I will create an animation.
| | 06:37 | To do that, I'm going to go
over to my Objects in timeline.
| | 06:40 | I'm going to click on this plus
symbol to add a new story board.
| | 06:45 | Notice the red border in the art board;
that means I'm recording everything at the moment.
| | 06:49 | I'm going to go to my timeline over
here on the left and set a keyframe at
| | 06:56 | the zero point and then another keyframe at the
two second mark, then I'll go back and review.
| | 07:04 | At zero second, the pie slice size is zero.
| | 07:09 | If I go to the two second mark,
I'm going to set this to 255.
| | 07:17 | I'm being warned that I'm using a
kind of animation that may cause
| | 07:20 | performance problems.
| | 07:21 | I'm going to go ahead and
click Close on this dialog.
| | 07:24 | Then I'm going to scrub this yellow bar
back and forth to see what will happen
| | 07:28 | during the animation.
| | 07:29 | I can also play the animation by clicking Play.
| | 07:35 | I'll make this animation more
lively by adding and easing.
| | 07:38 | To do that, I'm going to click on this
last keyframe with my mouse, then I'm
| | 07:43 | going to go over to my Properties area
and clear out the slice search term by
| | 07:47 | clicking the X button.
| | 07:48 | I'll come down here and choose an Easing.
| | 07:51 | I'm going to choose this Bounce
easing, the Bounce Out easing.
| | 07:56 | And then I'm going to play
my animation one more time.
| | 07:58 | There is the Bounce effect.
| | 08:01 | I'll save the changes in Blend,
| | 08:08 | return back to Visual Studio,
| | 08:09 | Visual Studio notifies me that
I've made some changes with the files.
| | 08:13 | I click on Yes to All and now Visual
Studio is up to date with the Blend version.
| | 08:17 | Just remember, Expression Blend is your friend.
| | 08:20 | Spend some time learning how
to work with this powerful tool.
| | Collapse this transcript |
| Using app templates to jump-start your new project| 00:00 | Visual Studio ships with a
handful of Windows Store App templates.
| | 00:04 | Earlier, we saw the blank app template.
| | 00:07 | In this video, we'll look at the
Grid App and Split App templates.
| | 00:11 | These are complex templates that are
worth investigating for layout ideas.
| | 00:15 | I'm inside Visual Studio and
I'm going to create a new project.
| | 00:18 | I will do that by going to File>New>
Project, selecting my language, C#, then the
| | 00:26 | Windows Store node and then
Split App project template type.
| | 00:31 | You can read more information about the
template type over here on the sidebar.
| | 00:35 | This is a two page project with one page
with details and one page sets an overview.
| | 00:40 | I'm going to leave the app
name at App1 and click on OK.
| | 00:47 | In this Solution Explorer are two pages:
| | 00:50 | Split Page, which is the first page
shown to the user, and Items Page, which is
| | 00:56 | the detail page that is shown when the
user selects an item on the Split Page.
| | 01:00 | There is also a Data model folder
and several other folders in here.
| | 01:05 | The Data model contains
Microsoft's sample data source.
| | 01:08 | We'll investigate this in a few minutes.
| | 01:10 | I'll press Ctrl+F5 to run the application,
to see what we get with this template.
| | 01:17 | This first page is the Split Page.
| | 01:19 | It is populated with sample data.
| | 01:21 | As you can see, Microsoft uses very
generic strings for the sample data.
| | 01:25 | It also uses a simple three-tone gray color scheme.
| | 01:29 | That's good enough for a sample, but
you'll want to change the data and colors
| | 01:33 | to match your app specifications.
| | 01:35 | Clicking on one of these groups loads the Detail Page.
| | 01:40 | Note the left facing arrow at the top left side of the UI.
| | 01:43 | That is the back button that
takes you back to the previous page.
| | 01:46 | Let's try that one more time.
| | 01:48 | I'll go to group Title 3, the left side
has the individual items and the right
| | 01:53 | side has the details about those items.
| | 01:55 | I'll close this app by pressing Alt+F4
and returning back to Visual Studio
| | 02:00 | by choosing Alt+Tab.
| | 02:02 | Next, I will show you a grid app.
| | 02:04 | Rather than creating a new one, I'll
open one that I create beforehand.
| | 02:10 | File>Recent Project and Solutions,
and I'm going to choose this
| | 02:13 | GridAppWithBetterData.
| | 02:18 | Close this window and let's look what we have here.
| | 02:21 | There are three files here, there's a GroupDetailPage,
a GroupedItemsPage and an ItemDetailPage.
| | 02:28 | The first page shown to the user is the GroupItemsPage.
| | 02:33 | Here's what the UI looks like, and I'm
going to make this bottom half a little
| | 02:37 | bit larger and I'm going to scroll down
to look at this CollectionViewSource.
| | 02:41 | This is getting the information from
this SampleDataSource, but it just
| | 02:46 | happens as when you select an item in the
Solution Explorer and it opens this temporary view.
| | 02:50 | Let me close that.
| | 02:51 | What this CollectionViewSource is
doing is it's loading the source from
| | 02:55 | inside that data source.
| | 02:57 | I will show you that source in just
a second, and then it's creating some
| | 03:01 | group binding in here.
| | 03:02 | When you click on one of these items,
it will take you to the GroupDetails and
| | 03:06 | then you can drill down even
further into the ItemsDetails.
| | 03:08 | Let's look at some of the data I've created.
| | 03:11 | I modified this SampleDataSource to
have some sample tour information.
| | 03:15 | It's for a fictitious tour company in California.
| | 03:17 | Most of this is Microsoft's code.
| | 03:20 | For instance, here's something that's
called SampleDataCommon. That's their code.
| | 03:24 | There is a class down here
called SampleDataItem that derives
| | 03:27 | from SampeDataCommon. That's their code.
| | 03:30 | You can see, I've got titles and
subtitles and paths to pictures and so on.
| | 03:35 | I do have some pictures.
| | 03:37 | They're in this Assets folder, here are my pictures.
| | 03:42 | Then down here at the very bottom,
right here, I'm starting to create the
| | 03:49 | instances of those Data Items.
| | 03:51 | So I'm creating a new group called
Group-1 that has a name Gold Country.
| | 03:57 | That's the text that the user should see,
I should say, and a byline,
| | 04:01 | the picture that I want to loadt and
then some details, and then I do the same
| | 04:05 | thing for another one.
| | 04:06 | Here's the American River Bike Trail
and I keep doing that for several groups.
| | 04:10 | Now let's see what this looks
like when you run the application.
| | 04:12 | Ctrl+F5, here's our starting page.
| | 04:17 | This is the group page.
| | 04:19 | I have one group called Gold County
and one called High Sierra.
| | 04:23 | When I click on the group name, it
takes me to the GroupDetailsPage.
| | 04:27 | Here, I'm reading information about the
group itself on the left side and on the
| | 04:32 | right side are all of the
tours that are part of this group.
| | 04:35 | What do you think it's going to happen
when I click on the Whitewater Rafting node?
| | 04:41 | You're right, it takes me to a detail
page about the Whitewater Rafting tour.
| | 04:45 | Here's the picture and a
bunch of text about the tour.
| | 04:48 | Now this back button takes me back to
the tour detail and back to the main page.
| | 04:55 | One really nice thing about these
templates is they are very layout-aware.
| | 04:59 | Watch what happens when I take this page
and I snap it to the side of the screen.
| | 05:03 | You see how dramatically the UI changed?
| | 05:06 | We now have a vertical list of data.
| | 05:10 | I'll pick this Kings Canyon.
| | 05:12 | It looks good over here.
| | 05:13 | Now I'm going to expand the snap view
and I'm back in this wide, rich format.
| | 05:20 | But it remembers where I'm at in the app,
so if I click on the back button it takes
| | 05:25 | me back to the previous page.
| | 05:26 | That's really nice.
| | 05:27 | These templates are powerful and complex.
| | 05:30 | I recommend you spend some time
exploring the details of the template projects.
| | Collapse this transcript |
| Exploring the file structure for an app project| 00:00 | Whenever you create a new Windows
Store App, you get some default files and
| | 00:04 | folders included in the project.
| | 00:07 | Most of these items are essential to
the success of your app or are necessary in
| | 00:11 | order to submit your app to the store.
| | 00:14 | I'm inside the Visual Studio
and I've opened a project called
| | 00:17 | DefaultFileStructure.
| | 00:18 | This is a project that I created
from the blank store template.
| | 00:22 | I haven't modified any files.
| | 00:25 | Let's start by looking in the Assets folder.
| | 00:29 | This is where you store any asset
files like music or image files that are
| | 00:33 | included in the application.
| | 00:35 | By default, you get four files in this location.
| | 00:38 | Logo.png is the default background image for
your Applications tile on the user start screen.
| | 00:44 | It is 150x150 pixels in size.
| | 00:48 | SmallLogo.png is the picture used
when the application list is shown.
| | 00:53 | For example, when you search for an
application in Windows 8 or in the Share
| | 00:56 | menu; the SmallLogo.png is 30x30 pixels.
| | 01:00 | At such a miniature size you want to
make sure that this icon really represents
| | 01:04 | something well-known or recognizable about your app.
| | 01:07 | SplashScreen.png is the initial image
that loads when your application is started.
| | 01:12 | Remember that this image will
always be 620x300 pixels and it will be
| | 01:18 | vertically and horizontally centered
on your user screen regardless of their
| | 01:21 | monitor resolution.
| | 01:23 | Finally, we have the StoreLogo.png.
| | 01:27 | This 50x50 pixel file might be the
most important image in your application.
| | 01:32 | This is the icon that is shown in the App Store.
| | 01:34 | It is the first marketing image a user will
see when deciding which new app to install.
| | 01:39 | Do I need to say this?
| | 01:40 | Don't ship your app with this generic PNG files.
| | 01:43 | Replace them with ones that
represent your application.
| | 01:47 | Next, we'll look in the Common
folder at this StandardStyles.xaml file.
| | 01:53 | This file was lovingly created by
the Win Store XAML team and filled with
| | 01:57 | hundreds of style assets for your application.
| | 02:00 | This template file defines to look for
every control available from buttons and
| | 02:04 | text boxes to fancier items like the app bar.
| | 02:07 | Let me show you some of these styles, down here.
| | 02:13 | When you change a style on this file, it
affects every screen in your application.
| | 02:17 | That is a huge benefit for XAML apps.
| | 02:19 | But be cautious, the styles in the XAML file
know how to adapt to changes in the device styles.
| | 02:25 | If your user picks a dark theme, the
styles in this file know how to adapt to match.
| | 02:30 | How are these styles
applied to all the UX in your app?
| | 02:33 | For that answer, we need to look at App.xaml.
| | 02:37 | I'll close this file by clicking
on the X and then open App.xaml.
| | 02:43 | If you're a Silverlight like or WPF
developer, App.xaml should be familiar to you.
| | 02:48 | For those new to the platform, this
is where the start up code exists and
| | 02:52 | where you put styles, templates and
other resources that are shared throughout
| | 02:55 | the entire application.
| | 02:57 | Note this line here,
ResourceDictionary Source equal, and this file
| | 03:05 | StandardStyles.xaml is the file
we've just looked at a few minutes ago.
| | 03:10 | This line of XAML forces the
application to load the StandardStyles.xaml file
| | 03:15 | as a ResourceDictionary, making those styles
available to every page in the application.
| | 03:20 | There is another file affiliated with App.xaml.
| | 03:23 | If I click on this triangle, I can expand
this note and see a file called App.xaml.cs.
| | 03:29 | This is sometimes called the Code-behind file, too.
| | 03:32 | Many files have it.
| | 03:34 | Here's another example, MainPage.
xaml, has a code-behind file, too.
| | 03:38 | There can be a lot of
code concealed in this file.
| | 03:40 | It's full of application level event handlers.
| | 03:43 | For example, I have this OnLaunched method.
| | 03:48 | This OnLaunched method runs when the
app is launched normally by the user.
| | 03:52 | There's also an OnSuspending method down here.
| | 03:56 | This method runs when Win RT suspend your app.
| | 03:59 | Let's look at MainPage.xaml.
| | 04:02 | This file is the default start screen for the app.
| | 04:04 | It is the first UI shown after the
splash screen is finished loading.
| | 04:08 | By default, this file is mostly empty.
| | 04:11 | You'll need to add some UI to this file.
| | 04:13 | Remember, I also pointed out
there is a code-behind file here.
| | 04:16 | Let's look at that.
| | 04:18 | Most XAML files usually have a code-behind file.
| | 04:21 | This is where you write your
code for managing the main page.
| | 04:24 | Well, that's not entirely true.
| | 04:25 | A lot of developers prefer using view
models and service calls for code, but
| | 04:29 | that's a story for later.
| | 04:31 | Next, I will look at this file here,
the one ends with PFX.
| | 04:36 | Every Store App must be signed by a certificate.
| | 04:39 | This PFX file contains a test
certificate generated by a Visual Studio.
| | 04:44 | This certificate is replaced by a
more authoritative certificate during the
| | 04:47 | app submission process.
| | 04:49 | Finally, we have the Package.appxmanifest file.
| | 04:55 | Double-click to open this file.
| | 04:57 | This is an XML file that contains
everything important about your app.
| | 05:01 | I'm not seeing the XML because
Visual Studio includes a designer tool
| | 05:05 | for editing the XAML.
| | 05:07 | This is where you specify the run-time
configuration for your application,
| | 05:11 | including the background color, logos and
supported orientation those are up here.
| | 05:17 | This is where you define desired capabilities,
like I need to work with the webcam.
| | 05:22 | And this is where you can specify
other certificates and version numbers.
| | 05:27 | This is an important file.
| | 05:28 | If the settings are not correct in here,
your app may silently fail
| | 05:31 | during debugging sessions.
| | 05:33 | Worse, it could fail the App Store Submission Process.
| | 05:36 | These are the basic files included in every project.
| | 05:39 | Get familiar with them.
| | 05:41 | You are going to spend a lot of time in their company.
| | Collapse this transcript |
| Exploring the XAML syntax| 00:00 | You cannot be a successful Windows Store App
developer without utilizing a markup language.
| | 00:06 | There are two choices of markup for apps:
| | 00:08 | HTML, a language utilized by millions of websites;
| | 00:12 | and XAML, a language invented
by Microsoft for UI Expression.
| | 00:16 | Since our app is built on XAML, it's time
to explore the basics of this rich language.
| | 00:20 | This is a deep topic, one that is
covered in the Silverlight 5 Essential
| | 00:24 | Training course on lynda.com.
| | 00:26 | Watch these videos listed on this page for more details.
| | 00:31 | The XAML concepts described in that
course apply for Windows Store Apps.
| | 00:35 | In this movie, I'll provide a brief
introduction to the basic XAML syntax.
| | 00:39 | I'll start by looking at some of
the syntax on this MainPage.xaml file.
| | 00:44 | Let me add a button to this page.
| | 00:48 | I'm going to do that by writing some XAML.
| | 00:50 | I'll move my cursor down here to this
section of the XAML and I'll make a little
| | 00:55 | bit more room at the top.
| | 01:01 | What I've just typed is known as an object element.
| | 01:04 | This will cause an instance of the
button class to be instantiated at run-time.
| | 01:09 | Next, I'm going to set a property attribute.
| | 01:12 | This is an attribute in my XML but it's
going to cause a property to be set on
| | 01:16 | the instance of the button class.
| | 01:21 | I've set three property attributes:
| | 01:23 | I've set the content property, the
width property, and the background property.
| | 01:28 | Each property attribute is linked to a
property on the underlying .net type.
| | 01:33 | Property attributes use a type converter
to convert from the string value to the
| | 01:38 | underlying property type.
| | 01:40 | For instance, this steel blue is a
string, but the background is expecting a
| | 01:46 | brush to be applied.
| | 01:47 | If you ever want to know what the
underlying type is for a property, you can
| | 01:51 | press F1 to see the Help page.
| | 01:54 | Here is the Help page on MSDN.
| | 01:57 | Notice that it says it's of type Brush;
| | 02:00 | that means there is a type converter that's
turning this string into a solid color brush.
| | 02:06 | That happens at compile time.
| | 02:09 | There's another way to assign a
value to a property in XAML, it's called
| | 02:12 | a Property Element.
Here's how you write one.
| | 02:17 | Notice how I put the period in the
center of that element, button.Background?
| | 02:22 | That signifies that I'm
working with the button class and the
| | 02:25 | Background Property.
| | 02:26 | Now the reason why I'm getting a
blue squiggle is because I've set the
| | 02:30 | background property twice;
| | 02:31 | once in a property element and
once in a property attribute.
| | 02:33 | Let me delete this line here.
| | 02:41 | Now I need to add a solid color brush.
| | 02:43 | You see how I am being more explicit here.
| | 02:46 | I created an instance of a solid color
brush and I set an attribute on that to
| | 02:50 | blue, then that solid color brush is being
applied to the background property of the button.
| | 02:55 | This is a more explicit way of doing
what I did in the property attribute.
| | 03:00 | The power of the syntax becomes
apparent when you see how to use your complex
| | 03:04 | nested property settings.
| | 03:05 | To see that, I'm going to open
this page, PropertyElements.xaml.
| | 03:14 | Here, I have a button and I'm setting
the background property not to a solid
| | 03:20 | color brush but to a linear gradient brush.
| | 03:22 | In order to do that, I need to instantiate a
linear gradient brush and set some properties.
| | 03:27 | Then I need to put some other elements
inside there, some gradient stop elements.
| | 03:31 | This would be very hard to do in a property attribute.
| | 03:34 | Here's another example.
| | 03:36 | This button.RenderTransform is causing a
composite transform to be applied to it
| | 03:41 | with the rotation value of -7.595.
| | 03:45 | That's why this button has at a tilted angle.
| | 03:47 | Let me switch back to main page.
| | 03:50 | I want to write a little code to
change the content of the button.
| | 03:54 | I cannot access the button in my code unless it has a name.
| | 03:57 | There are a couple of ways to add a name to an element.
One way is to use the name property.
| | 04:07 | The other way to do it is to use this X: syntax, Name.
| | 04:15 | Note, you can't use both at the same time.
| | 04:17 | This Name property is part of the button class definition.
| | 04:22 | The X:Name is part of the XAML name space,
and that allows me to talk about name spaces.
| | 04:29 | Let me show you.
| | 04:30 | I'm going to delete this part and I'm
going to go scroll up to the top of this page.
| | 04:36 | Here's my page class and here
are the five declared name spaces.
| | 04:40 | This first one, xmlns is the default name space.
| | 04:45 | It contains the button element and all
the common elements used in XAML files.
| | 04:49 | Next, comes the X name space,
this is for the XAML language itself.
| | 04:54 | This is the prefix that I use to
declare the name in my element.
| | 04:57 | Below that becomes a local name space.
| | 05:00 | This name space contains all the classes in my project.
| | 05:03 | Let me show you how to use this local name space.
| | 05:05 | I'm going to come down here after my
button, I'm going to use the local prefix.
| | 05:15 | Visual Studio shows me three of my local elements.
| | 05:17 | I'm going to choose this octopod and then close the tag.
| | 05:22 | As you can see, my custom control is added to the page.
| | 05:25 | That's how you use the local prefix.
| | 05:28 | You bring your own items in the scope and
use them in your XAML. I'll erase that.
| | 05:33 | I still haven't added My Event Handler.
| | 05:36 | To do that, I'm going to come up here.
| | 05:38 | I'm going to type in "click."
| | 05:40 | See the lightning bolt there
that signifies an event attribute?
| | 05:45 | And then here, Visual Studio is saying,
"I can stub in a new handler for you or
| | 05:50 | use an existing one."
| | 05:51 | Let's use this one.
| | 05:54 | Now in my code-behind page, there is
an event handler that will run whenever
| | 05:58 | the user clicks on this button.
| | 05:59 | So it's an alternate way of wiring up an
event handler strictly within your XAML file.
| | 06:05 | The last XAML item I want to explore
is something called a Markup Extension.
| | 06:08 | I'll open this file here, Markup Extensions.
| | 06:11 | This is what a Markup Extension looks like.
| | 06:15 | Here is one on this grid, background equal
| | 06:18 | and then I have a curly brace and some
values here and then a close curly brace.
| | 06:22 | Everything between the curly braces is
a mark of extension where the parameters
| | 06:25 | are being passed to the Markup Extension.
| | 06:28 | A Markup Extension is common for data
binding and style access in your XAML.
| | 06:33 | It provides a way to perform a run-time calculation
for a value for a property attribute.
| | 06:38 | When I use the Markup Extension in my XAML,
I don't have to write the code to do the task.
| | 06:43 | Even better, I can use Expression Blend
or the Visual Studio designer to
| | 06:47 | generate the XAML for me.
| | 06:49 | Let me show you two examples.
| | 06:51 | You see these two text boxes at the top here?
| | 06:53 | They're both blue and then this
third one down here is a rainbow color.
| | 06:57 | Let's take a look at this.
| | 07:00 | Here's the first text box and has a name,
"textHello" and the background color
| | 07:04 | is set to cornflower blue.
| | 07:06 | Here is my second text box.
| | 07:08 | The background property is being
set through a Markup Extension, a
| | 07:12 | binding markup extension.
| | 07:13 | So at run-time, we'll go find an
element called textHello -- here it is --
| | 07:17 | and we'll look up the path for the
background and we'll find out whatever the
| | 07:20 | background value is and we'll assign that
to the background color of this text box.
| | 07:25 | So that implies that, if I change
this to orange or old lace, then the other
| | 07:30 | control changes to match.
| | 07:32 | Here's another example.
| | 07:34 | This text box is getting its background
from something called a Static Resource.
| | 07:38 | This is also a Markup Extension.
| | 07:40 | At run time, we'll look for a resource name sunnyBrush.
| | 07:44 | In my case, that's up here.
| | 07:47 | In the top section, way up here, in my
Page.Resources, I've declared a Linear
| | 07:53 | Gradient Brush called sunnyBrush.
| | 07:56 | I'm pulling that out of run-time and
applying it to the background of this text box.
| | 08:01 | That finishes this brief XAML overview.
| | 08:04 | As you can see, XAML is a powerful and
efficient mark-up language that works
| | 08:07 | tightly with the Win RT UI Element Libraries.
| | 08:10 | In many cases, you can write a complex
UI in XAML without resorting to writing
| | 08:15 | much code. And writing less code
is always that worthy goal, right?
| | Collapse this transcript |
| Working with C#| 00:00 | No matter how powerful XAML becomes,
there are certain tasks that could only be
| | 00:04 | accomplished by writing code.
| | 00:06 | C# is a language for this course.
| | 00:08 | In this video, I will show how C# code
is incorporated into your XAML project.
| | 00:13 | This is not a C# tutorial.
| | 00:15 | If you are new to C#, you should watch the
C# Essential Training course on lynda.com.
| | 00:21 | When you add a XAML file to a Windows
Store project, Visual Studio automatically
| | 00:25 | creates a companion C# file.
| | 00:27 | Let me show you what I mean.
| | 00:29 | I will right-click on my
project and choose Add, New Item.
| | 00:35 | Then I'll pick this blank page and give it a
name of LiveDemo and I'll click the Add button.
| | 00:44 | You'll see that inside the Solution
Explorer, there's a new file called
| | 00:47 | LiveDemo.xmal and another
file called LiveDemo.xmal,cs.
| | 00:53 | By default, Visual Studio names the
code file with the .cs extension and nests
| | 00:59 | it underneath the XAML file, so I can
open and close it by clicking on this
| | 01:03 | little triangle here.
| | 01:04 | There are two files that are
working with the same page.
| | 01:08 | That means there has to be some sort of
link established, so that Visual Studio
| | 01:12 | and the XAML know how to affiliate the two files.
| | 01:14 | Let me show you how that is done.
| | 01:16 | Here at the top of my XAML is a page element.
| | 01:19 | Immediately below that is an X:Class
statement that says, "I need a class inside
| | 01:24 | this project name working with C#.LiveDemo."
| | 01:28 | If that class does not exist in
this project, you'll get a compiler.
| | 01:32 | Let's go look at the class that's
inside the C# file. I'll double-click and
| | 01:38 | scroll down, and look at this line here, there's a
"public sealed partial class, LiveDemo:Page."
| | 01:45 | There's one more criteria.
| | 01:47 | This base class, the page base class, has to
match the tag that's used at the top of the page.
| | 01:53 | Let's go back to LiveDemo and
verify that that's true. Yes.
| | 01:56 | Here's the page element and is also
a Page base class in the Class file.
| | 02:01 | Once you have the code class configured
correctly, you can write code in the code-behind.
| | 02:04 | I'll start by writing this code
inside this MainPage.xaml.cs file.
| | 02:14 | I'll write it down here at the bottom.
| | 02:16 | I'm going to override a method that's on the base class.
| | 02:20 | I'll type in the override keyword and then I'm
going to press the Tab key and the spacebar.
| | 02:26 | Visual Studio looks at the base class and
gives me a list of methods that I can override.
| | 02:31 | The one that I want to override is
called OnPointerMoved. There it is.
| | 02:38 | Now I'll press the Tab key and Visual
Studio stubs in the rest of the code.
| | 02:43 | Here's what I'm going to write.
| | 02:45 | I'm going to create a new variable called PointerPoint.
| | 02:50 | I'm going to call this "pt" and I'm
going to get an argument from this "e"
| | 02:54 | variable here, I'm going to get the
current pointer, e.GetCurrentPoint.
| | 03:02 | I said I was going to get the current pointer.
| | 03:04 | I should have said I'm getting the current point.
| | 03:06 | I'll pass in a special C# word called "this."
| | 03:10 | That refers to the current page.
| | 03:12 | I'm finding out where the current pointer
is based on the position on the page.
| | 03:18 | Once I have that, I'm going to do an Ellipse1.
| | 03:20 | Now I happen to have an ellipse
on this page with the name Ellipse1.
| | 03:26 | I'm going to set its margin to a "new
thickness" and I need to provide up to
| | 03:33 | four arguments in this method.
| | 03:35 | The first argument is going to be
the left margin of the ellipse.
| | 03:38 | I'm going to use the Pointer's X value for that, so I'll say,
| | 03:43 | "(pt.Position.X, 300, 0, 0)."
| | 03:54 | Did you see what I did?
| | 03:55 | I'm getting the current point position,
setting the left margin of the ellipse
| | 03:59 | and the top margin of the ellipse.
| | 04:01 | I'll run the application by pressing Ctrl+F5.
| | 04:07 | Now as I move my mouse on the screen,
or my finger on the Touch screen, this
| | 04:14 | ellipse will move to different positions.
| | 04:16 | I'll press Alt+F4 to close the application
and then return to Visual Studio.
| | 04:22 | .NET element support events.
| | 04:24 | You can think of an event as a
message pass between two types.
| | 04:27 | Events are raised by .NET types and you
can write code to respond to those events.
| | 04:31 | Events are covered in-depth later in this course.
| | 04:34 | For this demo, I'll create an event
handler that runs when the user clicks
| | 04:36 | the second ellipse.
| | 04:38 | To do that, I'm going to scroll up to my
constructor and I'm going to set up an event handler.
| | 04:45 | I'm going to work with the PointerPressed event handler.
| | 04:49 | Next syntax is to type in the "+"
symbol and then "=" and then Visual Studio
| | 04:55 | offers to stub in some code.
| | 04:56 | I'll press Tab once to stub in this bit
of code and I'll press Tab again to stub
| | 05:01 | in the actual method.
| | 05:02 | I'll delete this code and write
a change of the ellipse width.
| | 05:07 | I'll take Ellipse2.Width = Ellipse2.Height = 200.
| | 05:16 | What this code will do is when I press
the ellipse, I'll change the width and
| | 05:20 | height to the 200 pixel size.
| | 05:22 | I'll press Ctrl+F5 to run the application
and I'll touch this yellow ellipse
| | 05:28 | down here with my mouse.
| | 05:29 | This also works with your finger if you have a
touch screen, and I now have a larger ellipse.
| | 05:34 | I showed you how to override a method and
I showed you how to write an event handler.
| | 05:39 | It's also possible for you to place
code in separate files and call that code
| | 05:43 | from the code-behind file.
| | 05:44 | Let me show you a demo then.
| | 05:46 | I'll press Alt+F4 to close the application,
switch back to Visual Studio and
| | 05:51 | I've already got a Class over here called DiceFactory.
| | 05:54 | I'll open that up and what I have here
is a method called GetDiceRoll that takes
| | 06:00 | a number of dice I want to roll and returns
a random number generated from that.
| | 06:04 | Here is my random number generator at the top.
| | 06:07 | I've already got the code.
| | 06:09 | I'll just paste it in.
| | 06:10 | Open this dice code snippet, copy this,
switch back to DiceFactory, and paste it
| | 06:19 | here where I have this return null.
| | 06:21 | What this code does is it creates a
new observable collection, which I'm
| | 06:24 | returning, of integers.
| | 06:28 | I am going to do a "for loop" here
based on the dice count and I'm going to add
| | 06:34 | to my temporary observable collection,
one number for each dice ever requested.
| | 06:39 | What this code is doing is it's creating
a new observable collection of integers.
| | 06:44 | Next, I have a "for loop," which goes
to the number of days counts and adds a
| | 06:48 | number to this temporary
collection, one for each dice request.
| | 06:52 | Now let's call this method,
getDiceRoll from my main page.
| | 06:56 | I'll go to my main page C# file.
| | 07:00 | In the constructor, I'll write this code,
ListView1.itemSource = and now I'm
| | 07:06 | going to make that method call to my
DiceFactory.getDiceRoll and I'll ask for a
| | 07:13 | three dice to come back.
| | 07:16 | I have a list view on this page.
| | 07:18 | You'll see that as soon as I run the
application, Ctrl+F5 to run, and there is
| | 07:24 | my three dice numbers, 4, 3, and 6.
| | 07:28 | Feel free to use those in your local lottery.
| | 07:31 | Send me half your winnings.
| | 07:32 | Alt+F4 to close the application and
return back to Visual Studio. To make the
| | 07:37 | dice factory reusable across multiple
Windows Store Apps, we need to move the
| | 07:40 | code out of this project.
| | 07:42 | One possibility is to place the code in a separate class project.
| | 07:47 | To do that, you could go to your Solution,
right-click and choose to Add a New
| | 07:52 | Project, and then you can choose a
Class Library for Windows Store apps.
| | 07:59 | Another popular approach with tablet
and MOLAP to put the code in the cloud and
| | 08:04 | then call the method via the Internet.
| | 08:06 | Visual Studio supports the cloud.
| | 08:09 | Here's the Cloud link.
| | 08:11 | You can create Azure projects in Visual Studio.
| | 08:14 | Azure is Microsof't latest Cloud initiative.
| | 08:17 | If you want to work with Azure, click
on this link to download the azure.sdk.
| | 08:25 | To summarize this brief C# introduction, C#
and XAML are tightly integrated with each other.
| | 08:30 | XAML is best for describing the UI
features for pages and user controls.
| | 08:35 | C# is best used for creating rich
business infrastructure code and making
| | 08:39 | function calls to the WinRT framework.
| | 08:41 | You need both to build a successful store app.
| | Collapse this transcript |
| Working with the device simulator| 00:00 | There's nothing better than testing
your app on a real Windows 8 tablet,
| | 00:04 | but let's face reality.
| | 00:06 | You may not be ready to spend $500
for a tablet computer yet. Don't worry.
| | 00:12 | Visual Studio includes a tablet
simulator that lets you try your application on
| | 00:16 | a virtual rendition of the real hardware.
| | 00:18 | In Visual Studio, I have two projects I
want to use to demonstrate the simulator.
| | 00:23 | The first is ExploreCa and
the second is called SimTest.
| | 00:27 | Make the SimTest to start a project
by right-clicking and choosing Set
| | 00:31 | as Startup Project.
| | 00:33 | Unlike other platforms, like Android,
you don't have to go through a lot of
| | 00:37 | steps to configure a simulator before using it.
| | 00:39 | All you need to do is open up Visual Studio
and change this drop down to Simulator.
| | 00:46 | That's it. Now you are ready to try the app in the simulator.
| | 00:49 | To run the simulator, simply press Ctrl+F5.
To debug your app in a simulator, press F5.
| | 00:56 | I'll press Ctrl+F5.
| | 01:01 | Here is my app in the simulator.
| | 01:04 | Currently, I'm in the mouse mode, meaning
I can click on these items with my mouse.
| | 01:09 | You can also simulate a single touch
mode by clicking on this finger icon.
| | 01:13 | This big circle represents the
finger of a user touching this item.
| | 01:18 | Let me see if my code still works.
| | 01:22 | I would like to enlarge this image by
using the pinch gesture or the stretch gesture.
| | 01:27 | To work with that, I can go to this button,
the Pinch and the Zoom Touch mode.
| | 01:32 | Now this is hard to do with the
mouse, but here's how it works.
| | 01:36 | There are two circles that represent your two fingers.
| | 01:38 | You move over the picture, hold down the
left mouse button and then you use your
| | 01:43 | mouse wheel to simulate pinching and zooming the item.
| | 01:50 | Same thing works with Rotation.
| | 01:51 | We'll switch the Rotation mode, move
over this item, click and hold with the
| | 01:57 | left mouse button, and then you use
the mouse wheel to simulate spinning
| | 02:02 | around that access.
| | 02:04 | It's awkward but at least you can test it.
| | 02:07 | There are a couple of ways of shutting down the simulator.
| | 02:10 | From one, I can click on this Minimize button.
| | 02:13 | That really does shutdown the simulator.
It's just hides to screen.
| | 02:17 | It's still down here on my task bar.
| | 02:19 | Microsoft does that so it is
instantly accessible later when I need it.
| | 02:23 | To really kill it, you can right-click and choose Close Window.
| | 02:29 | For my next demonstration, I'll use ExploreCa.
| | 02:32 | Right-click and Set as Startup Project.
| | 02:35 | I'm going to run the application by pressing Ctrl+F5.
| | 02:42 | I want to simulate changing the resolution on the device.
| | 02:46 | I can do that by clicking on this
button here, Change Resolution and click, and
| | 02:51 | then pick a different resolution;
| | 02:52 | it's 1920x1080 on a 23-inch screen. That sounds nice.
| | 02:58 | Here's what my app looks like on that page. Not too bad.
| | 03:02 | To simulate another resolution, I just
click on that button again and choose 1366x768.
| | 03:09 | I also use this to Test Rotation, click on these buttons,
rotate counterclockwise and clockwise.
| | 03:14 | Click on any of these buttons to test that your application in
those orientations.
| | 03:19 | I also like to take screenshot functionality.
| | 03:22 | See this camera icon here, copy screenshot it says.
| | 03:25 | I'll click on that one once, twice,
and then I'll go then to the Screenshot
| | 03:32 | settings and look at the View saved screenshots and here it is.
| | 03:38 | The simulator works without much fuss.
| | 03:40 | It's not as fast as working with real hardware,
but when you don't have a Microsoft surface,
| | 03:45 | it's a reasonable solution for testing your app.
| | Collapse this transcript |
| Debugging your code| 00:00 | Debugging is a critical skill to have as a developer.
| | 00:03 | In this video, I will show you a few
of the Visual Studio debugging tools.
| | 00:08 | I'll debug in this application called Debugging App
and all the code I'm going
| | 00:12 | to be looking at is inside MainPage.xaml.
| | 00:15 | I'll start by showing the MainPage.xaml UI. It's very simple.
| | 00:19 | It just has three buttons that I'll use for the demos.
| | 00:22 | I'll double-click on this top button to see the code.
| | 00:26 | The Debug class provides a simple way to
output information while debugging your app.
| | 00:31 | Here, I'm calling the WriteLine method and outputting a string.
| | 00:36 | I'm also calling WriteLine after this method call.
| | 00:39 | Down here in this method itself, to check if tour is full method,
| | 00:43 | I'm also writing out a little bit information.
| | 00:46 | There is an overload of the WriteLine
method, that let's me do a little bit more
| | 00:51 | interesting stuff when I write the line.
| | 00:52 | I can choose WriteLineIf and then I
can put a Boolean expression here,
| | 00:58 | (tourID<0, and then I can change this
as a "In Tour Method - Negative Input").
| | 01:09 | Well, I need a comma here too.
| | 01:13 | I'm ready to debug.
| | 01:14 | I'll press F5, which will run the
application and attach a debugger.
| | 01:18 | Now I'll click on this top button.
| | 01:21 | Nothing visible happens inside the
application, but if I switch back to Visual
| | 01:25 | Studio, you can see that my three
debug outputs are in this Output window,
| | 01:30 | before the call, in the Tour method
with a negative input and after the call.
| | 01:36 | If you do not see the Output window,
you can enable it by going to the Debug
| | 01:40 | menu, Windows, and then choose Output.
| | 01:45 | Visual Studio, like most modern ID's,
supports adding breakpoints to your code windows.
| | 01:50 | A breakpoint is a signal to the
debugger to stop the execution of your
| | 01:53 | application and break into the code editor.
| | 01:57 | I'll use this code down here for breakpoints.
| | 02:01 | There are several ways to add a breakpoint in Visual Studio.
| | 02:03 | The easiest is to press the F9 key. That is a Toggle.
| | 02:08 | Everytime you press F9, it enables
or disables that breakpoint.
| | 02:12 | Another way to add a breakpoint is
to click on the gray margin bar on the
| | 02:17 | left side of the screen.
| | 02:19 | The Margin Bar also provides other options for the breakpoint.
| | 02:22 | When you right-click on this red dot,
you'll see some other options for the
| | 02:26 | breakpoint, Hit Count, Condition, and Filters.
| | 02:31 | I'm not going to use any of those in this demo.
| | 02:34 | I'm ready to test my breakpoints.
| | 02:35 | I need to stop debugging.
| | 02:38 | I'll press in this Stop Debugging button
and then I'm going to choose Local
| | 02:41 | Machine and then press F5 again to debug.
| | 02:45 | Now I'll click on the second button and
I've hit my breakpoint inside Visual Studio.
| | 02:51 | I can tell because the line of code is
in yellow, and if you'll look on the left
| | 02:55 | margin, you'll see there's a yellow arrow over there.
| | 02:58 | That signifies, I'm sitting at this line of code.
I haven't run this line of code yet.
| | 03:02 | To run the line of code, I press F10 or F11.
| | 03:06 | I'll press F11 and steps a single line.
| | 03:09 | It skips over that line of code.
| | 03:13 | I wanted to see what would happen when
caseCount was larger than 30, so what I'm
| | 03:17 | going to do is grab this yellow arrow
and drag it back up to the if statement,
| | 03:23 | and then I'm going to modify this value.
| | 03:25 | Currently, caseCount is equal to 7.
| | 03:28 | I can modify that by opening up my Locals window.
| | 03:32 | Local shows all the variables that are
in scope inside this method and choosing
| | 03:37 | caseCount and typing in a new number.
| | 03:41 | Now let's see what happens up here.
| | 03:43 | If I hover our caseCount, it says 60.
| | 03:46 | Now I'll also press F11 to step
through the code and you see, I've now
| | 03:49 | entered that if statement.
| | 03:51 | Let me stop the debugger.
| | 03:55 | You are not limited to debugging on the local computer.
| | 03:58 | You can easily debug on the simulator or the tablet.
| | 04:02 | Just choose a desired location
from this dropdown and then press F5.
| | 04:08 | Here's my app running on the simulator.
| | 04:11 | I'll click on the Add Breakpoint button,
and there are my breakpoints and again,
| | 04:15 | I can step through this code by
pressing F11 just like before.
| | 04:19 | It's just as easy to work with the tablet.
| | 04:23 | I'll stop debugging, choose the Remote Machine.
| | 04:27 | Here comes the Remote Debugger Connections.
| | 04:30 | There is my surface tablet.
| | 04:32 | I'll click on this one and then click on Select.
| | 04:36 | I'll press F5 to debug the application.
| | 04:39 | I'll switch to the tablet now.
| | 04:43 | As you can see, Visual Studio deployed
the app to the surface, started the app
| | 04:48 | and attached the debugger to the process.
| | 04:49 | When I touched the second button here
on the tablet, the breakpoint is hit
| | 04:55 | in the Visual Studio.
| | 04:56 | From this point, the Visual Studio debugger
works the same as the other two methods.
| | 05:00 | Press F11 to step through the code and so on.
| | 05:05 | Let me stop the debugger and switch back to
the Local Machine for the rest of my demos.
| | 05:13 | The last thing I want to show you is the Watch window.
| | 05:16 | The Watch window allows me to put any
variables I want on the bottom of the
| | 05:21 | screen while I'm debugging.
| | 05:22 | Let me put a breakpoint here by
pressing F9 and pressing F5 to run the
| | 05:27 | application with the debugger and
then click on the Watch window button.
| | 05:31 | On the bottom of my screen, I have the
Autos window, the Locals window, and the
| | 05:36 | window I'm interested in, the Watch window.
| | 05:38 | Now I can take this value here, message,
and write it here in the Watch window,
| | 05:45 | and then it keeps a permanent display
on the bottom half of my screen showing
| | 05:49 | the information for that message.
| | 05:51 | Watch what happens as they step through my code.
| | 05:53 | I'll run this line of code and then in the
Watch window, you can see this string value.
| | 05:58 | Now the red color signifies as the
most recent change in the Watch window.
| | 06:03 | Let me try another item.
| | 06:04 | I'll put t down here, t. and I'm
going to work with this tour instance.
| | 06:10 | I want to print out the TourName to the Watch window.
| | 06:14 | Currently, it says, t = null.
| | 06:17 | Now I'll step down here to these lines of code.
| | 06:20 | Finally, you can see Wine Country show up.
| | 06:24 | You can also just put the entire object
in here, put t like that, and Now I can
| | 06:28 | click in this + symbol to see the
information for each of the properties.
| | 06:31 | Visual Studio is packed with debugging tools,
many more than I can discuss in this course.
| | 06:37 | To learn more about the rich debugging
tools available, I suggest you watch the
| | 06:41 | Visual Studio Essential Training course.
| | 06:43 | It has an entire chapter on the
Visual Studio Debugging tools.
| | 06:47 | That course covers all the debugging windows,
details about the breakpoints, the
| | 06:51 | fantastic IntelliTrace feature and more.
| | Collapse this transcript |
| Understanding screen resolution and image resources| 00:00 | Windows has always had limited
support for high DPI monitors.
| | 00:04 | That changes in Windows 8.
| | 00:07 | Finally, the operating system has a
consistent high fidelity look across
| | 00:11 | monitors and many resolution and DPI factors.
| | 00:15 | XAML developers are fortunate.
| | 00:16 | When your application runs on a higher
DPI device, the framework automatically
| | 00:21 | scales your image sizes.
| | 00:23 | That's the good news.
| | 00:24 | The bad news is that just making your
pictures bigger is not the optimum solution.
| | 00:29 | Costumers using the highest DPI devices
will probably notice the lower quality
| | 00:34 | of the enlarged images.
| | 00:35 | It's better to be proactive to create
your own higher resolution images and
| | 00:40 | include them in your app.
| | 00:42 | Microsoft has picked three major
scale factors for Windows Store Apps.
| | 00:46 | Why standardize only three?
| | 00:48 | Having fixed scaling percentages
prevents objects from looking blurry when
| | 00:53 | scaled up or down unpredictably and
it also maintains the size of the user
| | 00:57 | interface elements on the high pixel density devices.
| | 01:01 | It also makes the fonts and contents look sharper.
| | 01:04 | The default size is optimized for the
smallest screens, the 1366x768 devices.
| | 01:11 | Next is the 140% scale, which corresponds
to the 1920x1080 high definition tablets.
| | 01:19 | Finally, there is the 180% scale, the
premium screen seen only on the quad-XGA tablets.
| | 01:27 | There are some special case formats you need to consider.
| | 01:30 | Windows, in certain situations, can
make the Start screen tiles smaller
| | 01:35 | shrinking them to 80% of their original size.
| | 01:38 | Also, for accessibility purposes,
there are two high contrast modes in the
| | 01:43 | operating system, High contrast black
and High contrast white.
| | 01:48 | Switching to high contrast mode
on the operating system is easy.
| | 01:51 | Just open the PC setting screen
and toggle the High contrast slider.
| | 01:55 | Here is a before and after screenshot
of some of the tiles on my Start screen.
| | 02:00 | On the left, are the normal tiles, and on the right
are the black and white high contrast tiles.
| | 02:06 | If you choose to create multiple copies
of your image assets, you need to follow
| | 02:10 | a strict naming pattern for the files.
| | 02:13 | This is an example of the five tiles
I created for a Splash Screen image.
| | 02:17 | My original file was named Splashscreen.png.
| | 02:21 | I renamed that to Splash.scale-100.png.
| | 02:27 | That is the default size.
| | 02:30 | Next, I created a black and white version
of the Splash screen and added the
| | 02:34 | .scale-100_contrast-black identifier to the file.
| | 02:39 | Then I created another black and
white version and named it appropriately.
| | 02:44 | Finally, I created two enlarged versions
on the images and named them with the
| | 02:48 | 140 and the 180 values.
| | 02:50 | Visual Studio provides an editor for
listing the Visual assets for the app.
| | 02:56 | After adding the images to the
Visual Studio project, open the editor and
| | 03:00 | indicate which image is intended for which resolution.
| | 03:03 | In this screenshot, you can see that I've
added the default sized and the 140% sized images.
| | 03:10 | The 180% size file has not been specified yet.
| | 03:13 | There are other ways to add the necessary images.
| | 03:16 | We'll look for details later in this course.
| | 03:19 | To summarize, Windows 8 has
fantastic support for high DPI monitors and
| | 03:23 | screens of many sizes.
| | 03:26 | To make it easier for developers
and designers, to build apps for their
| | 03:29 | countless numbers of screen resolutions
and DPI setting combinations,
| | 03:33 | Microsoft standardizes on three sizes for your image files.
| | Collapse this transcript |
| Understanding animation in modern user interfaces| 00:00 | When I talk to mainstream corporate
developers about animation in an
| | 00:04 | application interface, I often get a
raised eyebrow or distrustful look.
| | 00:09 | There is good reason for this skepticism, though.
| | 00:12 | Animations on older versions of Windows
have always been more of a UI gimmick
| | 00:16 | than a useful enhancement.
| | 00:18 | Plus it was never easy to determine how to
add a decent animation to an application.
| | 00:23 | All of that changed with the debut
of Windows Presentation Foundation.
| | 00:26 | Now when you look at modern UI
trends, you see animations everywhere.
| | 00:32 | Used correctly, they can enhance the user
experience and help transition user expectations.
| | 00:37 | In this video I'll take a short tour of
the animations in some of the existing
| | 00:41 | Windows applications.
| | 00:42 | I'm going to start in the Windows Store.
| | 00:45 | When you click on an item to examine it
you'll notice there's an animation as we
| | 00:50 | transition to the new screen.
| | 00:53 | As a new information is brought into
view, it slid from the right to left.
| | 00:58 | The same thing happens when you
click on these tabs at the top.
| | 01:01 | I'm going to click on Details or Reviews.
| | 01:05 | Notice how the new information slides from
the right side to the left side of the screen.
| | 01:10 | That usually indicates that new
content is coming on to the stage.
| | 01:14 | When I click on the back button, the UI
for the main store screen also slides in
| | 01:19 | from the right to the left.
| | 01:20 | Here is another example.
| | 01:23 | When you swipe in from the left side
of the screen or hold down Window tab,
| | 01:27 | you'll see that this switch task bar pops up.
| | 01:30 | Did you see how it animated in from the side?
| | 01:33 | Let me show you that again.
| | 01:35 | I'll switch to the desktop and then
I'll do the same keystroke, Window tab.
| | 01:39 | It slides in from the left to right.
| | 01:42 | You'll also see the same thing with the
charm bar on the right side of the screen.
| | 01:46 | Window+C will bring that up.
| | 01:48 | Again, you see it animating in from the side.
| | 01:51 | Now I'm going to choose Settings.
| | 01:55 | Did you see what happened there?
| | 01:57 | Once again it animated in from the side.
| | 02:00 | I'll choose Change PC Settings and
then I want you to see what happens when
| | 02:05 | I click and hold or if I had a touch screen,
touch and hold this Notifications item.
| | 02:10 | You see there's a slight animation that
tells the user that they have selected
| | 02:14 | this item but have not released it yet.
| | 02:17 | It's animating to the left and then when I
release the mouse, it switches the screen.
| | 02:22 | These I think are useful animations to show
the transitions in the selections of items.
| | 02:28 | There's also a closing app animation.
| | 02:31 | In Windows 8 you can go to the top of the item
and drag down with your finger or the mouse.
| | 02:37 | Now see here's an animation.
| | 02:38 | As I slide down the screen, it animated
to the small rectangle and then as I
| | 02:43 | move my mouse further down the screen,
you'll see it suddenly animate to a
| | 02:46 | smaller size and then move off the edge of the screen.
| | 02:50 | That indicates to the user that
you're dismissing the item, but you're not
| | 02:53 | moving immediately from one size to another.
| | 02:56 | You're transitioning through an animation.
| | 02:58 | It makes it seem more fluid.
| | 03:02 | Every app has a default start-up
pivot animation. Let me show you.
| | 03:05 | I'm going to click on this Mail app,
keep an eye on the screen.
| | 03:09 | See how it pivots into view?
| | 03:11 | There's also animation here.
Let's say I want to send an email.
| | 03:13 | I click on this plus symbol, the UI animates in the view.
Let's see the close animation.
| | 03:19 | I'll click on this X button and then
when I click on the Delete Draft you'll see
| | 03:25 | it animate to the bottom of the screen. There it goes.
| | 03:28 | There was a slight hesitation and then
it moved to the bottom of the screen.
| | 03:33 | For my last demo, I'd like to show you some
animations in an application called Fresh Paint.
| | 03:37 | These are useful animations, but they're
more whimsical than the ones we've seen so far.
| | 03:43 | Here is the Fresh Paint application.
| | 03:45 | I'm going to dismiss the app
bars by clicking in the art board.
| | 03:49 | See how they animated out of the way?
| | 03:51 | Now if I right-click or drag my finger in
from the top or bottom, they'll reappear.
| | 03:56 | Notice how they animate in and kind
of bounce when they hit the bottom.
| | 04:00 | That shows they're moving in and getting ready to be used.
| | 04:02 | Let's see that again.
| | 04:04 | Right-click, they go away and right-click they appear.
| | 04:07 | There are also some nice animations
when you select the brushes.
| | 04:10 | You see how there's the brush moves up,
but this pallet at the top of the
| | 04:15 | Windows also moves from side to side.
| | 04:17 | This is how you select your brush size here.
Okay, watch this.
| | 04:23 | It's flipping over, as I move to these items.
| | 04:27 | See these pallets flipped at one point and
I love the animation over here on this side.
| | 04:32 | When you click on this color wheel,
you'll see that big circle animate around
| | 04:38 | where I choose a new color for the brush,
dial in my new color, like this purple color.
| | 04:45 | Click on this icon to have it
rotate back to the original position.
| | 04:51 | It's very nice and quite different than a
lot of the other applications in Windows 8.
| | 04:56 | Animations, if used correctly,
can enhance the user experience.
| | 05:00 | The Win Art team has spent
countless hours fine tuning the animation
| | 05:03 | performance, so that it is silky
smooth even on limited ARM hardware.
| | 05:08 | For an in-depth study of this XAML animation
system, watch the animation chapter
| | 05:12 | in the Silverlight 5 Essential Training course on lynda.com.
| | Collapse this transcript |
|
|
3. Page NavigationWorking with the frame| 00:00 | A Windows Store App is
composed from this core parts.
| | 00:05 | The Windows, Frame, and Page
classes are examined in this chapter.
| | 00:11 | UIElements are diverse set of UI
widgets, List View, button, Rectangle, and a
| | 00:16 | bunch of other controls are covered later in the course.
| | 00:20 | Windows Store Apps are Windows Applications.
| | 00:22 | Any UI shown on the screen is embedded within a window.
| | 00:26 | An instance of the Window class is created at app startup.
| | 00:31 | The frame is a container for content.
| | 00:34 | In most cases, this content is a page.
| | 00:37 | The main purpose of the frame is to
facilitate navigation between pages.
| | 00:42 | Therefore, it contains several navigation specific members.
| | 00:46 | Calling the navigate method causes
the frame to change to a different page.
| | 00:51 | The frame tracks each page loaded.
| | 00:53 | That way, you can navigate back
and forward through the page history.
| | 00:58 | The frame raises events as pages are loaded.
| | 01:01 | The Navigating and Navigated events fire
when the page is loading into the frame.
| | 01:06 | The Navigation Progress event is raised
periodically during the loading process.
| | 01:11 | You can also get events when the load fails,
stops prematurely and when the page load is complete.
| | 01:18 | The page is intended as a container for UI elements.
| | 01:21 | There are other containers like
the user control on the framework.
| | 01:24 | What's different about the Page class is
that it has a reference to its parent frame.
| | 01:29 | That means that the page has access to
the navigation controls and the frames
| | 01:33 | back and forwards stacks.
| | 01:36 | I'd like to discuss the App Startup
process before I show you some code.
| | 01:40 | When the app starts, it creates a frame
known as the Root Frames and adds it to
| | 01:46 | the Application window.
| | 01:48 | Later, in the startup cycle, the app
determines which page is considered the
| | 01:52 | Start page and loads that page into the root frame.
| | 01:55 | Let me show you an example of this process.
| | 01:58 | The code for the loading event is inside this App.xaml file.
| | 02:03 | It's actually in this CS file, App.xaml.cs.
| | 02:08 | Here is the code inside the C# file.
| | 02:11 | The key event is here, this
OnLaunched method gets called when the
| | 02:15 | application is starting up.
| | 02:17 | This first line of code on line 44 is
getting the Windows current content and
| | 02:22 | storing it in this Frame variable.
| | 02:25 | Then I instantiated a new frame and put it in that variable.
| | 02:29 | Finally, we set the Windows content to the frame.
| | 02:33 | At this point in the Lifecycle, we have a Window,
which contains a frame but nothing else.
| | 02:39 | There's nothing for the user to
see yet, so I need to load a page.
| | 02:44 | That's what's happening on line 63.
| | 02:46 | This line of code is a bit complex,
but the important part is I'm calling the
| | 02:50 | Navigate method, which is moving it to
the page that I want, and I'm passing it
| | 02:54 | in the type of the page that I'm interested in.
| | 02:57 | In this case, there is a page called Main Page.
| | 03:00 | Main Page is over here.
| | 03:02 | MainPage.xaml and when I run the
application, just double-click on this to see
| | 03:08 | what Main Page looks like, it's a blue
page with some simple text on the top of it.
| | 03:12 | If I press Ctrl+F5 to run the application,
you'll see that that page is loaded inside the frame.
| | 03:21 | To shut down the application, I'm
going to drag from the top of the window to
| | 03:25 | the bottom of the screen back to Visual Studio.
| | 03:28 | Now I have other pages inside this app.
| | 03:30 | I have a page called Products Page, which looks like this.
| | 03:34 | I'm going to make that my startup
page by going back to my C# file, my
| | 03:38 | App.xaml.cs file, and changing this to say, ProductsPage.
| | 03:44 | Now when I run the app by pressing Ctrl+F5,
you'll see that the Products Page
| | 03:49 | is the main page of the application.
| | 03:53 | Another way to shut down this window is to
press Alt+F4 and then back to Visual Studio.
| | 03:59 | In some situations, an app frame
is added to the content of the page.
| | 04:04 | When you do this, you usually add a set of
navigation or loading buttons to the same page.
| | 04:10 | When the user presses the navigation controls,
the child pages are added to the embedded frame.
| | 04:16 | Let me show you how to do this.
| | 04:19 | I'm going to go back to App.xaml.cs and
I'm going to change back to the MainPage.
| | 04:25 | Now I'm going to go add a frame to the MainPage.
| | 04:28 | So I'll double-click on MainPage.xaml
and in this Editor window, I'm going to
| | 04:34 | zoom down, so it's a little bit smaller by clicking Fit All.
| | 04:40 | And then I'm going to open my toolbox and
look for something called the Frame. Here it is.
| | 04:46 | I'm going to drag this Frame over and
then I need to make it so it fills up the
| | 04:52 | center of the screen, so I'll do
that by setting a margin here to 12.
| | 04:58 | All four sides will have a 12-pixel margin.
| | 05:00 | I'll set my horizontal and vertical alignment to Stretch.
| | 05:05 | You'll learn more about this as the course goes along.
| | 05:10 | Now the frame fills up the top part.
| | 05:12 | It's covering up the text on the Main Page,
so I think I'll make this margin 40.
| | 05:16 | Now I'm going to load another page into this frame.
| | 05:22 | Here's how you do it.
| | 05:24 | Change this so it has an open and closing tag.
| | 05:28 | I'm going to load this About Page.
Let's see what that one looks like.
| | 05:32 | The About Page is a green page.
Let's go back to my Main Page.
| | 05:36 | What I want to do is, inside this frame,
I want to tell it to instantiate that
| | 05:40 | page and load it into the Frame.
| | 05:42 | I can do that by referring to the local pages
that are available by using this local prefix.
| | 05:48 | Here in the IntelliSense, you'll see
I've got several pages to choose from.
| | 05:51 | I'm going to choose the About
Page and then close that tag.
| | 05:54 | I'm going to press Ctrl+F5 to run the application
and I see we have syntax error, so let's go fix that.
| | 06:01 | The problem is the frame can only
have one content and I've set it twice.
| | 06:06 | I've set it once here with this content attribute.
| | 06:09 | I've also set it here by putting the
page within the boundaries of the frame.
| | 06:13 | Now you can see the About Page showing up.
| | 06:15 | Again, when I run the application, we
now have a window that contained the
| | 06:20 | root frame that contains a page and
then that page contains a frame which
| | 06:25 | contains a child page.
| | 06:26 | I'll press Alt+F4 to shut this down.
| | 06:30 | With that simple bit of XAML, I'm
able to set the content of the frame.
| | 06:33 | Unfortunately, in setting the page in this
manner bypasses all the navigation events.
| | 06:38 | It's better to use the frames than navigation tools.
| | 06:40 | That topic, I'll discuss in the next video.
| | Collapse this transcript |
| Page-to-page navigation| 00:00 | I have a project with a number of pages.
| | 00:03 | If you look in my Solution Explorer
you'll see there is an About page, a Home
| | 00:07 | page, several Product pages and
the Main page of the application.
| | 00:13 | Let's start by looking at the UI
for MainPage.xaml. This is a shell;
| | 00:18 | it is going to load the child pages.
| | 00:21 | So at the top of the page, I have
several navigation buttons and then in the
| | 00:26 | center of the page I have a frame.
Let's look at the frame.
| | 00:31 | Here it is in my xaml.
| | 00:33 | This frame is inside the page and I've
given it a name so that I can refer to
| | 00:37 | it in my code behind.
| | 00:38 | Now let's review what we know about the Startup process.
| | 00:41 | In App.xaml.cs there is a method called
OnLaunched that runs when
| | 00:49 | the application starts.
| | 00:51 | At some point in that process I'm
loading the main page into the frame.
| | 00:55 | That causes a navigation event to fire, let me show you.
| | 00:59 | I'll go to MainPage and go to the code behind.
| | 01:06 | This event fires when that page is navigated to by the frame.
| | 01:10 | You usually use this method to set up a state for this page.
| | 01:14 | So what I'm doing is immediately loading
the homepage into the embedded frame.
| | 01:19 | Again, using the navigate method.
| | 01:22 | Let's see what this looks like when I
run the app, Ctrl+F5, and here's my main
| | 01:29 | page, the purple area represents
the embedded frame and the Home page.
| | 01:34 | Now while we're here, let's look
at what this application can do.
| | 01:38 | If I click on this Navigate to About
Page, it takes me to the About Page.
| | 01:43 | Then I can click on this Back button to
move me back to the previous page, which
| | 01:49 | in this case is the Home page.
| | 01:51 | There's also a button to navigate to the Products Page.
| | 01:53 | I'll click on that which takes me to
this red Products Page and there are two
| | 01:58 | hyperlinks on this page.
| | 01:59 | If I click on this first one, Product A,
it takes me to the Products Page with
| | 02:04 | the letters AAA across the top.
| | 02:06 | Now I can click on the Back or the Next
to navigate between those two pages, or
| | 02:13 | I could click Home to take me all
the way back to the initial page.
| | 02:17 | There's one other path I can take,
navigate and then to Products B and then to
| | 02:24 | Product B. I'm going to shut down the
application, drag it to the bottom of the
| | 02:28 | page, return back to visual studio.
| | 02:32 | Now let's go and look at how I navigate to these other pages.
| | 02:36 | Here on the Home page I have those buttons
we saw and if I double-click on this
| | 02:42 | Navigate to Products Page, it'll
switch me over to the code behind for this
| | 02:47 | Home.xaml page and as you could see,
it's the same code we've been looking at.
| | 02:52 | I'm using the frame to navigate.
Now let's be clear about which frame this is.
| | 02:56 | I'm inside the Home page, which is loaded by the Main page.
| | 03:01 | So this frame represents the embedded frame.
| | 03:05 | So I'm asking the embedded frame to
navigate off to this Products Page and this
| | 03:09 | frame to navigate off to the About page.
| | 03:13 | In the Products page, I have a hyperlink
and again I can double-click on these to see the code.
| | 03:20 | What I'm doing in this next demo is I'm showing
how to pass data from one page to another.
| | 03:27 | One of the overloads of the navigate
method takes an argument.
| | 03:31 | So here I'm passing a simple string
over to the Products A page and then in
| | 03:37 | Products A, I have a TextBlock on that
page called MessageTextBlock. You want to
| | 03:45 | guess what's happening in
the code behind? Let's look.
| | 03:47 | Press F7 to switch the code behind.
| | 03:52 | In the OnNavigatedTo method, which
fires when I navigate to this page, I'm
| | 03:56 | getting this parameter passed in
called the NavigationEventArgs and I'm using
| | 04:01 | that to retrieve the parameter that I
passed in, which in my case was that simple
| | 04:05 | string and then I apply that to this MessageTextBlock.
| | 04:08 | Now you can get more complex than this.
| | 04:10 | Let me return back to the Products
Page and look what we're doing here in
| | 04:14 | this event procedure.
| | 04:15 | I'm instantiating my own type of ProductInfo,
which has a product name and an InStock property.
| | 04:21 | So I'm setting ProductName and
InStock to true and then I'm passing that
| | 04:26 | complex object in as a parameter.
| | 04:29 | Now over here in Products B page in
the OnNavigatedTo method, I'm going to pull
| | 04:38 | that parameter out by calling e.Parameter
but I need to cast it from an object
| | 04:44 | type back to the correct type which is
ProductInfo and once I've done that, I
| | 04:49 | can get the InStock property and the ProductName.
| | 04:52 | I'm setting this switch, this InStockSwitch.IsOn
property to true or false based on this.
| | 04:58 | Let me show you what that looks like
again, Ctrl+F5 to run the app, navigate
| | 05:05 | here, when I click on the Products
B hyperlink I'm going to pass that
| | 05:09 | information in and populate this
TextBlock with the letters B and turn on this
| | 05:14 | InStockSwitch from the false position to the true position.
| | 05:18 | Next, I'd to look at how I wired
up this Home, Back and Next buttons.
| | 05:23 | So drag the app down to close it,
all tabs switch back to Visual Studio.
| | 05:28 | I'll switch back to the Main Page designer
and look at the code for this Home
| | 05:34 | button, and this Back button, and this Next button.
| | 05:38 | I'll double-click on this Back
button, that's one of the simpler demos.
| | 05:42 | Remember that I'm loading the
child pages into the EmbeddedFrame.
| | 05:45 | So I'm going to use the navigation framework.
| | 05:47 | I'm going to go to that frame and ask
it if it has any pages in the Back stack.
| | 05:53 | If it does, this can go back or return
true then I call EmbeddedFrame.GoBack,
| | 05:59 | which returns me to the previous page.
| | 06:02 | On the Next button, I ask if there are
any pages in the Forward stack and if
| | 06:07 | true, I go forward and the third example,
what I want to do is no matter where I
| | 06:13 | am in the stack I want to go back as far as I can.
| | 06:17 | So what I'm doing is I'm writing a
while loop that says, Check to see if you
| | 06:20 | can go back, if so go back, loop around
try this again, see if you can go back,
| | 06:27 | if so go back" and eventually we'll
exhaust the Back stack, the while condition
| | 06:32 | will no longer be true and we've
reached the end of our Back stack.
| | 06:36 | One last time, let me demonstrate this,
Ctrl+F5, navigate through a couple of
| | 06:42 | pages and then we click on the Home
button to return back to the Home page.
| | 06:46 | So the navigation framework provides
an easy-to-use system to move quickly to
| | 06:51 | any page in your application.
| | Collapse this transcript |
| Dialogs and pop-ups| 00:00 | I'm in a project called PopupsAndDialogs.
| | 00:03 | I'm going to open this MainPage.xaml file
and look at the UI.
| | 00:08 | I have a number of buttons on the left
side of the screen, when I click on these
| | 00:12 | buttons it's going to run each of the demos.
| | 00:14 | Let's look at this first one, the CoreWindowDialog.
| | 00:16 | I'll double-click on this button,
which takes me to the code behind.
| | 00:21 | Use the CoreWindowDialog to show a
dialog with only a title and buttons.
| | 00:26 | It is a modal dialog, which blocks access
to the page UI until it has been dismissed.
| | 00:32 | This example creates a new core
Windows dialog with the default button, a
| | 00:36 | call to dialog that ShowAsync is asynchronous,
meaning that it will be called on another thread.
| | 00:43 | You'll see a lot of these async methods
in the framework, thanks to the C# Await
| | 00:49 | and Async keywords, the call to this method is simple.
| | 00:52 | Just mark the Click method with the
async keyword and then mark the call to the
| | 00:57 | asynchronous method with the await keyword.
| | 01:00 | Let's see what this looks like.
| | 01:02 | I'll press Ctrl+F5 to run the application
and then I'll click on this first button to show the dialog.
| | 01:10 | It's a simple dialog, it has a title and a default button.
| | 01:14 | Notice I cannot click on the app unless I close this dialog.
| | 01:22 | Before I show the code for the next one,
let me show you what the UI looks like.
| | 01:26 | I'll click on this second button and what I want you
to see here is that I've changed the buttons.
| | 01:31 | I have added two extra buttons and
I've changed the text on those buttons.
| | 01:36 | I'll choose Cancel please and then
I'll drag the window to the bottom of
| | 01:41 | the page to close it.
| | 01:43 | Then switch back to Visual Studio.
| | 01:46 | Here is the code for the second button.
| | 01:49 | It starts out the same by declaring a
dialog and setting its title, but then
| | 01:54 | these next three lines create the command buttons.
| | 01:57 | I'm adding those to a Command collection,
and what I'm using to build those
| | 02:01 | buttons is something called the UICommand.
| | 02:04 | The dialog will show this as a button
but it's got some extra data that's used.
| | 02:08 | For one, it has the name of the method that
gets called when the user clicks on this command.
| | 02:14 | I've also supplied my own index value for this command.
| | 02:17 | You'll notice that I've also written a
SaveCommand method, a NoCommand, and a
| | 02:23 | CancelCommand method.
| | 02:26 | I've placed a breakpoint on this line.
| | 02:28 | To do that in Visual Studio you press the F9 key.
| | 02:32 | Every time you press the F9 key,
it toggles on the breakpoint.
| | 02:35 | So now my breakpoint is set.
| | 02:38 | I'll press the F5 key to run this
application with a debugger attached and then
| | 02:43 | click on the second button, and then
I'll click on this Yes, save that file
| | 02:47 | button, and you see my code is in fact running.
| | 02:52 | To stop the debugger, I'll click on the Stop Debugging button.
| | 02:59 | For my next demo, we'll look at the CoreFlyout.
| | 03:02 | The CoreFlyout window is a close
cousin to the CoreWindowDialog.
| | 03:07 | There are two enhancements in the Flyout.
| | 03:09 | One, you can choose the location of the flyout.
| | 03:12 | You set that location as a point in the constructor.
| | 03:16 | Second, the user can dismiss the
flyout by pressing the screen outside of
| | 03:20 | the flyout boundaries.
| | 03:22 | Let me show you what this code looks
like when it's running, Ctrl+F5 to run.
| | 03:27 | Click on this third button, there is the flyout.
| | 03:31 | Do you want to signup for coupons?
| | 03:33 | I'm going to click outside of the flyout to dismiss it.
| | 03:37 | I'll bring it up again and this time
I'll click on the Yes button, which also
| | 03:41 | dismisses the dialog.
| | 03:43 | If you have ever worked with the
MessageBox in .NET, the MessageDialog is a
| | 03:48 | closest WinRT equivalent.
| | 03:50 | Here is what it looks like.
| | 03:54 | Now let's look at the code.
| | 03:55 | Drag the window to the bottom,
switch back to Visual Studio, very simple.
| | 04:04 | I instantiate a MessageDialog on this
line and then I call the ShowAsync method.
| | 04:10 | Here, I'm setting two strings,the title, and the content.
| | 04:15 | Next, I'll look at something called a Popup.
| | 04:17 | Now the Popup is different than all
of these dialogs I've shown you so far.
| | 04:21 | The Popup is actually a XAML element.
| | 04:24 | So let me go to my XAML page to show you this element.
| | 04:27 | I'll double-click on MainPage.xaml.
| | 04:30 | I'll scroll down in my XAML text until I find this section.
| | 04:36 | Let me scroll this up so it's a little bit less room.
| | 04:40 | So inside my grid I have a Popup and the
Popup is the container for any valid UI.
| | 04:47 | So that means I get to specify my own UI.
| | 04:50 | Here, I've created a Stackpanel with
a couple of TextBlocks and a button.
| | 04:55 | Now the Popup has a property called
IsOpen which I can change from True to False.
| | 05:00 | If IsOpen is True, you can see the Popup.
| | 05:03 | If IsOpen is False, you cannot.
| | 05:06 | So let's see what I'm doing inside this button code.
| | 05:10 | I'm setting the location of the Popup
using a random number so it moves around
| | 05:16 | on the screen, and then I'm saying Popup1.IsOpen.
| | 05:19 | Here is what it looks like, Ctrl+F5,
and Show the Popup and there is my cousin
| | 05:26 | UI with the two text blocks and a button.
| | 05:29 | Let's try that again, it should show up in a different location.
| | 05:32 | Remember the use for the Popup is you
can create any custom UI you want and
| | 05:36 | float it over the top of the rest of the application.
| | 05:39 | For my final demonstration, we're going
to look at something called the Popup menu.
| | 05:43 | This is like a context menu.
| | 05:46 | The main restriction to this menu is
it can only have six commands maximum.
| | 05:51 | Here, I've added three commands, Add
to favorites, Remove from favorites
| | 05:55 | and Save to Skydrive.
| | 05:57 | Let's look at the code.
| | 05:59 | I'll close this application by
pressing Alt+F4 and then back to Visual Studio
| | 06:04 | and here is my final bit of code.
| | 06:07 | I'm creating a Popupmenu in my code,
adding a few commands, this one is
| | 06:12 | slightly different.
We haven't seen this one before.
| | 06:14 | This is the UICommandSeparator that's
drawing a horizontal line on the context menu.
| | 06:19 | And then finally, I call await menu
Async and I position it on the screen
| | 06:25 | with this Point value.
| | 06:27 | In conclusion, I'd like to say the
framework has a nice collection of
| | 06:31 | floating dialogs and Popups.
| | 06:33 | There is sure to be one that fits your needs.
| | Collapse this transcript |
|
|
4. Layout Containers and BrushesUnderstanding layout| 00:00 | UI principles keep evolving as our devices and screens change.
| | 00:04 | When the smartphones appeared, our interfaces
shrank to a fraction of our desktop size.
| | 00:09 | So the UI designs change to handle
tiny screens and tiny input controls.
| | 00:15 | Also, recently there has been a movement
in modern UI to simplify and reduce the
| | 00:19 | number of screen elements
presented to our users on one screen.
| | 00:22 | In real-world Windows Store App UI
will have many sophisticated part and it
| | 00:27 | contain overlapping regions.
| | 00:30 | These layers might have translucent
areas and different opacity levels.
| | 00:34 | It might have dozens of sub-areas that are
animated onto the screen as UI state changes.
| | 00:39 | There can be embedded images and video and so much more.
| | 00:44 | This makes a lot of work for the WinRT runtime engine.
| | 00:47 | I guess I've to spend time and money
ensuring that this rendering is fast and battery-friendly.
| | 00:52 | It seems obvious with all the complexity
that we need a framework to facilitate
| | 00:56 | placing elements on the screen.
| | 00:58 | This is called Layout and it means
what the name implies, controlling the
| | 01:01 | location and sizes of a section of the screen.
| | 01:04 | Great layout system will prove
resilient to changes in page size and font
| | 01:08 | settings and they will also adjust
the elements' positions when the screen
| | 01:12 | resolution or device orientation changes.
| | 01:14 | Let's talk about sizing for a moment.
| | 01:17 | Each child element is responsible
for determining its height and width.
| | 01:21 | Most of the time, the size is set to
autosize and the element can adjust its
| | 01:26 | size whenever its contents change.
| | 01:28 | Imagine a text box for a minute.
| | 01:30 | What is the optimal width?
| | 01:32 | Doesn't the answer depend somewhat
on the text content of the control?
| | 01:36 | A page is usually composed of scores of child elements.
| | 01:39 | They can't all go in the root element so
they are typically placed in layout panels.
| | 01:43 | While the child is responsible for its
size, the panel is responsible for the
| | 01:47 | child's position on the screen.
| | 01:49 | Each panel specializes in one layout approach.
| | 01:52 | You can see on the bottom of this
slide a few examples of these strategies.
| | 01:57 | Rows and columns, that would be a grid.
| | 02:01 | Absolute positioning, that would
be a canvas panel, and many more.
| | 02:06 | A Windows Store app page can only hold
one child element or piece of content.
| | 02:10 | Therefore, the page is known as a content control.
| | 02:13 | There are other elements that are
optimized for holding a single content, too.
| | 02:17 | Examples are the button and the check box controls.
| | 02:20 | Since pages and content elements only
hold a single child, there must be other
| | 02:25 | elements that can hold many children.
| | 02:27 | There are two categories of these multi-child elements;
| | 02:30 | Panels and ItemsControls.
| | 02:32 | Panels are responsible for the layout of their
child items and they have no UI of their own.
| | 02:37 | ItemsControls are more sophisticated
and can also contain children.
| | 02:42 | These are controls however, not panels
and can have sophisticated UI templates
| | 02:47 | applied to dramatically change their appearance.
| | 02:49 | ItemControls are typically used
to show a list of application data.
| | 02:55 | The framework ships with a handful of built-in controls;
| | 02:59 | the Canvas, which arranges its
children by absolute coordinates;
| | 03:03 | the Grid, which excels at dividing
the screen into rows and columns;
| | 03:07 | the Stackpanel, which is good at stacking children elements.
| | 03:11 | There is also a special panel for
arranging items in the list controls called
| | 03:15 | the VirtualizingStackpanel.
| | 03:17 | There are other specialized panels,
for example the Carouselpanel looks
| | 03:21 | interesting but it can only be used within an ItemsControl.
| | 03:26 | Details regarding these panels are
available elsewhere in this course.
| | 03:30 | At the top of this diagram, you see the panel base class.
| | 03:33 | It is provided as a base class for
all layout containers and it makes it
| | 03:37 | possible to create your own custom panels.
| | 03:39 | Since the rest of this chapter
elaborates on the built-in panels, I thought in
| | 03:43 | this video I would show you an example
of a custom panel; to do that I need to
| | 03:48 | switch to Visual Studio.
| | 03:50 | There are two key parts to this
example, the Diamondpanel class and
| | 03:54 | the MainPage.xaml file.
| | 03:57 | The Diamondpanel class derives from the
base panel class, and there is a lot of
| | 04:03 | code in here, I'll show you just a few of the lines.
| | 04:06 | At some point in the panel's
lifecycle, it has to pull each one of its
| | 04:10 | children and ask the child elements
what their desired size is. How wide and
| | 04:17 | how tall do they want to be?
| | 04:22 | That is done in the MeasureOverride method.
| | 04:25 | We're overriding a method called MeasureOverride.
| | 04:29 | There is something ironic about that.
| | 04:32 | Here we would loop through all of our
children in the elements and we would ask
| | 04:37 | them for their size.
| | 04:38 | In my example I'm not going to
change the size of the children elements,
| | 04:41 | they're all going to be exactly the
same size, so I'll not ask them what they
| | 04:45 | want their size to be.
| | 04:46 | At a later point in the layout cycle,
the panel will arrange its children.
| | 04:50 | In this case it will tell the child how
wide and how tall it's going to be and
| | 04:55 | it also tell it its X and Y coordinate positions.
| | 04:58 | Let's see how I'm doing that.
| | 05:00 | Notice up here in this ArrangeOverride method.
| | 05:05 | Here, on line 49 I'm grabbing all
of the children controls and then I'm
| | 05:10 | specifying their widths and their heights.
| | 05:14 | This information is coming from a
property on my Canvas, so I can set the
| | 05:18 | property once and all the children
have the same element dimensions.
| | 05:22 | I tell the child its width and its
height and I also tell the child where its X
| | 05:27 | and Y coordinate goes.
| | 05:29 | Then I call the Arrange method and I pass in this rectangle.
| | 05:33 | That instructs the child where to position itself on the screen.
| | 05:37 | Here's what it looks like.
| | 05:38 | I need to go to my MainPage.xaml, I'm
going to bring that Diamondpanel in the
| | 05:43 | scope inside my XAML page by using this local prefix up here.
| | 05:47 | This brings all of the classes in this project
into scope and I can use them on the XAML page.
| | 05:53 | And then you'll see down here, I'm
using my Diamondpanel and I'm specifying my
| | 05:58 | desired element dimensions of 110
pixels and then inside my panel I have a
| | 06:06 | grid that contains a text block and an image,
and that's being arranged at this position.
| | 06:11 | Then the next grid that contains
a text block and an image is being
| | 06:14 | positioned here and so on.
| | 06:16 | So it's going to arrange
them in a diamond pattern.
| | 06:19 | I'm also, on this button click procedure,
instantiating a grid programmatically,
| | 06:27 | adding a TextBlock to the grid and
then adding that to my Diamondpanel.
| | 06:32 | Let's see what this looks like.
| | 06:33 | I'll press Ctrl+F5 to run the application.
| | 06:36 | There are my six items arranged in the
pattern and as I click on this button at
| | 06:40 | the top, the seventh item is added and
it keeps going in this pattern where I
| | 06:45 | arranged them in a diagonal line across the screen.
| | 06:50 | So what you see here is that WinRT
provides an extremely flexible layout system
| | 06:54 | that can be figured in endless permutations,
one of which is sure to be the
| | 06:58 | layout you are looking for.
| | Collapse this transcript |
| Understanding Microsoft layout guidelines| 00:00 | The planning for a modern touch-based
operating system at Microsoft has taken years.
| | 00:06 | The Microsoft research group
prototyped countless user interface variants.
| | 00:10 | They looked at UX limitations on small
screens and examined new opportunities
| | 00:14 | with touch-based systems.
| | 00:16 | Early glimpses of the new UX approach
appeared on the Zune Desktop application
| | 00:21 | and in the Windows Phone 7 release.
| | 00:23 | The result of this work was a
release of the Metro design guidelines.
| | 00:27 | Metro is the code name for a new, clean tile-based system.
| | 00:32 | The Metro name was dropped shortly
before Windows 8 release due to legal issues.
| | 00:37 | The official name for this doc is the
Windows 8 User Experience Guidelines.
| | 00:42 | I recommend that you download a copy
and read every page in this impressive
| | 00:47 | 200-page guide book.
| | 00:49 | The book is well organized and spacious with
clear and easy to understand text and examples.
| | 00:54 | Here is a list of the major sections in the guide book.
| | 00:57 | In this video, I'll discuss the design and layout guidance.
| | 01:00 | Microsoft recommends designing your page
layout using a grid-based layout system.
| | 01:05 | Their default sizes are 1 pixel, 5
pixels, known as a subunit and a 20-pixel
| | 01:12 | block known as a unit.
| | 01:14 | You don't need to think too much
about the sizes because the layout grid is
| | 01:17 | built into the Expression Blend
and Visual Studio 2012 designers.
| | 01:22 | I'll show you this in Visual Studio.
| | 01:26 | I'm in a project called LayoutGuidelines.
| | 01:29 | I'm going to open this page called BlankPage1.xaml.
| | 01:34 | To turn on the gridlines you can click on
this icon on the bottom of the Designer view.
| | 01:39 | It's called Show snap grid.
| | 01:41 | The little block shown on this
grid are the units referred to in the
| | 01:45 | Microsoft Guidelines.
| | 01:47 | So each little block is 20 pixels by 20 pixels.
| | 01:50 | I'll add a button by using my
toolbox, click here to expand my toolbox.
| | 02:01 | I'll drag a button to the Designer
surface and I'll drag a TextBlock to
| | 02:06 | the Designer surface.
| | 02:13 | Now I'll dismiss the toolbox by
clicking on the Auto Hide button.
| | 02:17 | Because I have this Show and Hide snap
grid, this will help me align where this
| | 02:21 | button goes on the screen, but I
could inadvertently put it somewhere not
| | 02:26 | exactly on the units.
| | 02:28 | To help with that problem, I can
click on this Turn on and off snapping.
| | 02:31 | If I turn on snapping then it snaps to the nearest item.
| | 02:35 | Try that again, now it's turned on.
| | 02:43 | That helps align your elements.
| | 02:47 | The document provides detail layout suggestion.
| | 02:49 | For example, the recommendation for an
app page header is to set the left margin
| | 02:53 | to 6 units or 120 pixels and the
top margin to 5 units or 100 pixels.
| | 03:00 | The guideline also contains details about typefaces.
| | 03:04 | The suggested typeface for the page header is SegoeUI Light.
| | 03:07 | SegoeUI is the endorsed typeface for Windows.
| | 03:11 | The versions included in Windows are
optimized to work with the Microsoft
| | 03:14 | ClearType technology.
| | 03:16 | For the content, the recommended left margin
is six units and the top margin is seven units.
| | 03:21 | As to the bottom margin, it depends on your content.
| | 03:25 | For static pages, in pages where the content
can scroll left or right, use 2.5 to 6.5 units.
| | 03:32 | If the content scrolls up and down,
you shouldn't have a bottom margin.
| | 03:37 | The content should extend all the
way to the bottom edge of the app.
| | 03:40 | I'll modify my previous layout in
Visual Studio to match the guidelines.
| | 03:45 | First, I'm going to change some styles to
make them look more like the default UI.
| | 03:50 | I'll click on my button, open my
Properties page and I'll search for style.
| | 04:00 | There it is, and then I'm going to
click on this little rectangle here and
| | 04:06 | choose Local Resource.
| | 04:08 | I'm going to choose this BackbuttonStyle,
now keep an eye on the UI in the
| | 04:14 | Designer and see what happens when I click on this.
| | 04:17 | This is picking up a style out of this
item, the StandardStyles.xaml file and
| | 04:24 | applying it to that button.
| | 04:26 | Next, I'm going to zoom in by holding
down my Ctrl key and using my mouse wheel
| | 04:31 | and then my spacebar and the
mouse button to scroll this into view.
| | 04:36 | But this should be placed right about here.
| | 04:43 | I'll do the same with the TextBlock.
| | 04:46 | I'll set its style to HeaderTextStyle.
| | 04:53 | Now I'm using the recommended SegoeUI.
| | 04:54 | Of course, I should line this up on the blocks to match.
| | 05:00 | Rather than continue working with
this one, let me show you one of
| | 05:03 | Microsoft's templates.
| | 05:05 | Here is this one called GroupedItemsPage
and you can see they are using this
| | 05:10 | layout guideline for all of their interfaces.
| | 05:12 | I'll show you this page too, the
ItemsDetail and the GroupDetailPage all use the
| | 05:19 | same margins and units at the top.
| | 05:23 | The layout guidelines also specify
padding size within horizontal items and
| | 05:27 | horizontal groups of items and vertical padding too.
| | 05:30 | Remember these are strong suggestions from Microsoft.
| | 05:33 | You can deviate from them if you desire.
| | 05:36 | I'm sure that most of the game apps do layout differently.
| | 05:38 | The benefits for following with the
guidelines, is it speeds up your app design
| | 05:42 | and it maintains unity across Windows apps.
| | Collapse this transcript |
| Using vibrant colors for elements| 00:00 | During the last few years, Microsoft has
elevated the designer role to new heights.
| | 00:04 | While you may not agree with every
choice made in the Microsoft product design,
| | 00:08 | you have to give them credit for
making UX design a prominent part of the
| | 00:11 | application lifecycle.
| | 00:12 | The Win 8 design guidelines have
some important recommendations.
| | 00:18 | For one, they say, be authentically digital,
embrace what the PC screen has to offer.
| | 00:24 | Other guidelines, put content before
Chrome, use bold, vibrant colors, and use
| | 00:30 | typography beautifully.
| | 00:32 | As you can see on the screenshot, the
desktop tiles for the Microsoft apps are
| | 00:36 | using solid vivid colors.
| | 00:39 | It's not just the tiles that use these color choices.
| | 00:42 | The plum color is used within the
messaging app for the Back button and
| | 00:46 | the message background.
| | 00:48 | The mail app uses the teal color in a
similar fashion, and the SkyDrive app uses
| | 00:53 | this blue color for the same purposes.
| | 00:57 | Painting a UI element in an app is done with a brush.
| | 01:00 | The solid color brush is the focus of this video.
| | 01:03 | But there are other brushes you should know.
| | 01:05 | I've created this class diagram, which
shows the relationship between brushes.
| | 01:10 | At the top of the list is the Abstract Brush Class.
| | 01:13 | On the left is the SolidColorBrush,
which we're going to be using in this video.
| | 01:18 | Next is the GradientBrush, which paints with multiple colors.
| | 01:22 | I'm going to be using the LinearGradientBrush later.
| | 01:24 | WPF and Silverlight have the RadialGradientBrush,
but Microsoft did not include
| | 01:30 | that brush due to performance reasons.
| | 01:32 | The ImageBrush is used to paint pixels of
the picture on to other parts of the UI.
| | 01:37 | And then I'll scroll over here so you
can see this last one, the WebViewBrush
| | 01:42 | copies the content of our browser page on to other UI.
| | 01:45 | I will start by looking at this SettingBrushInXaml page.
| | 01:51 | Here, I have four rectangles.
| | 01:53 | One, I'm going to use a Named Color.
| | 01:56 | To see that, I'm going to split the
screen in half, and then scroll down to that
| | 02:03 | rectangle, here, and I will select the rectangle. There it is!
| | 02:10 | Here I am using a Named Color.
| | 02:13 | These are prebuilt choices that Microsoft has.
| | 02:15 | If I erase the value it has in here and
hit the Ctrl+spacebar, you'll see a
| | 02:19 | suggested list of the colors that Microsoft provides.
| | 02:22 | I'll change this to CadetBlue.
| | 02:26 | Next, we have the property element syntax, which
allows me to specify it using a Rectangle.Fill.
| | 02:35 | Here I'm saying Rectangle.Fill, that's a
child element of rectangle class right here.
| | 02:42 | Then I'm specifying a SolidColorBrush.Color,
which is orange and a
| | 02:47 | SolidColorBrush.Opacity, which is 0.5.
| | 02:50 | That means this is similarly transparent.
| | 02:53 | You can also specify values with a hexadecimal number.
| | 02:57 | You use the pound symbol in front, and then
you have several hexadecimal numbers here.
| | 03:02 | These first two represent the
alpha channel, transparency channel.
| | 03:06 | The next two numbers represent the
red channel, the two numbers after that
| | 03:10 | represent the green channel, and
the last two numbers, 99 in this case,
| | 03:14 | represent the blue channel.
| | 03:15 | If you'd rather use a designer for
changing the colors, click on this rectangle,
| | 03:20 | and then go over to the Properties window.
| | 03:22 | I'm going to find the Brush section,
which is up at the top, and open that.
| | 03:29 | Then I'm going to make this a little bit
taller so we can see what's going on here.
| | 03:35 | I'm currently setting the Fill color
to Orange, that is, the SolidColorBrush.
| | 03:40 | I can also turn off the Brush
entirely by clicking on this button;
| | 03:43 | that sets it to Null.
| | 03:44 | I can also set a Gradient Brush and an
Image brush here with this Tile Brush.
| | 03:50 | I'm concentrating on the solid color,
so we'll click here, and look at how I
| | 03:54 | can change the color.
| | 03:55 | I can dial in a new color here until I
find the color range that I want, and I
| | 04:00 | can move my mouse around inside this area.
| | 04:02 | If there is a color that already exists
and you just want to grab it, you can
| | 04:07 | use this Eyedropper tool.
| | 04:08 | You click here, you move your mouse
around till you find the color you want,
| | 04:12 | say this dark blue at the top, and you
click once, and that becomes the current color.
| | 04:16 | You can also specify the red, green,
and blue channels, and the alpha channel
| | 04:21 | and the hexadecimal number.
| | 04:23 | Now one of the things I like to
do is work with this Hue Settings.
| | 04:27 | Let me show you how that works.
| | 04:29 | I'm going to pick a color of red like so.
| | 04:34 | Then I'm going to click and hold
on this R and choose HLS.
| | 04:38 | That stands for Hue, Lightness, and Saturation.
| | 04:43 | Now what I'm changing is the Hue
values, the Lightness values, and
| | 04:47 | the Saturation values.
| | 04:49 | So I can keep this red color but
just change the Lightness effect by
| | 04:53 | pressing the up and down arrows,
and that makes it a lighter or darker
| | 04:57 | version of the same color;
| | 04:59 | very handy when you want to have items that
all have the same hue but different levels.
| | 05:04 | As a programmer, there might be times
when you need to programmatically change
| | 05:07 | the color of an element, and you can do that in your code.
| | 05:10 | To see this demo, I'm going to open
this SettingBrushInCode, and I'll press F7
| | 05:16 | to switch the code-behind.
| | 05:23 | Here I'm creating a SolidColorBrush,
and then I'm going to use the colors.
| | 05:28 | It's not in scope, so I'm going to
have to press the Ctrl+Period to use the
| | 05:32 | Windows UI name space.
| | 05:35 | Now I should be able to do the .
operator, and pick from that same list we
| | 05:39 | saw over in the XAML.
| | 05:40 | I'll choose this aqua color.
| | 05:45 | Then I'll copy and paste this a few times.
| | 05:48 | And I forgot the new keyword here,
let's type that in. There we go!
| | 05:52 | I'll copy this and paste that in here and here.
| | 05:58 | You can also retrieve the item out of a style.
| | 06:00 | To do that, you come here, and you say this.Resources.
| | 06:07 | And then I'm looking for a brush
that's already predefined, so I will do sort
| | 06:12 | of square braces here.
| | 06:13 | Then I have to provide the key
value with the name of the resource.
| | 06:16 | So the one I'm looking for is
Application Page Background theme brush.
| | 06:22 | So you type that value in here, and
that's what gets you to pull the item out of
| | 06:27 | the Resource and apply it to this rectangle.
| | 06:29 | Let me come in at this line and move down to the next one.
| | 06:33 | Here, I'm going set it using a custom color.
| | 06:36 | So I'm going to say I want a new
SolidColorBrush, and then I'm going to use the
| | 06:42 | color class .FromArgb method, and here
I'm going to provide a byte value for the
| | 06:54 | alpha channel, 255, and then a byte
value for the red channel, 255, and so on;
| | 07:01 | 0 for the green channel and 0 for the blue channel.
| | 07:06 | Now when you run this application, it
will apply this custom color to this fill.
| | 07:12 | Finally, I wanted to show that color
show up in lots of different places
| | 07:16 | that you may not expect.
| | 07:17 | Let's look over here in this BrushLocations. Here is a border.
| | 07:22 | It has a BorderBrush property, which I can change the color.
| | 07:28 | I can use the same techniques I used earlier.
| | 07:31 | Here is a grid control.
| | 07:33 | I can set its background property to a brush,
and I can even use custom shape.
| | 07:40 | Here's a custom path that I created.
| | 07:42 | And I'm setting its Fill property
to whichever color I desire.
| | 07:47 | Painting bright single color areas in your
UI is accomplished with a SolidColorBrush.
| | 07:51 | The colors are predefined in the API,
or you can build your own custom color set.
| | Collapse this transcript |
| Getting colorful with gradient brushes| 00:00 | A common UI pattern in recent years is
filling portions of your user interface
| | 00:04 | with blended colors.
| | 00:06 | In Windows Store Apps, this is
accomplished with the Linear Gradient Brush.
| | 00:10 | With gradients, you specify two or
more colors, and the rendering engine
| | 00:15 | determines the intermediate color ranges.
| | 00:18 | Here in the Weather App, these rectangles at
the bottom of the screen are using a gradient.
| | 00:24 | It's a light blue color at the top.
| | 00:27 | And at the bottom of the gradient, it blends
in with the background color of the main app.
| | 00:31 | I think this is a tasteful use of gradients in an application.
| | 00:36 | A word of warning, gradients are
performance drains on your app.
| | 00:40 | Test your UI to ensure your gradients are not
hindering the app performance on ARM devices.
| | 00:46 | In Visual Studio, I've opened a
project called GradientBrushes.
| | 00:49 | I'm going to auto hide my
Solution Explorer so I have more room for
| | 00:54 | the properties grid.
| | 00:56 | This first rectangle has a gradient applied.
| | 00:59 | This is what it looks like in the XAML.
| | 01:01 | Here is the Rectangle.Fill property.
| | 01:04 | And inside that, I'm instantiating a
Linear Gradient Brush and setting the start
| | 01:08 | point and ending points.
| | 01:11 | By setting the starting and ending points,
you can have the gradient go from top
| | 01:15 | to bottom, or left to right,
or any angle that you choose.
| | 01:18 | I've also specified two gradient stops;
| | 01:21 | a black stop and a nearly white stop.
| | 01:24 | When you select the gradient stop in
XAML, you can change the color and offset
| | 01:29 | in this property grid.
| | 01:31 | I'm going to click on this black bar
to set the black color to another value.
| | 01:36 | Here is the standard Visual Studio color editor.
| | 01:39 | You can dial in a color by dragging on
this portion of the color editor, and
| | 01:44 | then selecting the color in the center.
| | 01:47 | Another way that you can select the
color is to use this color eye dropper.
| | 01:51 | I'm going to click here, and then go to
my photograph, and choose this pink color.
| | 01:57 | And then, for the white gradient, I'll
choose the same item, color eyedropper,
| | 02:05 | and I'll choose this purple color. It looks nice.
| | 02:10 | You can also set red, green, blue, and
alpha colors, and you can also switch
| | 02:15 | to other color spaces by clicking and
holding here on the R, or any of these other items.
| | 02:21 | I can switch to CMYK, or Hue/Lightness/
Saturation, or Hue/Saturation/Brightness.
| | 02:29 | Now you can see this is HSBA.
| | 02:33 | This is the Alpha channel with transparency values.
| | 02:37 | Another way of doing a gradient looks like this.
| | 02:39 | I'll click on this rectangle.
| | 02:41 | I'll click on brush.
| | 02:44 | These buttons at the top represent the
different types of brush you can apply.
| | 02:48 | This first one means No Brush, the
second means Solid color brush, the third one
| | 02:53 | means a gradient brush, and then
the fourth one is a Tile brush.
| | 02:56 | This is typically used for images.
| | 02:58 | When I click on the gradient brush, I get the
default gradients down here; black and white.
| | 03:04 | Now these little nodes down here
can be moved on the gradient bar.
| | 03:08 | So I can switch the order of the black and white.
| | 03:11 | You can also add other gradient
stops by clicking on this bar.
| | 03:16 | And then of course you select that
gradient stop, and change the color by
| | 03:19 | dialing it in here in the color section.
| | 03:27 | Make this one a blue color. Select this one.
| | 03:31 | I have a blue color, and let's add one more.
| | 03:33 | It will make this a purple color.
| | 03:35 | It's not the nicest looking gradient I've ever made.
| | 03:37 | I think I'll get rid of this purple stop.
| | 03:41 | The way you remove a stop from the
gradient bar is you grab the node, and you
| | 03:45 | pull down off the gradient bar. Okay.
| | 03:49 | I'm happy with that one.
| | 03:50 | Now you can also rotate and transform your gradients.
| | 03:55 | Let's make a simple one here.
| | 03:57 | Click in this last rectangle, add a
basic gradient, and then I'm going to come
| | 04:03 | over to my rectangle, and click on
the linear gradient brush itself.
| | 04:09 | Here are a number of settings for the LinearGradientBrush.
| | 04:11 | You've got different things like color
interpolation values, the starting, and
| | 04:16 | ending point, the collection of
Gradient Stops, the Spread mode.
| | 04:21 | There are different spread modes available.
| | 04:24 | This is more visible if you have multiple stops.
| | 04:26 | But what I wanted to show you is
the relative transforms up here.
| | 04:30 | So let's click on this item, and then
grab this little wheel here, and this is
| | 04:34 | how I can rotate the gradient around to new position.
| | 04:38 | I can also do things like translate it to a new position.
| | 04:42 | I'm going to use the up and down arrows on
the keyboard to move it to a new location.
| | 04:47 | Because I have the Reflection setting
down here, you can see that as I move it
| | 04:51 | to a new position, it's wrapping around to the other side.
| | 04:55 | That completes the demo of gradient settings.
| | 04:57 | The current Windows App Guidelines
downplays the use of gradients in app UI
| | 05:02 | preferring vibrant solid colors instead.
| | 05:05 | My experience tells me that tasteful
use of gradients can help deliniate
| | 05:09 | parts of the UI in a helpful fashion.
| | Collapse this transcript |
| Exploring sophisticated layout with the grid| 00:00 | The Grid panel is most powerful layout panel in WinRT.
| | 00:04 | It is the default layout panel when
you create a new XAML document in Visual
| | 00:09 | Studio or Expression Blend, you
automatically get a grid as the main element.
| | 00:14 | When you add a grid, it
contains one row and one column.
| | 00:18 | It is up to you to add the
additional rows, or columns.
| | 00:21 | When you have the grid structure the way
you want, you assign each child element
| | 00:25 | a location in a suitable row and column within the grid.
| | 00:29 | In Visual Studio, I'm in a project called UsingGrid.
| | 00:32 | Here's the main UI of the app.
| | 00:34 | It contains five buttons along the side
that I want to use for the different demos.
| | 00:40 | We'll start by looking at the AddRows example.
| | 00:46 | On this page, I have a grid with a gray
background, and I've defined three rows already.
| | 00:51 | If I select the grid, you'll be able to see those in the designer.
| | 00:55 | With the blue lines, you make this a little bit smaller.
| | 00:58 | I'll hold down the Ctrl key and use my
mouse wheel to make it a little bit smaller.
| | 01:03 | Then I'll hold down the spacebar and
use the mouse button to move up so it's a
| | 01:08 | little bit more visible.
Now I'll select that grid again.
| | 01:10 | The blue lines represent the rows.
There are no columns yet.
| | 01:13 | If you're the kind of person that likes
XAML, you can add them easily by coming
| | 01:17 | down here and picking the GridColumnDefinition
like so, and now I have one
| | 01:24 | column, which is the default.
| | 01:27 | I'd prefer my XAML to look like this.
| | 01:30 | I will erase that last element.
| | 01:32 | And then I'm going to copy this twice,
and now I have two column blue lines.
| | 01:41 | This button is not specifying a row or
column, so it goes in row 0, column 0,
| | 01:48 | numbering starts with a 0.
| | 01:49 | I can change that by coming down here and typing in Grid.
| | 01:55 | What I'm doing is setting a property
on the button, but it's the grid that's
| | 01:58 | interested in the information; so Grid.Row="1".
| | 02:02 | That moves the button down to the second row.
| | 02:06 | And now, I'll say Grid.Column="1" and
now it's moved into the center area.
| | 02:12 | Now I'll run the application by pressing Ctrl+F5.
| | 02:18 | And then clicking on this Add Rows
button, that button, the child element there
| | 02:22 | is in the center cell, but you can't
tell where it is because none of the lines
| | 02:27 | are visible when you're running the application.
| | 02:28 | Alt+F4 to close the app and
I'll switch back to Visual Studio.
| | 02:33 | I can add columns to this grid in another fashion.
| | 02:36 | If I move my cursor up to the top area of Visual
Studio, you'll see that I get a yellow triangle.
| | 02:42 | Now when I click, I'm adding
another column, and I'm adding another row.
| | 02:47 | Let me zoom in a little bit so we can
see what we're going to do with this
| | 02:52 | button, and make sure that we can
see the XAML on the bottom of the page.
| | 02:56 | Now watch what happens when I pick up
this button and move it to a new location.
| | 03:00 | If you keep your eye on the XAML,
you'll see that it updates the Grid.Row and
| | 03:05 | Grid.Column based on my movements.
| | 03:08 | If I drop the button between the two
cells then you'll see that it adds this
| | 03:13 | property called ColumnSpan.
| | 03:15 | Same thing happens if I move it, so it spans to rows.
| | 03:18 | So it's smart about this.
| | 03:19 | The way that ColumnSpan works is you're
telling the element to go in one column,
| | 03:24 | but you're telling it that it needs to
go across the boundary of another column,
| | 03:28 | spanning two columns.
| | 03:30 | Next, let's look at this Placing panel in Grid.
| | 03:38 | Here's my grid definition, and inside
my grid definition is the Stackpanel.
| | 03:44 | Sophisticated layout in the
framework is accomplished with nested panels.
| | 03:47 | A grid is usually filled with a dense layer of child panels.
| | 03:51 | This is a simple example to show what I mean.
| | 03:53 | The stack panel is living inside the grid.
| | 03:56 | It's the Stackpanel specifying Grid.Column="1".
| | 03:59 | And then the buttons live inside the Stackpanel.
| | 04:03 | I can control the sizes of my columns or my rows.
| | 04:05 | There is a Width and Height property
available in the row definition and column
| | 04:09 | definition elements.
| | 04:11 | I'll open up this file ControllingSizes.
| | 04:18 | And again, I'll maneuver and then I'll size the UI.
| | 04:22 | Here I can see the grid, and we'll
scroll down here so we can see that row
| | 04:27 | and column definitions.
| | 04:29 | I already have some width set for the columns.
| | 04:32 | I can hardcode a width by specifying
a pixel number here. Let's put in 40.
| | 04:38 | Now I have a 40 pixel wide column,
the buttons in that column have been
| | 04:42 | compressed in width to fit.
| | 04:44 | I can also specify what's called an Auto Size.
| | 04:46 | What Auto Size means is that the column
is sized to whatever the widest element is.
| | 04:53 | All of these buttons fit nicely in that first column.
| | 04:55 | There is also a star sizing, which is what I had originally;
| | 04:59 | three-star, two-star.
| | 05:02 | The way this works is you're specifying a
group of sizes, three plus one plus one.
| | 05:08 | That's the sizes that we're using
to determine the width of the unit.
| | 05:11 | So this last column is one unit in width.
| | 05:14 | The next and the last column is one unit in width.
| | 05:17 | And the first column is three units in width.
| | 05:20 | It's a way of doing proportional sizing.
| | 05:23 | You can also change these sizes
with the Visual Studio designer.
| | 05:26 | Let's move up to the top of the grid with your mouse.
| | 05:29 | Let me scroll up so it's a little bit easier to see.
| | 05:33 | You can see this got three-star, one star, and one star.
| | 05:36 | If I hover my mouse over these little
white areas, I'll get a size pop up.
| | 05:40 | Now I can come up here and choose to
switch this to pixel size or to switch it
| | 05:45 | to auto size, or just switch it back to star size.
| | 05:50 | See how it's changing the values down
here in my XAML, and I can also set some
| | 05:54 | other items in here.
| | 05:55 | Select Columns, Move Columns around in the screen.
| | 05:58 | I'll show you auto size on another page.
| | 06:01 | We'll go to Auto Sizing.
| | 06:05 | Here are several rectangles inside this
column, and some of these rectangles are
| | 06:09 | too big to fit because I've set
the column to be 100 pixels wide.
| | 06:13 | We'll go up here, we'll change this
to Auto and now the column size is the
| | 06:18 | largest item, this blue rectangle.
| | 06:20 | It's common to allow users to
size the column or rows in a grid.
| | 06:24 | Silverlight has the grid splitter control,
but that control is missing in WinRT.
| | 06:29 | The solution is to create an extra
column, and add an event listener that
| | 06:32 | responds whenever the user drags the sizing column.
| | 06:35 | I've got a demo of that here, DynamicallySizingAtRunTime.
| | 06:40 | I have a number of columns at the top,
and this narrow column here, this 30
| | 06:45 | pixel wide column is going to be my sizing column.
| | 06:48 | Let's see what's in there.
| | 06:49 | Inside that column, I put a
rectangle in there with a lavender backfill.
| | 06:53 | I told it to stretch vertical and
horizontal so it fills up that column.
| | 06:59 | I told it to span the five rows that I have.
| | 07:02 | I placed it in the second column as you can see here.
| | 07:05 | And then, I'm using two manipulation items here.
| | 07:09 | I'm going to use the ManipulationDelta
event and setting the Manipulationmode property.
| | 07:14 | I'll cover these awesome touch events
in more detail later in the course.
| | 07:20 | Let's look at the code; press F7.
| | 07:22 | Here's the splitter ManipulationDelta event.
| | 07:25 | What I'm doing is through this
ManipulationDeltaRoutedEventArgs, I'm getting the
| | 07:30 | current translation, how far
you've moved to the left or right.
| | 07:34 | I am finding out the actual width of
the column to the left of this cell.
| | 07:39 | Now this is a name that I created.
| | 07:41 | If I switch to my XAML, here's my grid,
and in my ColumnDefinitions, this is my
| | 07:47 | 30-pixel wide column that contains the
splitter, but I named the column before
| | 07:52 | it and after it, column left, and column right.
| | 07:56 | So I switch back to my code.
| | 07:58 | I'm checking the actual width of
the column left and starting in here.
| | 08:02 | And then I'm making some changes.
| | 08:04 | I'm setting the width base on this delta
value that I got and then I'm assigning
| | 08:08 | a new width to that column.
| | 08:10 | So when you run the application, Ctrl+F5,
I'll be able to go in here, grab the
| | 08:17 | splitter, and the first column, I'm
changing the size of the column, which is
| | 08:22 | also changing the size of the items in there.
| | 08:24 | I'm not changing the size of the right column yet.
| | 08:27 | I'll leave that up to you.
| | 08:28 | The grid is an essential layout control.
| | 08:30 | I use it on nearly every project I create.
| | Collapse this transcript |
| Absolute positioning with the Canvas panel| 00:00 | Sometimes you don't need all
the power of the layout system.
| | 00:03 | You just want to brute-force the
location of an element on the screen.
| | 00:07 | This is a terrible idea for data entry
forms or other stand put input screens,
| | 00:12 | but it's perfect when you need a
drawing surface in your application.
| | 00:15 | Another use is when creating logos,
vector art, or custom graphics.
| | 00:20 | In these cases, use the canvas panel
to tightly control the spatial
| | 00:23 | relationships of elements within the overall drawing.
| | 00:27 | The canvas is the best performing panel
because it has a simple layout system.
| | 00:31 | It simply positions elements based
on a provided X and Y coordinates.
| | 00:35 | You use it when you need
something light weight and flexible.
| | 00:39 | I'm inside a project called Using Canvas.
| | 00:42 | I'm going to start by looking at this BasicCanvas.xaml file.
| | 00:46 | This is a page that contains a canvas,
and inside the canvas are three rectangles.
| | 00:52 | None of these rectangles have specified
a location to the canvas, so they're all
| | 00:57 | being placed in the upper left-hand corner of the canvas.
| | 01:01 | If you want to change the location, you use
what's called an Attach property on the rectangle.
| | 01:06 | You might be surprised to find that
Elements don't have an X or Y property, nor
| | 01:10 | do they have a top or left property. Why is that?
| | 01:16 | Remember that the child element is only
responsible for telling its size to the layout engine.
| | 01:20 | The panel takes care of the positions of it's children.
| | 01:23 | X and Y coordinates have meaning to the canvas panel.
| | 01:26 | They don't make sense in a stack panel though.
| | 01:29 | So it is the canvas panel that has the left and top property.
| | 01:32 | What I do is I type in the word Canvas.Left
and then I'll type in 120 here.
| | 01:40 | And you see that the purple rectangle
moved to the left. So let's be clear.
| | 01:46 | I'm in the rectangle, but I'm setting a
property that has meaning to the canvas
| | 01:51 | inside the rectangle.
| | 01:52 | I can also move these items up or down the Z order;
| | 01:57 | left, right, and forward, and backwards.
| | 01:59 | I'll take this red rectangle and move it up
in the Z and X. I'll type in Canvas.ZIndex.
| | 02:11 | I will type a big number in and you see
how it moved up in the Z order, and it's
| | 02:16 | covering up the other rectangle.
| | 02:19 | Let's delete that, so they go back to where they were.
| | 02:22 | You probably are going to do
this at some point in Visual Studio.
| | 02:25 | You're going to pick up a rectangle, and
you're going to drag it with your mouse.
| | 02:28 | Let's try that here.
| | 02:31 | Let's see what's happening in my code when I do that.
| | 02:36 | Is it setting the canvas left and right?
| | 02:40 | Yes! So it's setting those values.
| | 02:42 | Since I'm inside a canvas, it will
set the Canvas.Left and Canvas.Top.
| | 02:46 | If I'm in a different kind of
control say a stack panel or a grid, well
| | 02:51 | stack panels, you can't drag the
controls around, they always stack them
| | 02:54 | back where they were.
| | 02:55 | But if you're inside a grid, you
don't set the Canvas.Left because you're
| | 02:59 | not inside a canvas, you set the
margin property instead when you drag it on
| | 03:02 | the designer surface.
| | 03:04 | I mentioned that canvases are sometimes used for
graphics art and vector art. Here's an example.
| | 03:09 | You might have seen this in other videos in this series.
| | 03:12 | This is an octopod graphics that I
created and I'm going to switch over to the
| | 03:18 | XAML view for that item.
| | 03:20 | You'll see that here is a canvas.
| | 03:23 | And within this canvas are hundreds
lines of layout that are drawn in different
| | 03:30 | shapes, and paths, and colors within that.
| | 03:34 | But I'm using a canvas here because I
want to have absolute control over the
| | 03:37 | positioning of every single element.
| | 03:40 | In other words, this eye contains many
ellipses, and I want to make sure that
| | 03:45 | they're all exactly positioned relative to each other.
| | 03:48 | Another use of the canvas is for a drawing surface in apps.
| | 03:51 | Perhaps you want to support hand annotating a document.
| | 03:54 | In that case, pop up a canvas and let the user handwrite notes.
| | 03:59 | Here's an example, using Ink. Here's a canvas.
| | 04:04 | I named it InkCanvas.
| | 04:06 | Then in my code-behind, press F7
to switch to my code-behind.
| | 04:10 | I'm working with the pointer events.
| | 04:12 | You'll learn more about these in another chapter.
| | 04:15 | I'm listening for PointerPressed, PointerMoved,
PointerReleased, and PointerExited.
| | 04:22 | There's a lot of code in here, but
basically what I'm doing is getting the point
| | 04:26 | where the user touch the screen,
doing that here, finding out what kind of
| | 04:32 | device you're working with; pen and touch and mouse.
| | 04:36 | I'm also checking that they are using the
left button if they're working with a mouse.
| | 04:43 | Then as I move the item on the canvas,
I'm creating a color stream here.
| | 04:48 | I'm changing the color for every
point that they render on the screen.
| | 04:52 | And then I am drawing, here's the bit that does the drawing.
| | 04:57 | I'm drawing a new line from the
previous line position to the current position.
| | 05:05 | Click the first button to see the basic
canvas demo, click the second button to
| | 05:09 | see octopod and the third one
shows you the ink on the canvas.
| | 05:13 | I'll move my mouse over the canvas.
| | 05:15 | I'll hold down the left mouse button and start drawing.
| | 05:18 | See how the color is changing for every line
that I'm drawing on the screen.
| | 05:28 | This is cool! So wrapping this all up;
| | 05:31 | Canvas is great for positional layout and for drawing surfaces.
| | Collapse this transcript |
| Manipulating elements with transforms| 00:00 | The panel Layout System is flexible,
and contains many prebuilt panels, which
| | 00:04 | help arrange your elements.
| | 00:06 | There are certain situations
however, that don't lend themselves well to
| | 00:10 | manipulation strictly with panels.
| | 00:13 | The WinRT XAML stack exposes a
transform mechanism, which is very useful for
| | 00:18 | additional layout manipulation.
| | 00:20 | All transforms happen after the main layout pass.
| | 00:23 | The formal name for this is the RenderTransform.
| | 00:26 | The layout pass is when the element and
panels determine where to position each
| | 00:30 | element and choose the elements' dimensions.
| | 00:33 | After the layout pass, the API performs the transforms.
| | 00:37 | I'm inside a project called UsingTransforms.
| | 00:41 | I'll open the ShowTheTransforms.xaml file.
| | 00:45 | Here's a button with no transformations applied.
| | 00:49 | Here is a button that has a ScaleTransformation applied.
| | 00:53 | That changes the size of the button.
| | 00:55 | In this case, I'm making it 55%
width and height of the original button.
| | 01:00 | This is a RotateTransform.
| | 01:01 | I'm angling that at 15 degrees,
TranslateTransforms move them.
| | 01:08 | This is very common for animations;
| | 01:10 | use a TranslateTransfrom to
move something on to the stage.
| | 01:14 | Here I'm doing that with this button
RenderTransform; TranslateTransfrom, and
| | 01:17 | I'm changing it on the X axis; 230 pixels.
| | 01:21 | Let me show you how to do these live.
| | 01:23 | I'll switch to this LiveDemo.xaml file.
| | 01:26 | Now any UI element can have a
Transform applied, even something like this
| | 01:32 | TextBlock that is inside a list box.
| | 01:35 | I'm going to click on this TextBlock,
and I'm going to apply a Transform.
| | 01:40 | There's two ways to apply the Transform;
| | 01:42 | one is I can use a visual editor inside
Visual Studio, the other is to go to the
| | 01:46 | Properties section, and scroll
down to the Render Transform section.
| | 01:51 | So let me transform this Thursday
with some item from the Properties grid.
| | 01:56 | I'll come down here and I'll choose a Translate.
| | 02:00 | I will move it in the X coordinate
to 100 and press the Tab key.
| | 02:06 | See how that moved to the side.
| | 02:08 | If you'd rather do it with a visual
editor, you can click on the item.
| | 02:11 | Let's choose this Saturday.
| | 02:13 | And see the white rectangles that show
up around the outside edge, those are
| | 02:17 | the sizing handles.
| | 02:18 | It also will apply a transform
if you know what you're doing.
| | 02:22 | For instance, if I move my mouse over
this corner rectangle, you see here's
| | 02:26 | the resizing rectangle.
| | 02:29 | That didn't scale the font up; Ctrl+Z to go back.
| | 02:32 | If I move my cursor slightly off the
edge of that white rectangle, I can now
| | 02:38 | rotate that with my mouse.
| | 02:39 | You see that's still applying a
composite transform rotation, but I'm doing
| | 02:43 | it in a visual manner.
| | 02:46 | I can change the center point of this rotation.
| | 02:48 | I can move this over let's say to the
letter S. Now when I rotate it, you'll
| | 02:53 | see it's rotating around that point.
| | 02:56 | I can also skew this item, changing
the relationship between the top and left
| | 03:02 | angles by dragging like so.
| | 03:04 | Now you see how the font size is
changing, and skewing as well. Very nice!
| | 03:10 | So there are two separate ways of doing transforms.
| | 03:13 | I find myself using these a
lot during the animation phases.
| | 03:17 | If you can't find a layout panel that
suits your needs, chances are that a
| | 03:21 | Transform panel will solve your problem.
| | 03:22 | They are the last layout edit before
the UI is sent to the rendering engine.
| | Collapse this transcript |
|
|
5. Async ProgrammingThe async API| 00:00 | I'm certain that you have used
an application that locks up or
| | 00:03 | becomes unresponsive.
| | 00:05 | If you are lucky, the screen
freezes for only a few seconds.
| | 00:08 | The worst offenders may become
so unstable that they require task
| | 00:12 | manager intervention.
| | 00:14 | This widespread problem is
unacceptable and must be stopped.
| | 00:18 | The first symptoms usually seen
in a frozen app appear in the UI.
| | 00:22 | The mouse stops moving for example
or scrollbars fail to work correctly.
| | 00:27 | This is such a common problem that
some additions of Windows apply a white
| | 00:31 | frost overlay to a frozen UI to signal to the
user to stop interacting with the application.
| | 00:37 | There is a well-known solution to the
problem, never let the UI thread do any
| | 00:41 | lengthy jobs, instead, delegate
that work to another thread.
| | 00:45 | Then the UI thread can return to its
primary task, updating the User Interface.
| | 00:51 | There are a number of ways to do async
in Microsoft APIs, but until recently,
| | 00:56 | the burden of writing good Asynchronous
code was on the developer's shoulders,
| | 01:00 | plus the traditional delegate callback
patterns made the code a plumber's
| | 01:04 | nightmare, hard to read and difficult
to follow the code path as it winds through
| | 01:09 | the callback functions.
| | 01:11 | I'll start by showing an example of an
app that uses the UI thread in the wrong
| | 01:15 | way, and then show one way to fix problem.
| | 01:18 | I'm in this project called UnresponsiveApp.
| | 01:20 | This is not a WinRT app, this is a WPF app.
| | 01:25 | I'm going to press Ctrl+F5 to run the application.
| | 01:29 | I have an animation running on the
screen that is moving this yellow box back
| | 01:33 | and forth on the screen.
| | 01:35 | If I send the UI thread off to do
some work, you see that the box animation
| | 01:42 | freezes during that work phase.
| | 01:44 | Let's try that again.
| | 01:50 | But if I use the worker thread to
do the work, the box keeps animating.
| | 01:54 | I'll press that one more time and you
can see that here it's working and then
| | 01:58 | the other thread finished.
| | 01:59 | Let me show you the old school way of doing this.
| | 02:03 | Here is the first bit of code, the
wrong way of doing it, I showed some text on
| | 02:09 | the UI thread and then I put the thread to sleep,
and then I showed some text on the UI thread.
| | 02:15 | The way I did with the worker thread
is I showed some text on the UI thread,
| | 02:20 | then I set the ThreadPool off to do the
work, which meant I had to write another
| | 02:24 | method called DoWork.
| | 02:26 | Here's where the Thread went to Sleep.
| | 02:28 | Now I'm on the worker thread, I need
to marshall back to the UI thread in
| | 02:33 | order to update the UI, so that's what I'm
doing on line 36, by specifying a call to UpdateUi.
| | 02:40 | And then in UpdateUo, I update the message box.
| | 02:43 | So I had to create two methods to do this work.
| | 02:46 | The Tablet and Smartphone renaissance
has changed the consumer space in
| | 02:50 | radical ways, but these awesome
devices have limitations that tax the
| | 02:54 | developer ingenuity.
| | 02:56 | For one, they run on hardware that is
typically low in memory with less capable
| | 03:00 | graphics processors, but we want to
write apps that have great UI animations and
| | 03:05 | allow the users to touch screen in
multiple finger gestures, plus, we want to
| | 03:09 | work with network resources.
| | 03:10 | For example, pulling map data
to the device from our servers.
| | 03:14 | These tasks need to be done
correctly or the apps will freeze.
| | 03:19 | Microsoft knows that if a user
applies a gesture to a WinRT app and nothing
| | 03:23 | happens, the consumer will deem
their operating system a failure.
| | 03:27 | It doesn't matter if the problem is caused
by poorly written code from the app developer.
| | 03:31 | The problem will taint the
operating system's reputation.
| | 03:34 | So Microsoft instructed the WinRT team
to consider the behavior of each function.
| | 03:39 | If the code could possibly take longer
than approximately 50 milliseconds, the
| | 03:44 | function has to be written as an asynchronous function.
| | 03:46 | Microsoft also knows that most
developers don't do async when they should, so
| | 03:51 | they change the C# and VB languages
to make it easier to do the right code.
| | 03:56 | There are two APIs for writing async code.
| | 03:59 | WinRT uses interfaces to expose async
functionality because the runtime can
| | 04:04 | support code in many languages like
JavaScript, C# and C++, the API couldn't
| | 04:10 | take dependencies on the .NET framework.
| | 04:13 | As you can see, there are a number of
interfaces like IAsyncAction and IAsyncInfo.
| | 04:20 | You'll see the documentation
refer to them collectively as IAsync*.
| | 04:26 | If you are a .NET developer,
you can also use the Task API.
| | 04:30 | This library appeared a few years
ago and predates the WinRT tools.
| | 04:34 | For XAML, C# developers, you
can use libraries in either world.
| | 04:39 | The C# and VB teams decided to modify
their languages to let developers write
| | 04:44 | async code in a synchronous fashion.
| | 04:46 | They did this by adding two new
keywords to the language, async and await.
| | 04:51 | These keywords work with the WinRT and .NET APIs.
| | 04:55 | Here is an example of the old way of writing code.
| | 04:58 | I have a UI thread on line 36 that's
reading information from the text box.
| | 05:04 | On line 38, I'm calling the LongRunningWork
method and passing in that information.
| | 05:09 | This method will get called on the UI thread.
| | 05:13 | After the UI thread is done in the
LongRunningWork method, it will then update
| | 05:17 | the ResultTextBlock on line 41.
| | 05:20 | This is the same code written
using the new async keywords.
| | 05:24 | Notice on line 44, the async keyword.
| | 05:27 | That marks this method as waitable, meaning
I can use the await keyword within the method.
| | 05:33 | And then on line 49, I use the
await keyword word when I call the
| | 05:37 | LongRunningWork method.
| | 05:38 | Those are the only changes I need to make.
| | 05:41 | But now on line 49, that method gets
called on a worker thread, not the UI thread.
| | 05:47 | And then on line 51, the UI thread resumes
where it was and continues on and
| | 05:52 | updates the ResultTextBlock.
| | 05:54 | As I mentioned, these keywords are very useful.
| | 05:57 | You write your code in a normal
synchronous fashion and let the C# compiler
| | 06:01 | handle the async parts for you.
| | 06:03 | When you compile your code, the compiler
makes massive changes to your code to
| | 06:07 | make it work in the correct async manner.
| | 06:10 | You'll learn how to use these keywords in the next video.
| | Collapse this transcript |
| Working with C# await and async| 00:01 | Async and Await keywords
provide a streamlined approach to
| | 00:04 | asynchronous programming.
| | 00:05 | I'll show you how to use them in this project.
| | 00:10 | The project is AsyncKeywords.
| | 00:11 | The demo code is in this demo.xaml file.
| | 00:14 | Here is the UI, there are several
buttons on the left side for activating the
| | 00:18 | demos and then two ListViews, which will
get loaded with information during some
| | 00:23 | of the demos and there's also a
TextBlock over here that will get loaded
| | 00:28 | asynchronously with some
information from the Internet.
| | 00:30 | I'll start by looking at a Synchronous call.
| | 00:35 | When I click on the button, this code will run.
| | 00:38 | I'm on the UI thread until I get to
this point. I'm going to transition into
| | 00:43 | this PrintCubesA method, which is
down here and all it does is output some
| | 00:49 | information to the output window.
| | 00:52 | Since it's a Synchronous call, the UI
Thread will also be running the code in
| | 00:56 | here and then this breakpoint won't be
hit until after we've exited this method.
| | 01:01 | You see I have three breakpoints
set up, let's see this demo run.
| | 01:04 | I'll press F5 to debug the application
and then click on this button.
| | 01:11 | I'm on the UI Thread or the main thread
here, I'll press F5 to show that we're
| | 01:18 | now inside the PrintCubes, as we
haven't hit this breakpoint yet, because the
| | 01:23 | main thread hasn't left the PrintCubesA method.
| | 01:26 | Now I'll press F5 again and we've hit the third breakpoint.
| | 01:32 | Now click on the Await method call.
| | 01:34 | I've hit this breakpoint in this Await_Click method.
| | 01:38 | This is called from the button, I'm on
the UI Thread in here, I'm going to make
| | 01:42 | a call to this PrintCubesAsTask method
and internally, this PrintCubesAsTask
| | 01:48 | method does some work on another thread,
so we will spawn off a worker thread.
| | 01:53 | What's going to happen is my UI
Thread will enter this and then exit and
| | 01:57 | continue to run the code down here, so
you'll see this breakpoint hit first.
| | 02:02 | And then later, you'll see this
breakpoint, which is inside this
| | 02:05 | PrintCubesAsTask button.
| | 02:08 | What this proves is that without the
special await key, the code will just
| | 02:13 | continue to run and keep
processing the code after this line 53.
| | 02:17 | So I'll press F5, you see I hit the Debug.WriteLine.
| | 02:20 | Now I'll press F5 again, we'll return
to our UI for a few seconds and then
| | 02:26 | suddenly our breakpoint is hit back in the code.
| | 02:28 | Our code in PrintCubesAsTask has now finished running.
| | 02:35 | What I prefer to do is -- let me
shutdown the application and return to Visual
| | 02:40 | Studio and wait for the debugger to detach.
| | 02:46 | What I would prefer to do is wait and
not run this line of code until after
| | 02:51 | all the code inside this PrintCubesAsTask
has run, so the way I'll accomplish
| | 02:55 | that is very simple.
| | 02:57 | I'll use the Await keyword and you
can only use the Await Keyword if you're
| | 03:01 | inside a method that is marked as Async.
| | 03:03 | The Async keyword enables
the functionality of the Await.
| | 03:07 | What I'm saying now is run the code in
that method, but don't process anymore
| | 03:12 | lines of code inside this method
until that method has finished its work.
| | 03:16 | Let's see what this one looks
like with the debugger attached.
| | 03:20 | I'll click on the same button and then I'll press F5.
| | 03:26 | We're busy processing the cubes.
| | 03:28 | The cubes is finished, I'll
press F5 again and now I hit my
| | 03:31 | Debug.WriteLine("Done").
| | 03:33 | So that's the key part about Await.
| | 03:35 | You can go do another task and let the
thread that was doing the work go off and
| | 03:39 | do its other things, like in my case
update the UI, and then when the job is
| | 03:43 | done in the other method, you
can continue running the Await.
| | 03:48 | You can think about it as an awaitable action.
| | 03:51 | Now my method didn't return any data.
| | 03:54 | This PrintCubesAsTask, it just returned
an empty task, but you might want to
| | 04:01 | return some data from a function, so
let's look at a function that does that.
| | 04:05 | Here, I've got a GetCubesAsTask and I'm going
to return a task filled with a list of ints.
| | 04:11 | So now when I make my call, you see
what I'm doing up here, I'm setting my
| | 04:15 | ListViews.ItemsSource to null and
then I'm calling GetCubesAsTask.
| | 04:18 | I'm going to wait on that line until
it's done and then I'm going to fill this
| | 04:24 | cube value here and then
assign that as the property.
| | 04:27 | In the meantime, the UI Thread can go
back to doing what it's supposed to, which
| | 04:30 | is updating the UI and listening to
mouse requests and things like that.
| | 04:35 | Let's switch back to my UI and
then click the Get List Of Cubes.
| | 04:38 | We're waiting for the results, I'm
still able to move the mouse and there are
| | 04:43 | the results loaded in my ListView.
| | 04:45 | Of course in the real world, we're
going to be working with WinRT functions and
| | 04:50 | the .NET functions, so let's see
how you would work with some of those.
| | 04:54 | Back to the code, I'llcollapse a few of these regions.
| | 05:03 | I'll open up this one.
| | 05:06 | Here's the code that calls a WinRT function.
| | 05:09 | I'm going to use the SyndicationClient.
| | 05:11 | I'm going to specify a URI that contains
an RSS Feed and then here's the key part.
| | 05:18 | I'm going to make a RetrieveFeedAsync.
| | 05:19 | Microsoft uses the word Async on the
end of all of their methods that are
| | 05:24 | awaitable, so I'm saying, go
RetrieveFeedAsync with this uri.
| | 05:29 | I'll wait for a few seconds and
then this feed will get populated.
| | 05:35 | Ready to see it in action?
I know I am. Here we go.
| | 05:39 | The second ListView will get filled
with the information, there it is.
| | 05:43 | You will run into Async methods
everywhere in WinRT, even something as simple as
| | 05:48 | getting information about the current
user is asynchronous. Let me show you.
| | 05:56 | Here, I'm getting the DisplayName
of the current logged-on user, so I'm
| | 06:00 | calling UserInformation.GetDisplayNameAsynch,
I'm awaiting that value and then
| | 06:06 | putting it in the text box.
| | 06:08 | Then here, I am opening a picture, again, I'm using
| | 06:12 | UserInformation.GetAccountPicture to
tell what kind of picture I want, and then
| | 06:16 | I open that picture asynchronously,
so I use the Await keyword here.
| | 06:20 | And then once that's done, it's the
normal code to load that picture into an
| | 06:24 | image stream and then
adding it to the UserImage.
| | 06:26 | This is what it looks like when you're running.
| | 06:30 | The name of the account is
Essential Training and there's my picture.
| | 06:34 | For the last demo, we'll look at calling a .NET
method, which returns a task. That's down here.
| | 06:41 | The code will look very similar.
| | 06:44 | I'm using HttpClient, which is a .NET class.
| | 06:49 | I'm going to ask it for some HTML from my blog.
| | 06:54 | I call GetAsync and I pass in the URI
and again I use the Await keyword here and
| | 07:00 | then I'm going to read the string out
of that content and I'm going to do that
| | 07:04 | in an awaitable fashion.
| | 07:05 | And then once that's done, I
assign it to the output TextBlock.
| | 07:08 | Let's see what this last demo looks like.
| | 07:11 | We're waiting and here comes the HTML from my blog.
| | 07:16 | So as you can see, the new keywords
greatly simplify calling Async methods.
| | 07:20 | If the Async method takes a long
time to run, you should show a progress
| | 07:24 | report to your users.
| | 07:25 | That's the topic of the next video.
| | Collapse this transcript |
| Showing progress during an async operation| 00:00 | When you have a long running process
that impacts the user experience, you
| | 00:04 | should display some type of busy
notification or progress report.
| | 00:08 | Lucky for us, Microsoft provides progress
reports from the WinRT Async libraries.
| | 00:12 | I made a project called ShowingProgress
and I've opened the demo.xaml file.
| | 00:18 | This is the UI and it has three buttons
for activating the demos and three list
| | 00:23 | views for loading list of asynchronous data.
| | 00:25 | I'll press F7 to look at the code.
| | 00:28 | We'll start here in this region called TextProgress.
| | 00:33 | At the top, I'm instantiating a syndication
client which I'm going to use to
| | 00:37 | retrieve an RSS feed.
| | 00:40 | In my button click procedure, I clear
out any items that might exist in the list
| | 00:44 | view and then I call this
GetFeedWithTextProgress method.
| | 00:48 | Here, I'm turning off the cache.
| | 00:51 | This is for demonstration purposes only,
so that each time I run the demo, I
| | 00:55 | pull the information from the Internet.
| | 00:58 | The code is quite simple.
| | 00:59 | I specify in line 36, the URI that
contains the RSS Feed and then on line 37, I
| | 01:06 | call the Retrieve Feed Async
method and pass in the URI.
| | 01:10 | I'm not using the Await keyword here,
because I need to have a progress report.
| | 01:16 | Down here, I'm setting up a progress
method that gets update whenever this
| | 01:20 | SyndicationClient has extra information for me.
| | 01:24 | Here is the code, the UpdateProgress.
| | 01:27 | This method has a parameter of type
RetrievalProgress and it's through this that
| | 01:32 | I get the information about the
current progress of the downloads.
| | 01:35 | Here I can get the BytesRetrieved
and I can also get the TotalBytes.
| | 01:40 | I'm building up a custom string.
| | 01:42 | And then to switch back to the list
view, I'm going to marshall over to the
| | 01:46 | other thread by calling Dispatcher.RunAsync.
| | 01:50 | And then inside here, I'm checking for the
output list view and I'm adding some items to it.
| | 01:55 | This is what it looks like
when we run the application.
| | 01:58 | Ctrl+F5 and when I click in this button, I'll
get a list of progress text from the server.
| | 02:05 | I get 4096 bytes, which means we're about
6.31% done and then I get a complete list.
| | 02:13 | Next, I want to show the
progress bar during this phase.
| | 02:17 | The progress bar is a long time
staple at the Windows Operating System.
| | 02:20 | They are a common site when
copying files on your computer.
| | 02:24 | Done right, they provide a visual
indication to the user, how much longer
| | 02:27 | the task will take.
| | 02:29 | In my XAML, I have a progress
bar here named progressBar1.
| | 02:34 | I'm going to change the values of the
progress bar during the download process.
| | 02:40 | Press F7 to switch to the code
behind and open up this section.
| | 02:44 | The code is nearly identical.
| | 02:48 | I'm setting up the progress bar.
| | 02:50 | I did also setup a Completed event
that fires when we're done loading the
| | 02:54 | information from the async call.
| | 02:58 | And then the key part down here is I
have this UpdateProgressBar method and in
| | 03:04 | here I set the Maximum value of the
progress bar to the Total Bytes we're going
| | 03:09 | to Retrieve and then I set the value
and every time this gets called, I set the
| | 03:14 | value to the BytesReceived.
| | 03:15 | Let's see what this looks like in action.
| | 03:21 | On my computer this runs very fast, so
you may have to keep a careful eye in
| | 03:25 | this white section for the progress bar. It's done.
| | 03:33 | The asynchronous download happened so
quickly that it wasn't very noticeable
| | 03:37 | in the progress bar.
| | 03:39 | For the last demo I'll use the ProgressRing.
| | 03:41 | Sometimes you have a long running
process, but are not provided any progress
| | 03:45 | updates from the API.
| | 03:47 | In that case, it's best to show a non-
determinant busy indicator to the user.
| | 03:52 | In store apps, this is done
with the ProgressRing control.
| | 03:54 | Let's switch to the UI.
| | 03:59 | Here is the ProgressRing.
| | 04:00 | These are available on the toolbox.
| | 04:02 | You can just drag this
over to your designer surface.
| | 04:04 | I've given this the name of ProgressRing1.
| | 04:07 | It has a property that you can
enable and it starts spinning and when you
| | 04:11 | disable the property, it stops
spinning, and you can't see it any longer.
| | 04:15 | Let's look at the code behind.
| | 04:19 | For this demonstration, I'm not going to go
out to the Internet and get some information.
| | 04:23 | I'm going to retrieve some
information from my local computer.
| | 04:27 | What I'm doing in this code is when I
start the process by clicking in the button;
| | 04:31 | I'm going to make the ProgressRing as active.
| | 04:34 | This is what makes it appear on
the screen and starts spinning.
| | 04:37 | Then inside this foreach loop, I'm
going out to my computer and finding all the
| | 04:42 | devices on my computer, every single one of them.
| | 04:46 | And then I'm loading them into this list view.
| | 04:49 | When I'm done loading them, I
set ProgressRing1.IsActive=false.
| | 04:53 | Let's see what this looks like, Ctrl+F5.
| | 04:57 | The device information will be loaded in the third column.
| | 05:01 | I'll click the button now.
| | 05:02 | Keep your eye in this white area
for the ProgressRing. Here it is.
| | 05:07 | Once again, the data loaded quite quickly.
| | 05:10 | Let's see it again.
Click and it's gone.
| | 05:15 | We see in three different ways
to show progress to the user.
| | 05:18 | The code for the progress report was more
complicated than simply using the Await keyword.
| | 05:22 | That's because it's necessary to
setup the completed and progress event
| | 05:26 | handlers, and make sure that
code marshals back to the UI Thread.
| | 05:30 | Still having worked with other async tools
in the past, I find this approach the easiest.
| | Collapse this transcript |
| Cancelling pending operations| 00:00 | The new async tools make it easy
to cancel a pending async operation.
| | 00:05 | I'll show you how it is done.
| | 00:07 | In this project, CancelPendingOperation,
I've opened Demo.xaml.
| | 00:12 | This has three buttons.
| | 00:13 | This first button will get two feeds from
the Internet and load them into this list view.
| | 00:18 | This second button does the same task
getting those two feeds but I'll make
| | 00:22 | the code cancelable.
| | 00:24 | And then this third button will
do the actual cancel operation.
| | 00:27 | Let's look at the code.
| | 00:29 | F7, here is the section for GetFeedNormal.
| | 00:33 | In this button click, I'm clearing out
the items in the list box, if there are
| | 00:37 | any and calling my custom method, GetFeedAsync.
| | 00:41 | This code is retrieving some
information from a website URL, loading the RSS
| | 00:47 | feed and then populating the list box with five items.
| | 00:52 | I'm using the LinkMethod.Take to get five of the items.
| | 00:56 | Here, I'm drawing a line in the list view
and then finally I'm loading a second feed.
| | 01:01 | The end result is I'll have two feeds loaded in the list view.
| | 01:05 | Here's what the application looks like.
| | 01:07 | Ctrl+F5, click GetFeed, there is the
top feed and there's the bottom feed.
| | 01:16 | I need to make some changes to my code
to permit canceling of the operations.
| | 01:19 | I'll open this region.
| | 01:22 | We'll start by looking at this
line of code where I'm declaring a
| | 01:25 | cancelation token source.
| | 01:28 | I'll press F12 so you can see a
little bit more about this class.
| | 01:34 | As you can see, it provides a rich set of
methods for controlling the cancelations.
| | 01:40 | I need to put a try-catch block in my
click handler to handle the exception it's
| | 01:46 | going to get thrown when I
cancel the pending operation.
| | 01:50 | So we will put in a try block, press
the Tab key twice and enter the code.
| | 01:57 | Then I'm going to copy this
line of code and move it up here.
| | 02:07 | On line 64, I'm going to listen for
the operation canceled exception to be
| | 02:12 | thrown and then down here I'm going to
do something you probably would not do.
| | 02:17 | I'm going to add a message to my list view.
| | 02:20 | This is something you
normally wouldn't show the user.
| | 02:22 | But it helps during the demonstration.
| | 02:27 | And then I'll put a finally block in here
and I'll set my cancelation token to No.
| | 02:39 | Now my click procedure is finished.
| | 02:42 | The next thing I need to do is
modify my asynchronous method here, this
| | 02:47 | GetFeedAsync2 and I had to
make a couple of changes in here.
| | 02:50 | I'm going to add a cancelation token to
this method and then of course, I need
| | 03:00 | to go back to the code where I'm
calling this and I'll reopen this.
| | 03:07 | Here when I'm calling GetFeedAsync, I need
to pass in the current token that I have.
| | 03:11 | I'm going to get that from
my cancelation token source.
| | 03:14 | Copy this and set in here. Okay.
| | 03:18 | I've got it setup.
| | 03:19 | My click handler is calling my
method, passing in this token.
| | 03:23 | I'm retrieving that here in the inbound
parameter and then I'm going to use that
| | 03:28 | in a couple of places in my code when I
make my async calls because I'm making
| | 03:32 | this as an async call, I need to
be able to interrupt this call.
| | 03:37 | I'll pass my token into this as task and
then I'll do the same bit of code down here.
| | 03:47 | Now all I need to do is interrupt
the flow and this cancel click handler.
| | 03:53 | I'll call it cancel and then for my
demonstration purposes, I'll add something
| | 03:58 | to my feed list so we can see
this happening on the screen.
| | 04:05 | Let's see if this works.
| | 04:06 | I'll press Ctrl+F5.
| | 04:11 | I'll start the operation and then I'll click Cancel.
| | 04:18 | As you can see in the bottom, this feed
it says feed download was cancelled and
| | 04:21 | then you see my exception was
thrown in the original click handler.
| | 04:24 | Let's see that one more time.
| | 04:26 | I'll click GetFeed with cancel, we're
starting to load the information and I
| | 04:30 | choose to cancel the pending
download from the second RSS feed.
| | 04:34 | It's important to provide cancelations
for any long running process otherwise
| | 04:38 | your users will feel helpless when
they can't find a way to stop the process.
| | 04:42 | The WinRT team proves once again that
they are striving to make a scalable and
| | 04:46 | responsive system for your applications.
| | Collapse this transcript |
|
|
6. View StatesUnderstanding the view states| 00:00 | Windows 8 has a standardized approach to screen size.
| | 00:03 | By default, a Windows Store App starts in full screen mode.
| | 00:07 | There are other sizes and orientations though.
| | 00:10 | Collectively, these are known as View States.
| | 00:14 | Windows also enforces a standard for
showing multiple simultaneous apps.
| | 00:18 | We can have one app on the screen or two.
| | 00:21 | These are the only options for Windows Store Apps.
| | 00:23 | Sadly, for those developers with
multiple monitors that two app rule still
| | 00:28 | applies, two apps are all that
are allowed on the primary monitor.
| | 00:31 | You cannot have additional apps on the secondary monitors.
| | 00:35 | This is the full view state where
the app takes up the entire screen.
| | 00:40 | It is the default state for all apps.
| | 00:43 | When the user rotates the device, the app
can enter the full screen portrait state.
| | 00:48 | You can opt out of this view.
| | 00:50 | In that case, the UI stays oriented in the landscape mode.
| | 00:55 | The default for a new Visual Studio
project is to support all rotations.
| | 01:00 | You can change the default by modifying the app manifest.
| | 01:04 | Here, I've disabled the two portrait modes.
| | 01:07 | The snap mode is one of the
unique features of a Window Store App.
| | 01:11 | The user can drag an app to the left
or right side of the screen and the
| | 01:15 | operating system snaps it to the edge of the device.
| | 01:18 | This way, the user can have two
apps on the screen at the same time.
| | 01:22 | There are two view states that
correspond to these two app sizes.
| | 01:26 | The main app is considered to be in the
filled state and the snap app is in the snap state.
| | 01:32 | Snapping is only supported on devices
with a minimum resolution of 1366x768.
| | 01:39 | The snapped app is 320 pixels wide.
| | 01:42 | For those interested in trivia, the
splitter between the two apps occupies
| | 01:46 | 22 pixels in width.
| | 01:49 | Here is an important point.
| | 01:50 | While you can opt out of the portrait
mode, the same cannot be set for snapping.
| | 01:55 | The user can always put your app in snap mode.
| | 01:59 | This means that you must consider how
to change your app UI for the snap state
| | 02:04 | otherwise your UI will get truncated or
squished which makes your beautiful full
| | 02:08 | screen app look shoddy or incomplete.
| | 02:11 | Good design is important for this narrow slice of your app.
| | 02:14 | One option that is popular is to
show a limited subset of you app data.
| | 02:19 | For a game, that might means showing
only the current gamer score or information
| | 02:23 | about the player achievements.
| | 02:25 | For a movie app, this snap view might
show the movie queue or smaller version
| | 02:29 | of the video player.
| | 02:31 | The weather app illustrates how to change the
UI in response to the changes in view state.
| | 02:36 | In the snap state that has the basic
info at the top and a vertical list showing
| | 02:41 | the upcoming days' forecasts.
| | 02:45 | In full view landscape state, it
shows a big image at the top and a
| | 02:48 | horizontal scrolling list.
| | 02:51 | In full view portrait state, the UI is
similar to the snap state, only bigger.
| | 02:57 | The key point for this topic is that
you must think about the various ways
| | 03:00 | your app will be displayed on a device
and design an interface that optimizes
| | 03:05 | for each mode.
| | Collapse this transcript |
| Handling orientation changes| 00:00 | Handling an orientation change is easy
because the framework display properties
| | 00:05 | class does all the work.
| | 00:07 | Once you know the orientation, you modify
the app UI to fit the new orientation mode.
| | 00:12 | I have this project called
Handling Orientation Changes.
| | 00:15 | There are two pages that we're
going to examine, MainPage and AllTours.
| | 00:19 | Let's start with MainPage.
| | 00:21 | I'll double-click on this file.
| | 00:24 | At the top of the page is some
large text that's centered on the page.
| | 00:30 | Within the page, I have a frame that is
currently hosting a child page called AllTours.
| | 00:35 | Let's see what the XAML looks like for AllTours.
| | 00:40 | This is a child page.
It has a list view and it has a data view.
| | 00:48 | Details about these controls are available in other videos.
| | 00:51 | Here's a short summary.
| | 00:52 | List view shows items in a vertical list,
while grid view shows them in horizontal list.
| | 00:58 | I have two different views of the data inside this page.
| | 01:01 | Now let's go see how I switch the orientation.
| | 01:04 | On the MainPage, I need to listen for
the change in orientation so I'm going to
| | 01:08 | do that inside this C# file.
| | 01:12 | Here, inside the MainPage constructor,
I'm going to setup an orientation change
| | 01:18 | event handler and then I'm going to
call a method that's called UpdateUI.
| | 01:23 | An UpdateUI takes a very brute
force approach to changing the controls.
| | 01:30 | I'm going to check to see if I'm
in the landscape orientation or the
| | 01:35 | landscape flip orientation.
| | 01:38 | If so, I'm going to go find some
controls and change their font size.
| | 01:41 | This is the header on that page.
| | 01:42 | I'm going to change the font size to 96 and 66.
| | 01:45 | I'm going to change this column width
to 220 pixels, but if I'm in portrait
| | 01:51 | or portrait flip mode, I'm going to make the
font sizes smaller and the first column narrower.
| | 01:57 | There are better ways of doing this but
this does demonstrate that I will change
| | 02:01 | the sizes of UI when I switch orientation modes.
| | 02:05 | In the AllTours page, I'm also
listening to the orientation change fit and
| | 02:12 | setting up a handler.
| | 02:13 | What I'm doing inside this UpdateUI
is I'm just turning on and off the
| | 02:18 | visibility of those two controls so I have
the tour list view and the tour grid view.
| | 02:24 | This is the vertical view and
this is the horizontal view.
| | 02:28 | When I'm in the landscape mode, I
collapse the list view and I show the grid
| | 02:33 | view otherwise if I'm in the portrait mode, I
show the list view and I hide the grid view.
| | 02:39 | Let's see what this looks like in the simulator.
| | 02:42 | I've chosen the simulator from my drop down list.
| | 02:45 | I'll press Ctrl+F5 around the application
and here's my application in landscape mode.
| | 02:50 | Now the simulator supports this rotate buttons.
| | 02:52 | I'll click in this rotate clockwise and
you'll see that the text change size at
| | 02:58 | the top of the screen.
| | 03:00 | The column down the left-side is
narrower and I'm now using that list view to
| | 03:05 | look at the data inside the child page.
| | 03:08 | Now let's rotate it again, keep an eye
on that text at the top of the page, it
| | 03:13 | gets larger, the left column gets larger and
I'm back in the horizontal look of the child page.
| | 03:21 | I'll rotate two more times just so
you can see what the result looks like.
| | 03:29 | Now the simulator is slow at changing orientation.
| | 03:32 | If you try it out on your hardware device,
you'll see that it reacts much faster.
| | 03:36 | Thanks to the display properties class.
| | 03:38 | It is simple to write code that
reacts to orientation changes.
| | Collapse this transcript |
| Working with the snapped state| 00:00 | An app can be snapped by the user anytime.
| | 00:03 | When snapped, your app occupies a 320
pixel wide location on the left-side or
| | 00:09 | right-side of the Window.
| | 00:10 | On the screen, I have two apps.
| | 00:13 | Snapp to the left is the Bing weather app
and in the filled mode is the people app.
| | 00:17 | Now I can drag the splitter over to
the right-side of the screen and now, its
| | 00:22 | the people app that is snapped and
the weather app that isn't filled.
| | 00:26 | I can close the people app and then a
weather app takes up the full screen mode.
| | 00:33 | You can always move to snap mode again
by grabbing the app and pulling down,
| | 00:37 | sliding it to the side until you see
the snapped splitter, and then let go.
| | 00:42 | All right, let's close that app and see
how we can write this in Visual Studio.
| | 00:47 | I'm in Visual Studio and
I've opened this MainPage.xaml.
| | 00:51 | I've created this nice looking
page for the full screen state.
| | 00:55 | Let's see what this looks
like in the snapped view.
| | 00:58 | It's not necessary to run the app to
test different view states because Visual
| | 01:02 | Studio provides that the
device window for that purpose.
| | 01:04 | To see the device window, go to the
Design menu and choose this first item.
| | 01:10 | Then I'm going to click this AutoHide
button to dock it to the left-side of the window.
| | 01:14 | While I'm adding Windows, I'll
also add the document outline window.
| | 01:18 | You can find that in View>Other Windows>
Document Outline, or press Ctrl+Alt+T.
| | 01:27 | Let me size this window and make them
both about the same size and then I'll use
| | 01:31 | the spacebar and the Mouse button
to move this in where I can see it.
| | 01:34 | In the device view, I have four buttons,
each one maps to a different view state.
| | 01:39 | This first one represents Landscape, the
second represents Filled, the third one
| | 01:43 | represents the Snapped state. Yuck!
| | 01:47 | My app looks terrible in this state.
| | 01:49 | The fourth button represents the Portrait state.
| | 01:52 | So what I want to do is see how to design
this in snapped state to make it look better.
| | 01:58 | To do that, I've added some
special elements to my UI.
| | 02:03 | Here I've got a grid and I have two
children grids, I have a full-size grid,
| | 02:07 | which contains all the UI for the
full state mode, and I have the snap grid
| | 02:12 | which contains all the UI for the snapped mode.
| | 02:15 | Currently, FullSizeGrid is visible and
SnappedGrid is not visible, so let's alter that.
| | 02:21 | I'll click on the FullSizeGrid, go
over to my properties window, if you don't
| | 02:25 | see this you can press F4, and then
I'll scroll down here to Visibility.
| | 02:29 | If they're not in alphabetical order, you
can change it by choosing to arrange by name.
| | 02:35 | I'll set my visible property to
collapse for the FullSizeGrid and visible
| | 02:41 | for the SnappedGrid.
| | 02:42 | I'm going to switch states, I did
something wrong, let's try it again.
| | 02:47 | Go to full-size view, SnappedGrid,
this should be visible, not collapsed.
| | 02:54 | Now let's try this.
| | 02:55 | We'll go to the snapped mode and it looks great.
| | 02:58 | Now I'll show you the code that
can switch between these modes.
| | 03:01 | First, let me set this
back to the previous values.
| | 03:04 | I'll set this to Collapsed and
this to Visible, and then we go to my
| | 03:12 | MainPage.xaml.cs file.
| | 03:16 | In the constructor, I'm listening for
the Window.Current.SizeChanged event and
| | 03:22 | I'm running this code whenever that happens.
| | 03:24 | Let me hide this window so we
got more code on the screen.
| | 03:28 | And then going to the application view
and getting the current view size, let's
| | 03:33 | turn that right here, and then I've
got some code that if I'm in the snapped
| | 03:38 | view, switches the visibility of these two grids.
Makes one visible and one collapsed.
| | 03:44 | If I'm in the full screen landscape mode,
I switched them to the opposite settings.
| | 03:49 | Also, before I run the application,
let me show you one more bit of code.
| | 03:53 | You can attempt to programatically
unsnap the application by calling
| | 03:56 | ApplicationView.TryUnSnap.
| | 03:59 | Now I have some notes in here and
I say, "Don't be a bad neighbor."
| | 04:03 | You should really only unsnap if you
need the extra space if you have a feature
| | 04:07 | that needs that room.
| | 04:08 | Let's see how this works.
| | 04:09 | I'm going to press Control F5 to run the application.
| | 04:12 | Let's start some full screen view,
I'll grab the top of the application;
| | 04:17 | slide it down, move to the side
till I see the splitter. Nice!
| | 04:22 | It changed to the snapped view.
| | 04:26 | I'll make it back to full screen and
it switches back to the other view, and
| | 04:30 | then I'll snap it to the right-side
of the screen and then I'll attempt to
| | 04:35 | unsnap and see if that works.
| | 04:38 | Yes, I have success! To review:
| | 04:41 | I created two UI's for the page, one for
each view state that I want to support.
| | 04:46 | Then I wrote the code to
handle the view state changed.
| | 04:49 | This could get complicated
if my app has lots of pages.
| | 04:52 | In that case, I should create a base
class that handles the layout features and
| | 04:56 | have each page inherit
from the layout aware page.
| | Collapse this transcript |
| Why Visual State Manager is the best tool for view states| 00:00 | I have a confession to make.
| | 00:02 | I enjoy designing my app
interfaces in Expression Blend.
| | 00:05 | For certain tasks, it is the best tool to use.
| | 00:09 | Today, I'm going to show a Blend
tool called the Visual State Editor that
| | 00:12 | simplifies creating a UI that
change based on view states.
| | 00:17 | This is the page that I'm going to change.
| | 00:19 | I'll double-click on it in Visual Studio and
I'm going to look at it in the xaml only view.
| | 00:24 | I'll do that by clicking on this
Collapse pane and then switching to xaml.
| | 00:31 | Here I have a grid with two children grid.
| | 00:34 | One that holds the UI for the Fullsized
state and one that holds the UI for the
| | 00:39 | Snapped state, and then in my code
behind I've got a little bit of code that is
| | 00:44 | listening for the SizeChanged event,
and then detecting in that event what the
| | 00:49 | CurrentViewState is.
| | 00:51 | If it's in the Snapped view state then
I set the visibility of the SnappedGrid
| | 00:55 | to visible and make the FullSizeGrid not visible.
| | 00:59 | And if I'm in the FullScreenLandscape
I'd do the opposite.
| | 01:02 | I'll press Ctrl+F5 to see
what the application looks like.
| | 01:05 | It looks good in full screen mode and
I'll snap it to the left and it looks
| | 01:13 | good in the Snap mode.
| | 01:14 | Close the application and
return back to Visual Studio.
| | 01:18 | What I want to do now is add some
visual states using Expression Blend.
| | 01:24 | To do that, I'm going to right-click
on MainPage and choose Open in Blend.
| | 01:30 | There are currently no visual states
set up in the Visual State editor so
| | 01:34 | I'm going to choose this States tab over here
and I'm going to click on this Add state group.
| | 01:39 | If I choose the right name, I can collaborate
with the device manager over in Visual Studio.
| | 01:44 | The name I need to choose
is Application View States.
| | 01:53 | Next, I'll add two states by clicking
on this plus button twice; once, twice,
| | 02:00 | and I'll rename these.
| | 02:01 | This first one I'm going to call
Snapped and the second I'm going to call
| | 02:05 | FullScreenLandscape.
| | 02:11 | These names match the same names
that Microsoft uses in their API.
| | 02:15 | Do you see that red border in the
center of the screen around the art board?
| | 02:20 | That signifies that any changes I
make to this view at the moment, while I
| | 02:25 | have the FullScreenLandscape selected
are stored inside that state, and any
| | 02:31 | changes that I make while the Snapped state is
selected are stored inside the Snapped state.
| | 02:36 | So what I want to do is on the
FullScreenLandscape, I want to open this section
| | 02:40 | down here and find my FullSizeGrid and
then make sure that it's visible and that
| | 02:45 | the SnappedGrid is not visible.
| | 02:48 | Then when I'm in the Snapped state, I
want to make sure that the FullSizeGrid
| | 02:53 | is collapsed or not visible
and the SnappedGrid is visible.
| | 03:00 | Now I'm ready to save my project.
| | 03:02 | I'll choose Save All and then I'm
going to return back to Visual Studio.
| | 03:06 | Visual Studio detects that I've made a
change to the files in this prompt "Do
| | 03:11 | you need to reload?"
| | 03:12 | I'll say Yes to All and then I'm going
to go to this code I wrote earlier, the
| | 03:18 | SizeChanged event and I'm going
to comment out the If statement.
| | 03:23 | So I'll select all of that text and
press Ctrl+K, Ctrl+C. Now I'm going to copy
| | 03:30 | this bit of code here and
paste it in and save some time.
| | 03:34 | So what this says is to the Visual
State Manager, this is the class that
| | 03:39 | controls which state you're currently
looking at, your custom state that is, and
| | 03:45 | I'm saying, Go to my custom state and
I have to pass it a reference so I'm
| | 03:50 | passing it a reference to the current
page and then next I need to pass it the
| | 03:54 | string identifier for the state.
| | 03:56 | I have Snapped and I have FullScreenLandscape.
| | 03:58 | So what I'm doing is just taking the
current state and getting the string
| | 04:01 | version of that and passing
that into the state engine.
| | 04:05 | This last argument is true, which means
I want to use any transitions that are
| | 04:09 | available for the states.
| | 04:11 | Now let's see what this looks
like when we run it, Ctrl+F5.
| | 04:16 | It looks good in full view and then it
looks the same as it was before in the
| | 04:21 | Snap view, close this app
and return to Visual Studio.
| | 04:25 | Now I know what you're thinking, using
the Visual State Manager in my code doesn't
| | 04:29 | seem like that much of an improvement
over the previous version, but it is the
| | 04:33 | better solution over all and here is why.
For one, I reduced the amount of code
| | 04:37 | that I had to write in my SizeChanged event.
| | 04:40 | I'm able to use the GoToState that
makes it much simpler, but here is where
| | 04:45 | it gets even better.
| | 04:46 | Remember that I can do any state
changes in my states in Expression Blend.
| | 04:51 | Any visualization I can conceive in
my UI I can store in that state, that
| | 04:55 | makes it much more powerful, plus I can
choose an animation between the different states.
| | 05:02 | Let me show you how to do that.
| | 05:04 | I'm going to save the file here, return
back to Expression Blend and I'm going
| | 05:13 | to add an animation to this Snapped state.
| | 05:16 | To do that I select the Snapped state,
then I go down here to the Objects and
| | 05:20 | Timeline and I choose the
SnappedGrid in this Stack panel.
| | 05:26 | What I want to do is rotate this Stack
panel so you won't see the Stack panel
| | 05:30 | and then it rotates at a 90-degree angle
in so you can see the images that are
| | 05:35 | part of that Stack panel.
| | 05:36 | So to do that I'm going to click on
this button here, Show Timeline and these
| | 05:42 | numbers represent seconds on the timeline.
| | 05:44 | I'm going to click here to add a
keyframe on the zero mark and I'll drag this
| | 05:51 | yellow marker over to 1 second and
add a keyframe and then I'll do the same
| | 05:56 | thing at 2 seconds, add a keyframe.
| | 06:00 | Then I'll rewind and
I'll start making my changes.
| | 06:03 | I'm going to rotate this, so I'm
going to use a transformation to do this.
| | 06:07 | I'll go over to this Properties section
on the right side of the window, scroll
| | 06:12 | down to the Transform section.
| | 06:15 | I'm going to use it what's called a
Projection transform on the Y-axis.
| | 06:19 | So I'm going to start at 90 degrees at
the zero second mark and then I'm going
| | 06:25 | to go to the 1 second mark.
| | 06:29 | Did you see that on the Designer, it
rotated while I was moving the timeline?
| | 06:34 | I'm going to set this to 90 degrees and
then we're going to go to the 2-second
| | 06:40 | mark and I'm going to set it back to
zero and then I'm going to use my spacebar
| | 06:46 | and my mouse button to move this in
so it's a little bit easier to see.
| | 06:50 | So if I drag this item along the timeline,
you can see what's going to happen.
| | 06:55 | We'll start by not seeing anything
when we load the Snapped view.
| | 06:58 | We're going to make the grid itself
visible and then we're going to take Stack
| | 07:03 | panel and we're going to rotate it
to 90 degrees so you can't see it.
| | 07:06 | Then after one second, we're going to
start animating it into view so you can
| | 07:11 | see the full beauty of those pictures.
| | 07:14 | Are you ready to see this in action?
| | 07:16 | I can run this from Expression Blend by
pressing the same keystrokes you do in Visual Studio.
| | 07:21 | Let me save my project first and
then I'll press Ctrl+F5 to run the app.
| | 07:29 | Here we are in the full screen mode and
I'll drag it over here and when I snap,
| | 07:34 | watch for the animation. That was cool.
| | 07:38 | Let's do that one more time.
| | 07:40 | I'll snap it to the other side. Ready?
| | 07:47 | Now you've seen a few of the actions
you can do with the Visual State Manager
| | 07:51 | and the Blend state tools.
| | 07:52 | I'm sure you'll have fun creating
your own rich user interactions with
| | 07:55 | this compelling tool.
| | Collapse this transcript |
|
|
7. Understanding the Event ModelUnderstanding routed events| 00:00 | The .NET framework has supported
events since the very beginning.
| | 00:03 | Before we look at WinRT
events, let's review .NET events.
| | 00:07 | An event is a message that is sent via
the .NET framework from one type to another.
| | 00:11 | It might be from a button to
the page that contains the button.
| | 00:14 | It might be from the TextBox to a Window.
| | 00:18 | In .NET, when you create an event,
you add it to a type definition.
| | 00:22 | It is defined within the type.
| | 00:23 | An event is considered to be a type member
just like methods, fields, and properties.
| | 00:27 | The event is raised within the type.
| | 00:30 | For example, a TextBox raises the text
changed event whenever the text changes
| | 00:34 | to the text content.
| | 00:36 | Later, a developer creates a page
that contains an instance of a TextBox.
| | 00:41 | To subscribe to the TextChanged event, the
developers create a function in the page code.
| | 00:45 | This function must be written
to match the event signature.
| | 00:48 | Then the developer registers their
subscription with the .NET framework.
| | 00:51 | When the TextChanged event is raised,
the .NET framework dispatches the event
| | 00:55 | to each subscriber.
| | 00:57 | Routed events are an
enhancement to the .NET event model.
| | 01:01 | Routed events are events that are
designed to work well with a tree of elements.
| | 01:04 | XAML UI is composed of complex tree of elements.
| | 01:08 | It's not uncommon to find hundreds of
branches in this tree filled with grids
| | 01:12 | and stacked panels and other elements.
| | 01:14 | In XAML, you can have complex
content within the controls themselves.
| | 01:18 | For example, the button
can contain sub elements.
| | 01:21 | Perhaps a Border, within that Border a
Grid and within that Grid is an Image.
| | 01:25 | The problem for the UI developer is
that it's messy, tedious and error prone to
| | 01:30 | create event procedures for a composite UI.
| | 01:33 | In the .NET world, you have to add a
procedure to every child element of
| | 01:37 | the parent control.
| | 01:38 | Imagine, a button
containing an image sub element.
| | 01:41 | I would have to write a pointer pressed
event for the image and it also have to
| | 01:46 | write it at the button level.
| | 01:47 | With routed events however, events can
bubble up to the handler in the parent element.
| | 01:52 | Here is an example of the
button with nested content.
| | 01:55 | The XAML on the slide will render a
button that looks like the screen shot.
| | 01:58 | In the XAML, I have a button that
contains a border that contains a stack panel
| | 02:04 | that contains an image.
| | 02:06 | You can see that over here.
| | 02:08 | Now if the user were to click on this
blue border, we'd have to have an event
| | 02:13 | fire for the border.
| | 02:15 | Prior to routed events, I will have to write
one event procedure for each of these elements.
| | 02:20 | Routed events are a simple and
elegant solution to this dilemma.
| | 02:23 | The routed event traverses the tree of
UI elements and it calls every registered
| | 02:27 | event handler on the way up the tree.
| | 02:29 | It starts at what is called the
originating leaf and moves up to the root node.
| | 02:34 | It always moves in an upward direction.
| | 02:36 | You have the pointer released handler at the
button level and no handlers for the children.
| | 02:40 | Now when the user touches each child
element, the parent's handler is invoked.
| | 02:45 | Each routed events sends a package
of extra data to the event handler.
| | 02:49 | Most events use the RoutedEventArgs or
one of its derivatives as a container for
| | 02:53 | the transferred data.
| | 02:54 | There are about 20 of these specialized
RoutedEventArgs and I've listed them on
| | 02:58 | the right-side of the screen.
| | 03:00 | This is a class diagram containing
information about three of these helpful classes.
| | 03:05 | At the top of the diagram is the
base class named RoutedEventArgs.
| | 03:09 | It has the original source property,
which provides a reference to the original
| | 03:12 | leaf node, to the event handler.
| | 03:15 | The PointerEventArgs contains properties
for the current pointer, which could be
| | 03:19 | a mouse, finger or stylus.
| | 03:22 | It also has a Method, GetCurrentPoint that
provides the location where the press occurred.
| | 03:27 | The KeyRoutedEventHandler contains
properties identifying which key was
| | 03:31 | pressed on the keyboard.
| | 03:33 | Finally, there is the DragEventArgs,
which has the data property, which contains
| | 03:38 | the information being dragged across the screen.
| | 03:42 | Not all routed events will bubble.
| | 03:45 | One final point of clarification
for those who have worked with other
| | 03:48 | XAML frameworks, most of the
events you will see in the API use a
| | 03:51 | parameter of RoutedEventArgs.
| | 03:52 | If I Click, GotFocus or SelectionChanged
events are examples of this style of events.
| | 04:00 | The quirky factor about these events is
that they don't bubble up the element tree.
| | 04:04 | even though they are using
the RoutedEventArgs parameter.
| | 04:08 | The reason for oddity is historic.
| | 04:11 | In WPF, all elements traverse the element tree.
| | 04:14 | The Silverlight team kept the
RoutedEventArgs and their event signatures, even
| | 04:19 | though their eventing
model is slightly different.
| | 04:21 | They did this to leverage the
existing designer tools in Visual Studio
| | 04:26 | and Expression Blend.
| | 04:27 | Now WinRT is following in Silverlight's
footsteps in creating event signatures
| | 04:31 | that use RoutedEventsArgs without the
events actually being a true routed event.
| | 04:36 | The best way to tell if an event can
bubble up the tree requires knowledge of
| | 04:40 | how the dependency system works.
| | 04:42 | A simpler test is to check
whether the event uses a derived
| | 04:46 | RoutedEventArgs type.
| | 04:47 | Details on some of these events
are available in the other videos in
| | 04:51 | this chapter.
| | Collapse this transcript |
| Wiring up event handlers| 00:00 | In this video, I will show you how
to subscribe to an event in WinRT.
| | 00:05 | I'll use this project WiringUpEventHandlers
and three pages; Bubbling.xaml,
| | 00:12 | InCode.xaml and InXaml.xaml.
| | 00:14 | I'll double-click on this first one.
| | 00:18 | I have two buttons in this designer.
| | 00:21 | This first button is a button with no name.
| | 00:24 | The second button, I've
provided a name called Livebutton.
| | 00:28 | So what I'm going to do is I'm going to
this first button and I'm going to add a
| | 00:32 | click event handler.
| | 00:33 | Type in the word Click, this is in my XAML.
| | 00:36 | Visual Studio prompts me and asks me
if I want to create a new event handler.
| | 00:40 | If I want to, I can just press the
tab key and have Visual Studio create a
| | 00:44 | method with a generic name, button_Click_1.
| | 00:49 | And if I do the do the same thing down
here on the second button -- I've already
| | 00:53 | given this button a name.
| | 00:55 | It'll still prompt me and ask me if I
want to use the existing method that's
| | 00:59 | already been created or I'd
like to create a new event handler.
| | 01:03 | I will select new event handler and press Tab.
| | 01:05 | Do you see the difference?
| | 01:08 | When I had a named button, I got the name
at the beginning part of the method name.
| | 01:14 | Now I'm going to press F7 to show
you the code that was written for me.
| | 01:19 | Here are the two bits of
code that were written for me.
| | 01:22 | These are event handlers.
| | 01:23 | They return void and they have two arguments.
| | 01:26 | Microsoft uses a standard pattern
for most of their event handlers.
| | 01:29 | The first object represents the item
that's raising the event called the sender
| | 01:34 | and the second arguments are the extra
pieces of data that are passed into my
| | 01:38 | method that I can use
within the body of the method.
| | 01:41 | In this case, it's RoutedEventArgs and
I can come over here and use e. to see
| | 01:46 | what kind of interesting
information is in that parameter.
| | 01:49 | The most interesting one for me is its
original source, which represents the item
| | 01:53 | that raised the event, if it's a bubbling event.
| | 01:58 | Let me show you a couple
of other ways of adding.
| | 02:01 | I'll switch back to my XAML.
| | 02:03 | I'll click on this ellipse to start the process.
| | 02:06 | There are hundreds of events
available in the framework.
| | 02:09 | I thought I would show you
an even for the ellipse shape.
| | 02:12 | I'll add the double tapped event.
| | 02:14 | The way I'm going to do that is I
am going to use this property window.
| | 02:18 | I'll open the Property window and pin it
with the Auto Hide button and then I'll
| | 02:22 | click on the lighting bolt, which
represents all of the events that are
| | 02:26 | available for this ellipse.
| | 02:27 | Here is the DoubleTapped, DragEvents,
some FocusEvents, a number of Pointer
| | 02:34 | and ManipulationEvents.
| | 02:36 | The one I want to work with
today is the DoubleTapped event.
| | 02:39 | I can't come to this TextBox and
type in the name of the event handler.
| | 02:46 | Now I want to press the Enter key,
Visual Studio switches me over to the code
| | 02:52 | window and shows me my new method.
| | 02:54 | Here it is DoubleTapped.
| | 02:57 | Do you see anything different with this
method, from the previous method? Yes.
| | 03:03 | The event args are different.
| | 03:04 | Here I had a RoutedEventArgs and here
I have a DoubleTappedRoutedEventArgs.
| | 03:09 | That means there should be some
extra information inside these arguments.
| | 03:12 | Let's look, e. I see a method
called GetPosition that is different.
| | 03:18 | I also have something called PointerDeviceType.
| | 03:23 | So the point is you get different bits
of information based on the different
| | 03:26 | kinds of RoutedEventArgs.
| | 03:27 | I'll write a little bit of code
to change the size of the ellipse.
| | 03:34 | This code will set the width and height
to 10 pixels larger than the current size.
| | 03:39 | I'll press Ctrl+F5 to run the application
and I will double tap with my mouse on
| | 03:48 | this ellipse and it grows in size.
| | 03:51 | Let's switch back to Visual Studio.
| | 03:53 | Now I'm going to look at the
code in this file, InCode.xaml.
| | 04:00 | Here I have a rectangle
and I have a button in my UI.
| | 04:06 | And if I press F7, I'm showing
how to wire up an event handler.
| | 04:11 | The first thing you need to do
is register an event handler.
| | 04:15 | So what you do is you choose the
item that's going to raise the event.
| | 04:19 | In my case, it's an instance
of the DemoShape, which is that
| | 04:22 | Rectangle.DoubleTapped and then I use
this special C# syntax, (+=) and then the
| | 04:28 | name of the method that's going to
respond to this and it is down here.
| | 04:33 | Let me put a breakpoint on that
line of code, we'll need it later.
| | 04:37 | Line 40 shows another way to register an
event handler with a more verbose syntax.
| | 04:41 | I'll start with the Demo.Shape.DoubleTapped +=.
| | 04:45 | But then, I'm being more verbose here
saying, what is the delegate type that I
| | 04:50 | need to instantiate?
| | 04:51 | You'll sometimes see code like this.
| | 04:53 | But nowadays, you're more
likely to see this simpler version.
| | 04:56 | If you're a WPF or Silverlight
developer and familiar with the dependency
| | 05:01 | system, here's another way
to setup an event handler.
| | 05:04 | You call the AddHandler
method on the dependency object.
| | 05:08 | Pass in the event you want to listen
to and then the name of the function.
| | 05:13 | So at this point, I've
registered three event handlers.
| | 05:17 | Now I'm going to debug the application
by pressing F5 and show that yes, when I
| | 05:22 | click on this rectangle, when I double-clicked
on the item, it switches me over
| | 05:29 | to the debugger, once. Press F5, twice.
| | 05:33 | And press F5, and a third time.
| | 05:37 | So that proves that that event
handler was called three times.
| | 05:40 | Now normally you wouldn't do this.
| | 05:42 | But this is for demonstration purposes.
| | 05:43 | I'm showing how to wire up these handlers.
| | 05:45 | I'll switch back to Visual Studio and
remove that breakpoint by clicking on it
| | 05:50 | and then we'll see this in action.
| | 05:52 | Double tap to spin the rectangle.
| | 05:54 | I'll wire up an event handler live
for this button here in the code behind.
| | 05:59 | Switch back to Visual Studio.
| | 06:01 | Go back up here to my constructor for this
page and then type in the name of my button.
| | 06:12 | It's called Livebutton.
| | 06:14 | So we'll type in Livebutton.Click.
| | 06:17 | Did you see that lighting bolt there?
| | 06:19 | Let me back up and show that again.
| | 06:22 | Here is a lighting bolt next to the click.
| | 06:24 | That signifies that this is an event
that's raised from this button class.
| | 06:28 | So I'll type in Click+=.
| | 06:31 | And here, Visual Studio's offering to help.
| | 06:34 | It says that if I press the Tab key,
it will write some code for me.
| | 06:37 | Press Tab to Insert.
| | 06:39 | And then if I press Tab a second time,
it will stub in the event handler. Like so.
| | 06:44 | Now of course it's my responsibility
to write some code in this method.
| | 06:48 | Finally, I want to look at event bubbling.
| | 06:51 | This is a grid that contains a number of shapes.
| | 06:55 | I'll zoom out so we can see all the shapes.
| | 06:59 | There are three ellipses and three rectangles.
| | 07:02 | They are inside a grid, here they are
down here and they're inside this grid.
| | 07:08 | So I will write an event handler in the
grid that will listen for a double tap
| | 07:12 | in each of the children.
| | 07:14 | Tapped, ask for new event handler.
| | 07:18 | Press F7 to switch over to the code behind.
| | 07:24 | Now I'm going to get the original source
from this DoubleTappedRoutedEventArgs.
| | 07:30 | So I'm going to check to see if
it's a shape that's starting there.
| | 07:33 | I'm looking for ellipses and rectangles.
| | 07:36 | I'm not interested in buttons or TextBoxes.
| | 07:39 | So I'm going to write an if
statement that checks that.
| | 07:42 | First however, I need to get the source.
| | 07:44 | So I'll say var currentShape = e.OriginalSource as Shape.
| | 07:54 | So this C# code says, get
whatever is stored in this reference.
| | 07:58 | Try to cast it to a shape
and store it in this variable.
| | 08:02 | Then I'll check for currentShape!=null,
for those that are C# developers, this
| | 08:08 | should be very familiar to you.
| | 08:10 | Let's say that this was a button
that came in the original source.
| | 08:13 | When I attempted the cast to a Shape,
that's not true so this would be would be null.
| | 08:19 | So I'm checking to make sure it's not
equal to null, then I know I got a Shape.
| | 08:23 | Then here, I'll say curerntShape.
| | 08:24 | Width, same code I wrote earlier.
| | 08:30 | But I'm doing this now at the grid level.
| | 08:32 | So when I run the application,
I'll go to bubbling event parent and I
| | 08:38 | double-tap on the ellipse.
| | 08:39 | It works, when I double-tap
on this rectangle it works.
| | 08:42 | And when I double-tap on
this ellipse, it still works.
| | 08:46 | So what I want you to takeaway from
this movie is that there are two ways to
| | 08:50 | wire up your event handlers.
| | 08:51 | You can do it in your XAML
file or in your code behind file.
| | 08:55 | Plus, Visual Studio provides
tools to help you write that code.
| | Collapse this transcript |
| Exploring keyboard events| 00:00 | In WinRT, there are two types of
keyboards that are available for the end user;
| | 00:05 | Physical keyboards and onscreen keyboards.
| | 00:09 | You can capture the event
from these keyboards in your app.
| | 00:12 | The easiest way to do this is
with the key up and key down events.
| | 00:16 | These events are raised whenever a
UI element has to focus and a key is
| | 00:22 | pressed on the keyboard.
| | 00:23 | Within your element tree, only one
element can have the input focus at a time.
| | 00:27 | That means you're getting
keyboard input from a single element.
| | 00:30 | I'll start by showing the key up and
key down events in this project KeyEvents,
| | 00:36 | in this file, GetKeyInfo.
| | 00:39 | Make this easier to see, Fit all.
| | 00:43 | There's a TextBox at the top of
this page and a TextBox a little bit
| | 00:50 | further down the page.
| | 00:51 | This first TextBox has the
Key Down Event handler wired.
| | 00:56 | This same code is going to run
wherever you press the key down.
| | 00:59 | Let's see what that code is.
| | 01:01 | I'm using the information inside the
KeyRoutedEventArgs to retrieve the key
| | 01:07 | information and show that
the key that was pressed.
| | 01:10 | Something called the scan code for
that key and whether this is considered to
| | 01:14 | be an extended key.
| | 01:18 | I'll run the application by pressing Ctrl+F5
and then make sure this TextBox has the focus.
| | 01:25 | I can only get the key events if the
TextBox has the focus and then we'll type
| | 01:29 | the letter A. And here's the
information I gathered from that event args.
| | 01:33 | I'll press the letter A, the scan code
is the numeric code that the keyboard
| | 01:37 | sends and it's not an extended key.
| | 01:40 | What about if I hold down the Alt key?
| | 01:43 | That's considered to be the menu key in WinRT.
| | 01:47 | Here's the Caps Lock, the letter A, the
letter B. Here is the one, that's on the
| | 01:54 | number 1 on the keyboard,
here's the number 1 on my keypad.
| | 01:58 | As far as the TextBox is concerned,
it sill outputs the number one but we
| | 02:02 | know physically which one of theses keys
were pressed because of the key pressed value.
| | 02:07 | I can also do F1 and I'll press the Home key.
| | 02:11 | This is interesting what it happens in the home key.
| | 02:14 | I'm in the TextBox.
| | 02:15 | When I press home, do you see how the
cursor moved to the front of the TextBox?
| | 02:19 | But the key pressed does not update,
that's because the TextBox is listening for
| | 02:25 | the event too and when it receives the
event, it didn't let it bubble up any
| | 02:29 | further and I'm not seeing the keypress
value until I press home a second time.
| | 02:35 | I'll do the same thing with End. I'll press End.
| | 02:38 | The TextBox gets that and moves
the cursor to the end of the TextBox.
| | 02:41 | Now if I press End again, I'll be notified
in my code that someone pressed the End key.
| | 02:46 | You can find out which key is physically
being pressed at any time in your code
| | 02:51 | by using something called the virtual keys enumeration.
| | 02:54 | Let me show you how that works.
| | 02:58 | Here's the code that's relevant.
| | 03:00 | I'm getting e.Key like I did before
and then I'm comparing it with this
| | 03:05 | enumerated value, VirtualKey.A. Did I get an A key?
| | 03:10 | Did I get the LeftShift key or the
RightShift key, or I can get a virtual
| | 03:14 | representation of that, just Shift.
| | 03:17 | In other words, did they really click
the left or right, or sometimes you don't
| | 03:21 | care whether they click the left or the right Shift.
| | 03:23 | You just want to know if
they're holding the Shift key down.
| | 03:26 | Then I can use .Shift or .Sleep to
get the virtual representation of
| | 03:31 | the physical sleep key.
| | 03:33 | I can even find out if they have
pressed the Window key on the keyboard.
| | 03:37 | Determining whether the user pressed a key
combination like Alt+B is a little more work.
| | 03:42 | To do that, you use the GetKeyState.
| | 03:46 | We'll go to this KeyStatePage
and press F7 to look at the code.
| | 03:51 | The way I implemented this is I have a
timer on the page, that's firing every 40
| | 03:55 | milliseconds and then I'm
going to pull the current state.
| | 03:59 | I'm using this GetKeyState.
| | 04:02 | When you call the GetKeyState method,
you pass it the key that you're
| | 04:05 | interested in, menu.
| | 04:07 | Remember what I showed you earlier,
that's the equivalent to the Alt key.
| | 04:11 | And here, I'm asking for the GetKeyState
of virtual B. So at this moment in time
| | 04:16 | I'm asking, is the menu key
pressed and is the B key pressed?
| | 04:21 | Also, I'm asking if the cap block key is pressed.
| | 04:25 | So this is how you can get combinations.
| | 04:26 | If both of these are true, you know
the user is doing an Alt+B. I'll press
| | 04:31 | Ctrl+F5 to run the application and click over here.
| | 04:34 | This is running on a timer so all
I need to do is hold down the key.
| | 04:38 | I'll hold down the B key and
you can see the different states.
| | 04:41 | It's in the down position.
| | 04:43 | Here the Caps Lock is locked.
| | 04:45 | Now it's not locked. Now it's locked.
| | 04:49 | Now I'm holding down the Alt key.
| | 04:50 | Sometimes you'll get double values
like down and locked, so you need to check
| | 04:56 | with a logical word.
| | 04:57 | They Key Down event is a routed event,
that means that I can write a handler on
| | 05:02 | a parent element to handle the
event for the children events.
| | 05:05 | To do that I'm going to switch back to
Visual Studio and open this numeric only page.
| | 05:12 | This is a common pattern you see where
you want to filter out they keystrokes
| | 05:17 | and only accept a small range of keystrokes.
| | 05:19 | For my case, only number keys.
| | 05:21 | The way I'm going to make this is I'm
going to go to my grid and I'm going to
| | 05:27 | setup a KeyDown in the grid.
| | 05:28 | Now since this is a routed event that
will handle keystrokes for any nested
| | 05:33 | items, Stackpanel, TextBlock, TextBox.
| | 05:37 | Now only some of these can have the input
focus, TextBox, TextBlock and this RichEditBox.
| | 05:43 | So those are the ones I'm going to be
listening for these three text boxes down here.
| | 05:47 | Then what do I do in my code?
| | 05:49 | Well, when a key down happens for
those three text controls, I check to see
| | 05:54 | if the key is not equal to virtual
number zero and then I build up this
| | 05:58 | logical statement here.
| | 06:00 | And then here's the key part.
| | 06:02 | I'm on the grid and I am listening before the
children get an opportunity to see the key event.
| | 06:09 | I get an opportunity at the grid level.
| | 06:11 | So what I do is I use a property on
the KeyRoutedEventArgs called Handled.
| | 06:18 | I signal that I've handled the key
event and then that prevents the event from
| | 06:23 | getting to the individual text controls.
| | 06:26 | So they never receive the event that
key was pressed, so they don't show the
| | 06:31 | key in their text editor.
| | 06:33 | Let's see what this looks like.
| | 06:35 | I'll type 123, that's in the TextBox.
| | 06:40 | I'll go to the RichEditBox and type
in 123, but now, when I try to type the
| | 06:44 | letter A, that doesn't show up.
| | 06:47 | I don't know if you can hear the keyboard
on my microphone but I'm tapping the A
| | 06:51 | key and nothing is happening.
| | 06:52 | Same here and same with this TextBox,
but the number values are accepted.
| | 06:58 | There are also some control specific
events like the TextChange events, which are
| | 07:04 | helpful in some scenarios.
| | 07:06 | Check the MSD in documentation to find out more.
| | 07:09 | The framework also has an assortment of
touch-related events which are covered
| | 07:13 | elsewhere in this course.
| | Collapse this transcript |
|
|
8. Exploring the Touch SystemUnderstanding the touch system| 00:00 | Touch interfaces are showing
up on every imaginable device;
| | 00:04 | Smartphones are one of the obvious
examples as are the rising flood of
| | 00:08 | new tablet computers.
| | 00:09 | I've seen 82-inch wall mounted
monitors as well as 32-inch models for the
| | 00:14 | desktop that are touch-enabled.
| | 00:15 | Microsoft has even started to sell touch-based mice.
| | 00:19 | The Windows 8 API represents a new way
of thinking about touch and mouse input.
| | 00:23 | A Windows Store App can work
with a huge list of touch devices.
| | 00:28 | The app supports single and multiple touch inputs.
| | 00:31 | As far XAML, any type that
derives from UIElement is touch-ready.
| | 00:36 | There is a strong likelihood that your
favorite control exposes a number of touch events.
| | 00:41 | Even better some controls take the
existing touch system and build a rich
| | 00:45 | interactive UI on top of it.
| | 00:47 | For example, child elements in a
Scrollviewer are automatically scalable with
| | 00:52 | the pinch and zoom gesture without
the developer having to write any code.
| | 00:57 | Touch events can be separated into three categories;
| | 01:00 | Pointers are the lowest level events,
Gestures, which are higher level events
| | 01:05 | for standard motions.
| | 01:07 | Gestures leverage the raw touch
pointers, and then finally Manipulations.
| | 01:12 | Manipulations are the highest level
events able to handle complex gestures like
| | 01:16 | pinch, zoom and rotate.
| | 01:19 | Pointers are an abstraction around
the mouse,touch and pen inputs.
| | 01:24 | The Pointer API exposes information
about input devices available on the
| | 01:27 | computer and which input devices
currently interacting with your app.
| | 01:32 | You won't find a mouse down event
in WinRT, instead you'll use the
| | 01:36 | pointer pressed event.
| | 01:37 | That way you write one event handler
and it works whether the input is a mouse
| | 01:42 | or a pen or a touch screen.
| | 01:45 | Pointers are a great new concept but
the Windows team didn't stop there.
| | 01:49 | Imagine you are an app developer and
want to write some pointer level code to
| | 01:52 | enable sliding an item vertically on the screen.
| | 01:56 | The code will be lengthy with
lots of edge case scenarios.
| | 01:59 | From Microsoft's perspective, there is another problem.
| | 02:02 | If 200 app developers each create their
own sliding library, the user experience
| | 02:06 | on Windows 8 will be inconsistent.
| | 02:07 | So Microsoft created a gesture API that
centers around the gesture recognizer.
| | 02:14 | The recognizer tracks the latest
user interactions with your app.
| | 02:18 | When it detects a known pattern, it raises a gesture event.
| | 02:22 | For the app developer, this is an outstanding feature.
| | 02:25 | Write a gesture event handler and
let the API take care of the rest.
| | 02:30 | Here are a few of the gestures available.
| | 02:32 | The Tap gesture is simple.
| | 02:34 | The recognizer detects a momentary touch and release;
| | 02:37 | use this to execute an action like switch to
another screen or initiate a file save.
| | 02:42 | The Press and Hold gesture behaves just like it sounds.
| | 02:46 | The recognizer detects a touch
without an immediate release.
| | 02:49 | Use Press and Hold to show additional
information, open a Help tool tip or an options list.
| | 02:55 | The Double Tap is another way to initiate an action.
| | 02:58 | I find that the tap event is
usually sufficient for most situations.
| | 03:03 | The gesture recognizer watches for multiple touch input.
| | 03:07 | When it detects multiple touch
points, it analyzes the motion between
| | 03:10 | the various points.
| | 03:12 | When the motion matches the correct
pattern, it raises a manipulation event.
| | 03:17 | There are several manipulations available.
| | 03:19 | The Slide and Swipe manipulation are
raised when the recognizer detects movement
| | 03:24 | of multiple fingers.
| | 03:25 | The Turn or Rotate manipulation is when
the touch points spin in a clockwise or
| | 03:31 | counterclockwise direction.
| | 03:33 | The Pinch and Stretch manipulations occur when
the touch points move closer or further apart.
| | 03:39 | It's important to note that the
recognizer can detect all of these manipulations
| | 03:43 | occurring at the same time.
| | 03:45 | So if the user spins and pinches at
the same time, you get both actions in
| | 03:50 | your event handlers.
| | 03:52 | The rest of this chapter shows how to
use pointers, gestures and manipulations.
| | Collapse this transcript |
| Using pointer events| 00:00 | The pointer class is an abstraction
around the mouse, touch, and pen input.
| | 00:05 | In this video I'll talk about a few of
the pointer events and properties and
| | 00:08 | show how to track elements on the device screen.
| | 00:11 | If you look inside this file,
PointerApiInformation, inside this UsingPointers
| | 00:17 | project, it has some information about
some of the important classes that are
| | 00:20 | part of the pointer API.
| | 00:22 | For instance, there's a PointerDevice
class which gives you information about
| | 00:26 | the details about that hardware device.
| | 00:28 | For example, the maximum number of
contacts that that device supports.
| | 00:33 | The Pointer class is that
abstraction I mentioned earlier.
| | 00:35 | Here you can get a pointer ID value.
| | 00:38 | So if you have two fingers
touching the screen you would have two
| | 00:41 | pointer identifiers.
| | 00:43 | The PointerPoint class represents
the position and also has a property
| | 00:48 | called IsInContact, which tells you
whether or not the pointer is currently
| | 00:52 | touching the digitizer.
| | 00:53 | And here we have the PointerPointProperties
class which gives you extra
| | 00:57 | information about the pointer.
| | 00:59 | For instance, it has something called
TouchConfidence, which returns false if
| | 01:02 | the touch seems accidental.
| | 01:04 | It has IsPrimary, which tells you whether
or not it's the first contact on the screen.
| | 01:09 | So again, if you have two fingers and
you touch one and then a second, the
| | 01:13 | primary contact will be the
first finger that touches the screen.
| | 01:16 | How do we use this? Let me show you.
| | 01:18 | I'll go over to the SimpleDrag.xaml file.
| | 01:23 | It's a page with one Ellipse on the page.
| | 01:26 | Now I'm going to wire up some event
handlers for the Pointer events, and then
| | 01:32 | I'll show you the code.
| | 01:33 | I'll go down to the Ellipse itself.
| | 01:36 | First I'll start with this PointerPressed event.
| | 01:39 | Now I already have the code written
so I'll just select from this list.
| | 01:42 | I'll choose this
PointerPressed and then handler.
| | 01:45 | Next I'll wire up the PointerMoved.
| | 01:50 | For the third event handler
I'll choose the PointerReleased.
| | 01:54 | And then I have two more than I want to wire up;
| | 01:57 | one is called the PointerCanceled, I'm
going to wire this up to the same Event
| | 02:03 | Handler I just used, PointerReleased.
| | 02:05 | And finally, I'm going to work with the
PointerCaptureLost, and I'll also choose
| | 02:11 | this PointerReleased.
| | 02:12 | So what do we have here?
| | 02:14 | The PointerPressed fires when a
pointer is touched to the device.
| | 02:18 | The PointerMoved fires as
it's moved across the screen.
| | 02:22 | The PointerReleased event fires when
the user lifts their fingers from the
| | 02:26 | screen or takes their finger off the mouse button.
| | 02:29 | And finally, the last two, PointerCanceled
and CaptureLost, these happen in rare
| | 02:34 | instances, but you still need to
write some code to handle them.
| | 02:37 | Let's look at the actual code. I'll press F7.
| | 02:40 | Here's the first bit of code, when the
user touches the screen or uses their
| | 02:44 | mouse button, we're going to capture the pointer.
| | 02:46 | Now it's important to capture the
pointer, because with the digitizers,
| | 02:50 | especially with touch digitizers, the
user can move their finger too fast for
| | 02:54 | the digitizer to keep up.
| | 02:55 | So what this says is I have this
pointer and I'm the only code that can hold
| | 03:00 | on to that pointer.
| | 03:01 | No other item can grab a hold of it
while the user is moving their finger.
| | 03:05 | When the pointer is released, down
here, I'll release the PointerCapture.
| | 03:11 | And then when the is pointer moved,
what I'll do is write some code here that
| | 03:14 | checks to make sure there's only one pointer.
| | 03:17 | Here I'm saying PointerCatures.Count ==1,
and if there's only one pointer.
| | 03:22 | I'll use this bit of code to retrieve
the current point on the screen, and then
| | 03:27 | I'll move the Ellipse to that new position.
| | 03:30 | Let's see what this looks like.
| | 03:32 | Press Ctrl+F5, I'll hold the mouse
button down and drag, and it moves the
| | 03:38 | Ellipse to a new position on the screen.
| | 03:40 | Let me click on the Show Pointers
button and show you the next example before
| | 03:45 | I show you the code.
| | 03:46 | I'll move my mouse to the canvas
and hold down the mouse button.
| | 03:52 | What you see is a new text block being
added to the canvas based on the pointer.
| | 03:57 | So it's telling me that this is a
mouse pointer and the number represents the
| | 04:01 | number of touch points.
| | 04:02 | Since I have a mouse I can only have one touch point.
| | 04:05 | Later when we move to the tablet
we'll see multiple touch points.
| | 04:08 | And again, as you see as I move the
mouse around, this text block floats around
| | 04:13 | to the new position.
| | 04:14 | Let's see what this code looks like.
| | 04:16 | I'll press Alt+F4 to close the app,
switch back to Visual Studio.
| | 04:23 | The code for this example is in ShowPointers, in the C# file.
| | 04:30 | It's similar to the other code.
| | 04:32 | It has a PointerPressed event and
has a PointerMoved event and has a
| | 04:37 | PointerReleased event.
| | 04:38 | And I'm sending up the Event Handlers in the XAML file.
| | 04:43 | In the canvas I'm setting up these event handlers.
| | 04:46 | Switch back to the code.
| | 04:49 | And then I have one other method down
here called SetPositionForTextBlock, which
| | 04:52 | just moves the IM around on the screen.
| | 04:55 | Let's take a look at the top bit of code.
| | 04:57 | Here I've got a dictionary called
infoTextBlocks that stores a unique
| | 05:02 | identifier, the uint for each of
the items, each of the touch pointers.
| | 05:06 | It stores a uint one for each pointer
and then it also stores a TextBlock.
| | 05:11 | So when the user presses on the
screen with one of the pointers, I get the
| | 05:16 | current point, I create a new TextBlock,
and set the Text of the TextBlock to
| | 05:21 | the PointerId, and the PointerDeviceType;
| | 05:24 | that was when I said mouse in my case.
| | 05:29 | Then I set the position on the screen
and then I add the TextBlock to the
| | 05:33 | dictionary and I add the TextBlock to the canvas.
| | 05:37 | When the pointer moves I look in the
dictionary to see if the item is in there,
| | 05:41 | and if it is, then I move it to a new position.
| | 05:46 | And when the pointer is released, I
check inside the dictionary, and if it's in
| | 05:51 | there I remove it, and I'll also remove it from the canvas.
| | 05:56 | Now let me switch to the tablet
and show the multi-finger input.
| | 06:00 | I've deployed the UsingPointers App
to the surface tablet.
| | 06:04 | I'll touch the Show Pointers button.
| | 06:07 | I'll touch the screen with a single finger.
| | 06:10 | I create a new TextBlock.
| | 06:12 | As I touch two fingers on the
screen, two text blocks appear.
| | 06:16 | Note the ID numbers.
| | 06:18 | When I release and retouch the screen,
each touch point appears with new ID numbers.
| | 06:24 | This tablet supports up to five points.
| | 06:27 | Pointers give you the power to work
with the low level API, but for everyday
| | 06:31 | interaction the gestures provide
a simpler way to do common tasks.
| | 06:35 | See more gesture information in the next video.
| | Collapse this transcript |
| Gestures| 00:00 | Writing a gesture event handler is easy.
| | 00:03 | Any element that derives from an UI
element exposes the Tapped, Double Tapped,
| | 00:07 | and Right Tapped events.
| | 00:10 | Inside this UsingGestures project I'm
going to open the TappedGesture.xaml file.
| | 00:15 | Currently this page has a single
image and I've already written an event
| | 00:19 | handler for Tapped.
| | 00:20 | Let me add a Rectangle.
| | 00:23 | This rectangle also supports a tapped event;
| | 00:25 | you can see events by clicking on this
Event lighting bolt and then scrolling up
| | 00:30 | and down in this list, here is the
Tapped event, here is the RightTapped event;
| | 00:35 | up here is the DoubleTapped event.
| | 00:37 | Now let me delete this rectangle,
press the Delete key and let's look at the
| | 00:43 | code for the Tapped event
handler for this image. Here it is.
| | 00:49 | I'm given an event argument called
TappedRoutedEventArgs, which I'm going to use
| | 00:54 | on line 36 to get the position
of the current tap on the screen.
| | 00:59 | Then I'm going to create a brand new
ellipse, set a Width and Height of 50, fill
| | 01:04 | it with a semitransparent color,
then I position the ellipse using
| | 01:08 | Canvas.SetLeft and Canvas.SetTop and
then finally I add the ellipse to the
| | 01:13 | canvas Children collection.
| | 01:15 | Let's see what this application
looks like when you run, Ctrl+F5.
| | 01:21 | Now I just tap anywhere on the
screen and it adds multiple ellipses.
| | 01:25 | Remember these gestures also work with
the touch digitizer on a Tablet, I'm not
| | 01:30 | going to demonstrate this code
running on a Tablet but trust me it works.
| | 01:34 | There might be circumstances where you need
to disable certain gestures on an element.
| | 01:39 | Switch back to Visual Studio and then
open this TappedGestures.xaml file, find
| | 01:47 | the image, here it is.
| | 01:50 | So I can say, IsDoubleTapEnabled='False'
and another one I can set is
| | 01:55 | IsHoldingEnabled, I am
going to set that one to False.
| | 01:58 | I didn't mention the HoldingGesture but
you can see it over here in the Event list.
| | 02:06 | Next I want to open this
RightTappedGesture.xaml file.
| | 02:10 | Again, I have an image and
I'm going to right tap on this.
| | 02:16 | In this image I'm setting up a RightTapped
event handler and then in the code,
| | 02:22 | press F7 to show the code, what I'm
doing is turning on the visibility of an
| | 02:27 | existing text block on the screen.
| | 02:30 | Right tap and hold are sometimes used to
show context information on the screen.
| | 02:34 | Press Ctrl+F5 to run the application,
move to this demo and then I'll right tap
| | 02:40 | to see the extra information
on the bottom of the screen.
| | 02:44 | For even more sophisticated gestures,
look into the manipulation API, which is
| | 02:49 | the topic of the next movie.
| | Collapse this transcript |
| Manipulations| 00:00 | The digitizer converts the activity of
one or more fingers on the touch screen
| | 00:05 | into the manipulation gestures.
| | 00:06 | There is a rotation gesture, a
translation gesture and a scale gesture.
| | 00:12 | Microsoft uses the term gesture and manipulation
interchangeably in some parts of the API.
| | 00:16 | There is also a series of events that are
raised when a manipulation starts or ends.
| | 00:21 | Let me show you how to set up a manipulation.
| | 00:24 | I'll open this ImageManipulation.xaml file.
| | 00:28 | It's a simple page with one image.
| | 00:31 | In the image I have several event handlers set up.
| | 00:34 | One for the Started event and one for
the Completed event, one that gives me
| | 00:39 | the Delta information about the changes in the
manipulation, and one that works with Inertia.
| | 00:45 | Inside the image element I have a
RenderTransform and inside the RenderTransform
| | 00:51 | I have composite transform named transform1.
| | 00:55 | This allows me to set the rotation, the size
and the location of the image on the screen.
| | 01:01 | Now before I show you the code,
let's come back up and talk about
| | 01:05 | this manipulation mode.
| | 01:08 | This tells the digitizer what
manipulations I'm interested in.
| | 01:12 | Currently I'm interested in all the
manipulations, but I can limit that, let's
| | 01:16 | say I choose Rotate, now the digitizer
is only going to tell me when the user is
| | 01:22 | doing a rotate on the screen.
| | 01:23 | Let's see what else is
in there. I have a Scale;
| | 01:28 | I have several translate items,
TranslateX and TranslateY.
| | 01:32 | There are also some interesting
inertia items, RotateInertia and ScaleInertia
| | 01:36 | and TranslateInertia.
| | 01:39 | The inertia items allow my code to get
notifications after the manipulation is complete.
| | 01:44 | These are typically used to animate
the item on the screen after the user
| | 01:47 | releases their fingers from the Tablet.
| | 01:49 | I'll show you an example later.
| | 01:51 | The rails option, TranslateRailsX and
TranslateRailsY, means that the movement is
| | 01:57 | constrained to the X or Y axes only.
| | 01:59 | Here is an example, let's say you're
dragging an item to the left on the screen,
| | 02:05 | if you have TranslateRailsX turned on,
as soon as you start moving to the left
| | 02:09 | you're no longer allowed to drag it
down the Y-axis up or down the page.
| | 02:14 | I'll set this back to All
and then show you the code.
| | 02:17 | I'll press F7 to switch to the Code View.
| | 02:22 | In the ManipulationStarted event I'm
grabbing some information about the initial
| | 02:27 | Scale, the initial Rotation values
and the initial Point of the object.
| | 02:33 | Here in the ManipulationComplete event
I'm setting a MessageTextBox.Text to a
| | 02:38 | string that has the time stamp
of when I finish the manipulation.
| | 02:42 | The ManipulationComplete fires when
all of the fingers have left the screen.
| | 02:47 | In the Delta I'm given this
ManipulationDeltaRoutedEventArgs and I'm using that
| | 02:53 | to get the Cumulative Rotation
and Translation and scale and so on.
| | 02:58 | This is how I move it on the screen.
| | 03:00 | And notice what I'm doing with those,
I'm taking that transform that I have as
| | 03:04 | part of the image and I'm applying
ScaleX, TranslateX, TranslateY and Rotation.
| | 03:08 | So really I'm just grabbing the information
very simply and applying it to the transform.
| | 03:14 | It's time to switch to my Tablet
and see these manipulations in action.
| | 03:18 | In the app I can drag the image with one
finger and the translation transform is
| | 03:23 | applied to the image.
| | 03:24 | I can also drag the image with two
fingers in contact with the image.
| | 03:28 | Note that when I lift all of my
fingers from the screen, the completion event
| | 03:32 | fires and updates the time stamp.
| | 03:34 | I can also use two fingers
to scale and rotate the image.
| | 03:38 | One key factor that separates
manipulations from standard gestures is that I can
| | 03:43 | still drag the image while
touching the screen elsewhere.
| | 03:45 | I'll touch the screen in
the blue area with one finger;
| | 03:48 | then manipulate the image with the other hand.
| | 03:51 | Finally here is an example of Inertia.
| | 03:54 | I fling the image to the left and it
animates off the screen after I release my
| | 03:58 | finger. It's time to return to Visual Studio.
| | 04:02 | I'm going to open this ManipulateMany.xaml file.
| | 04:07 | This page has two images and two rectangles;
| | 04:11 | all four of these items are
contained inside a canvas.
| | 04:14 | And what I want to do is manipulate the
two images but I don't want the user to
| | 04:20 | be able to interact with the two rectangles.
| | 04:22 | The key for making this work is
the Manipulationmode property.
| | 04:26 | By default all elements
have the property set to none.
| | 04:29 | So this rectangle is not participating in
manipulation and neither is this rectangle.
| | 04:34 | But the two images have
Manipulationmode is set to All.
| | 04:39 | Now I could write an event
procedure, but I'm going to do it a
| | 04:43 | slightly different way.
| | 04:44 | It's common in the framework to
have two ways of handling events.
| | 04:47 | I can write an event
procedure or overwrite a class method.
| | 04:51 | I'm going to press F7 to go look at the code.
| | 04:54 | On line 28 I'm overwriting a method
on the page class, OnManipulationDelta.
| | 05:01 | This will fire for any
manipulation on any element on the page.
| | 05:05 | But remember, I only have two that are
opting in for the manipulations, my two images.
| | 05:11 | So what am I doing in here?
| | 05:13 | I'm grabbing the source here in the args.
| | 05:16 | This is coming from the
ManipulationDeltaRoutedEventArgs.
| | 05:20 | I'm getting the original
source and casting it to an image.
| | 05:24 | Then I'm getting the currentImage as
RenderTransform and storing it in this variable.
| | 05:29 | And then I'm setting the X and Y
Translate values, the ScaleX and the ScaleY and
| | 05:36 | the Rotation values.
| | 05:37 | This time I'm using the Delta.Scale
and Delta.Rotation and Delta.TranslationX
| | 05:40 | to get these values.
| | 05:43 | Let's see what this looks like on the Tablet.
| | 05:46 | In the Apple touch the Manipulation
Many button to get to the correct screen.
| | 05:51 | I can drag each image with a single
finger, but I cannot drag either rectangle.
| | 05:59 | I can drag both images at the same time.
| | 06:02 | I can even rotate both images
simultaneously if I use four fingers.
| | 06:08 | I'm impressed with the touch
API WinRT, it really is top notch.
| | 06:12 | Using this system makes it easy to add
compelling touch features to your app.
| | Collapse this transcript |
|
|
9. Input and ControlsThe application bar| 00:00 | The app bar is a unique feature of WinRT apps.
| | 00:04 | Many built-in apps like this Store App use them.
| | 00:07 | The app is not visible by default;
| | 00:10 | it appears when a user swipes a finger
from the top or bottom edge of the screen.
| | 00:14 | Mouse users can right-click to see the app bar.
| | 00:18 | Keyboard users can use
Windows key Z to show the app bar.
| | 00:21 | Here in the Store, they are showing a
top app bar with two choices, the Home
| | 00:26 | button and the my app button.
| | 00:29 | I'll switch to the SkyDrive
app and bring up the app bar.
| | 00:32 | Here they are using a
bottom app bar with five buttons.
| | 00:36 | You can press the upload button to
add a file to your SkyDrive folder.
| | 00:40 | Note the standard look for these buttons,
they all have the Win app round look
| | 00:45 | with the white icon.
| | 00:46 | Keep that in mind, I'll show you
how to style your button the same way.
| | 00:50 | Here in the WEATHER app, they have
a top app bar and a bottom app bar.
| | 00:55 | Let's see how to make this in your app.
| | 00:58 | I'm using a project
showing app bars for the example;
| | 01:01 | let's start by looking at the main page.
| | 01:03 | We've seen this UI in several other videos.
| | 01:06 | I have buttons down on the left side of
the screen that load children pages and
| | 01:10 | they load the children pages into this frame.
| | 01:13 | Now app bars go on pages, so it's
possible that I could have one app bar on the
| | 01:17 | parent and other app bar on the
child that's loaded in this frame.
| | 01:22 | The first demo is going to
show a page that has no app bars;
| | 01:25 | second demo we'll look at
will be this empty app bar.
| | 01:28 | Let's run the
application and see the first demo.
| | 01:31 | I'll click on this button, Child with not
AppBars and then I'll right-click on the page.
| | 01:35 | Nothing happens because
there are no AppBars yet.
| | 01:39 | Next I'll go look at the XAML and EmptyAppBar.
| | 01:42 | It's trivial to add an AppBar,
here is all the XAML you need to do.
| | 01:46 | Inside your page element you'll use a
Page.TopAppBar and then specify an AppBar
| | 01:53 | inside the TopAppBar.
| | 01:55 | And then inside this area you
put any valid XAML that you want.
| | 01:59 | Right now as you can see
I have no XAML in there.
| | 02:01 | What does this look like
when I run the application?
| | 02:06 | Here is the page and I'll right-click. At
first glance this example is not very impressive.
| | 02:12 | All I see is an empty black bar
appear across the top of the page.
| | 02:16 | But this is remarkable.
| | 02:17 | With a trivial amount of XAML I added
the AppBar and it just works with the
| | 02:21 | mouse, the keyboard and swipe gestures.
| | 02:24 | Plus it appears with the
standard Win 8 app bar animation.
| | 02:28 | Now let's see how to
customize the AppBar content.
| | 02:31 | Return back to Visual Studio and I'll
modify this AppBar element by saying
| | 02:37 | Background='Orange', rerun the
application, open up the empty top AppBar and
| | 02:46 | right-click, that's very bright.
| | 02:48 | What you're seeing here is I can
customize the background color and the size of
| | 02:53 | the AppBar and of course I
can put controls on the AppBar.
| | 02:57 | Back to Visual Studio and I'll look
at these controls in the bottom AppBar.
| | 03:03 | In my XAML I've created a section
Page.BottomAppBar and then within the AppBar
| | 03:09 | it contains a Stackpanel.
| | 03:11 | And within a Stackpanel I have a button,
a TextBlock, a slider and a ComboBox.
| | 03:17 | You can see them in the Visual
Studio designer without having to run the
| | 03:20 | application by clicking on the AppBar.
| | 03:23 | So now when I'm clicking at the grid
I'm looking at the grid in the designer,
| | 03:27 | but when I move up and click on the
AppBar section, visual studio shows me the
| | 03:31 | AppBar across the bottom.
| | 03:32 | That way I don't have to keep running
the app just to see what my UI looks like.
| | 03:37 | It is fully functional.
| | 03:39 | When I run the app and move to bottom
AppBar and right-click to bring up the
| | 03:43 | bottom AppBar, I can interact with the
button, drag the slider and choose an
| | 03:47 | item from the combo box.
| | 03:48 | That's how you get the
information into your application.
| | 03:52 | Next I'm going to open
this file MonitorAppBarEvents.
| | 03:55 | Again I'll scroll down to the bottom
of the screen here and then I'll click
| | 04:02 | on my bottom AppBar.
| | 04:04 | See I have two AppBars in this one;
| | 04:06 | I have a TopAppBar and a BottomAppBar.
| | 04:09 | And inside the Stackpanel, I have three buttons.
| | 04:11 | Here is a button with no style
applied and two buttons that have a style.
| | 04:15 | Now what am I talking about styles?
| | 04:18 | Microsoft includes some interesting
button templates for the AppBars, by
| | 04:21 | applying this template you get a
nice formatted look and custom icon
| | 04:25 | displayed on the buttons.
| | 04:27 | These button styles are included
in the StandardStyles.xaml file.
| | 04:31 | Let me open up this file and
I'll scroll down to this section.
| | 04:36 | By default all of the styles are
commented out inside this document.
| | 04:40 | You can see here is one
called SkipBackAppBarbutton and
| | 04:43 | SkipAheadAppBarbuttonStyle, I've
uncommented a few of these. Here is the one I'm
| | 04:48 | going use, SaveAppBarbuttonStyle.
| | 04:51 | So by using this key on my button, I
automatically get this nice round circle
| | 04:56 | and the save icon, and when I use the
YesAppBarbuttonStyle, I get the round
| | 05:00 | circle and the check mark, very nice.
| | 05:03 | I also want to show you in this file,
this MonitorAppBarEvents that we can list
| | 05:07 | in for events when the AppBar
opens and the AppBar closes.
| | 05:11 | And I'm doing that up here on the AppBar
itself, the Opened event and the Closed event.
| | 05:16 | Of course you can put any code that you want;
| | 05:19 | I put some very simplistic code in there.
| | 05:21 | All I'm doing is changing the main
background color of the grid and showing some
| | 05:25 | text that shows when I
open and close the AppBar;
| | 05:28 | let's see what this looks like in motion.
| | 05:30 | I'll click here, I'll right-click to bring up the AppBar;
| | 05:35 | there is my fancy buttons.
| | 05:36 | The background color changes and it
shows I opened at 5:03. I'll click in the
| | 05:42 | document to close the AppBar and it
goes back to the magenta color and shows
| | 05:46 | that it was closed at 5:03.
| | 05:48 | I'll do that one more time,
it's so fun. Open, close.
| | 05:53 | So far all the AppBars you've seen in
this demo are located in the child page.
| | 05:57 | I'll add a few AppBars to the parent page and
see what happens, switch back to Visual Studio.
| | 06:01 | I have defined some extra AppBars,
some fancy looking AppBars, in this folder.
| | 06:07 | For simplicity sake, I
made these custom controls.
| | 06:10 | I have a XAML file that starts with
AppBar rather than a user control or page
| | 06:15 | and I have defined my own UI in here.
| | 06:18 | That's called my AppBar buttons and I
also have another one called AppBarNav,
| | 06:22 | which again has this AppBar root element.
| | 06:25 | That means that I can just add this
with a single line inside my main page and
| | 06:29 | not have 40 lines of XAML at the very
top of my page from each of the AppBars.
| | 06:34 | I'm going to show you what I mean.
| | 06:36 | I'll go to MainPage and
I'll scroll up to this section.
| | 06:38 | Let me move this up a little
higher so it's easier to see.
| | 06:41 | I'll uncomment this, Ctrl+K, Ctrl+U and
now you see I'm just using my AppBarNav
| | 06:48 | and my AppBarbuttons.
| | 06:49 | Now you saw it briefly popped up on the
top of the screen, that's my fancy UI.
| | 06:54 | I've got my own custom buttons with a blue
border and some icons for the bottom AppBar;
| | 07:00 | I have a number of mail buttons and
video buttons and things like that.
| | 07:03 | You want to see this in action?
Of course you do.
| | 07:10 | Now when I right-click I'm
getting the top and bottom bars.
| | 07:14 | Now if I move to an item that has a
bottom bar and I open it, you'll see that I
| | 07:19 | get the bars for this one,
this one had a top and bottom bar.
| | 07:22 | Here in this example when I went to
bottom AppBar, I get the TopAppBar from the
| | 07:27 | main page and the
BottomAppBar from the child page.
| | 07:30 | This means you can mix and match for whatever
the context situation is in your application.
| | 07:35 | I'll summarize what we've seen.
| | 07:36 | AppBar is one of the unique
features of Window 8 Apps.
| | 07:39 | You should strongly
consider adding them to your app.
| | 07:42 | Put controls on the AppBars that are
needed by the user but don't need to be
| | 07:46 | shown on the current screen.
| | 07:48 | By tucking in the controls into the
AppBar you can offer a full screen view
| | 07:51 | of your page for the users, but the controls
are accessible with a flick of the finger.
| | Collapse this transcript |
| Working with text| 00:00 | There are two families of text controls;
block controls, which are read only,
| | 00:05 | examples would be text block and rich
text block; and box controls which are
| | 00:10 | intended for text input, examples
would be text box and rich edit box.
| | 00:15 | I'm in this project working with text.
| | 00:17 | Let's start by looking at
the code in TextInput.xaml.
| | 00:21 | This first control on the
page is a standard TextBox.
| | 00:24 | It's used for gathering
data entry from the user.
| | 00:28 | The next control is a PasswordBox.
| | 00:31 | It's used to gather information from the
user, but we don't show the text as they type.
| | 00:35 | By default it uses a
character to mask out the text.
| | 00:39 | You can customize that character by
using this property PasswordChar and
| | 00:44 | supplying your own character.
| | 00:45 | Let's see what these two look like.
| | 00:47 | Ctrl+F5 to run the application, your
standard Textbox and then type the word
| | 00:52 | hello here and hello here.
| | 00:54 | You can not see what you're typing,
but here I have customized the character
| | 00:58 | that's masking the text.
| | 00:59 | Now let's look at this TextBox.
| | 01:01 | I've written some code that will
select items or read the selection.
| | 01:06 | Let me select a few words and
then I'll click on the Get Selected.
| | 01:10 | As you can see I'm pulling that text out
and showing it over here in the screen.
| | 01:14 | I can also set the selected text to any
value or I can programmatically select
| | 01:19 | all, let's see how you could do that.
| | 01:21 | Return back to Visual Studio and we'll
look at the code behind for this button.
| | 01:26 | Press F7 to look at the code
behind, very straight forward code.
| | 01:30 | I have a TextBox, it has
a SelectedText property.
| | 01:33 | I can retrieve that and store in the
string and then output that to another
| | 01:37 | control on the page.
| | 01:38 | Here I want to select a
portion of the text in the TextBox.
| | 01:43 | I'm using a little bit of code here
on line 36 to programmatically set the
| | 01:47 | focus on the control.
| | 01:48 | If the focus is not in the
control, you can't read the values.
| | 01:52 | So I programmatically moved the focus
there and then I select these characters.
| | 01:56 | In this example, I set the focus
there with the same code and then I just
| | 02:00 | call SelectAll to read all the
characters, like I said it's very
| | 02:03 | straightforward code.
| | 02:04 | There are a couple of
interesting properties on the TextBox.
| | 02:07 | For one there is a property
called IsSpellCheckEnabled='True'.
| | 02:11 | It places a red squiggle on your
misspelled words and provides a context menu
| | 02:15 | with suggestions and other options.
| | 02:17 | It also auto corrects common mistakes.
| | 02:20 | Let's see that in action.
| | 02:21 | Here is my SpellCheck TextBox, and you
can see I'm getting red squiggle, I can
| | 02:30 | right-click and choose
have and it fixes my spelling.
| | 02:34 | Now this one it might have some
trouble with, it can't find the word trouble,
| | 02:37 | which is what I've been trying
to type, but it did find tarp.
| | 02:40 | I have a tarp, sounds good to me.
| | 02:42 | There is also a projection
feature, I have a screen shot of that;
| | 02:46 | here is what it looks like.
| | 02:48 | Predictions suggest a word while
you type, this is true by default.
| | 02:52 | But it's activated only when input
is coming from the software keyboard.
| | 02:56 | In this example I was using the
software keyword to type the word bargain.
| | 03:00 | This suggestion pops up;
| | 03:01 | then I can touch the black
rectangle to enter the word automatically.
| | 03:05 | Next, let's look at display
only text or read only text.
| | 03:10 | You've probably seen a million text
blocks by now if you've been doing
| | 03:14 | anything with WinRT.
| | 03:15 | This is a basic text block.
| | 03:17 | You specified a text and perhaps a
foreground color and font size and things like that.
| | 03:23 | You have one color and one font.
| | 03:26 | It's not very well known, but the
TextBlock also supports mixed content.
| | 03:30 | Here is an example in the UI and
this is what it looks like in your XAML.
| | 03:36 | I have not specified any colors or
typefaces in the TextBlock itself.
| | 03:41 | But within the TextBlock I
created something called a Run.
| | 03:45 | This first Run is in blue, so I specify
the FontStyle, the FontSize for the run,
| | 03:51 | the FontFamily for the run and the
Foreground, and then the text that I want to
| | 03:56 | show up in that run.
| | 03:57 | Then I build another run which is also
added to the text block and this one is
| | 04:01 | dark orange and 60 font.
| | 04:04 | And by using this CharacterSpacing
I'm able to spread out the distances
| | 04:08 | between the letters.
| | 04:09 | Finally, I have another one here
with yellow and these three letters.
| | 04:13 | There is also another TextBlock control that
lets you mix fonts, it's called the RichTextBlock.
| | 04:19 | It's very similar to the regular
TextBlock with one enhancement.
| | 04:22 | It can overflow text into separate
elements, which enables multicolumn text or
| | 04:27 | other custom layouts.
| | 04:29 | Here is my example, here is my Rich
Text Block and then in these other two
| | 04:33 | columns in the grid I have these
controls called the RichTextBlockOverflow and
| | 04:38 | there is another one over here.
| | 04:40 | So what I do in the first
RichTextBlock is I specify all of the text.
| | 04:45 | Here instead of using a
Run, I'm using a Paragraph.
| | 04:48 | So I created a paragraph and set its
FontSize and its color and then another
| | 04:51 | paragraph, a different FontSize and
FontsFamily, and different color, and then I
| | 04:56 | put some text in there; many, many
paragraphs in this text block, it won't all
| | 05:01 | fit in the first column.
| | 05:02 | So then what I do as I specify, here,
this overflow content target and I tell it
| | 05:08 | to use another element on the page called over1.
| | 05:10 | So the text that doesn't fit in
the first TextBlock moves into this
| | 05:14 | RichTextBlockOverflow.
| | 05:16 | And it also has an OverflowContentTarget,
which moves any text that doesn't fit
| | 05:20 | in the second column into this third column.
| | 05:23 | Now since this doesn't have any further
overflow, any further text that's inside
| | 05:27 | this TextBox will not be shown
on the screen if it doesn't fit.
| | 05:31 | Here is what that looks like, it flows
down the page, gets to the bottom of the
| | 05:35 | page and then flows into
the top of this overflow.
| | 05:38 | In summary, there are a few
controls for showing read only text.
| | 05:41 | Pick the text block for
simple or mixed format text;
| | 05:45 | choose the RichTextBlock for rich text
that overflows into other regions of the page.
| | 05:49 | For editable input use the TextBox or RichEditBox.
| | Collapse this transcript |
| Toggling states with checkbox and toggle controls| 00:00 | Toggle controls are elements
which can be in one of two states.
| | 00:04 | When you need to offer an on/off choice in
your app, these are the controls to choose.
| | 00:09 | I'll start by looking at the
code in this TogglebuttonPage.
| | 00:13 | A toggle button is an on/off switch
that looks like a traditional button.
| | 00:17 | You can see it's called Togglebutton
and what I've set in here is one called
| | 00:21 | Content Bold and one has Content Italics
| | 00:24 | I wired up two event handlers, when
you check or press the toggle button
| | 00:30 | this code will fire and when you
uncheck or press the button the second
| | 00:33 | time, then this code will run.
| | 00:35 | I'm setting the content to Bold and
Italics, if you want fancier UI you can
| | 00:39 | create a custom button template.
| | 00:42 | Let's look at the code behind,
press F7, straightforward code and
| | 00:47 | the BoldToggle_Checked;
| | 00:48 | I'm setting the FontWeight of a
textblock to Bold and then the Unchecked event
| | 00:53 | I'm setting it back to Normal.
| | 00:55 | Same with the Italics, set it to
Italics and set it back to Normal.
| | 00:59 | Ctrl+F5 to run the application and I
clicked once to toggle on the button;
| | 01:03 | it's a visual cue to the user that it's
toggled on because it has a white background.
| | 01:08 | When I click on it a
second time, it toggles it off.
| | 01:11 | Note the code is also running as intended.
| | 01:13 | The toggle buttons has been around
for a long time, there is a new element
| | 01:17 | called toggle switch which is updated
to look like a slider that user can slide
| | 01:21 | back and forth like this.
| | 01:23 | This works really well with your
finger or with the mouse or a stylus.
| | 01:27 | Here I'm switching the
Text Size to large and small.
| | 01:30 | Here I'm setting the Italics to on and off.
| | 01:32 | And these next two
examples I'm customizing the text.
| | 01:35 | By default the ToggleSwitch uses the
word On and Off when you switch states, but
| | 01:40 | here I've customized it and put my
own header and my own text, so it's
| | 01:45 | Unavailable and Available,
or the text that I chose.
| | 01:48 | You can even get fancier and choose your own UI.
| | 01:51 | Here I've placed a picture next to this
control in my own custom header up here.
| | 01:56 | And when I toggle it on, I'm switching
out the UI to a different picture, Off, On.
| | 02:01 | Let's look at the XAML for this,
that's in this page, ToggleSwitchPage, let's
| | 02:06 | look at the first one.
| | 02:07 | To set the text that shows over the
top of the switch, you use the Header.
| | 02:12 | Unlike the Toggle button there is
only a single event here called Toggled.
| | 02:16 | So my code is going to have to be
slightly different because I don't two events.
| | 02:20 | The key to making this work is that
the ToggleSwitch has an IsOn property.
| | 02:24 | So what code is doing here is when this
code fires, I check to see if the switch
| | 02:29 | is on, if it is I set it to one font
size and if it's off, I set it to another
| | 02:33 | font size, same thing down here.
| | 02:35 | Back to the XAML, here is how you change
the text, you just change the OnContent
| | 02:41 | or OffContent and since content can be
rich, it doesn't have to be just a string
| | 02:46 | in XAML on this ToggleSwitch.
| | 02:49 | I'm specifying the Header and then a
Stackpanel with some TextBlocks in there.
| | 02:53 | And for the OnContent I'm specifying
an image and for the OffContent I'm
| | 02:58 | specifying an image with a
different file referenced.
| | 03:02 | Finally we have the CheckBox
control, that's over here in this
| | 03:05 | demo, CheckBoxPage.
| | 03:06 | CheckBox has been around forever in
Windows and traditionally Microsoft has
| | 03:12 | supported what's called a three-state CheckBox.
| | 03:15 | In other words it can be in Checked, it can
be Unchecked, and it can be Indeterminate.
| | 03:21 | Use Indeterminate when you don't know
whether to show checked or not checked.
| | 03:25 | The example here would be I have three
files selected in File Explorer and I
| | 03:31 | right-click on them and say I want to
see the read-only properties and two
| | 03:35 | of them are read-only and one of them is
not, how do I represent that in a CheckBox?
| | 03:39 | In that case I'd use Indeterminate.
| | 03:41 | I've included Microsoft's suggestions for when
to use a CheckBox and when not to use a CheckBox.
| | 03:46 | I'll discuss that one after I show this demo.
| | 03:49 | Here is how you set a regular CheckBox
inside the element and I'll say IsChecked ='True'.
| | 03:55 | Here is how you do a content and you
want to set the value to Indeterminate.
| | 03:58 | Now there is a bug in the current
version of WinRT where this does not work in
| | 04:03 | XAML, you have to set it programatically
in your code behind and that's what I'm
| | 04:07 | doing here, so I'm saying btn5 and btn6,
I'm saying there IsChecked to null.
| | 04:12 | You're supposed to be able to do
it in the XAML, but it doesn't work.
| | 04:15 | That's going to make it look
indeterminate and then this third CheckBox starts
| | 04:19 | out with a null value and it also
allows the user to Toggle between the
| | 04:23 | three-state, in other words they can
Toggle by click on it from Unchecked to
| | 04:27 | Checked, to Indeterminate.
| | 04:28 | I'll run the example, go
over here to the CheckBox.
| | 04:31 | This one, I can click
once or twice to uncheck it.
| | 04:34 | The second CheckBox is currently Indeterminate.
| | 04:37 | I can click on it to make it unchecked,
click on it again to make it checked, but
| | 04:41 | now when I click on it the third time,
it goes back to the Unchecked, whereas
| | 04:45 | this one I can toggle between the three states.
| | 04:49 | To review what we've seen, there
are several toggle controls available.
| | 04:53 | In most situations if you allow the user
to change the state use the ToggleSwitch.
| | 04:59 | If you are showing an informational state,
then try the CheckBox.
| | Collapse this transcript |
| Gathering numerical data with a slider| 00:00 | The slider control is a great way
to get a continuos range of numeric
| | 00:04 | values form the user.
| | 00:05 | They drag their finger across the
slider and it provides a number within the
| | 00:09 | specified min and max range to your code.
| | 00:12 | The first example is in
this page, Basicsliders.xaml.
| | 00:18 | My UI consist of three sliders and a rectangle.
| | 00:21 | I'm going to use the three slider values to
change the overall color of the rectangle.
| | 00:27 | Make this a little bit smaller, so it's
easier to see and then I'll click on the slider.
| | 00:31 | I've given each one of these sliders a
name and I'll slide this up to make more room.
| | 00:37 | This is the Redslider, this is the
Greenslider and this is the Blueslider.
| | 00:41 | I need these names so I
can access them in my code.
| | 00:43 | I've also set up a ValueChanged event handler.
| | 00:47 | Notice how I'm sending all
three sliders to the same function.
| | 00:51 | I know the information I need in my code
is a byte value, so I'm also specifying
| | 00:56 | the minimum to zero and the maximum
to 255, F7 to switch the code behind.
| | 01:03 | Remember that all three of
those sliders call this method.
| | 01:06 | So what am I doing in here?
| | 01:07 | I'm grabbing the Red, Green, and Blue
values, casting them to a byte because
| | 01:13 | they come out as a double, they come
from a double and I'm casting them to a
| | 01:17 | byte and then I'm passing
them to this method FromArgb.
| | 01:20 | This makes a custom color from the
Alpha Channel which I've set to 255 or fully
| | 01:25 | opaque and then Red, Green, and Blue
channels are coming from the sliders.
| | 01:28 | And then build a solid color brush and
assign that to the Fill property of the Rectangle.
| | 01:37 | And there is my custom color editor.
| | 01:40 | You know it's like a tool tip automatically,
there is my 0 value; there is my 255.
| | 01:46 | These sliders also work
with touch and pen input.
| | 01:51 | The sliders have some properties.
| | 01:53 | For one I can change the orientation
to make it a vertical slider instead of
| | 01:57 | a horizontal slider.
| | 01:59 | I can also do what's called a Snaps To
where I can make it when the slider moves.
| | 02:04 | You see how the tool tip says I'm going
from 110 to 120 and then 130, so I can
| | 02:10 | only get numbers that
are within the snap values.
| | 02:13 | I can't get numbers between 110
and 120, no matter how hard I try.
| | 02:19 | I'll show you the XAML
for that in just a second.
| | 02:22 | Here, I'm also adding some tick
marks, some black marks on the line to
| | 02:25 | indicate some intervals.
| | 02:27 | You see how the tick marks
are matching the Snap To values.
| | 02:30 | Let me show you this in the XAML.
| | 02:32 | This code is over here in sliderProperties.xaml.
| | 02:36 | This first slider, I just have to change the
Orientation equal to Vertical that was simple.
| | 02:41 | For the Snaps To, I just have to snap
to what -- I tell it what I'm going to
| | 02:46 | snap to, StepValues and then I
specify the StepFrequency here.
| | 02:50 | In this slider I say it SnapsTo the Tick
marks and then I specify the TickFrequency.
| | 02:55 | It ends up working the same as the
previous one when I did the SnapsTo, but the
| | 03:00 | difference is of course I get
these black bars on my slider.
| | 03:03 | For this last demo I want to
show you how I can convert data.
| | 03:07 | Sometimes the tool tip doesn't show
the data exactly the way you want.
| | 03:11 | Perhaps you want to format it and
put a percent sign in there or some
| | 03:14 | extra digits in there.
| | 03:16 | What I want to do in my example, I'll
run the application to show you, is rather
| | 03:20 | than have numeric data like this,
let's say this is a time slider for a video
| | 03:25 | scrubber, so I want to move back and
forward in the video and I want to show
| | 03:29 | hours and minutes and seconds.
| | 03:30 | So I've changed the way
the tool tip is rendering.
| | 03:33 | It's still a decimal value underlying
the data, but what I'm doing is running
| | 03:37 | this through a converter that turns it
into a string that looks like hours,
| | 03:41 | minutes and seconds.
| | 03:42 | Slide this up, it makes more room and
let's see how this was accomplished.
| | 03:46 | So I've set my slider's Minimum value
to zero and my Maximum value to 14440 and
| | 03:52 | then I say I have a toolTipValueConverter.
| | 03:55 | This is some code that's going to run
and change the output of the number into
| | 04:00 | the string that I desire.
| | 04:01 | So I have to have a class called
HourConverter, which I do, here is my class.
| | 04:05 | But before I show you the code there,
I've instantiated this HourConverter class
| | 04:10 | somewhere in my XAML.
| | 04:11 | I've made it a StaticResource.
| | 04:12 | I scroll up to the top of my
app, you'll see it right here.
| | 04:16 | In my Page.Resources, I've instantiated
a copy of HourConverter and I
| | 04:20 | gave it this name HourConverter so I can
use it in my StaticResource lookup down below.
| | 04:25 | To create the actual converter,
you'll have to write a type that implements
| | 04:29 | IValueConverter and then you have to
write a method called Convert and another
| | 04:33 | method called ConvertBack.
| | 04:35 | What I'm doing in this code is I'm
grabbing the value, incoming value from
| | 04:40 | the slider, I'm converting it to a
TimeSpan from the number of seconds that
| | 04:44 | I've got, those numeric values and
then I'm returning a formatted string with
| | 04:49 | the hour's portion and then a colon
and the minute portion and a colon and
| | 04:54 | the second portion.
| | 04:55 | Let's see that one more time in action.
| | 05:00 | There it is that's my custom formatted tool tip.
| | 05:03 | It's time to sum up the slider control.
| | 05:05 | There is not much to say, it's really a
simple control for providing numeric values.
| | 05:10 | If you are interested in learning
more about value converters, they are
| | 05:14 | discussed in the data binding chapter.
| | Collapse this transcript |
| Showing web content and HTML with WebView| 00:00 | The WebView control is what is
generally called a web browser control.
| | 00:04 | It hosts HTML content either from a
URL or from a string containing HTML.
| | 00:10 | The WinRT WebView uses the same
rendering engine and JavaScript engine employed
| | 00:15 | by Internet Explorer.
| | 00:16 | I'll start by viewing the code
inside this BasicWebView.xaml file.
| | 00:21 | It's a simple page and I'm
going to add a web view here.
| | 00:27 | Here I'm specifying the source, this is
going to be a location on the Internet
| | 00:33 | and then I'll close the tag.
| | 00:34 | That's it, it should host that page
within the control. Let's try it up, Ctrl+F5.
| | 00:43 | Here it is there is my web page.
| | 00:45 | Now it is a limited browser,
it's a viewer, not a full browser.
| | 00:49 | It doesn't have the ability to right-
click on things and download files.
| | 00:53 | It's a viewer for the content.
| | 00:55 | It's possible to write code
to navigate to a new page;
| | 00:58 | I'll show you how to do that next.
| | 01:00 | ChangeURL is the one I'm looking for.
| | 01:02 | I have a button up here
that's going to change the content.
| | 01:05 | You'll notice that I'm using the same
site as before for the Source of the
| | 01:10 | WebView, but I'm going to change that
Source in my code in this Button_Click.
| | 01:14 | Press F7 to go the code behind.
| | 01:17 | Very simple code, I call the Navigate
method on the WebView, I set up a new Uri
| | 01:23 | and I specify the location of the site,
in this case shazzam-tool.com, let's see
| | 01:29 | what this looks like.
| | 01:30 | Ctrl+F5 change URL and click on the button
and here we are on the Shazzam Shader Editor.
| | 01:36 | Shazzam is a tool that I wrote for XAML
developers for creating custom pixel shaders.
| | 01:41 | What I want you to see is that the
WebView works with a regular HTML and it also
| | 01:46 | works with jQuery add-ins.
| | 01:47 | For instance on this screen if I go
to the shader samples, this is a jQuery
| | 01:52 | plugin for changing pictures.
| | 01:55 | I'll hover this and click on the next button.
| | 01:58 | This shows some of the sample
shaders that are included with my tool.
| | 02:03 | Let's click on this button, Navigate to String.
| | 02:05 | Do you see this content?
| | 02:07 | This was created programatically by
generating a string and telling the WebView
| | 02:11 | to use the content of that string.
| | 02:13 | Here is the WebView control named WebView1.
| | 02:16 | In the code behind I'm calling the
NavigateToString method and then I specify
| | 02:22 | any valid HTML that I want inside that string.
| | 02:26 | This could get tedious writing hand
codeed HTML like this, so it's also
| | 02:30 | possible for you to put HTML assets in
as files or assets in your application
| | 02:36 | and load them programatically.
| | 02:37 | Let me show you how to do that.
| | 02:39 | I have three files that I'm going to use;
| | 02:42 | the HTML page, a JPEG that's loaded in
this HTML page, there is an image tag in
| | 02:47 | there and the CSS file that
is used by this HTML file.
| | 02:51 | The WebView will do the right thing.
If I load the HTML it will see that
| | 02:56 | it has a CSS and a JPEG inside the same
Assets folder and will go ahead and load them.
| | 03:01 | As you can see, it's regular HTML,
there is my link to my Sample.css.
| | 03:06 | Here is the rest of the HTML.
| | 03:09 | Now there are a number of pictures in
this HTML, but I've only included one
| | 03:13 | in the Assets folder.
| | 03:15 | Now to load this is very simple.
| | 03:20 | Here is my WebView. In the code behind
I'm using the same technique I showed you
| | 03:26 | a minute ago where I'm calling to
navigate and I'm creating a new Uri.
| | 03:30 | Then I'm specifying a Uri with a new
prefix ms-appx-web:/// and then the HTML
| | 03:41 | page comes after that.
| | 03:42 | The key to making this work is to
prefix this ms-appx-web is the designated Uri
| | 03:49 | prefix to load web
resources from the app package.
| | 03:52 | Ctrl+F5 and there is our HTML page
loaded from the internal document.
| | 04:00 | To recap, the WebView let's you show
pages from any available location on the
| | 04:04 | Internet, plus it is a great
control for showing rich content.
| | 04:07 | Just have your design team create
the HTML assets and load them into
| | 04:11 | the control.
| | Collapse this transcript |
| Creating custom user controls| 00:00 | The WinRT Framework ships
with dozens of built-in controls.
| | 00:04 | Chances are high that they have one
that covers your common UI scenarios.
| | 00:09 | But developers and designers are creative.
| | 00:11 | We're going to think of a
control that doesn't exist.
| | 00:14 | That's why their framework includes
the ability to make custom user controls.
| | 00:18 | We can build a control and reuse
it across many pages and projects.
| | 00:22 | Here is an example of a
control I've used on many projects,
| | 00:25 | the IPAddressControl.
| | 00:27 | In my XAML you can see that I
am driving from UserControl.
| | 00:31 | To create your own UserControls you can
go to your project, Add a New Item and
| | 00:39 | pick this template, User Control.
| | 00:43 | This is an IPAddressControl.
| | 00:44 | Typically an IP address has four integer values.
| | 00:48 | When I create an interface for data entry it
has four text boxes arranged in a horizontal line.
| | 00:54 | Since I use this a lot in different
projects, I decided to put those four text
| | 00:58 | boxes inside a UserControl, then I
just need to add the UserControl one time
| | 01:02 | instead of rebuilding my UI over and over again.
| | 01:06 | Here you can see I've got my four text
boxes and then a label over here that says IP.
| | 01:11 | Each of these text boxes
has a TextChanged event.
| | 01:14 | When you type a value in the text box,
it's going to fire this event and all
| | 01:18 | four text boxes are pointing
to the same TextChanged event.
| | 01:22 | Pressing F7 lets me look at that code.
| | 01:25 | In the TextChanged event, I'm getting
the original sender, the text box and
| | 01:29 | trying to parse whether or not the value
that's in that text box is an integer value.
| | 01:34 | If the result of the integer is
greater than 255, then I set it to 255, then I
| | 01:40 | use the existing results.
| | 01:41 | If it's less than zero, then I set
it to 0, otherwise I just set it to 0.
| | 01:46 | This way if the user types in
a letter, I change it to a 0.
| | 01:49 | If they typed in 500, I change it to 255.
| | 01:51 | I'd like the users of my
IPAddressControl to be able to set or read the values
| | 01:57 | from the control programmatically.
| | 01:59 | To do that I created a
property called CurrentIP.
| | 02:03 | It has a getter and a setter.
| | 02:05 | A getter retrieves the information in
the four text boxes and builds it into a
| | 02:09 | string with periods between each of the numbers;
| | 02:12 | then I return that value.
| | 02:14 | In the setter I take the inbound string
and I attempt to split it into four parts.
| | 02:19 | I split on the period, check to make
sure that I got four parts, if not then I
| | 02:23 | throw an exception, and if I do get four
parts then I take each part number and
| | 02:28 | assign it back to the text box.
| | 02:30 | That's it for my control.
| | 02:31 | Now I'll go over to the ShowIPAddressControl
and show you how easy it is to
| | 02:36 | add one to my page.
| | 02:38 | I'll go to my toolbox and because Visual
Studio is smart about user controls, it
| | 02:42 | knows I've already built and compiled
this user control and it has added to the
| | 02:47 | toolbox, here it is.
| | 02:48 | Now I can just this up and
drag it onto my designer surface.
| | 02:52 | As you can see I have already got a
few existing IPAddressControls up here.
| | 02:55 | Let me delete this IPAddressControl I
just wrote and take a look at this first one.
| | 02:59 | Here, I am using that property I showed
you CurrentIP to set it to 5.5.5.5, great!
| | 03:06 | Here I'm setting it to
another IP address with all 25s.
| | 03:09 | This third IPAddressControl
has its own IP address.
| | 03:12 | Now I've also got some buttons down here.
| | 03:15 | When I click on this first button I'm
going to programmatically set the IP
| | 03:19 | address with this string.
| | 03:20 | Remember, my code takes the string and
turns it into a text for the text boxes
| | 03:25 | and in this button I'm going to read
the current IP address from my IP Control
| | 03:29 | and assign it to the text box.
| | 03:34 | That worked, the top IP address has
changed to the one I set in my code and this
| | 03:39 | bottom one I'm going to read the value.
| | 03:41 | Let me change one of these octets to
34 and try to read it. That worked.
| | 03:46 | Remember, I also had that guard code to
make sure I can't type things like the
| | 03:51 | letter A. I'm going to type
the letter A in this text box.
| | 03:54 | That gets converted to zero.
| | 03:55 | I'm going to type 100 works, but if I add
another 0 gets set back to 255, very nice.
| | 04:00 | Now this is a nice control but it's
not quite ready for working in WinRT.
| | 04:06 | One of the problems with this control
is when I implemented my IP address;
| | 04:11 | I implemented it as a normal .NET property.
| | 04:14 | By doing it this way I cannot animate this
property, I can't use data binding on this property.
| | 04:20 | So it's better if I use what's
called the Dependency Property for this.
| | 04:23 | I'll show you how to do
this in my other control.
| | 04:25 | My other control is this
one here called GaugeControl.
| | 04:29 | What I wanted was a gauge value where I
could type in a number between 0 and 360
| | 04:34 | and have this hand move around the
screen based on the degree value.
| | 04:39 | It's like a compass if you think about it.
| | 04:41 | So what I did is I imported a few assets,
I have a picture of a hand and I have
| | 04:48 | a picture of this black circle in the
background with some gradients on it and
| | 04:53 | the green represents a transparent area.
| | 04:55 | I'll build my control from these two PNGs.
| | 05:00 | There is the image, and
there is the other image.
| | 05:03 | I need to write some code to
programmatically move the hand around the gauge
| | 05:07 | dial and I need to create a
couple of dependency properties.
| | 05:10 | I'll show you how to do that.
| | 05:11 | I'll open up the C# file and I
have two dependency properties.
| | 05:15 | I have a Degree property
and a DegreeString property.
| | 05:19 | So I should be able to set the degree,
say 15 degrees and the hand should move
| | 05:23 | to the 15 degree position.
| | 05:25 | A syntax for DependencyProperty
can be quite complex.
| | 05:28 | Let's see if we can read through this briefly.
| | 05:31 | Here I am declaring a DependencyProperty
named DegreeProperty and then I'm
| | 05:35 | registering it with the
DependencyProperty system.
| | 05:38 | That makes it available for
a data binding and animation.
| | 05:40 | I give it a simple name, I specify the
type of the property, it's going to be a
| | 05:45 | double and I specify the
affiliated control, the GaugeControl.
| | 05:49 | And then I set a default value here in
the PropertyMetadata and I also specify a
| | 05:54 | method to call when the
value changes OnDegreeChanged.
| | 05:57 | Now here I have a regular .NET
property that just makes some calls to
| | 06:02 | the dependency system.
| | 06:03 | This is so C# and VB developers can
call my method without having to go to
| | 06:09 | through the Dependency
System to change the value.
| | 06:11 | And down here we have the
OnDegreeChanged, which is setting a bunch of data
| | 06:16 | values in here and then there's also
an OnDegreeChanged, which provides the
| | 06:21 | derived class a way of
handling changes to the DegreeProperty.
| | 06:26 | Here I'm setting the DegreeString.
| | 06:28 | Now I have another DependencyProperty
down here, I'm not going to show you
| | 06:31 | the code, but what I'm doing here
that was on the DegreeChanged is I am
| | 06:35 | building a string and I'm using the
little degree symbol, so when somebody
| | 06:38 | gets that formatted version of my string it
has this little circle on the end of the degree.
| | 06:43 | So that's my control, I am
going to add it to a page like this.
| | 06:46 | Again I can drag it from my toolbox if
I want it to, here is my control, I gave
| | 06:51 | it a name of Gauge1 and then in my
code behind I'm going to change it
| | 06:55 | programmatically with this button and
with this slider, I will read the Degree
| | 06:58 | String value out using data
binding and place it in this TextBlock.
| | 07:02 | That's what I'm doing here.
| | 07:04 | Get the Gauge1, read the DegreeString property.
| | 07:07 | Remember I couldn't do this unless I
made a DependencyProperty and then assigned
| | 07:11 | it to the text property of the TextBlock.
| | 07:12 | The other bits are done in code, press F7.
When you click on the button, I'm
| | 07:17 | setting the degree value to 50 and
when you move the slider, I'm getting the
| | 07:21 | slider value and assigning
it to the DegreeProperty.
| | 07:24 | Press F5 to run the app, click on
GaugeControl and I'll click on the button,
| | 07:29 | let's just set it to 50 and you see
there is my DegreeString and then I'll move
| | 07:33 | the slider and it's changing two things.
| | 07:36 | It's changing the angle of the hand
and I'm getting the new DegreeString back
| | 07:40 | from the control, very nice.
| | 07:43 | Let's summarize what we've seen.
| | 07:44 | You can create a user control and
build the UI from existing controls.
| | 07:48 | That's what I did with the IP Address Control.
| | 07:50 | I put a wrapper around a set of text boxes.
| | 07:54 | Next you add Dependency Properties to
the controls so that other developers can
| | 07:58 | change the features of your control.
| | 07:59 | Finally, if you think you've created a
beneficial control, you might consider
| | 08:04 | bundling it into a shareable package
and distributing it to other developers.
| | Collapse this transcript |
|
|
10. The Application Life CycleSurveying the application life cycle| 00:00 | Traditionally a Desktop application,
like those that run in Windows 7 can be in
| | 00:05 | one of two execution states,
running or not running.
| | 00:09 | Widows Store Apps have a third
potential state known as the Suspended State.
| | 00:15 | The Windows RT runtime automatically
suspends apps under certain circumstances.
| | 00:20 | You cannot prevent this from happening.
| | 00:23 | Why have a suspended state?
| | 00:25 | It prevents apps from
monopolizing system sources.
| | 00:29 | It also saves the battery because
there is less resources draining the power.
| | 00:34 | When you have an app in full
view there is only one app running.
| | 00:39 | If you have one app in snap view and another
in fill view, then you have two apps running.
| | 00:44 | Two apps is the maximum that
can be running simultaneously.
| | 00:48 | All of the other apps are in a suspended state.
| | 00:52 | On this slide I have
three apps that are suspended.
| | 00:56 | The basic steps of the
application Lifecycle are shown here.
| | 01:00 | We have an app that is not running, in red.
| | 01:03 | The user touches the app tile and the
up transitions to the running state.
| | 01:08 | Eventually, the user switches to
another app and the operating system
| | 01:12 | transitions your app to the suspended state.
| | 01:14 | Don't be scared of the suspended state.
| | 01:18 | All that reading means is
your app's threads are suspended.
| | 01:22 | It's frozen at whatever state
existed when the app transitioned.
| | 01:26 | All of your data is intact.
| | 01:29 | Sooner or later the user
switches back to your app.
| | 01:33 | The app instantly
transitions back to the running state;
| | 01:36 | you need to do nothing special.
| | 01:38 | The app appears and continues running
whatever task it was doing when it was suspended.
| | 01:43 | The operating system can kill an app too.
| | 01:46 | In this situation, the app
transitions from running to not running without
| | 01:51 | passing through the suspended state.
| | 01:53 | Apps can also be terminated
while in the suspended state.
| | 01:56 | This usually happens when the operating
system detects too many suspended apps
| | 02:01 | and it starts terminating the stagnant ones.
| | 02:04 | Let's review what we know.
| | 02:06 | There are three states; not
running, running, and suspended.
| | 02:11 | There are six transitions between
these states, launching and activating,
| | 02:15 | suspended and resuming,
and terminating and killing.
| | 02:21 | The framework contains lifecycle events that
provide us tools to work with these transitions.
| | 02:26 | Use these events to initialize, save and
restore a state if necessary for your app.
| | 02:32 | There are two ways to get to from
not running to running, when the user
| | 02:37 | presses primary or secondary tile that
initiates the launching process, which
| | 02:42 | calls the on-launched method.
| | 02:44 | When the app is started by a contract,
let's say by the consumer searching with
| | 02:49 | the search charm, that
initiates the activating process.
| | 02:53 | There are several on-activated methods available.
| | 02:56 | An app can transition from running
to not running under a few conditions;
| | 03:01 | this is called killing the app.
| | 03:03 | When the user clicks the End Task
button in Task Manager is one example.
| | 03:07 | Another is when the user logs
off or shuts down the computer.
| | 03:11 | Also, if your app crashes, the app is killed.
| | 03:15 | While this is bad for your app,
it's good for the consumer.
| | 03:19 | Their computer is not
littered with unstable apps.
| | 03:22 | Note, you will not get any notifications
when the app is killed, which means you
| | 03:27 | cannot write any code to
deal with this situation.
| | 03:31 | An app can transition from
suspended to not running.
| | 03:34 | This is called terminating the app.
| | 03:36 | Just like the killing apps scenario,
you are not notified that the app is being
| | 03:41 | terminated but that's okay.
| | 03:43 | You have an opportunity to save a state
when the app switches to the suspended state.
| | 03:48 | Killing an app is a rude activity and is
a rare occurrence in your app lifecycle.
| | 03:53 | Suspending an app is a common occurrence;
| | 03:55 | it happens all the time as
the user switches between apps.
| | 03:59 | Immediately before the suspension
occurs, the suspending event is raised.
| | 04:04 | This is the time for you to
save any necessary app state.
| | 04:07 | Do it now, because it is possible that
the app will be terminated without any
| | 04:12 | notification before it ever runs again.
| | 04:15 | Also this is a good time to release
any printers, files or other exclusive
| | 04:19 | resources that the app is holding so
that other apps can use them during
| | 04:23 | your suspension phase.
| | 04:24 | The resuming event happens during the
transition back to the running state.
| | 04:29 | It is rare to do much on the resuming
method because the operating system has
| | 04:33 | preserved all of your app state anyway.
| | 04:36 | I'd like to show the suspend
and resume cycle in action.
| | 04:39 | One way to do that is to use the Task Manager.
| | 04:42 | I like to use the Control+Shift+Escape key
combination to bring up the Task Manager.
| | 04:47 | I'm going to change a few options.
| | 04:50 | I'm going to show more details.
| | 04:52 | I am also going to make the Task
Manager float on top of all of the other ones
| | 04:57 | by choosing Always on top.
| | 04:59 | And then finally to see the
suspended status I need to choose View>Status
| | 05:05 | Values>Show suspended status.
| | 05:08 | Now I see that I have two apps that are
in suspended state, let me switch to those.
| | 05:13 | I'm going to press Window tab to show
my running applications, and then I'm
| | 05:18 | going to choose the Store App.
| | 05:22 | In Task Manager you see that the Store App is
now active and the Weather App is suspended.
| | 05:27 | Now I'm going to switch to the Weather App
with the Window key tab and choose Weather.
| | 05:35 | In Task Manager I see that the
Weather is now active and if I wait about 10
| | 05:39 | seconds, the Store
application becomes suspended.
| | 05:43 | Now I will close the Task Manager.
| | 05:47 | Here are some tips and best practices.
| | 05:49 | The launching and activating event are
perfect for initializing state in your application.
| | 05:55 | If the user has important data like
what level they are playing in the game,
| | 05:59 | always save that session
state during suspension.
| | 06:02 | Save your state quickly, you only
have five seconds to get the job done or
| | 06:06 | the app is terminated.
| | 06:08 | The app life cycle for Windows
Stores App is a well-designed system that
| | 06:11 | provides key events for initializing
and saving your application state.
| | Collapse this transcript |
| Writing and debugging life cycle events| 00:00 | I'll use this project to show you
the app lifecycle events and how to
| | 00:04 | successfully debug the suspend,
resume and terminate events.
| | 00:08 | I'm inside the solution that has three
projects, StartupEvents, SuspendAndResume
| | 00:13 | and UseSuspensionManager.
| | 00:15 | I start by showing you the
code in this first project.
| | 00:17 | I'll make sure it's the StartUp Project
by clicking here and then I'm going to
| | 00:22 | open up the App.xaml.cs
file by double-clicking here.
| | 00:27 | Remember that the OnLaunched method is
called whenever the application starts.
| | 00:31 | In this case it's when the user
clicks on the main tile or a secondary tile
| | 00:36 | for the application.
| | 00:37 | What does my code do?
| | 00:38 | Well I have the Default OnLaunched Code
and some place in there it's setting the
| | 00:42 | first page of the
application, it's calling Navigage.
| | 00:46 | And what I'm doing additionally is I'm
sending in some additional arguments here.
| | 00:50 | What am I sending in?
| | 00:52 | The information that I got
from the OnLaunched method, the
| | 00:56 | LaunchedActivatedEventArgs.
| | 00:58 | I'm also listening for the Activated handlers.
| | 01:01 | In particular I'm listening
for the OnSearchActivated.
| | 01:05 | This is called when the user works with the
Search Charm. What am I doing in this method?
| | 01:10 | I'm also calling the Navigate
method and passing in a set of arguments.
| | 01:15 | Either way the application starts
either by launching it or activating it, one
| | 01:20 | of these methods is going to get called and
they're both going to send it to the MainPage.
| | 01:23 | One of the differences is, is I'm
sending a different set of arguments.
| | 01:27 | In the second one I'm sending
the SearchActivatedEventArgs.
| | 01:29 | And I'm doing that so I can show you
whether the user clicked on a tile or
| | 01:35 | whether they used a search charm.
| | 01:37 | Now over in my MainPage.xaml inside the
C# code, in the OnNavigatedTo method,
| | 01:46 | I am reading the information from this
inbound parameter and checking to see if it
| | 01:52 | was one of those two EventArgs type.
| | 01:54 | I'm using this interface to
check that, IActivatedEventArgs.
| | 01:58 | And if it is, I'll show you the kind
of startup. Let's see this in action.
| | 02:02 | I'll press Ctrl+F5 to run the app and
it says that I started it with Launch.
| | 02:09 | Next I'm going to bring up the
Charms menu by pressing Windows key+C and
| | 02:14 | then clicking on Search.
| | 02:16 | When I click on the Search button, keep
your eye what happens in the text on the
| | 02:21 | page, I'm going to click now.
| | 02:23 | Now you see it's already activated
that with the Search Charm, so you can
| | 02:27 | differentiate between these two actions.
| | 02:30 | I'll shutdown the application by pressing Alt+F4,
returning to Visual Studio by using Alt+Tab.
| | 02:36 | Then I'm going to make this next project,
SuspendAndResume, my startup project.
| | 02:43 | Now I'll show you a different set of events,
the Suspend Event and the Resume Event.
| | 02:48 | I'll also show you how to debug these
events and later I'll show you how to
| | 02:52 | persist the session state
during the suspend process.
| | 02:54 | I'll open up App.xaml.cs again and in
the app constructor I'm setting up an
| | 03:02 | event handler for the
Suspending Event and the Resuming Event.
| | 03:06 | Remember that the Suspending Event
happens when the App is transitioning to
| | 03:10 | the Suspended State.
| | 03:12 | This is where I should save my state.
| | 03:15 | Let's see what we have down here,
here is my OnSuspended method and
| | 03:19 | my OnResuming method.
| | 03:21 | The most important thing I need to do
in the OnSuspended method is at some
| | 03:24 | point save the state.
| | 03:27 | But I'll also like to show you
this thing called the GetDeferral.
| | 03:30 | Without the Deferral the app gets
suspended as soon as the code in the
| | 03:33 | OnSuspending handler is finished.
| | 03:36 | This is not ideal if you are making
asynced calls within the OnSuspended
| | 03:40 | handler, because your threads get
suspended before they can finish the Async job.
| | 03:45 | You use the Deferral to indicate you
are doing something Async in this method,
| | 03:49 | and then at some future point you have
to call deferral.complete to say you
| | 03:54 | are ready to be suspended.
| | 03:55 | Now note you only get five seconds to
write code inside the OnSuspending Event.
| | 04:01 | The deferral does not give you any extra time.
| | 04:04 | If you exceed the five second limit,
your app is terminated. Let's debug this.
| | 04:09 | I've got a breakpoint in the
OnSuspending and the OnResuming.
| | 04:14 | Remember to do a breakpoint you
press F9 to turn it On or Off.
| | 04:17 | I'll press F5 to run the
application with the debugger attached.
| | 04:22 | I'll switch back to Visual Studio and I
want to simulate the suspend event cycle.
| | 04:27 | To do that I can use this toolbar
with the Suspend, Resume and Suspend and
| | 04:32 | shutdown, this last one simulates a termination.
| | 04:35 | Now if you do not see this menu,
right-click and choose Debug Location.
| | 04:40 | Let's see this happen.
| | 04:42 | I'm going to click Suspend
and my suspend code is running.
| | 04:47 | I'll step to the code, get my referral,
save my state, referral complete and now
| | 04:52 | at this point my app is in Suspended mode.
| | 04:55 | To show what happens when
you Resume, choose this item.
| | 04:59 | As expected it is my breakpoint.
| | 05:02 | And then the last demo
choose Suspend and shutdown.
| | 05:06 | There is my un suspending event,
| | 05:09 | Now of course this is great seeing these
events but I'm not actually saving any state.
| | 05:14 | So let's talk about the kind of state
you can save and we'll use a class that
| | 05:18 | Microsoft provides called the
SuspensionManager, which makes it relatively easy
| | 05:21 | to write the SuspendandResume code.
| | 05:24 | To do that I'm going to go to this
last project and make it my StartUp.
| | 05:29 | I'll start with this TypesOfState.
| | 05:31 | Now this lists the different kinds of
state that you can have in an application;
| | 05:35 | Application Settings, User Settings,
Application Data and User Data and
| | 05:39 | finally Session State.
| | 05:41 | Most of these are important to the app,
but they're not what we're talking
| | 05:45 | about in this demo.
| | 05:46 | What I'm talking about in this demo is
the session state, that's important for
| | 05:49 | what the user is doing at the moment
and you might want to restore when you
| | 05:53 | restart the app, if the app was ever
terminated, like the item that was selected
| | 05:57 | in a list box, or some partial data
that they filled in a data entry page.
| | 06:02 | You have to decide what's important at
the moment to save in Session State.
| | 06:06 | To save it I'm going to use a class
called the SuspensionManager class.
| | 06:10 | Now for some obscure reason the
SuspensionManager is not part of the WinRT class
| | 06:15 | hybrids, instead it is part of the
Visual Studio Templates and it can only be
| | 06:19 | added to new projects by
creating one of these templates.
| | 06:22 | Now I've included it here in this
project, if you want your own copy, just
| | 06:26 | grab it out of here.
| | 06:28 | Let's see how you save state.
| | 06:29 | I'm going to go to my
MainPage and show you the Main UI.
| | 06:34 | I have a list box and when you click
on an item in the list box, it fires the
| | 06:38 | SelectionChanged event.
| | 06:41 | I'll press F7 to show you that code.
| | 06:45 | When the user selects a
new item, I'm calling the
| | 06:48 | SuspensionManager.SessionState.
| | 06:51 | Now remember I added the
SuspensionManager class to my project, I'm not going
| | 06:55 | to show you the code that's inside
the SuspensionManager, I'm just going to
| | 06:58 | show you how to use it.
| | 07:00 | So what am I saying here is I have my
own unique identifier, WeekDayIndex, and I
| | 07:04 | want to store the
selected numeric value in there.
| | 07:06 | Now at some future point when we come
back into this page, I'll check to make
| | 07:11 | sure that the session state contains that key.
| | 07:14 | And if it does, I'll retrieve the
information here, cast it to an end, because
| | 07:19 | that's what I need, I need an integer
value, and then I'll make my WeekDayListBox
| | 07:22 | used as SelectedIndex.
| | 07:26 | So that's getting and retrieving the value.
| | 07:28 | Now of course I need to save this in the
SuspendedEvents, so let's go show you that.
| | 07:32 | Over to App.xaml, here we go inside
this file and down here I say when you're
| | 07:40 | suspending, call the SuspensionManager.
SaveAsync, that's all you need to do.
| | 07:46 | The SuspensionManager figures out where
to save the file and does it automatically.
| | 07:50 | Now of course in the StartUp on the
OnLaunched, I'm also restoring the Async.
| | 07:57 | So I'm restoring it here, I'm saving it here.
| | 08:01 | I'm also checking what the
PreviousExecutionState of the application.
| | 08:04 | If the application was terminated or the
application was not running, then I want
| | 08:09 | to go ahead and restore
the SuspensionManager values.
| | 08:11 | So that should be good enough.
| | 08:13 | I've got some breakpoints in
my code and watch this run.
| | 08:16 | I'll press F5 to run the
application with the debugger.
| | 08:19 | You see that I'm restoring the Async
values here in the StartUp and then inside
| | 08:23 | the OnNavagatedTo, I'm retrieving the value.
| | 08:28 | Here is my application,
I'll pick Tuesday from my list.
| | 08:31 | You see that the SelectionChangeEvent
is firing, I'm saving the data.
| | 08:36 | I'll just suspend the application at
this point, so we'll say Suspend, and I see
| | 08:42 | my code is saving that
information and then I am done.
| | 08:47 | So at this point I could shutdown the
application and restart it, press F5, and
| | 08:54 | I'm restoring that Async value and
then I see if it works correctly.
| | 08:58 | I'll come over here, it worked, I'm restoring this.
| | 09:05 | I'm getting some error message from
Visual Studio about the debugging code;
| | 09:08 | you can go ahead and ignore those.
| | 09:11 | And there in the UI is my selected item.
| | 09:14 | It's nice that Microsoft provides
such a rich set of events for our apps.
| | 09:18 | Using the SuspendEvent to Save
SessionState is the key to make the user love
| | 09:22 | your app even if it terminates unexpectedly.
| | Collapse this transcript |
| Startup and custom splash screens| 00:00 | The Splash Screen is the first screen
shown to your users when starting the app.
| | 00:04 | Every Windows Store App has one and it
is shown automatically during Startup.
| | 00:09 | To show you this example, I'm going
to use this ChangeDefaultSpalshScreen
| | 00:14 | project, make sure it's your startup
project and then, I'm going to look at this
| | 00:19 | SplashScreen.png file
that's inside this Assets folder.
| | 00:22 | This is the default file that Microsoft includes.
| | 00:26 | The green color indicates the transparent color.
| | 00:28 | I'm going to start the application
to see what it looks like, Ctrl+F5 and
| | 00:34 | there's the Splash Screen
and there is my main UI.
| | 00:37 | We choose Alt+F4 to switch back to
Visual Studio and then what I'm going to do
| | 00:42 | is I'm going to open up my Package.
appxmanifest file and I'm going to look at
| | 00:48 | the settings for my Splash Screen.
| | 00:51 | Right now, I'm using the default Splash
Screen, if I want to keep using the one
| | 00:56 | that Microsoft provides, I can
just change the background color here.
| | 00:59 | Let me show you this.
| | 01:01 | I'll do pound (#) and then
I'll run the application again.
| | 01:04 | Don't blink and there is my new Splash
Screen with a slightly different color.
| | 01:08 | Again, I'll shut down the
application to return, that's not a very
| | 01:12 | interesting experience.
| | 01:13 | So let's change out this png file.
| | 01:16 | I'll do that by right-clicking on my
Assets folder, Add>Existing Item and then
| | 01:25 | I'm going to go to my exercise files
and inside the exercise files is an Assets
| | 01:30 | folder and inside there is a Images
folder, which contains another folder called
| | 01:36 | Splash and I'm going to open
this SplashScreen.png file.
| | 01:42 | Now it says I already have a file with
that name so I'll go ahead and replace it.
| | 01:49 | And now when you run the
application, again don't blink, there is our
| | 01:53 | custom Splash Screen.
| | 01:55 | Now notice how fast that
Splash Screen disappears.
| | 01:58 | That's good, it gets the user to
starting the application as soon as possible,
| | 02:02 | but how does the framework know when
to dismiss the default Splash Screen?
| | 02:05 | The answer is in the App.xaml file.
| | 02:08 | I'll shut down this application, Alt+F4,
return back to Visual Studio, visit my
| | 02:16 | friend the App.xaml.cs file.
| | 02:20 | This line of code right here, Window.
Current.Activate tells the WinRT runtime
| | 02:25 | that we are done and it's time
to dismiss the Splash Screen.
| | 02:29 | Now let's talk about the Startup process.
| | 02:31 | You have to call Window.Current.
Activate within 15 seconds of the app starting
| | 02:37 | or the operating system considers your
app to be unresponsive and will kill it.
| | 02:41 | What do you do if you need longer
than that to start your application?
| | 02:44 | The best solution is to
rethink your Startup process;
| | 02:47 | perhaps you can start another page
and switch to the Main Page later.
| | 02:51 | This pattern is sometimes
called the extended splash screen.
| | 02:55 | Let me show you a simple example.
| | 02:57 | I'll change my Startup project to
this ExtendedSplashScreen, I'll open up
| | 03:03 | App.xaml in the C# file, double-click on
that, the first thing I want you to see
| | 03:10 | is I'm loading a different page. I'm
not starting with the Main Page anymore.
| | 03:14 | I'm loading this file called FakeSplash.
| | 03:16 | Now usually it's called Extended
Splash but I want to make a point here.
| | 03:20 | I'm calling it the FakeSplash.
| | 03:22 | It's going to look like the real
Splash Screen but its going to run some code
| | 03:26 | to retrieve the data.
| | 03:28 | It's going to look like the
real Splash Screen, but it's not.
| | 03:31 | So here it is, FakeSplash.xaml, you
can see that I've got a blue background.
| | 03:38 | I have the text Fake Splash at the
top so we can see it during the demo.
| | 03:43 | It's hard to see it but I've also add
a ProgressRing, which will rotate while
| | 03:49 | we're in the process of showing this screen,
you see that I've set the IsActive to True.
| | 03:53 | Now let's go look at the
code behind for FakeSplash.
| | 03:57 | Remember this is first screen that's loaded.
| | 04:01 | When you navigate to this page, I'm
going to instantiate the code to get my data
| | 04:05 | that I need for the start up of the application.
| | 04:07 | I'm going to call a method called GetSlowData.
| | 04:10 | If you look at the code for that,
you'll see that it's just waiting for five
| | 04:13 | seconds. Then when that's done, I
navigate away from the Fake Splash Screen,
| | 04:18 | to the screen that I really want to see, which
is my MainPage. Here is what it looks like.
| | 04:23 | I'll press Ctrl+F5, there is the Fake
Splash, and then after five seconds, it
| | 04:30 | switches to the Main Page.
| | 04:32 | The Splash Screen is important to show
at the application launch to reassure the
| | 04:35 | users that the app has started.
| | 04:38 | Using the Splash Screen image file, it
is easy to have a brand experience at
| | 04:42 | the same time.
| | Collapse this transcript |
| Managing application settings| 00:00 | Saving your app settings is incredibly easy in WinRT.
| | 00:04 | I'm in a project called UsingApplicationSettings
and I'm going to open this
| | 00:09 | MainPage.xaml file by double-clicking.
| | 00:12 | I'm going to hold down my spacebar
and use my mouse button to drag this up
| | 00:17 | where I can see it.
| | 00:18 | On the left side of the screen is a
Get Newsletter toggle. The user can turn
| | 00:22 | this on or off to indicate whether
they want to receive a newsletter.
| | 00:26 | Then I'll save that setting by clicking
on this button to the Local Settings.
| | 00:31 | Local Settings means that they're
stored on the local computer only.
| | 00:35 | Then in this button over here I'll read that
information let me show you how easy this is.
| | 00:40 | We'll double-click on this
button and here is the code.
| | 00:44 | I start by working with the
ApplicationData class I'm calling .Current.
| | 00:49 | That gives me the current application
engine and then I ask for a subset of the
| | 00:54 | data in there called Local Settings right here.
| | 00:57 | I stored that in this variable and then I'm
going to add my own item to the Local Settings.
| | 01:03 | I do that by going to the Values
collection, which is a dictionary.
| | 01:06 | So I provide a dictionary key called
HasNewsletterSubscription and then over
| | 01:11 | here I choose what to store,
this toggle switch IsOn property.
| | 01:17 | Later when it's time to read the
information, I again go out the ApplicationData
| | 01:21 | class, get the Current store, ask for
the Local Settings and then down here
| | 01:28 | I read that information back using the
same key, then I check whether I got a
| | 01:34 | value back, I check for not null.
| | 01:36 | And if it's not equal to null, then I
retrieve the value and put it in this text box.
| | 01:40 | Otherwise I say it's not in the Local Settings.
| | 01:44 | Now I'll switchback to the UI
and show you the next section.
| | 01:48 | With a roaming profile, the settings
can be synchronized across machines.
| | 01:53 | Imagine your application is an E-book
reader and you want to save the page the
| | 01:57 | user is currently reading.
| | 01:59 | So in this section on the left side of
the page, I have two text boxes for the
| | 02:04 | Users Name and their Country that they
live in and then I have a button to Save
| | 02:08 | to Roaming Settings and a
button to Read the Roaming Settings.
| | 02:11 | So let's see what the
code looks like for Roaming.
| | 02:13 | It's nearly identical.
| | 02:14 | I started with the ApplicationData, I
asked for .Current, I specify this time
| | 02:19 | I'm looking for
something in the RoamingSettings.
| | 02:21 | Then I assign two values using
this key, UserName and Country.
| | 02:27 | To read the values my
code is slightly different.
| | 02:30 | I'm getting the Current RoamingSettings
here and then I'm retrieving this string
| | 02:34 | values for the UserName and text.
| | 02:37 | Now these could come back as null, so
what I did in these examples, I put a
| | 02:41 | catch block down here and if there is
nothing in this values, it will run this
| | 02:45 | code down here and it will say Not in Roaming.
| | 02:48 | Now let's see what this looks like.
| | 02:50 | If I run the application by pressing
Ctrl+F5. I'm running the app on a local
| | 02:55 | machine, I'll choose to sign up for
the newsletter and save the settings and
| | 03:00 | then I'll say, Get the Local
Settings. I want the newsletter.
| | 03:03 | Now I'll come down here and write in my
Name and my Country and I'll save that
| | 03:09 | to Roaming Settings.
| | 03:11 | Before I click on this let me click
on this button here to show you there
| | 03:15 | is nothing in roaming.
| | 03:16 | I'll click the Save in Roaming and I'll
come back up here and click this button
| | 03:20 | and that data is there.
| | 03:21 | Now I can go to another machine and I'm
going to simulate that by shutting down
| | 03:25 | this application, Alt+F4.
| | 03:29 | Now that I'm back in Visual Studio,
I'll test this on another machine so we can
| | 03:33 | check the roaming profile by choosing
RemoteMachine and then pressing Ctrl+F5 to
| | 03:39 | move this to the surface.
| | 03:41 | Now that I'm inside the application,
I'm going to click on the Get Local
| | 03:45 | Settings and you'll notice that there
is nothing set in the Get Local Settings.
| | 03:50 | and I'm going to click on the Get
Roaming Settings button and you'll see that I
| | 03:55 | retrieve the information that
I saved on the other computer.
| | 03:58 | The Application Data Class makes it
simple to read and write values to
| | 04:01 | the desired location.
| | Collapse this transcript |
|
|
11. Tiles and ToastConfiguring basic tiles| 00:00 | Everytime a Windows 8 user logs on to
their computer, they see the Start screen.
| | 00:06 | The tiles in the screen are a distinctive
feature of Windows phones and Windows devices.
| | 00:11 | Your app will have a tile on the screen.
| | 00:13 | It's the face of your app and is
competing with all the other tiles.
| | 00:17 | To run an application, you press the Tile.
| | 00:19 | I'm going to press this Tiles
Introduction and the application starts up.
| | 00:24 | Now all tiles are added to the start
screen when you install the application and
| | 00:28 | the user can take those tiles and
remove them and change tile options.
| | 00:33 | Let me show you what I mean.
| | 00:35 | I'll press Alt+F4 to close this
application and let's look at this tile
| | 00:40 | here, the News Tile.
| | 00:41 | If I am on a touch device, I can press
and drag down on this to see the options.
| | 00:48 | If I'm on a mouse computer I right-
click, the bottom app bar shows up.
| | 00:53 | First thing you can do is you can unpin
this tile from the start menu or you can
| | 00:57 | uninstall the application, you can
also change the size of the tile.
| | 01:02 | Let me show you that.
| | 01:03 | I'll click on the Larger and then I will
right-click and set it back to Smaller.
| | 01:10 | Now let's see if we can do that on my
tile, I'll right-click. All I have are
| | 01:14 | options here are Unpin from Start and
Uninstall, I need to figure out how to
| | 01:19 | add a wide tile to my application, I'll
return to Visual Studio to show you how to do that.
| | 01:24 | I'm inside this Tiles Introduction
solution and I'm going to be working with
| | 01:28 | this basic tiles. The one that you saw
on the Desktop was this one down here
| | 01:32 | TilesIntroduction, but we're going
to start with this one so I can change
| | 01:34 | out the tile graphics.
| | 01:36 | This Logo.png file is the basic
logo that shows up on the tile.
| | 01:40 | Let me double-click on it
to show you what's here.
| | 01:42 | It's a white box in the center.
| | 01:44 | The green signifies the transparent area.
| | 01:47 | I'm going to change this logo for my own.
| | 01:49 | I'll right-click on Assets,
I'll chose Add>Existing Item.
| | 01:55 | I'll go to my exercise files and then
open this Assets folder and I'll open the
| | 01:59 | Images folder and then I'm
going to add two PNG files;
| | 02:04 | Logo150.png and then I'm going to Ctrl+
Click to choose LogoWideRed.png and then
| | 02:13 | I'll click on the Add button.
| | 02:15 | Now I'm going to tell Visual Studio
to use these new PNG files for my tile.
| | 02:21 | To do that, I'm going to open
up my Package.appxmanifest file.
| | 02:24 | Let me go to the Application UI section,
I'm going to change out the main logo,
| | 02:31 | the 150x150 logo by clicking
here on this dot, dot, dot (...)
| | 02:35 | button to choose the file.
| | 02:37 | Now I'm looking for the file inside my
project, so I'll go to this Assets folder
| | 02:41 | and choose Logo150.png.
| | 02:43 | I'm getting the error message here
that says the mixtures of images with and
| | 02:47 | without the "scale" or "
targetsize" qualifiers exists.
| | 02:50 | What that means is that I've got a logo
specified here with no size indicators
| | 02:55 | and another one specified with a scale
indicator, this was created automatically
| | 02:59 | for me when I added it to Visual Studio.
| | 03:02 | I'm going to delete this logo file here in
Visual Studio and that fixes the problem.
| | 03:10 | Next I'm going to add my Wide Logo tile.
| | 03:13 | I go here to Wide Logo and
I'll do the same thing I just did.
| | 03:17 | I'll click on this button down here and choose
the LogoWideRed.png file and then click open.
| | 03:22 | Again it's complaining about the scale
and duplicate files, I'll go over here
| | 03:27 | and delete this LogoRedWide file and then OK.
| | 03:33 | And now I'm ready to run the application.
| | 03:35 | I'll press Ctrl+F5 to run. The app has run;
| | 03:40 | I've just deployed it to the
Desktop by doing the same thing.
| | 03:43 | Another way I could have done this
would be to deploy, by going back to Visual
| | 03:48 | Studio and choose Build>Deploy BasicTiles.
| | 03:52 | Now I'm going to press the Window key on
my keyboard to go to my Desktop, scroll
| | 03:57 | to the end of the list and now I have
the WideTile. I can right-click on this
| | 04:01 | and choose to make it smaller
and you see my custom logo there.
| | 04:05 | So I have two versions on my tile, one
with the blue logo and one with the red logo.
| | 04:11 | That's the fundamentals of
showing simple tiles for your app.
| | Collapse this transcript |
| Understanding live tiles, toasts, and the notification system| 00:00 | I want to take a few minutes and talk
about the different techniques available
| | 00:04 | for notifying your users of
status changes and error messages.
| | 00:07 | Inside your application, you can build
Custom pages and show the message, or if
| | 00:12 | you need a model screen, the system
Dialogs and Popups can handle the job.
| | 00:16 | What about notifications that appear
when your application is not running?
| | 00:20 | For these scenarios, WinRT provides
the Live Tiles and Toast notifications.
| | 00:25 | A much touted feature of
Windows 8 is the Live Tiles.
| | 00:29 | What does live mean?
| | 00:30 | It means you can update the
information on the bottom of the tile.
| | 00:34 | In this example, you can see the news
application has an updated headline and in
| | 00:39 | my mail application, I can see
that I have six unread Emails.
| | 00:44 | Toasts appear and hover
over the current visible app.
| | 00:47 | On the bottom on the screen, you can
see that I have the Explore California
| | 00:51 | app open and the green rectangle represents a
toast that's popped up from another application.
| | 00:57 | So toasts always appear over the current
visible application. By default, they're
| | 01:01 | located in the upper right-hand corner
of the screen, they disappear after a
| | 01:05 | time limit or when the user presses the toast.
| | 01:08 | You get to chose when a Tile or Toast is
updated. There is something called a local update.
| | 01:14 | In that case, you call a frameworks
update method while your app is running and
| | 01:18 | the Tile or Toast immediately sees the change.
| | 01:21 | You can also schedule a one
time update for Tiles and Toast.
| | 01:26 | Here you call the frameworks
AddToSchedule method, and then the Tile is updated
| | 01:30 | at that future time.
| | 01:32 | Now the interesting thing about this
is the app does not need to be running
| | 01:35 | at that schedule time.
| | 01:37 | The Tile will show the update for three days
and then it will revert back to the previous UI.
| | 01:42 | There's another type of Scheduled
Update called a Periodic, this is only
| | 01:45 | available for Tiles.
| | 01:47 | You call the framework StartPeriodicUpdate
Method in your code, and you have to
| | 01:51 | specify URL that returns some
information to your application, it's going to
| | 01:55 | return the tile UI to show
and the next update time.
| | 01:59 | At the scheduled time, the tile is
updated based on that downloaded xml file.
| | 02:04 | It also schedules another update based on
the information found in the update time file.
| | 02:09 | Again, the app does not need to
be running at the scheduled time.
| | 02:12 | The final type of Update is known as the
Push update. In this case, the update is
| | 02:17 | pushed to your machine
from the Microsoft Server.
| | 02:20 | Who gets to see this update?
| | 02:22 | You could broadcast the message to
all your users, you can single out one
| | 02:26 | individual for the
message or a sub set of users.
| | 02:29 | Here is a great example, the Weather
app needs to show a storm advisory to some
| | 02:33 | users, so you'll look to your user base
to find out who's in the affected region
| | 02:37 | and send messages only to those people.
| | 02:40 | Push notifications are a powerful
addition to your app, but it also takes the
| | 02:44 | most work to set up.
| | 02:45 | To work with Push, you
need to have your application;
| | 02:47 | you need to have access to the
Windows Notification Service.
| | 02:51 | You need to provide a Cloud service
that communicates with the Windows
| | 02:54 | Notification Service and your app.
| | 02:56 | Now some developers like to
build.netwebservices for this.
| | 02:59 | The Microsoft Assure Team has a nice
tool kit to simplify working with the
| | 03:04 | Windows Notification Server and they
host this service on their servers.
| | 03:08 | Let's walk through the steps
to get a push notification.
| | 03:11 | An app request a notification
channel from the WNS server, this is done
| | 03:16 | through the WinRT API.
| | 03:17 | A channel is a unique address that
represents a single user on a single
| | 03:21 | device for a specific app.
| | 03:23 | Channels expire after 30 days;
| | 03:25 | therefore if the user doesn't use your app,
the channel is purged from the WNS server.
| | 03:30 | Its best to ask for channel
everytime you start your app.
| | 03:34 | WNS returns a channel URI to your app.
| | 03:38 | Your App sends a channel URI and any
additional information to the Cloud service.
| | 03:42 | The service stores
information for all of your users.
| | 03:47 | When you are ready to send a notification,
your Cloud service creates a list of channels.
| | 03:51 | In the weather app example, your Cloud
service would get the weather advisory
| | 03:55 | from the authorities.
| | 03:56 | It looks with data associated with
each user and determines who is in
| | 03:59 | that geographic region.
| | 04:01 | The Cloud service sends the
channels to the WNS server.
| | 04:05 | It also sends a custom XML
needed for the Tile or Toast.
| | 04:09 | Finally, the Tile or Toast XML sent to
each user's computer. This is possible
| | 04:14 | because at the time the channel is
requested from WNS, it stored connection
| | 04:18 | information about each channel's local computer.
| | 04:21 | Now the next time the user logs in to
their computer, they get the notification.
| | 04:26 | If you want to read more about WNS,
check out the detailed pages on MSDN.
| | 04:30 | I'll discuss Live Tiles, Secondary
Tiles, and Toast in other videos in
| | 04:35 | this chapter.
| | Collapse this transcript |
| Creating live tiles| 00:00 | To create a Live Tile, you write code
to change the tile text and images, you
| | 00:05 | pass your request for a new
tile to the operating system.
| | 00:09 | It guards against direct access to the
Tiles. In other words, you can't design a
| | 00:13 | fancy UI in XAML and use that for the
tile. Instead, you must create an XML file
| | 00:18 | containing the new tile information.
| | 00:20 | Within that file, you must specify the
XML Template name, Values for the text
| | 00:25 | fields and the locations of
images to use on the tile.
| | 00:29 | The framework contains 47 predefined XML
templates broken down into four categories.
| | 00:34 | There are square templates, two varieties:
| | 00:36 | static and animated. And two
versions of the wide templates:
| | 00:40 | static and animated.
| | 00:41 | Here are some examples of Square Templates.
| | 00:44 | I took these screen shots from the
public MSDN help pages. The top left tile is
| | 00:49 | a picture only tile, the
rest are text only templates.
| | 00:52 | Here, are some examples of the animated squares.
| | 00:55 | They don't look square in the screen
shots, but here is what happens when you
| | 00:59 | chose these templates; the top half
is shown for a few seconds then the
| | 01:02 | animation scrolls to the bottom half.
| | 01:05 | After a few more seconds, the
top half animates back into view.
| | 01:09 | These are some illustrations
of the wide static template.
| | 01:12 | My favorite is the one with the five pictures.
| | 01:14 | You see that one used on the people tile.
| | 01:17 | And finally, a few examples
of the animated wide tiles.
| | 01:20 | To create a Live Tile, you
have to create an XML file.
| | 01:23 | You can hand code the XML or use an
XML literal like shown in this example.
| | 01:28 | There are three areas to note in the XML file.
| | 01:31 | You must identify the template name.
| | 01:33 | Here I'm using the TileWidePeekImageCollection01,
which is an animated tile.
| | 01:39 | You must also specify the
image source and the text values.
| | 01:43 | For convenience, the framework
includes the TileUpdateManager class.
| | 01:48 | This class can retrieve the XML
template using the tile template type
| | 01:52 | enumeration, what you get is the RAxML.
| | 01:56 | Then you use the XmlDom to replace the text
and image locations within that RAxML file.
| | 02:01 | Let me show you how this
is done in Visual Studio.
| | 02:04 | I'm inside this project called LiveTiles.
| | 02:07 | All the code is in this
MainPage.xaml and MainPage.xaml.cs.
| | 02:12 | Let's look at the UI first, I'll double-
click on this file, it's a simple app.
| | 02:16 | It just has five buttons and when I
click on this first button, I'm going
| | 02:21 | to create a Live Tile.
| | 02:22 | I'm going to do that by
using a literal XML string.
| | 02:25 | I'm specifying the tile, the visual,
the binding, which includes the template
| | 02:30 | name, and then I'm specifying
that there are two text areas.
| | 02:35 | The first text area is going to say
New Tour Info and the second text area is
| | 02:39 | going to say, Romance and Wine Country.
| | 02:41 | Now that I have my XML string, I'm
going to create an XML document on line 42
| | 02:45 | and load that XML string into the document.
| | 02:48 | Now on line 46, I'm going to
request a notification using that document.
| | 02:54 | So the variable on line 46
contains the potential of notification.
| | 02:58 | When I'm ready to update, I go to the
TileUpdateManager class and I ask it to
| | 03:03 | create a TileUpdater for my application
then I call update on it and I pass in
| | 03:09 | my notification document
and see what this looks like.
| | 03:11 | I'll press Ctrl+F5 to run the application.
| | 03:16 | I'll press the Windows key on my
keyboard and go look at my current tile.
| | 03:21 | It says Explore California in
LiveTiles, using the WideTile format.
| | 03:25 | Now I will return back to my
application and click on the button.
| | 03:29 | I'll switch back to the Start Screen,
with the Windows key and look at that tile
| | 03:35 | and switch to the smaller version and
there. Did you see they animated into place?
| | 03:42 | There is my new text.
| | 03:45 | Now let's go back to Visual Studio.
| | 03:47 | On the next Button_Click, I'm
going to use the GetContentTemplate.
| | 03:51 | Remember that this goes out and gives me
the RAxML so I get an XML document from
| | 03:55 | the framework and I tell it what tile
type I'm looking for in this case, it's
| | 03:59 | the TileWidePeekImageCollection01.
| | 04:03 | This contains just RAxML with some
place holders in it, so next, I need to use
| | 04:07 | some technique to go into that
XML file and change the values.
| | 04:10 | One way to do that is to use the XML
DOM, so here on line 56, I'm getting all
| | 04:15 | the text nodes in that document and on
line 57, I'm getting all the image nodes.
| | 04:19 | Then I go into the text node, I get
the first item in the textNode and I add
| | 04:24 | some text to it, Vacation Pics.
| | 04:27 | Do the same thing with the next textNode.
| | 04:29 | And then this bit of code down here is
going to swap out the sources for some
| | 04:34 | images that I have inside my application.
| | 04:36 | If you look inside my Assets folder,
you'll see I have these files called
| | 04:39 | Abstract 1, 2, 3, 5 and 8.
| | 04:41 | Down here, I specify an image node and
then I'm setting the attribute source
| | 04:47 | equal to this location for that file.
| | 04:50 | Do that for several of my images and then
down here I do the same things I did earlier.
| | 04:55 | I get my notification passing in my xmlDoc.
| | 04:57 | And then I create my application and then
finally, I create the tile updater and update.
| | 05:02 | Now notice up here, you could specify
an expiration time for this tile and it
| | 05:06 | would revert back to the original tile.
| | 05:08 | Let's see what this one looks like.
| | 05:10 | Switch back to the application, I'll
click on the second button, I'll switch
| | 05:13 | back to the start screen with the
Windows key. Remember this is the WideTile
| | 05:18 | format so I'm going to
right-click and choose Larger.
| | 05:23 | And there are my new tiles.
| | 05:24 | I've got five pictures on it and it's
animated so then it rotates up and shows
| | 05:28 | the two bits of text, and then it
animates down to show the pictures again.
| | 05:34 | Back to Visual Studio.
| | 05:36 | Here is how you would schedule an update.
| | 05:37 | You're going to get the content like
before, you're going to change the tile
| | 05:42 | UI like before, you'll schedule a
due time in the future, in this case six
| | 05:46 | hours in the future. Then I'm going to
use the ScheduledTileNotification and I
| | 05:50 | pass in the xmlDoc and the future
time and then once again I call a
| | 05:54 | CreateTileUpdaterForApplication.
| | 05:55 | Now I'm not going to sit here and wait
for six hours to show this demo, so you
| | 06:00 | have to run it on your own time.
| | 06:02 | Finally, I wanted to show
something else you can add to a Live Tile.
| | 06:05 | They are called Badges.
| | 06:06 | Now badges are a numeric or a graphical
glyph that is shown on the bottom of the
| | 06:10 | tile. Again you need to
use XML to create a badge.
| | 06:13 | Here is an example.
| | 06:14 | I want to use a badge and I
want a numeric value of 42.
| | 06:18 | So I'll start again by loading that into
an XML document, this time I'll ask for
| | 06:22 | a badge notification, not a tile notification.
| | 06:25 | And then I'll say Badge Update
Manager, create the badge updater for the
| | 06:29 | application and then the
rest of the code is the same.
| | 06:32 | Before I show the demo, I'll show
you the way you put a symbol on there.
| | 06:36 | Here I'm going to use badge value = newMessage.
| | 06:38 | Now there are about eight of these
strings that you can use, and I'm picking
| | 06:42 | the newMessage string.
| | 06:43 | Look in the documentation to see the
different keywords you'll use here.
| | 06:47 | Other than that, the code is the same,
so I'll switch back to the application
| | 06:50 | and I'll say add a number badge, I'll switch
back to this start screen with the Windows key.
| | 06:58 | And there is my numeric badge, 42.
| | 07:00 | For the final demo, I'll change to
Symbol Badge, back to the start screen,
| | 07:05 | it's the little email icon.
| | 07:08 | So this concludes the Live Tile section.
| | 07:10 | You can also create addition tiles
for the start screen, these are known as
| | 07:14 | secondary tiles and that's the
topic for another video in this chapter.
| | Collapse this transcript |
| Adding secondary tiles to the Start screen| 00:00 | Some of the Windows Store apps allow
you to pin a new tile to the start screen.
| | 00:04 | This People App is a good example.
| | 00:06 | Here's my friend Albert.
| | 00:08 | I'd like to know more about his
update so I'm going to pin his information
| | 00:12 | to the start screen.
| | 00:13 | I'll right-click to bring up the
app bar and I'll choose Pin to Start.
| | 00:17 | I'm prompted to approve the pinning process.
| | 00:20 | This is to prevent apps from
adding tiles without my approval.
| | 00:23 | I press the pin to start button then
press the Window key on my keyboard to
| | 00:28 | return the start menu and scroll
to the end and there is Albert.
| | 00:32 | Now watch what happens when I
return back to this application.
| | 00:35 | Go back to people and go back to my
main screen, then I'm going to go to my
| | 00:41 | start screen and click on this tile.
| | 00:44 | The People App takes me to his
specific information, not the main screen.
| | 00:48 | Let me show you to do this with our application.
| | 00:51 | I've already installed an app
called Create a Secondary Tiles.
| | 00:54 | I'm going to open this application
and here are the different tours that we
| | 00:58 | offer for California.
| | 00:59 | I'd like to pin this Gold Country to
the start menu, so I'll right-click to
| | 01:03 | select it and I'll choose Pin to Start
and again I'm prompted so I'll click Pin
| | 01:08 | to Start and for the theme parks, I'll right
-click to choose this one and Pin to Start.
| | 01:12 | I'm going to change the text to For the Kids.
| | 01:17 | Do you see what's happening in the background?
| | 01:20 | It shows the image, shows the text and this was
actually going to appear on my secondary tile.
| | 01:25 | So I'll click on Pin to Start then the
Window key to go back to my start screen
| | 01:30 | and there's my For the Kids and Gold Country
and watch what happens when I click on this.
| | 01:35 | It takes me into the application, it
shows me tour details for Gold Country and
| | 01:41 | if I click on this tile, it takes me
into my application and shows me tour
| | 01:44 | details for the Theme Parks.
| | 01:46 | Let's see how you accomplish this in code.
| | 01:48 | I mean this project called
Creating Secondary Tiles.
| | 01:51 | I'm going to start by showing
you the UI for the all tours.
| | 01:55 | There's a grid view in here.
| | 01:56 | You'll learn more about grid
views later in this course.
| | 01:59 | The key parts are in the code behind.
| | 02:01 | I'll press F7 and switch the code behind and
here's where I'm going to create my secondary tile.
| | 02:08 | When the user clicks on the button and
they have selected the tile, I'll grab
| | 02:12 | that selected tile, verify
that it's not equal to null.
| | 02:16 | If it's not, then I'll create a secondary
tile and these next five lines are required.
| | 02:21 | You must provide a tile ID.
| | 02:23 | This becomes your unique identifier for
the tiles so when you come back into the
| | 02:28 | app, you can use that to go to the correct UI.
| | 02:31 | So I'm grabbing the Tour ID for the
Tile ID, the short name and the display
| | 02:36 | name, I'm getting that from my selected tours.
| | 02:38 | I can also pass in any
additional arguments I want.
| | 02:41 | I can put them in a string and
they're comma delimited information.
| | 02:45 | This is custom information that's
passed in when the user clicks on that tile.
| | 02:49 | Then finally, I'm going to pick the image.
| | 02:51 | I'm doing that with the selectedTour.TourImage.
| | 02:54 | This contains a URL that maps to this picture.
| | 02:57 | Next, I'll set a couple options, I want
to show the name on the logo and I want
| | 03:02 | to set the background for the text to dark.
| | 03:05 | Now that I've got my tile ready to
go, I just say RequestCreateAsync.
| | 03:09 | This is what shows to Pin
to Start user interface.
| | 03:13 | You can also call tile update
manager to create XML for a live tile for
| | 03:17 | your secondary tile.
| | 03:18 | Next, I'd like to show the code that
determines which tour to show on the details page.
| | 03:23 | Now this code jumps from file to
file so it might be tricky to follow.
| | 03:28 | This is about as simple demo as I could create.
| | 03:30 | You are going to want to put a
breakpoint or two in the code to follow along
| | 03:33 | with what is happening.
| | 03:34 | To help with debugging, Microsoft provides
a special debugging option in Visual Studio.
| | 03:39 | I'm going to double-click on Properties.
| | 03:42 | I'm going to click on the Debug Tab
on the left side and then check this Do
| | 03:46 | Not Launch Check Box.
| | 03:49 | By default, Visual Studio immediately
starts the app when you start debugging.
| | 03:53 | This is great in most circumstances but
it's not ideal when debugging secondary
| | 03:57 | tiles or when an app is started
at a later time by another process.
| | 04:02 | Choosing the Do Not Launch
delays the launch of your application.
| | 04:06 | When you start the debugger,
the application will simply wait.
| | 04:09 | When you launch the application from
the secondary tile, it'll then jump into
| | 04:13 | the debugger and you can hit your
breakpoints to see the secondary tile
| | 04:16 | arguments passed in and
troubleshoot any issues that you may have.
| | 04:19 | Let's give it a try.
| | 04:20 | We'll open up App.xaml and then the C# version.
| | 04:25 | We're going to look in the
OnLaunched method, which has a breakpoint.
| | 04:28 | Here, I'm passing in a list
of arguments to the main page.
| | 04:32 | That's coming from this
LaunchActivatedEventArgs.
| | 04:35 | Let me run the application, I'll step to
the code and show you what's happening.
| | 04:38 | I'm going to debug the app, start
debugging or press F5 and across the bottom of
| | 04:44 | the screen, you'll see an
orange bar that says Ready.
| | 04:47 | Now it's ready for me to go to the
Start menu, press the Windows key, click
| | 04:52 | on this For the Kids tile and that
brings me into the app and starts
| | 04:56 | debugging my application.
| | 04:57 | Now what I'm getting from this argument here?
| | 05:01 | The Kind is launched and
I have a tile ID of three.
| | 05:06 | Remember those custom arguments
I set earlier in the Arg1, Arg2?
| | 05:10 | Those are being passed in
from that secondary tile.
| | 05:13 | I'm going to step
through my code by pressing F5.
| | 05:16 | Now here, I am on the
OnNavigatedTo method inside main page.
| | 05:23 | So I get to startup apps, and I say,
If (args.TileId ="App") then we're going to
| | 05:31 | navigate off to the AllTours page.
| | 05:34 | If it's something else, like my
secondary tiles and I'm going to navigate off
| | 05:38 | to my TourDetailPage.
| | 05:39 | I'm going to press F5 to continue
running and there's my details page.
| | 05:44 | Of course the information from this
is being retrieved from my data source.
| | 05:47 | Let's look at that code.
| | 05:49 | I'm going to switch over to
Visual Studio TourDetailPage.
| | 05:54 | Inside the OnNavigatedTo method,
I'm attempting to parse this parameter,
| | 05:58 | e.Parameter.ToString.
| | 05:59 | Now it wasn't clear earlier where this
information is coming from. Let's look.
| | 06:03 | I'll go to the mainpage.xaml.cs
and look what's happening here.
| | 06:08 | When I navigate to the TourDetailPage,
I'm passing the TileID in as an argument.
| | 06:13 | So I'll switch back to this tour page.
| | 06:15 | So I'm grabbing an argument, turning it
into an integer then looking up the tours.
| | 06:20 | I'm calling GetTours, I'm doing a where
clause here to get the first item that
| | 06:24 | matches this TourID and then I set
my data binding information here.
| | 06:29 | Data binding comes later in the course.
| | 06:31 | So what we've seen is that the
secondary tile is a great way to put a custom
| | 06:35 | entry point into your app.
| | 06:36 | You place this on the start screen
and it makes your app customizable for
| | 06:40 | the user.
| | Collapse this transcript |
| Sending messages via the toast API| 00:00 | A Toast notification is a floating
window that appears on top of any running app.
| | 00:04 | A Toast can be shown immediately
or scheduled for later appearance.
| | 00:08 | I'm inside of project
called Send Toast Notification.
| | 00:11 | The main UI for this demo is inside
BasicToast.xaml. It's a simple UI.
| | 00:17 | It has four buttons and here's the code.
| | 00:19 | I'll double-click on this first button.
| | 00:21 | Here, I'm defining the XML that
defines the toast that I want.
| | 00:25 | So I'll start with the XML literal and
specify a toast node, a visual node, the
| | 00:30 | template that I'm interested in and
since this template has two text areas, I
| | 00:34 | specify the text for TextID 1 and TextID 2.
| | 00:39 | And then load this XML
literal into that document.
| | 00:42 | Finally, I'm ready to show the toast.
| | 00:43 | I'm going to use the Toast Notification
class and the Toast Notification Manager class.
| | 00:48 | I first create my toast passing in the
XML document, then I go to the Manager
| | 00:53 | Class and I say Create My
Toast Notifier and show the toast.
| | 00:56 | That's all you need to do.
| | 00:59 | Before I show the live demo,
let's look at the rest of the code.
| | 01:02 | The other way to do that is to use
to GetTemplateContent from the Toast
| | 01:05 | Notification Manager and I tell it
which template I'm interested in the
| | 01:09 | ToastImageAndText02.
| | 01:11 | I'll get back the RAxML and
store that in this variable.
| | 01:15 | Then I'll use the XML DOM to modify
the text that's inside that template.
| | 01:20 | So here I'm getting the text and image
elements, I'm appending some text so the
| | 01:24 | two different text nodes and then
finally down here, by specifying an image
| | 01:27 | element and setting the source
attribute to that element to this file that's
| | 01:32 | included inside my package.
| | 01:34 | This grapes_small.png file.
| | 01:37 | Then the rest of the code is
the same, show the notification.
| | 01:40 | By default, the toast is only shown
for seven seconds or until the user
| | 01:43 | dismisses it. And you can change that
by changing the duration equal to long
| | 01:48 | and specifying another time amount.
| | 01:50 | Here, I'm just saying I want a longer time
and I'm also specifying a different audio.
| | 01:55 | I added an audio node here and I
specify that I want the audio to loop, if
| | 02:00 | possible, and I want to
use a different audio file.
| | 02:03 | There are only eight audio files
you can use and they're listed in the
| | 02:06 | Microsoft documentation.
| | 02:08 | In this example, I'm using Call2 and then
the second example down here I'm using Alarm2.
| | 02:13 | Are you ready to see what these toasts look like?
| | 02:16 | I'll press Ctrl+F5 to run the application.
| | 02:19 | Now the toast will appear in the upper
right-hand corner of the screen, they'll
| | 02:24 | stay there for seven
seconds or until I dismiss them.
| | 02:27 | Here's the first test.
| | 02:29 | That was the default sound
and there it fades away.
| | 02:37 | Here's the one using the image on
the tile, I'm going to dismiss this on
| | 02:41 | early by clicking on it.
| | 02:42 | Another way you can dismiss it is by
clicking on the X button up in the corner.
| | 02:48 | Did you hear the different
sound effect on that one?
| | 02:50 | Here I change the sound.
| | 02:55 | And here's the second
example of changing the sound.
| | 03:02 | The toast is the approved way
to send alerts to your user.
| | 03:05 | Used wisely, they can add
value to your application.
| | 03:08 | They are not the place to show
advertisements for other services.
| | Collapse this transcript |
|
|
12. Data BindingUsing data binding to work with data| 00:00 | Binding frameworks occur in
nearly every modern UI system.
| | 00:04 | I've been using variations
of them for nearly 15 years.
| | 00:08 | If you're coming from another framework,
you undoubtedly have some preconceived
| | 00:11 | ideas about how a data binding system acts.
| | 00:14 | Let me explain the XAML binding system to you.
| | 00:17 | Notice I said binding, not data binding.
| | 00:20 | You'll see why I make the distinction soon.
| | 00:23 | At the most fundamental level, binding
is simply a mechanism for updating one
| | 00:28 | property from another, rather than
having to write the code, to push the data
| | 00:32 | from the source to the target, the
binding framework does the job for you.
| | 00:37 | The source for the binding can
be a property on a .NET class.
| | 00:41 | This is usually a business entity.
| | 00:43 | Another common source is a
UI Element within a XAML tree.
| | 00:47 | For example, a property on a
toggle switch can serve as a source.
| | 00:51 | This is why I prefer to call it binding,
because the source can be a non-business item.
| | 00:57 | Also, you can use
collections of data as a source.
| | 01:00 | These are generally used
with list control targets.
| | 01:03 | The target of the binding where
the data is loaded is a UI Element.
| | 01:08 | There are some detailed rules
regarding what constitutes a valid target.
| | 01:12 | For example, the target
property must be a Dependency Property.
| | 01:16 | Review the MSDN docs for more
information on Dependency Properties.
| | 01:21 | Here is a sample of binding in a XAML file.
| | 01:24 | On line 11, I have a TextBlock
that is serving as the binding target.
| | 01:29 | On line 12, I'm specifying the text
property as the binding target property.
| | 01:34 | At runtime, this text property
will be set by the binding framework.
| | 01:39 | The curly braces indicate that I'm
using a mark-up extension. What is that?
| | 01:43 | It's a class that is invoked at runtime to do
some work in this case, to do the binding work.
| | 01:49 | I'd choose my data source with the
ElementName property within the binding and I
| | 01:54 | indicate that I want the data to
come from a text box named TextBox1.
| | 01:59 | I also denote which property will
supply the data, the text property.
| | 02:04 | So I'm taking some text as the source and
I'm applying it to the text in the target.
| | 02:10 | On line 13 is the source
of the data for the binding.
| | 02:14 | A UI Element named TextBox1.
| | 02:16 | It is also possible to bind to a non-UI Element.
| | 02:19 | Line 15 and 16 show a TextBlock that is
bound to a business class, the syntax is
| | 02:25 | simplified for this slide.
| | 02:27 | It's slightly more complex than shown here.
| | 02:31 | Data can flow from the
source into the target property.
| | 02:34 | It can do this continuously every time
there is an update in the source, the
| | 02:38 | target gets the update.
| | 02:39 | Alternatively, you can mark the
binding as one time, which only updates the
| | 02:44 | target once no matter how
much the underlying data changes.
| | 02:47 | There is also a two-way binding,
which sends updates back to the source.
| | 02:52 | The text box uses two-way by default.
| | 02:56 | The binding framework does an
admirable job of moving the data from any class
| | 02:59 | into the target property, but it cannot
keep a continuous flow of updates to the
| | 03:04 | target unless the data
source is written correctly.
| | 03:06 | For example, if you create your own
user control and you want a property on the
| | 03:11 | control to be an updatable source, it
must be written as a dependency property.
| | 03:16 | When you create updatable business
classes, you have to implement the
| | 03:20 | INotifyPropertyChanged interface in the class.
| | 03:23 | Sometimes, the source data
is stored in the collection.
| | 03:26 | Usually, this data is shown in
the list control of some sort.
| | 03:30 | In this example, in the
code, I have a list of strings.
| | 03:34 | At some point, I want to add another
item to the collection, in this case the
| | 03:38 | word Wednesday; the blue rectangle
represents a list box that is bound to this data.
| | 03:43 | What most developers would expect is
that the list control changes to reflect
| | 03:47 | the new item added to the source.
| | 03:49 | In other words, in the blue rectangle
in that items control, in that list box, I
| | 03:54 | should see the new data show up.
| | 03:56 | Once again, the binding framework is
stymied and cannot provide updates to the
| | 04:01 | target unless you use an
appropriate collection class.
| | 04:04 | One way to create a collection class
that handles list updates is to write a
| | 04:08 | class that implements the
INotifyCollectionChanged interface, but the easiest
| | 04:13 | and recommended way to handle it, is
to use the ObservableCollection of T.
| | 04:18 | This sample shows the trivial
change I made to the code to work with
| | 04:21 | ObservableCollection; see line 39.
| | 04:26 | Sometimes the data is not in the correct
format or shape desired for the binding target.
| | 04:31 | In this example on the screen, I
have some numeric data in my source.
| | 04:36 | The numbers represent the number
of people signed up to take a tour.
| | 04:40 | I want to use a red brush to color
the text if it made certain conditions.
| | 04:44 | I can write a value converter to change
the number into a red solid color brush.
| | 04:50 | This converter is called whenever
the data is updated to the target.
| | 04:54 | By the way, converters are
bidirectional so the converter could modify data as
| | 04:58 | it heads back to the
data source from the target.
| | 05:02 | The binding framework is one of my
favorite features in XAML-based apps.
| | 05:06 | It does a great job of binding data
and moving it efficiently from a source
| | 05:09 | property to a target property.
| | 05:12 | It's easy to write in XAML and Visual
Studio and Expression Blend have great
| | 05:16 | binding tools support.
| | Collapse this transcript |
| Element-to-element binding| 00:00 | It's time to look at Element to Element Binding.
| | 00:03 | This type of binding is
between elements on the visual tree.
| | 00:06 | The value from one element is
synchronized with another element through
| | 00:10 | the dependency system.
| | 00:11 | For this demo, I'm using a
project called ElementToElementBinding.
| | 00:13 | The XAML I want to examine is
here in the SetupBindings.xaml.
| | 00:19 | I'll double-click on this file.
| | 00:21 | Next, I'll click the Auto Hide
button so that I have more room for
| | 00:25 | the Properties window.
| | 00:26 | At the top of this page are two text boxes.
| | 00:29 | I want to bind the second
text box to the first text box.
| | 00:34 | Here is my second text box
and it's name is TargetTB.
| | 00:39 | I want to change this text property.
| | 00:41 | Currently, it's static text.
| | 00:43 | I'll start by typing in a curly brace
and then choosing Binding from this list.
| | 00:51 | Next, I want to pick the type
of binding, I'm going to use an
| | 00:55 | ElementName Binding.
| | 00:57 | Now I have to provide the
name of the other element.
| | 01:00 | The name of my other element is SourceTB.
| | 01:03 | Let me copy this name and then paste it in here.
| | 01:06 | Now I selected the source element, I also
have to tell it the property on the other element.
| | 01:11 | That's done with the Path property,
Path equal (=) and then the name of the
| | 01:16 | property on the other text box is Text.
| | 01:19 | As you can see in the designer, the
text matches between the two text boxes.
| | 01:24 | I will run the
application to demonstrate it live.
| | 01:27 | Ctrl+F5, then click on the Setup
Bindings button, type some new text in the top
| | 01:33 | text box and it matches in the bottom text box.
| | 01:36 | Now if I go to the bottom text box and
add some text, it's not moving back to
| | 01:41 | the first text box because it's a
one-way binding. Let's fix that.
| | 01:45 | I'll return back to Visual Studio.
| | 01:47 | Now the way you change this is by
adding a mode property to this binding.
| | 01:53 | You can type it in the XAML if you
want, but there's another way to do it
| | 01:57 | using the Property Grid.
| | 01:59 | If you move over to the Property
Grid, you'll see that there's a yellow
| | 02:02 | rectangle around the Text property.
| | 02:04 | That signifies that the information for
this property is coming from a binding.
| | 02:09 | If you click on this little rectangle,
you'll see there are some yellow sections
| | 02:13 | and some green sections.
| | 02:15 | The yellow sections have to do with binding.
| | 02:17 | Now I've already created the binding,
let me edit it by clicking on this section.
| | 02:22 | Here you can see I'm doing an ElementName
from that Source Text Box (SourceTB)
| | 02:26 | to the Text property.
| | 02:28 | And then down here, I can choose More Settings
and pick a TwoWay Binding and choose OK.
| | 02:36 | Now it's modified my Binding.
| | 02:38 | Let's see if this works. Press F5.
| | 02:41 | I'll click on the Setup Bindings button
again, go to my second text box, type in
| | 02:46 | some new text then to
activate the TwoWay Binding.
| | 02:49 | I need to move the focus
away from this text box.
| | 02:52 | I'll press the Tab key, and the first
textbox updates with the new text. Excellent!
| | 02:57 | Here's another example of an
Element to Element Binding.
| | 03:00 | This TextBlock is bound to
an element called smsTextBox.
| | 03:06 | But look what I'm doing for the Path.
| | 03:08 | I'm not using the Text property, I'm
using a sub property on the Text property.
| | 03:13 | The information in the Text property is
of type string and the string class has
| | 03:18 | a Length property so what I'm doing here
is asking for the Text.Length property,
| | 03:23 | that's the information I'm getting.
| | 03:24 | So I'm going to get a numeric value.
| | 03:27 | This way, I can tell you how many
characters you're typing in the text box.
| | 03:31 | Let's run the app and see this demo.
| | 03:34 | Click the Setup Bindings, start typing
in here and as I type, you see the number
| | 03:39 | increase and decrease.
| | 03:41 | For the final demo, I want to show
Binding in Visual Studio and I want to change
| | 03:46 | the size of this text icon base
on the movement of this slider.
| | 03:51 | We'll go from 30 to 80 in
size and I want to increase this.
| | 03:55 | How am I drawing this happy face?
| | 03:57 | It's a trick you can do by using fonts.
| | 04:00 | Here I am in Visual Studio.
| | 04:02 | Let's click this item and see
what it is. It's a TextBlock.
| | 04:06 | Here's the key part, I'm using
the font family Segoe UI Symbol.
| | 04:10 | This is full of different symbols.
| | 04:12 | In fact, a lot of the symbols that
come from the standard Windows RT buttons
| | 04:16 | come from this font family.
| | 04:18 | So I specify a numeric value here, which
happens to correspond to this smiley face.
| | 04:23 | Now what I want to do is bind
this font size to the slider.
| | 04:27 | Let's use the Property Grid to do that.
| | 04:29 | I'll move over to Properties, type in
Font in the search dialog then click on
| | 04:34 | this black rectangle to do the data
binding, choose Create Data Binding, the
| | 04:41 | Binding type is going to be an
ElementName binding and then I have to look
| | 04:46 | for this FontSizeslider, that's my
source, so I'll click here and I'll choose
| | 04:52 | the Value property.
| | 04:53 | That's going to be a Double
value and then I'll click OK.
| | 04:59 | Are you ready to see if this works? I am.
| | 05:06 | I really love the Data Binding in WinRT.
| | 05:09 | Element to Element Binding
is useful in many situations.
| | 05:13 | Binding to business data is an important
technique to master and that topic is
| | 05:16 | covered elsewhere in this chapter.
| | Collapse this transcript |
| Binding a business class to an element| 00:00 | In this project, I'll look at how to
bind page elements to business data.
| | 00:05 | For the project, I'm using BindingToBizData
and I'm going to start by showing
| | 00:08 | you my business classes.
| | 00:10 | They're inside this file TourDataSource.cs.
| | 00:13 | This represents our tour company.
| | 00:16 | I have a class called Tour, which has
information about our different tours
| | 00:20 | including tour name and description,
three boolean properties, one that lets us
| | 00:25 | know whether there is a SeniorDiscountAvailable,
one whether it's a KidFriendly
| | 00:29 | tour and this last one tells us
whether it's a MultiDay tour or not.
| | 00:34 | This integer value represents the
maximum number of people allowed per tour and
| | 00:38 | then I have a string that represents the region.
| | 00:41 | Last, I have the TourImage property,
which represents the location of the
| | 00:46 | image in my project.
| | 00:47 | I've also got a TourDataSource, which
has a GetTours method that returns an
| | 00:53 | ObservableCollection of tours and the
code in here is instantiating about 20 tours.
| | 00:59 | You can see them listed down here.
| | 01:00 | I've also got two properties, FirstTour
and LastTour that retrieve one of the
| | 01:06 | tours created, the FirstTour or the LastTour.
| | 01:10 | I'm going to use these in one of my pages.
| | 01:13 | Now I'm going to start with this
BasicBinding and look in this code behind.
| | 01:17 | Before I can use that Business class, I
have to retrieve the information, I have
| | 01:22 | to have an instance of the Tour class.
| | 01:24 | I can do that in my code, perhaps here in
my constructor or I can do it in my XAML.
| | 01:30 | There has to be some way to
instantiate the type in my XAML.
| | 01:34 | In this first demo, I'll show you
how to do it in the code-behind.
| | 01:37 | So I'll move back here, I'll declare
a variable and then I'm going to use
| | 01:43 | that FirstTour property.
| | 01:45 | That retrieves the instance of the
FirstTour and stores it in this variable.
| | 01:49 | Now I can assign this
directly to a source on a control.
| | 01:53 | But what's very common to do in
XAML is to make this a data context.
| | 01:58 | I'll set this at the page level at the
page data context and then this FirstTour
| | 02:02 | information becomes available to
every single element on the entire page.
| | 02:07 | I'll say this.DataContext = tour.
| | 02:12 | Now it's ready to go.
| | 02:13 | We'll switch over to the
XAML to set up the bindings.
| | 02:17 | Here's my first TextBlock.
| | 02:22 | I'll set a binding.
| | 02:23 | The source is already available because
I set it for the data context and I said
| | 02:27 | that it means every element on this
page knows about that data context.
| | 02:31 | I need to provide the property
name that I want to bind to, TourName.
| | 02:42 | Here, we'll do a Binding to Description
and then for this toggle switch,
| | 02:49 | I'll change this IsOn property
to a Binding to the is the
| | 02:55 | SeniorDiscountAvailable property.
| | 02:57 | I'm going to copy and paste that, so
let's go over here, find that property, so
| | 03:02 | I don't have to type it.
| | 03:03 | Switch back here and paste it in.
| | 03:07 | Now let's run this
application to see what it looks like.
| | 03:12 | There's our first TourName, our first
Tour Description, and the toggle switch
| | 03:17 | has been turned on because there
is a senior discount available.
| | 03:19 | I'll switch back to Visual Studio.
| | 03:22 | The next demo I want to show you is
instantiating in the XAML, not in the code-behind.
| | 03:27 | The benefit of doing this is that the
Visual Studio tools can start showing the
| | 03:31 | data in the designer.
| | 03:33 | So I'll switch to this
BindingWithXamlDataContext.
| | 03:37 | The first thing I need to do is to
bring my tour data classes into scope.
| | 03:41 | I'll do that by going here to my
page and adding an xml name space.
| | 03:45 | I'll call this data and then I'm
going use my DataSources namespace.
| | 03:53 | Now if I use this prefix, I can work
with the classes that are defined inside
| | 03:57 | this DataSources namespace.
| | 03:59 | Next, I'll go to the page level and add
a DataContext, Page.DataContext.
| | 04:09 | You see what happened in the top half of the screen?
| | 04:12 | Now it says Whale Watching and Our eco-tours.
| | 04:14 | So Visual Studio can now look in that
DataSource and retrieve the information.
| | 04:19 | You probably suspect that down
here I have already set up a binding.
| | 04:22 | Now I had to do something slightly different here.
| | 04:25 | I had to say LastTour.TourName because
that property -- remember that property
| | 04:31 | on my type, that's called LastTour.
| | 04:33 | So I'm binding to the LastTour
property and then I'm going into that LastTour
| | 04:36 | property and getting the TourName out of it.
| | 04:39 | We're here, I'm getting the LastTour.
Description and for this toggle, I'm going
| | 04:44 | to delete this and show you how to use
the Visual Studio Designer to get this.
| | 04:48 | I'll take that out, move to my Property
Grid, use the search to find IsOn, click
| | 04:56 | here on the rectangle to turn on Data Binding.
| | 05:00 | It already knows about my data context so I
can say I have a FirstTour and a LastTour.
| | 05:05 | So I'm going to drill down into my
LastTour, find this SeniorDiscountAvailable
| | 05:12 | and then click OK, and that
wrote out the code for me.
| | 05:15 | The toggle doesn't switch to on because
the SeniorDiscount is set to false and the
| | 05:20 | underlying data source.
| | 05:21 | If I change this to FirstTour,
then you see it switches to On.
| | 05:26 | Let's review the key lessons in business binding.
| | 05:29 | Any .NET class can serve as a source of a binding.
| | 05:32 | Decide where to instantiate the class
in the code-behind or in the XAML, then,
| | 05:36 | set up the element binding to the
desired business class properties.
| | 05:40 | If you want to be able to see the data
in the Visual Studio Designer, you have
| | 05:43 | to set the sources in the XAML itself.
| | 05:46 | Binding the business data is
an important part of most apps.
| | 05:49 | The Visual Studio tools and WinRT
framework makes it easy to work with your data.
| | Collapse this transcript |
| Converting data with ValueConverters| 00:01 | Here in the tour app, I have some
pictures showing the different tour features.
| | 00:05 | I show the senior picture if the tour
is marked as having a senior discount and
| | 00:09 | I show the kid's picture
if the tour is kid friendly.
| | 00:12 | Since the rest of the page is using
binding, I want to bind the visibility of
| | 00:16 | the image to the Boolean data in my data source.
| | 00:19 | On this first tour, the Wine Country
Tour, the Senior Discount is True, so I
| | 00:23 | want to show this picture.
| | 00:25 | But the Kid Friendly Boolean value
is False, so I don't want to show this
| | 00:29 | picture and it's the opposite
for the Whale Watching Tour.
| | 00:32 | I'll switch to Visual Studio.
| | 00:34 | In order to get this page up and
the page I'm looking at is called
| | 00:37 | BoolToVisibilityPage.
| | 00:39 | I'll select this image and then
we'll look at this property here.
| | 00:44 | For historic reasons the visibility
property in UI Elements is not a Boolean
| | 00:47 | property, instead, the
values are visible and collapsed.
| | 00:54 | This has frustrated XAML developers for years.
| | 00:57 | When you have a Boolean value in your
data source and you want to bind it to the
| | 01:00 | Visibility property on the target,
you have to use a converter.
| | 01:03 | My converters, in this project,
are in this Converters folder.
| | 01:08 | I have two converters, the top two here
in this folder that come from Microsoft.
| | 01:13 | These are part of the Microsoft templates.
| | 01:15 | I'll double-click on this
BooleanToVisibilityConverter.cs file.
| | 01:20 | As you can see, it's a class that derives
from IValueConverter and that means
| | 01:25 | you have to write a method called Convert
and another method called ConvertBack.
| | 01:30 | What Microsoft has done in this code is
check the Boolean value when it comes in
| | 01:34 | and either send back a Visible or Collapsed.
| | 01:38 | So let's review that.
| | 01:40 | The inbound value is a Boolean, the
outbound value is either a Visible or a Collapsed.
| | 01:46 | Let's use this in my code.
| | 01:48 | I'll move back to my XAML, select this
image, go to the Visibility property.
| | 01:53 | I want to use a binding here and I also
want to use that converter I just showed you.
| | 01:59 | The easiest way to do this
is to use the Property window.
| | 02:02 | I'll move over here to the Property window,
find the Visibility property. Here it is.
| | 02:07 | Click on the black square and
then choose Create Data Binding.
| | 02:12 | I've already got my data context
set on the page, so I will choose this
| | 02:17 | FirstTour and make this a
SeniorDiscountAvailable.
| | 02:22 | You see that this is a Boolean value.
| | 02:24 | Next, I'm going to get a
converter and use it in the binding.
| | 02:28 | To do that, I go down to the Converter
dropdown and choose to Add a value converter.
| | 02:33 | Visual Studio looks through my
project and shows me all the types that
| | 02:38 | implement IValueConverter.
| | 02:40 | I'll choose BooleanToVisibilityConverter,
click on OK and then click on OK again.
| | 02:50 | Let's see what happened in my XAML.
| | 02:52 | The Visibility property now has a
binding to FirstTour.SeniorDiscount.
| | 02:56 | It's also using a converter and
it's doing a static resource look up.
| | 03:01 | If you scroll up to the top of the page,
you'll see a Page.Resources element.
| | 03:06 | It contains the BooleanToVisibilityConverter
with this key value.
| | 03:11 | I'm using this key value in my binding.
| | 03:13 | I'll do the same for the other three pictures.
| | 03:17 | I'll select this kids image and set the
Visibility property, use the Create Data
| | 03:22 | Binding, the same tour, this time I'm
going to choose the KidFriendly property
| | 03:28 | and then when I come to this dropdown,
you'll see that I've already added the
| | 03:32 | converter so I don't need to add it again.
| | 03:34 | I can just choose the existing one.
| | 03:36 | Now I've set up all four of my value converters.
| | 03:39 | You can see the designer is doing the right thing.
| | 03:41 | It's showing the senior picture for the
Wine Country Tour and the kid's picture
| | 03:44 | for the Whale Watching Tour.
And if I run the app, you'll see the same thing.
| | 03:48 | For my next demo, I'll write a value converter.
| | 03:51 | Here's what I want to do.
| | 03:52 | I have this slider and I have this
text block that is bound to the slider.
| | 03:57 | So when I slide this slider, it changes
the value that you see in this text block.
| | 04:02 | What I want to show is instead of
these raw numbers, I want to show hours,
| | 04:07 | minutes and seconds.
| | 04:10 | Back in Visual Studio, I'll add my own converter.
| | 04:13 | I'll come to this Converter
folder and I'll choose to add a class.
| | 04:19 | The name of this class will be called
HourConverter and I'm going to change my
| | 04:27 | namespace to match the rest of my items.
| | 04:32 | Demo.Converters, copy this, come back to
this brand new type and I'll change the
| | 04:39 | namespace and I'll come down to the
class and I'll make it implement the
| | 04:43 | IValueConverter interface.
| | 04:47 | I'm getting a red squiggle, so I'll press Ctrl+.
| | 04:51 | to resolve the naming issue.
| | 04:53 | I'll choose this Using Windows.UI.XAML.Data
and then next I'll implement the interface.
| | 05:00 | Visual Studio has this convenient
feature where I can click on the interface and
| | 05:05 | you can see this little blue nub down here.
| | 05:08 | I can hover my mouse over this and
then choose to implement the interface and
| | 05:13 | Visual Studio will write the Convert method
and the ConvertBack method.
| | 05:18 | Now I'll write some code in the Convert method.
| | 05:23 | What this first line of code
does is take the inbound value.
| | 05:27 | This is going to be a double value that
represents the number of seconds in one day.
| | 05:31 | So I am going to take that, cast it to
a double, pass it to the TimeSpan class
| | 05:36 | and create a time span from those seconds.
| | 05:39 | Then I can format the time span
to show hours, minutes and seconds.
| | 05:43 | I do that by saying return ts.ToString
and then I'm going to use a formatter
| | 05:50 | here in the parentheses. I'm ready.
| | 05:53 | This is my formatter.
| | 05:54 | This will be the hour portion, the
minute portion and the seconds portion.
| | 05:58 | Now I'm going to add this converter to my page.
| | 06:07 | Here, go add, I'm going to set
the text property to use a binding.
| | 06:17 | I've already got a binding
active so I'll just add a converter.
| | 06:23 | I am going to run the application and
when I slide this, I now get a nicely
| | 06:30 | formatted 24-hour time span.
| | 06:33 | Let me show you a couple of other converters.
| | 06:38 | Here is an example of taking an initial
value, in this case 40, and multiplying
| | 06:43 | it so I get a higher number,
multiplying by a factor of five.
| | 06:49 | Here I got an example where I take the
number and I turn it into a solid color brush.
| | 06:55 | So it starts out at a yellow brush and
when I get to certain threshold to 200, I
| | 06:59 | switch to an orange brush.
| | 07:01 | And when I get to another
threshold, I switch to a red brush.
| | 07:05 | So I'm taking a numeric value in and
converting it to three separate solid color brushes.
| | 07:11 | Here is the MultiplyConverter.
| | 07:14 | What I'm doing in this example is I'm
taking a parameter, the number five is being
| | 07:18 | passed in as the multiplier when I use
this MultiplyConverter, let me show you code.
| | 07:25 | Here it is.
| | 07:26 | So I'm doing a binding with the converter
value of five and then I'm using this
| | 07:30 | MultiplyConverter and this other
one is quite a complex converter.
| | 07:34 | When I created a converter, I
added a number of properties to it.
| | 07:39 | Check out this NumberToColorConverter
class here, it has a LowValue, HighValue
| | 07:45 | and three Brush properties
and I can set those in my XAML.
| | 07:49 | Let me show you what I mean.
| | 07:51 | At the top of this page, I'm
instantiating my NumberToColorConverter and then
| | 07:58 | I'm specifying the Low, High values and the
default brush to low brush and the high brush.
| | 08:04 | Notice how over here in the Property
Grid, I can set those brushes to different
| | 08:08 | colors if I don't like the ones I have, very nice.
| | 08:11 | And then when I run this, when the value goes
over 1200, then it switches to the HighBrush.
| | 08:18 | So what we've seen in this video is
that if you have data in your data source
| | 08:22 | that doesn't match the target type,
you can convert it in the Data Binding itself.
| | Collapse this transcript |
| Change notification and observable collections| 00:00 | The Binding Framework can
automatically update bound controls in
| | 00:04 | most circumstances.
| | 00:05 | If you create your data sources using
the correct interfaces or classes, the
| | 00:09 | Binding Framework gets notified when
your data changes, then it will update the
| | 00:13 | data target automatically.
| | 00:15 | For this demonstration, I'm using a
project called Change Notification.
| | 00:19 | I'll start by looking at
these two business classes.
| | 00:22 | TourUpdaterA is simple class that has
two properties, a TourName and a SeatCount.
| | 00:29 | To simulate updating data in the
business domain, I have a DispatcherTimer in
| | 00:33 | here that is firing every 800 milliseconds.
| | 00:38 | I have set up an event handler to
call this dispTime_Tick event and then
| | 00:43 | I've started the timer.
| | 00:45 | I created a random seat number and then
every time the DispatcherTimer ticks, I
| | 00:50 | update that seat number.
| | 00:52 | This class does not notify the Binding
Framework in the correct way, so I'll
| | 00:57 | never get a notification
that the data has changed.
| | 01:00 | The correct way to implement this is
to implement the INotifyPropertyChanged
| | 01:03 | event, TourUpdaterB does that.
| | 01:07 | Here's the class, here's the interface.
| | 01:09 | Now in here I have to create a public
event called PropertyChanged, which is a
| | 01:16 | type PropertyChangedEventHandler.
| | 01:18 | Then I'll raise that event
whenever any of my data changes.
| | 01:22 | To do that, I created a helper
method called RaiseNotifyChanged.
| | 01:26 | It takes a string, the property name that
will be updating and then raises the event.
| | 01:32 | So let's see how I changed my properties.
| | 01:35 | Now when I create my TourName property,
I write a getter to retrieve the value
| | 01:40 | and during the setter, when somebody
changes my TourName, I set the value in
| | 01:45 | the local variable and then I RaiseNotifyChanged
and specify the property name to change.
| | 01:51 | Now the Binding Framework knows
that I've changed the TourName.
| | 01:54 | It will read the new value
and update the bound control.
| | 01:58 | I'm doing the same thing in my
SeatCount and inside here I'm updating my
| | 02:03 | SeatCount on the timer tick
event, same as the other class.
| | 02:06 | So let's see what these look
like when we run. Press Ctrl+F5.
| | 02:10 | This is the first class bound element.
| | 02:16 | We got a value of 129 for the SeatCount.
| | 02:18 | The timer is firing, but
we're not seeing any updates.
| | 02:22 | However down here, this bound element is
seeing the updates every 800 milliseconds.
| | 02:28 | I'll return to Visual Studio
and show you the binding code.
| | 02:33 | Sometimes you see this Inconsistent
Line Endings in text files, I'm going to go
| | 02:37 | ahead and click on Yes to this
and then I'm going to press F7.
| | 02:41 | Here's the binding code.
| | 02:42 | I have two text boxes on the page, each one is
bound to a separate instance of the TourClass.
| | 02:48 | This one is bound to TourA
and this one is bound to TourB.
| | 02:53 | And then in the XAML, I specify a Binding to SeatCount.
| | 03:00 | The other kind of binding notification you
want is when you have a collection of information.
| | 03:05 | I might have six items in the list.
| | 03:07 | When I delete an item in the list,
I'll want to update; the list control is
| | 03:12 | bound to that to have one less item.
| | 03:14 | The best way to work with that is to
use the observable collection class.
| | 03:18 | Let me show you the code for this page.
| | 03:21 | I have two list boxes on this page;
| | 03:24 | one is called priceListBox and
one is called collectionListBox.
| | 03:29 | One is going to use a list of T and one
is going to use an observable collection of T.
| | 03:33 | And then when you click on this button,
what I'm doing is, I'll show you
| | 03:39 | the code up here first.
| | 03:40 | I have two variables, private members of my type.
| | 03:44 | I have a priceList variable, which is
a list of decimal values and I have a
| | 03:48 | priceCollection, which is an
ObservableCollection of Decimals.
| | 03:52 | So they bough contain decimals, the
only difference is the collection class
| | 03:56 | that they're stored in.
| | 03:57 | This is the one that knows how to notify
the binding engine that something has changed.
| | 04:02 | So what does my code do?
| | 04:03 | In the constructor, I add three prices
to the priceList and three prices to the
| | 04:09 | collection and then I make the
ItemsSources for these two list boxes, their
| | 04:13 | different collection in the list classes,
and then when you click on the button,
| | 04:18 | I create a random price and
then I add it to both lists.
| | 04:23 | Now when I clicked in the Removebutton,
I remove an item at a certain
| | 04:27 | position in the list.
| | 04:28 | Let's see what this application looks like.
| | 04:31 | Press F5, click on Observable, you see
the three items added, but now when I
| | 04:38 | add a new item, it only showed up
in the list control that is bound to the
| | 04:42 | Observable collection.
| | 04:43 | When I remove an item, it only removes
it from the list control that is bound to
| | 04:48 | the observable collection.
| | 04:50 | To recap what we've seen, implement
the INotifyPropertyChanged interface to
| | 04:55 | provide notification from your business
class to the binding engine and use the
| | 04:58 | ObservableCollection of T to
make an updatable list of data.
| | Collapse this transcript |
| What about MVVM?| 00:00 | It's my experience that most UI frameworks
end up having a favorite presentation
| | 00:04 | pattern adopted by the community.
| | 00:06 | There are many of these patterns to choose from.
| | 00:08 | Here are few of the more popular ones.
| | 00:11 | View, Model, Controller or MVC has
been used one form or another for decades.
| | 00:15 | It's extremely popular in
the web programming community.
| | 00:18 | Model, View, Presenter or MVP is a
newer pattern that was popularized in
| | 00:23 | the last fifteen years.
| | 00:24 | Finally there is Model, View, View-Model,
also known by the acronym MVVM.
| | 00:30 | If you are a XAML developer, you've heard of MVVM.
| | 00:33 | It is the favorite pattern in our ecosystem.
| | 00:36 | It takes the presentation layer and breaks
it into two parts, the View and the View-model.
| | 00:40 | Usually the app uses data-binding to
synchronize the data from the ViewModel to the View.
| | 00:45 | This binding can be one way where the
data travels from the ViewModel to the
| | 00:49 | View controls only or it can be two
way where data travels back to the
| | 00:52 | ViewModel from the View.
| | 00:54 | The ViewModel is responsible for
communication with the model Classes in
| | 00:57 | the Business Domain.
| | 00:59 | The View Model exposes the
data from the model to the View.
| | 01:02 | Because it acts an intermediary, it
can serve as a giant data converter,
| | 01:06 | changing the model data
before handing off to the View.
| | 01:09 | The blue outline around the View and
the View Model signifies that both these
| | 01:12 | items are part of the Presentation layer.
| | 01:15 | Anytime you create extra layers in an
application-architecture, you have to
| | 01:19 | justify the cost of the extra development
and design effort. MVVM is popular.
| | 01:24 | What benefits does it
provide to the XAML developer?
| | 01:27 | You'll hear a lot of opinions about this topic.
| | 01:29 | For me, the number one benefit of the
ViewModel is the improved testability of the app.
| | 01:34 | Since the ViewModel is not a view, you can
test it easily with standard unit test tools.
| | 01:40 | There is no need to use fragile UI test runner tools.
| | 01:43 | Here's a high level look at Views,
View Models and the Binding Framework.
| | 01:48 | The View Model exposes properties that
represent the data available for the View.
| | 01:52 | The View also contains the
methods that do actions for the View.
| | 01:55 | The View contains the UI
elements and little code.
| | 01:58 | The pattern leverages the binding engine.
| | 02:01 | The View gets a data context to the View Model.
| | 02:03 | Then the binding engine binds the View
Elements to the View Model Properties and
| | 02:07 | binds the action controls like the
button to the methods in the View Model.
| | 02:12 | I didn't use MVVM during the course even
though I use it in real world projects. Why?
| | 02:17 | I felt that adding the View Model to
the projects would add an extra layer of
| | 02:21 | complexity to the learning process.
| | 02:22 | If you decide to use MVVM, there
are two popular MVVM frameworks worth
| | 02:26 | investigating, Caliburn and MVVM Light.
| | 02:30 | I recommend that you research MVVM
and consider using it for your project.
| | Collapse this transcript |
| Debugging your XAML bindings| 00:00 | XAML binding is great.
| | 00:01 | You can synchronize data between two
objects in a declarative fashion, but
| | 00:06 | declarative systems are notoriously
hard to debug when things go wrong.
| | 00:10 | It's hard to put a break point in an XML file.
| | 00:13 | Microsoft has figured out how to break
point Silverlight XAML, but that feature
| | 00:17 | is not yet available in Visual
Studio 2012 for WinRT applications.
| | 00:21 | I'll show you a couple of
techniques that can help you when you
| | 00:24 | encounter binding issues.
| | 00:25 | We'll start by looking at TourDataSource.
| | 00:28 | This is the Tour class I'm going to bind to.
| | 00:30 | I'm going to bind a TourName and Description.
| | 00:33 | Like some of the other demos in this
course, I'm using this GetTours method to
| | 00:38 | load up a set of fictitious TourData.
| | 00:41 | In this DebugThisPage.xaml.cs file,
I'm getting the tours, grabbing the first
| | 00:48 | tour and then taking that value and
making it the DataContext of this page.
| | 00:54 | Naturally, I'm going to do
some data binding in the XAML.
| | 00:59 | Here I'm binding this TextBlock to the
TourName, the text property that is, and
| | 01:04 | down here, I'm binding the
TextBlock Text property to the Description.
| | 01:08 | Now I'll run the application by pressing F5.
| | 01:14 | And as you can see the two text blocks
are filled with the data bound information.
| | 01:18 | Now let's break this binding.
| | 01:20 | I'll return to Visual Studio.
| | 01:23 | I'll break this binding by erasing
the last letter of the word Description.
| | 01:27 | The information about the debugging is
going to show up in this Output window,
| | 01:31 | but it will only show up if I attach a debugger.
| | 01:34 | So I'll press F5 again to run the
application with a debugger attached.
| | 01:40 | And as you can see now I'm
not getting the Description.
| | 01:43 | The good news is my application doesn't break.
| | 01:46 | The bad news is I've got a problem that
I need to investigate and find out why
| | 01:50 | the binding is not working.
| | 01:51 | I'll switch back to Visual Studio,
stop the debugger and then I'll look in
| | 01:56 | this output window.
| | 01:57 | Microsoft automatically adds
debug output to this window.
| | 02:03 | There's a lot of information here, but
the one I'm looking for is in this area,
| | 02:07 | BindingExpression path error:
| | 02:08 | 'Descriptio' property not
found on TourDataSource+Tour.
| | 02:14 | So that's some of the information you can get.
| | 02:17 | I'll show you another way to
get it using an EventHandler.
| | 02:20 | To see that I'll go to my App.xaml.cs file
and I'll uncomment this line of code.
| | 02:31 | This goes to the DebugSettings class
and asks to listen for the BindingFailed event.
| | 02:37 | So when the binding fails, this code will run.
| | 02:40 | I'll show a message box, with
the message of the failed binding.
| | 02:44 | I'll Press F5 to run the application,
and there's the broken description.
| | 02:51 | As you can see, it's the same text
that appeared in the Output window during
| | 02:54 | the last demonstration.
| | 02:56 | Obviously, I don't want to show
this error message to the user.
| | 02:59 | Because this event handler is
attached to the DebugSetting class, it only
| | 03:03 | appears when a debugger is
attached. Let me show you.
| | 03:06 | Close this, return back to
Visual Studio and stop the debugger.
| | 03:11 | Now I'll run the application by
pressing Ctrl+F5, which runs the app without
| | 03:17 | attaching the debugger.
| | 03:18 | I still don't see my bound information,
but I'm no longer seeing that message
| | 03:22 | dialog on the screen.
| | 03:23 | To sum up what we've seen, Visual
Studio 2012 provides a dump of the binding
| | 03:28 | failure in the Output window or
in the BindingFailed event handler.
| | 03:32 | It's a primitive way to debug bindings
and it's not as nice as the Silverlight
| | 03:36 | solution, but it's all we have in this release.
| | Collapse this transcript |
|
|
13. Viewing Lists with List ControlsChoosing a control for listing data| 00:00 | There are a handful of controls in the
framework that work with a list of data.
| | 00:04 | Each one is optimized for a particular scenario.
| | 00:07 | The ItemsControl serves as the base class
for all the controls except the Semantic Zoom.
| | 00:12 | It takes a list of children elements
and displays them in a repeated fashion.
| | 00:15 | Data can come from an unbounded list
of children or from a bound DataSource.
| | 00:20 | The Selector base class is next in line.
| | 00:23 | It adds the ability to
select a child from the list.
| | 00:26 | The ComboBox is a popular control
because it doesn't occupy much space.
| | 00:30 | It displays only the current selection
in the selection box, but the rest of the
| | 00:34 | list shown on demand in a fly out.
| | 00:36 | The drop down can be opened and
closed by tapping the control.
| | 00:40 | The ListBox has been
stable of UI design for decades.
| | 00:43 | The ListBox in WinRT exist
mostly for nostalgia purposes.
| | 00:47 | You'll rarely use it in an app.
| | 00:50 | It's been updated to support touch
and other tidbits, but there are other
| | 00:53 | controls better suited
for modern touch interfaces.
| | 00:57 | In WinRT XAML, we have two primary
controls we can use when we need to display
| | 01:01 | data and some sort of a list,
the ListView and the GridView.
| | 01:05 | Both of these controls are optimized for
touch-based interaction and UI virtualization.
| | 01:10 | The ListView is best for
single column vertical lists.
| | 01:14 | It supports multiple
select and fancy data templates.
| | 01:18 | The GridView is a good choice
when you need a horizontal list.
| | 01:21 | It also supports grouping of data.
| | 01:24 | The FlipView is designed to show only
one item at a time enabling the user to
| | 01:28 | flip through items just
like flipping pages in a book.
| | 01:31 | Its items are automatically arranged with
appropriate margins and snap points to make this work.
| | 01:36 | It works equally well with touch or mouse.
| | 01:39 | The Semantic Zoom control is
really not an ItemsControl.
| | 01:42 | It is a container that can hold two items.
| | 01:45 | These items can be either
the ListView or the GridView.
| | 01:49 | It has two properties, zoomed in view
and zoomed out view representing the
| | 01:54 | two different views.
| | 01:56 | The View Controls are some of the
most useful controls in Windows 8.
| | 01:59 | They're built for touch interaction
and are extremely customizable.
| | 02:03 | The rest of this chapter shows
how to use them in your own apps.
| | Collapse this transcript |
| Understanding basic binding in list controls| 00:00 | I'm in this BasicBinding project,
I'm going to show you some of the list
| | 00:05 | controls in this UnboundData.xaml file.
| | 00:07 | And then later, I'll show you
some binding in this BoundListView.
| | 00:11 | Along the way I'll show you
a few of the list controls.
| | 00:14 | I'll start by opening
this UnboundData.xaml file.
| | 00:19 | In this first column, I have a ComboBox.
| | 00:23 | A ComboBox contains a list of child elements.
| | 00:26 | These children are
rendering the ComboBox at runtime.
| | 00:30 | This is considered UnboundData because the
children are simply embedded in the XAML.
| | 00:34 | Here are the children elements;
| | 00:35 | I have a number of text blocks in there.
| | 00:37 | Let me run the app and show you what
this looks like, Ctrl+F5 and then I'll
| | 00:43 | click on this dropdown arrow to
see my five weekdays in this ComboBox.
| | 00:48 | Return back to the Visual Studio.
| | 00:50 | The ComboBox is a popular control
because it doesn't occupy much space.
| | 00:55 | It only displays the current selection
in the selection box with the rest of the
| | 00:59 | list shown on demand in that fly out.
| | 01:01 | I'll add some more elements to this
ListBox by double-click on this button.
| | 01:05 | And here, I'm going to write one line
of code, add an item to that ListBox.
| | 01:12 | Inside the parenthesis, I'll instantiate
a TextBlock and set its Text property.
| | 01:19 | Now let's run the application to see what happens.
| | 01:24 | I currently have five items.
| | 01:26 | I click on the Add Day
button, now I have six items.
| | 01:29 | What do you think is going to
happen if I click on that button again?
| | 01:34 | It adds a seventh item.
| | 01:35 | Return back to Visual Studio.
| | 01:37 | Next I want to show you how you can
preselect one of those ComboBox items.
| | 01:42 | I'm going to do this in my XAML.
| | 01:44 | I'm going to back to XAML view, find
my ComboBox and look at this last item
| | 01:51 | where I have this TextBlock down here.
| | 01:54 | Each unbound item is automatically
wrapped in a Helper class.
| | 01:58 | In the ComboBox, that Helper class
is called the ComboBoxItem element.
| | 02:02 | I'm going to use that to
preselect this Friday item.
| | 02:08 | I'll take this ComboBoxItem and I'll
wrap it around the TextBlock and then on
| | 02:13 | this first element, I'll say IsSelected='true'.
| | 02:19 | Now we'll run the application again and you
see that my Friday element is preselected.
| | 02:26 | Let's look at this next column.
| | 02:29 | Any legitimate UI element can
be used for the unbound row.
| | 02:33 | Here I'm using a few rectangles and a
ListBox to build a primitive bar chart.
| | 02:38 | Return back to Visual Studio to show you
this XAML. Here it is. I have a ListBox.
| | 02:45 | Within the ListBox I've declared several
rectangles with different widths with the same height.
| | 02:49 | Now I can get fancier.
| | 02:53 | Here's a ListView, which is the successor
to the ListBox and inside that, I'm
| | 02:59 | creating a number of stack panels.
| | 03:01 | So this Stackpanel has a border and
inside the border is an image and inside
| | 03:06 | that is a TextBlock that
shows the Tour 1 Descriptions.
| | 03:09 | So as you can see, I'm
repeating this complex UI four times.
| | 03:15 | That is one of the major benefits
of XAML based UI design.
| | 03:19 | If you can think of a fancy UI for data,
you can put that UI inside a list control.
| | 03:24 | The problem with this unbound
implementation is a factor of scale.
| | 03:28 | If I had 202 words, I'd have to
repeat these elements 200 times.
| | 03:33 | Data binding is designed
to solve this predicament.
| | 03:36 | I'm only showing the very basics of binding,
see the Binding chapter for more details.
| | 03:42 | Before I switch over to the other page,
let me grab this XAML here and copy
| | 03:47 | it into my clipboard.
| | 03:50 | Now switch over to this BoundListView.
| | 03:54 | Inside this page, I have a ListView.
| | 03:57 | The data from this ListView is no
longer coming from any nested elements, it's
| | 04:01 | coming from this ItemSource.
| | 04:02 | Now I'm saying to use the Binding and
it's going to look for something called
| | 04:06 | the data context to find this source.
| | 04:08 | I'll set that in the code
behind in just a second.
| | 04:11 | Down here, I have a ListViewItemTemplate,
which currently has a single TextBlock
| | 04:16 | that says the word Example.
| | 04:18 | Over in my code behind, in my constructor,
I'm using the TourDataSource and I'm
| | 04:24 | calling the GetTours method on it.
| | 04:26 | That returns a list of tours that I
then assign to the data context, which then
| | 04:31 | gets loaded into the ItemSource of the ListView.
| | 04:35 | Here's the DataSource in the C# file.
| | 04:39 | This is returning something called an
ObservableCollection of Tour and as you
| | 04:43 | can see I'm creating a tour and
setting a number of properties on that and
| | 04:47 | doing that many times.
| | 04:49 | Let's run the application and see what we get.
| | 04:52 | I'll click on this Bound Data button
and here's my ListView.
| | 04:56 | You can see I've got a number of items in
there and they're all repeating that TextBlock.
| | 05:02 | Now all I need to do to make this ListView
look great is to make a better data template.
| | 05:06 | I'll return back to Visual Studio, return
to my XAML view and I'll replace this
| | 05:13 | TextBlock with the XAML that I copied earlier.
| | 05:16 | Now I'm going to change this Image
Source to no longer use a hard-coded value.
| | 05:23 | So I'll change this to use a Binding and
I'll do the same thing for this TextBlock.
| | 05:29 | I'll change the Text value to use a Binding
and now let's run the application,
| | 05:37 | Ctrl+F5, click on the Bound Data, very
nice, I have a custom picture for each
| | 05:45 | row and I have a custom string for each row.
| | 05:48 | I can still select the items by clicking
on them or touching them and unselect
| | 05:53 | them by clicking on them again.
| | 05:55 | Now my Binding is complete.
| | 05:58 | The data is flowing into the page,
being loaded into the ListView and a new UI
| | 06:02 | created for each row based
on my custom data template.
| | 06:06 | Data binding is crucial to real world apps.
| | 06:08 | It's the glue that holds your
data and UI elements together.
| | 06:12 | In another video, I'll show you
more about the ListView control.
| | Collapse this transcript |
| Creating vertical lists with ListView| 00:00 | Many apps show data in a single column.
| | 00:03 | Here in the mail app for example,
all the messages for this account are
| | 00:06 | displayed in a ListView.
| | 00:09 | Here in Visual Studio, I'm using
a project called UsingListView.
| | 00:12 | I'll start by looking at the XAML and
code that's in basic ListView, double
| | 00:17 | click to open the file.
| | 00:19 | In this section of the
document, I have a ListView.
| | 00:22 | I'm going to use a data bound ListView.
| | 00:26 | Remember this course has a chapter on
Binding if you're not familiar with the concept.
| | 00:31 | Where is my data source coming from?
| | 00:33 | It's over here in this TourDataSource.cs file.
| | 00:39 | I have a class called Tour, which I'm
going to populate with Tour information for
| | 00:43 | our company and I'm doing
that in a method called GetTours.
| | 00:49 | Now this is a static method that means
I can call this method without having to
| | 00:53 | instantiate the TourDataSource class first.
| | 00:56 | Inside, I'm creating an ObservableCollection
of tours and then populating it
| | 01:01 | with sample tour information, including
a TourImage, whether it's a KidFriendly
| | 01:05 | tour and the TourName.
| | 01:09 | Now in my BasicListView.xaml.cs file,
I'm going to set the DataContext in the
| | 01:17 | constructor to the GetTours.
| | 01:19 | That means any control on this page
has access to the data and you might
| | 01:23 | remember in the XAML, I'm
using that data in the ListView.
| | 01:27 | Now down here, I have a ListView.ItemTemplate.
| | 01:31 | This is what's applied to each piece
of data as it's shown in the ListView.
| | 01:35 | I'm applying a DataTemplate that
consists of a Stackpanel, a border, a picture
| | 01:42 | that's bound to my TourImage property,
a TextBlock that's bound to my TourName.
| | 01:49 | Let's see what this looks like.
| | 01:51 | I'll choose to Debug on my local machine
and then press Ctrl+F5 to run the application.
| | 01:58 | As you can see, the ListView is filled
with data from the DataSource and wrapped
| | 02:03 | in my Custom Data template.
| | 02:05 | To select an item, I click on it.
| | 02:08 | I can select multiples items and to
deselect an item, I click on it a second time.
| | 02:14 | Now I'm going to switch to my surface
and show you how this selection works
| | 02:19 | with a touch device.
| | 02:21 | You can simply touch the item to
select and then touch again to deselect.
| | 02:26 | You can select multiple
items using this technique.
| | 02:30 | You can also touch and hold and then
slide to the left to select or deselect.
| | 02:37 | Back in Visual Studio, let's look
at how you enable multiple select.
| | 02:42 | Here's the way you do it,
Selectionmode=Multiple.
| | 02:46 | One of my favorite features of
ListView is the built in support for drag and
| | 02:49 | drop ListView order.
| | 02:50 | You can configure this option in XAML.
| | 02:53 | For this demo, I'll change the options in my C# code.
| | 02:55 | Let me open the code file and look at
what I have here in the CheckBox_Checked
| | 03:02 | and the CheckBox_Unchecked event handlers.
| | 03:05 | I'll copy this code, bring it
up here, say I want to be able to
| | 03:12 | ReorderItems=true and AllowDrop=true and
then we'll run the application again to
| | 03:21 | see what this looks like.
| | 03:23 | I'll press Ctrl+F5 to run on my local machine.
| | 03:25 | I'll click on the Allow Reordering and
now I can grab this item, pick up and
| | 03:31 | move it to a new location.
| | 03:33 | Let's try this Wine Country.
| | 03:35 | I'll move it down a few items.
| | 03:37 | It works with a very little effort on my
part and has these lovely animations, too.
| | 03:43 | Finally, I want to show you how to
write code to select an item in the list and
| | 03:47 | ensure that the list
scrolls to the selected view.
| | 03:50 | Return back to Visual Studio and go to
the SelectLastbutton_Click and I'll write
| | 03:57 | a little bit of code.
| | 04:01 | What this code does is gets the current
items count, subtracts one from it and
| | 04:05 | then sets the SelectedIndex
as a ListView to that item.
| | 04:09 | I'll run the application
and click on the button.
| | 04:15 | The last item is selected, but you
can't tell until you scroll down to the
| | 04:19 | bottom of the list to see it.
| | 04:21 | So next thing, I want to write some
code to make sure that this item is
| | 04:25 | visible in the ListView.
| | 04:26 | Switch back to Visual Studio and I'll
write a little bit of code and there you go.
| | 04:33 | I choose to ScrollIntoView method and I
tell it which item I wanted to ScrollIntoView.
| | 04:38 | Run the application one more time and
click on Select last item and the item is
| | 04:46 | selected and the list auto scrolls to the item.
| | 04:49 | The ListView is a great tool for vertical lists.
| | 04:52 | For horizontal lists, you'll want to use the
GridView, which is the topic of the next video.
| | Collapse this transcript |
| Creating horizontal lists with GridView| 00:00 | If you are familiar with the ListView
and you are already up to speed with the
| | 00:05 | GridView because it's essentially a
ListView with a layout engine that wraps
| | 00:09 | this item into columns, any item
that doesn't fit in the first column is
| | 00:13 | automatically wrapped in the next column.
| | 00:15 | The GridView has first rate
system level animation built in.
| | 00:19 | When you flick the list, you'll see
smooth scrolling as well as a nice bounce
| | 00:24 | when you reach the end of the list.
| | 00:26 | I'm in the UseGridView project and I
am going to start by looking at the code
| | 00:31 | in BasicGridView.xaml.
| | 00:34 | I have a GridView and it's
using Binding to set the ItemSource.
| | 00:38 | It's using the same DataSource as
the ListView example in another movie.
| | 00:43 | Review that movie to learn more
about how the DataSource is configured.
| | 00:46 | My DataTemplate has a Stackpanel and a
Border, and the key thing I want you to
| | 00:54 | note here is that the height
of this border is 150 pixels.
| | 00:57 | That means several of these borders will
fit in the first column of the GridView.
| | 01:03 | Other than that, it's basic Binding.
| | 01:05 | I've got an image that's bound to my TourImage
and a TextBlock that's bound to my TourName.
| | 01:11 | Let's see what this looks like, I'll
press Ctrl+F5 to run the application and
| | 01:15 | here's my BasicGridView.
| | 01:17 | I was able to get three items in the
first column, then the fourth item was
| | 01:21 | placed in the top of the second column.
| | 01:24 | I can scroll back and forth to see all the items.
| | 01:27 | To select an item with a mouse, you can
just click on it once to select and then
| | 01:32 | click a second time to deselect.
| | 01:35 | Things are slightly different
for selecting in the touch world.
| | 01:38 | Let's look at the surface.
| | 01:39 | When you use touch, selection is slightly different.
| | 01:43 | You can simply touch the item to
select and then touch again to deselect.
| | 01:48 | Well you can touch and hold then slide
towards the bottom to select then repeat
| | 01:54 | the same action to deselect the item.
| | 01:56 | When I try to drag to the right, while at the
beginning of the list, I see a slow stretch.
| | 02:02 | When I release, the list bounces
back to the initial position.
| | 02:06 | There's also a flick animation provided.
| | 02:10 | Let's go back to Visual Studio.
| | 02:12 | A slight change to the DataTemplate
can make a nice looking single row
| | 02:16 | version of the GridView.
| | 02:18 | Let's open up this file SingleRowGridView
and then look at the grid.
| | 02:25 | The key to this demo is the height of the border.
| | 02:28 | The height of the border is 430 pixels.
| | 02:31 | That makes each item take up
the full height of the GridView.
| | 02:35 | Another change I made was to move
the text to the bottom, see what this
| | 02:39 | application looks like when it's running.
| | 02:44 | This is an impressive colorful
view with big text and big pictures.
| | 02:49 | Windows 8 has many apps
that use a similar GridView.
| | 02:52 | Check out the Store App,
SkyDrive or the Photo App.
| | 02:57 | For the last demo, I'd like to
look at the Grouped GridView.
| | 02:59 | Let me show you what it looks like in the
application, then I'll show you the code.
| | 03:04 | This is a GridView with a group of items,
all of the tours in the North area of
| | 03:09 | California then I have a group of the
Central area tours and then a group of
| | 03:14 | Southern tours and so on.
| | 03:17 | Let's switch to Visual Studio to see how this is done.
| | 03:19 | I'll start by looking in my TourDataSource.cs
file and scrolling to the bottom.
| | 03:28 | I've created a Helper class called
RegionGroup, which has a property called
| | 03:33 | RegionName, which is a type string and it has a
property called Tours which is of Ilist of Tour.
| | 03:40 | So what I'm going to do at some point in
my code is I'm going to carry the group
| | 03:45 | and load the subset of items into this IList of Tour.
| | 03:48 | To do the grouping, I'm going to use link
and I'm going to use that in this
| | 03:54 | GroupedGridView.xaml.cs file.
| | 03:58 | Here in the constructor of the GroupedGridView,
I'm getting the tour information
| | 04:03 | by calling GetTours and then I'm using
the link GroupBy method to specify that I
| | 04:09 | want to group by Region.
| | 04:10 | Remember Region means South,
North, Central, words like that.
| | 04:15 | And then I'm going to select those out
into that type that I specified earlier,
| | 04:19 | the Region Group and the key is going
to be the string and this is going to be
| | 04:24 | the individual tours.
| | 04:25 | There might be three or four tours per region name.
| | 04:28 | And then I'm going to set the
DataContext on the page to region's list.
| | 04:32 | Now it gets a bit complex here because
I'm actually using two data sources and
| | 04:36 | sending one data source here on the
DataContext and then at the top of my page
| | 04:43 | class, here I double-clicked on
GroupedGridView.xaml to get here.
| | 04:48 | I have this thing called the CollectionViewSource
and the reason why I'm using
| | 04:52 | that is I want to use a source that
understands grouping, as I say up here in my
| | 04:57 | notes CollectionViewSource is better
than ObservableCollection of T. So I
| | 05:00 | specify to use the data from the data
context and then to drill into the Tour
| | 05:05 | section, that sub section and say
that the IsSourceGrouped="true".
| | 05:10 | Now if I use this as a source for my
data grid, you'll do the grouping much
| | 05:14 | easier and you will see
that's exactly what I'm doing here.
| | 05:17 | I'm saying ItemSource=Binding and then
I'm telling it to use this TourSource here.
| | 05:24 | Then the rest of it is just
configuring the group styles and DataTemplates
| | 05:29 | to make it look nice.
| | 05:30 | Here, I'm creating a HeaderTemplate
with a TextBlock that uses the Region name.
| | 05:36 | Here I'm telling it to use a different
panel for laying out the items on the
| | 05:40 | page, I am using something called
the VariableSizedWrapGrid to do this.
| | 05:45 | This helps arrange the Header
elements correctly on the page.
| | 05:50 | And then down here, I'm using the
GridView.Itemspanel to specify a panel that
| | 05:55 | ranges to children items in a horizontal fashion.
| | 05:58 | Then finally, here's my regular DataTemplate
where I've got my picture and my TextBlock.
| | 06:05 | Do Ctrl+F5 and click on Grouped GridView.
| | 06:10 | There's the Header and there's the
individual items laid out in a horizontal
| | 06:14 | pattern in one group and then another
header and the next two items are laid out
| | 06:19 | in a horizontal pattern.
| | 06:21 | That concludes the GridView section.
| | 06:23 | It does a very versatile control
and one of the few controls that
| | 06:26 | supports grouping of data.
| | 06:27 | In the next video, you'll see how
to flip through pages of data with
| | 06:31 | the FlipView element.
| | Collapse this transcript |
| Flipping through lists with FlipView| 00:01 | The FlipView is designed to show only
one item at a time enabling the users to
| | 00:05 | flip through the items just
like flipping pages in a book.
| | 00:08 | Its items are automatically arranged
with the appropriate margins and snap
| | 00:11 | points to make this work.
| | 00:13 | I'm inside this project and I'm using the
same TourDataSource I've used in other videos.
| | 00:19 | This has the GetTours method that
returns an ObservableCollection of Tour.
| | 00:24 | And then in my constructor, I'm
calling TourDataSource.GetTours and assigning
| | 00:28 | that to the DataContext.
| | 00:29 | That means all my elements on
the page can use this source.
| | 00:33 | In my XAML, I have this FlipView Control
and its ItemSource is set to the Binding.
| | 00:39 | This is the same ItemSource I used
for the Grid View and the List View.
| | 00:43 | And then of course I have to define a
template and inside the template I have
| | 00:47 | some Bound Controls.
| | 00:49 | Here's a TextBlock that's bound to
the TourName, here is a TextBlock that's
| | 00:54 | getting the Region value.
| | 00:56 | I'll Press Ctrl+F5 to run the application.
| | 01:00 | Remember, the FlipView
only shows one item at a time.
| | 01:03 | Here's the first item from the data template.
| | 01:06 | Notice how I have overlaid a
rectangle on top of the picture, made it
| | 01:10 | semi-transparent so you can see through that.
| | 01:12 | That's a technique you see
often in Windows Store Apps.
| | 01:16 | If I hover my mouse over the FlipView,
you'll see there's an arrow on the right
| | 01:21 | side of the screen that I can
click on to move to the next item.
| | 01:24 | Now that I moved to the second item,
you'll see that there's arrow on both
| | 01:28 | sides, so I can flip back to the first item.
| | 01:31 | On a touch device, you just need to
swipe left or right with your fingers to
| | 01:35 | move to the next page.
| | 01:36 | It's easy to use and adds a unique
touch base layout to your app interface.
| | Collapse this transcript |
| Switching views with Semantic Zoom| 00:00 | There is a feature of WinRT called Semantic Zoom.
| | 00:03 | It lets you look at your data in two views,
Zoomed Out and Zoomed In.
| | 00:09 | I'm in the Windows Store App.
| | 00:11 | When you first open the Store,
you are in the Zoomed-In mode.
| | 00:15 | When I'm in the Zoomed-In mode, the
app behaves in this normal fashion.
| | 00:18 | I can scroll to the left and right.
| | 00:21 | When I find an app I'm interested in,
| | 00:23 | I can click on its item,
which takes me to a detail view.
| | 00:27 | I'll click this back to go
back out to the Main View.
| | 00:31 | When you touch the Minus button in the
lower right-hand corner or use the pinch
| | 00:36 | gesture on a touch device, it
switches you to the Zoomed-Out View.
| | 00:41 | Now again, I can scroll back and forth.
| | 00:43 | But now I'm in the Navigation mode.
| | 00:45 | When I find a section I'm interested in,
let's say here, it doesn't open the
| | 00:51 | PhotoFunia Application.
| | 00:52 | It takes me to that section of
the Main View. I'll zoom out.
| | 00:59 | I'll scroll over here to where the
Kindle is, click, and that takes me to that
| | 01:03 | section of the main Grid View.
| | 01:06 | Both these views are rendered with a Grid View.
| | 01:09 | The purpose of the Zoomed-Out mode is for navigation.
| | 01:13 | Notice how the images are smaller
and there's less text to look at.
| | 01:17 | Let me show you how to do that in your own app.
| | 01:20 | I'll switch to Visual Studio.
| | 01:21 | I'm going to open this File,
BasicSemanticZoom.xaml, double-click here.
| | 01:28 | What you see in my XAML is a grid
with one child element, the SemanticZoom.
| | 01:33 | Now the SemanticZoom is a
container for other grid controls.
| | 01:38 | It's going to work with a Zoomed-In View and
a Zoomed-Out View, we'll look at it in a second.
| | 01:44 | First, I want to point out that I
have this IsZoomOutbuttonEnabled.
| | 01:47 | That enables that little button with
the minus sign on the bottom corner.
| | 01:51 | Inside my SemanticZoom.ZoomedInView is
a GridView with its own DataTemplate and
| | 01:59 | some big images and borders,
240 pixels x 430 pixels.
| | 02:05 | Inside the ZoomedOutView,
I have another GridView.
| | 02:11 | Look at the size of this border.
| | 02:13 | Both the Width and Height are
much smaller than the ZoomedInView.
| | 02:18 | Both of these grids are using data bound data.
| | 02:20 | Ctrl+F5, here's my main zoomed-in view.
| | 02:27 | I can scroll back and forth.
| | 02:30 | I can click on this Minus button
to move to the zoomed-out view.
| | 02:34 | See how much smaller my images are?
| | 02:37 | When I click on one of these, it
will take me back to the zoomed-in view.
| | 02:42 | Using this system makes it easy
to get Semantic Zoom working.
| | Collapse this transcript |
|
|
14. Charms and ContractsSearching your application with the Search charm| 00:00 | Search is fully integrated in Windows 8.
| | 00:03 | The file system in most Windows Store
Apps exposed their data to the Search Charm.
| | 00:08 | The Search Charm lives on the Charm Bar,
which I can open at anytime by pressing
| | 00:12 | the Windows+C or by swiping in
from the right edge of a touch screen.
| | 00:18 | The Search Charm bar is up here at the top.
| | 00:21 | Let me click on it.
| | 00:22 | This People App is an example of an
app that uses the integrated search.
| | 00:26 | When I type my friend's name in the
search bar, like Mark, you'll see that the
| | 00:31 | People App filters down the list to
the ones that have the word Mark in it.
| | 00:35 | Let me try another search and I'll
search for Al, and this time I see there are
| | 00:40 | two friends that match that.
| | 00:41 | Every app that has opted into the integrated
search is listed below the search box.
| | 00:46 | So you can see People, Amazon, Bing and so on.
| | 00:50 | I'm going to search for my book on
Amazon by typing in HLSL and then clicking
| | 00:55 | on the Amazon link.
| | 00:56 | Notice that it switches from the People
App to the Amazon App, passes my string
| | 01:01 | of information into the Amazon App
and then it finds it in its catalogue.
| | 01:06 | Here's my book and I can
read more about the book, here.
| | 01:12 | If I decide I want to buy it, of
course I can click here to add to my cart.
| | 01:18 | Now I'm going to add search to my application.
| | 01:20 | I am going to switch to Visual Studio
and I'm going to start with this project
| | 01:24 | called SearchCharm.V1.
| | 01:27 | Currently, it is not search-enabled. I'll show you.
| | 01:29 | I'll go to Package.appmanifest, go
to Declarations and see that I have no
| | 01:36 | declarations available here.
| | 01:38 | Now let's run the application and see
what happens when I try to search it.
| | 01:42 | Press Ctrl+F5 to run the application.
| | 01:44 | My app is on the screen.
| | 01:46 | I'll do a Windows+C to get the Charm
Bar up and I'll start searching this app.
| | 01:53 | Now watch what happens
when I hit the Enter key.
| | 01:56 | My app does not have any search capability
so the Charm Bar switches over to its
| | 02:00 | default, which is searching through the
apps that are installed on the computer.
| | 02:04 | I'll shut down the app and
return back to Visual Studio.
| | 02:08 | Now what I'm going to do is I'm
going to modify this declaration to add
| | 02:12 | the Search Declaration.
| | 02:13 | I'll click on this dropdown, find
Search and then click on the Add button.
| | 02:18 | Now I have declared to the Windows
Operating System that I am a searchable
| | 02:22 | application and that I'm agreeing to
provide search information to their system.
| | 02:27 | Now let's see what happens
when I run the app this time.
| | 02:30 | Ctrl+F5, Windows+C to bring up the
Charm Bar, type in that same search string.
| | 02:36 | Do you see what happened?
| | 02:38 | My app stays on the screen and if you
look down the list, that's my application.
| | 02:43 | So it's showing that it is searching
that application and my app is not showing
| | 02:47 | anything interesting.
| | 02:48 | So obviously, I need to write some
code that returns something to the search
| | 02:52 | engine or changes my UI in some fashion.
| | 02:55 | That of course I'm going to in
this one here, Explore CA - Search V2.
| | 03:00 | So I'll shut down the application,
return back to Visual Studio and I am going
| | 03:05 | to switch to the SearchCharm2
and make it my startup project.
| | 03:13 | I'll start by looking in this App.xaml.cs file.
| | 03:18 | Now I've already enabled the Search
Declaration so that's already set up.
| | 03:21 | I am going to start by scrolling down
here and uncommenting this line of code
| | 03:27 | here where I'm going to echo the text.
| | 03:29 | This code is just going to take the
search string that comes in from the search
| | 03:32 | engine and I'm going to echo it back to the screen.
| | 03:35 | So I'm going to open this page called
EchoBackPage and I'm going to pass and
| | 03:39 | here's the key part, I'm getting this thing
called the SearchActivatedEventArgs. Why?
| | 03:43 | Because the code I'm writing is
inside this method OnSearchActivated.
| | 03:48 | This gets called whenever the search
engine tries to run my application.
| | 03:53 | So it's passing me in the query string
here in the args and I'm passing that
| | 03:57 | in to my EchoBackPage.
| | 03:59 | So I'll go over here to my EchoBackPage,
go to my code behind and in my
| | 04:05 | OnNavigatedTo method, I just get that
parameter that was passed in to me, cast
| | 04:11 | it to a string and output it.
| | 04:13 | Ctrl+F5, let's see what this
looks like, bring up the SearchCharm.
| | 04:19 | So far, I'm seeing the main UI.
| | 04:21 | I'll click on search and then I'm
going to type in Hello and press Enter.
| | 04:28 | Now a couple of things happened.
| | 04:29 | Again on the search bar on the right
hand side of the screen, it highlighted
| | 04:33 | Explorer CA - Search V2 and it switched
to me over to my new page because of my
| | 04:39 | code told it to go to this page and
it echoed the text here on the screen.
| | 04:43 | Obviously, if I keep typing and press Enter,
it's going to echo the new text to the screen.
| | 04:49 | Now what I should do with this text
is run a query inside my application to
| | 04:53 | find information to show the users.
| | 04:54 | That's what's coming up next.
| | 04:56 | Back to Visual Studio, back to my App.xaml.cs
and I'll comment this code out and
| | 05:04 | go down here and say, let's
query the data now, by calling this
| | 05:08 | ShowSearchResultsPaged.
| | 05:11 | Let's go look at the code in this page
ShowSearchResultsPaged and then again
| | 05:17 | I'll press the F7 key to go to the code behind.
| | 05:22 | On this OnNavigatedTo event I'm getting the
EventArgs again and I'm doing a link query here.
| | 05:31 | I'm getting all the tours and then I'm
doing a where clause where I say if the
| | 05:36 | tour name contains the parameter
that's passed in, I'm doing some case
| | 05:41 | manipulation here so that I'll
do a case insensitive search.
| | 05:44 | I like for the string that's coming
from the search engine and I make that part
| | 05:48 | of my where clause, then I select that
one or two tours and then I build a list
| | 05:54 | out of that and apply it to
the DataContext to this page.
| | 05:57 | So let's see what this one looks like, Ctrl+F5.
| | 06:01 | It looks like I have a typo,
so we're going to fix this.
| | 06:08 | I somehow added an extra letter in there.
| | 06:11 | Okay, it's fixed and I'll do a Ctrl+F5
to run the application, Windows+C to
| | 06:17 | bring up the Charms, click Search and
now I'm going to start typing for the
| | 06:21 | word red, and this is my custom page
and it's showing that there is Bike the
| | 06:25 | Redwoods available.
| | 06:26 | I'll type in gold and that shows
there's a tour called Gold Country.
| | 06:33 | I'll type in bike and I'll see
that there are three possible tours.
| | 06:38 | Now the nice thing is I'm taking
this value when I click on this and I'm
| | 06:42 | switching you over to the detail view of that.
| | 06:47 | I'd like to make one more improvement.
| | 06:49 | I can provide search
suggestions back to the Search Charm.
| | 06:53 | Then as the user types in the search,
they'll see a list of available tours in my app.
| | 06:58 | To make this work, I'll retrieve an
instance of the Search pane class and handle
| | 07:03 | its on suggestions requested event.
| | 07:05 | First, I'm going to start by opening up
App.xaml.cs and commenting out some code
| | 07:12 | here, Ctrl+K, Ctrl+C and then down in
this line Ctrl+K, Ctrl+U, this is going to
| | 07:19 | open up this page called Search
Suggestions page, which is over here.
| | 07:23 | Let me open up the code behind.
| | 07:29 | So we'll start by looking in this OnNavigatedTo.
| | 07:31 | We've seen this a few times.
| | 07:32 | I'm getting that parameter again and
I'm starting this queryText and then I'll
| | 07:36 | call this method called DoSearch,
which I passed a queryText into.
| | 07:40 | This requested the comment search I'm going
to use for everything and it is down here.
| | 07:46 | Again, you'll see there's a link query in here.
| | 07:48 | I'm setting the DataContext.
| | 07:53 | All right, and then I also have a
QuerySubmitted event handler and I've wired up
| | 07:58 | a handler up here for the search pane.
| | 08:00 | So you see what I'm doing here is I'm
getting the search pane from the operating
| | 08:04 | system for the current view so that's
for my view and then I'm setting up an
| | 08:11 | event handler for when the query is
submitted and I'm also setting up an event
| | 08:15 | handler for when the search pane
requests suggestions from my app.
| | 08:20 | So in the code here QuerySubmitted,
I'm again calling a DoSearch and on this
| | 08:26 | one, the SuggestionsRequested, that's down here.
| | 08:31 | I'm returning a list of words to the Search API.
| | 08:34 | So what I'm doing is I'm getting the tours.
| | 08:37 | Again, I'm looking for the string that
was passed in and then I'm building a
| | 08:42 | collection for this argument here, the
SearchpaneSuggestionsRequestedEventArgs.
| | 08:49 | I'm saying let's add a new collection to that.
| | 08:52 | I'm going to append the items
that I just found for my query.
| | 08:56 | I'm going to turn this into a list and send it.
| | 08:58 | So if I put three items in here, there
will be three items that show up at the
| | 09:01 | bottom of the Search pane.
| | 09:03 | If I send six items back here,
there'll be six items that show up.
| | 09:06 | Let's see what this one looks like.
| | 09:09 | Ctrl+F5, again, I'll do Windows+C to
bring up the Charms and I'll type in
| | 09:15 | red like I did before and you can see it's
suggesting over here the Bike the Redwoods.
| | 09:22 | Now it takes a few seconds for it to
start querying my application for the
| | 09:26 | list of other words. Let me try it now.
| | 09:29 | I'm going to type in the word bike.
| | 09:31 | It hasn't asked for the
information yet. There it goes.
| | 09:37 | It took about 20 seconds.
| | 09:40 | Now you see at the bottom right
below the search text box are five items;
| | 09:45 | bike, Bike the Redwoods,
Bike the Sierras and so on.
| | 09:49 | And I can click on this to submit that
query, that puts it in the text box and
| | 09:54 | then of course that resubmits
the query back to my application.
| | 09:58 | The Search Charm is the designated place
in Windows 8 to search for any information.
| | 10:02 | It works across all registered
searchable apps including yours.
| | Collapse this transcript |
| Sharing app data with the Share charm| 00:00 | I love to share interesting
discoveries with my friends.
| | 00:04 | Windows 8 provides the
Share Charm for that purpose.
| | 00:07 | I'm inside the Windows Store app.
| | 00:09 | Here's a game called
Wordament that I love to play.
| | 00:13 | It's like playing Boggle
with 2000 friends. Here it is.
| | 00:18 | I'm going to click on the Wordament game and
then I'm going to share it with my friend, Ben.
| | 00:22 | I'm going to do that by pressing the
Windows+C key and then clicking on Share.
| | 00:28 | Now what has happened is the Windows
Store has sent some information to the
| | 00:32 | Share Charm about what it has to share
and the Share Charm has looked up the
| | 00:36 | applications that are willing to accept
that information, in this case, the Mail
| | 00:39 | app and the People app.
| | 00:41 | So I'll click on the Mail app and
you'll see that in the bottom of the page,
| | 00:46 | the information is being passed
over from the Windows app itself.
| | 00:50 | So the picture of the Wordament game
and a link to download it is sent in the
| | 00:54 | body of the email and of course I
come up here and choose my friend.
| | 00:58 | I click the Send button and he
gets the chance to play the game too.
| | 01:03 | Now let me tell you about how this works.
| | 01:05 | There are two sides to the sharing process:
| | 01:07 | the share target, and the share source.
| | 01:10 | Some apps, like the Mail
program, are a share source.
| | 01:15 | They have a share
contract in their app manifest.
| | 01:18 | When they set up the contract, they
specify the file types that they accept.
| | 01:23 | It's not a trivial job to become a share
target and most apps will not need to do this.
| | 01:28 | On the other hand, most apps like this Store
app, will benefit from being a share source.
| | 01:33 | Being a share source is easy.
| | 01:35 | Let me show you how to do it.
| | 01:37 | I'll switch to Visual Studio, this
project called ShareCharm and then I'm going
| | 01:42 | to open this AllTours.xaml.cs file.
| | 01:48 | Here are the relevant bits of code.
| | 01:51 | The DataTransferManager is used to
send information to the ShareCharm.
| | 01:56 | Here, I'm getting a copy of it and
then I'm wiring up an event handler for
| | 02:00 | the data requested.
| | 02:02 | This method is called whenever
the ShareCharm wants my information.
| | 02:06 | So what I'm doing is getting a copy of
the tour that was selected on the page
| | 02:11 | and then setting a couple of
properties on the e.Request.Data.Properties.
| | 02:17 | I'm seeing a Title and a Description here
from the information from my tour class.
| | 02:21 | Of course, this information is
coming from this DataRequestedEventArgs.
| | 02:26 | Now I can also send other information.
| | 02:28 | That's what I'm doing here.
| | 02:30 | I am setting up a Uri and saying, I
have some information to get from my Uri.
| | 02:35 | Let's see what this looks
like when I run the app.
| | 02:38 | Press Ctrl+F5, choose an item, Gold
Country, press the Windows+C combination to
| | 02:47 | get the Charms Bar up and then click on Share.
| | 02:50 | Then go to the Mail app.
| | 02:52 | My information has passed in.
| | 02:55 | It says Gold Country at the top and
then the app went out and read some
| | 02:59 | information from that Uri and
placed it on the bottom of the Mail app.
| | 03:03 | Let me show you another example.
| | 03:05 | I'll return back to Visual Studio and
I'll comment out this line and uncomment
| | 03:12 | the following two lines.
| | 03:14 | Here, I'm setting up some HTML for that message.
| | 03:18 | I'll turn on the app again.
| | 03:23 | I'll choose Wine Country this time.
| | 03:26 | Open the Charms Bar and the Share Charm.
| | 03:30 | Click on Mail and this time, my custom
HTML package is added to the email address.
| | 03:39 | Of course again, it says Wine Country,
which is the information that was sent
| | 03:42 | over from my application.
| | 03:44 | Sharing data with other apps is a
very natural process in Windows 8.
| | 03:48 | Determine the interesting parts of
your application and start sharing
| | 03:52 | them today.
| | Collapse this transcript |
| Changing app settings with the Settings charm| 00:00 | The Settings Charm is the
place to go in Windows 8 to change
| | 00:04 | configuration options in an app.
| | 00:05 | Let me show you how this
works in the Windows Calendar app.
| | 00:09 | I'm inside my calendar and I'll press Windows+C
to open the Charm and then click on Settings.
| | 00:16 | At the top of the list are a number of
links that represents all these settings
| | 00:21 | that I can change inside these applications.
| | 00:23 | These are implemented as
something called a Command or a UICommand.
| | 00:26 | We'll look at that in a second.
| | 00:28 | I'm going to click on this one called
Options and then I'm going to look at my
| | 00:32 | three colors and decide that
I don't like this blue color.
| | 00:35 | So I'm going to switch over to a red color.
| | 00:38 | Now keep an eye on the calendar.
| | 00:39 | As soon as I click on this
item, the calendar updates.
| | 00:43 | There is no more, are you sure,
or OK or Cancel or Apply buttons.
| | 00:49 | It's an instantaneous change.
| | 00:51 | Now let me show you how to
implement this in your app.
| | 00:54 | I'm inside the SettingsCharm project
and I've opened this FirstPage.xaml.
| | 00:59 | This is the first UI you're going
to see that's loaded inside MainPage.
| | 01:02 | Inside the XAML on line 13 and 14, I'm
instantiating an instance of a control
| | 01:07 | that I wrote,
RedSettingsControl and GreenSettingsControl.
| | 01:11 | Now these are coming from the local library,
which is defined up here in this namespace.
| | 01:16 | What this does is bring any types that
I have declared inside this namespace
| | 01:19 | into scope so that I can
use them inside my XAML.
| | 01:22 | So I'm instantiating these two
controls and giving them some names.
| | 01:27 | I'll press F7 to look the code behind.
| | 01:30 | Here in my Loaded event, I'm getting
the Settingspane so when the charm is up,
| | 01:35 | the Settingspane is going to get the
current view and I'm going to wire up this
| | 01:39 | handler for CommandsRequested.
| | 01:40 | The SettingsCharm is going to come to
my app and say, do you have any commands
| | 01:44 | for me to show in the UI?
| | 01:46 | I do, and I'm giving them
back in this OnCommandsRequested.
| | 01:50 | Now I'm doing that by adding an
ApplicationCommands.Add, creating something
| | 01:55 | called a SettingsCommand and
then this first item is an index.
| | 02:01 | The second item is the string, Tour
Preference that I want to show on the
| | 02:06 | command and this third item OnRedCommand
is the method that gets called when the
| | 02:12 | user clicks on that Command button.
| | 02:13 | Let's see what's down there.
| | 02:15 | It's calling a method called .Show and it's
passing in the UICommand into that method.
| | 02:21 | You can also see I've got a
GreenCommand that's doing exactly the same thing
| | 02:24 | for the green control.
| | 02:25 | Now let me run the application and
show you what it looks like and then we'll
| | 02:30 | come back and look at those user
controls, Ctrl+F5 to run the application.
| | 02:34 | Here's that blank first page.
| | 02:36 | Now there are two controls on
here, but you can't see them yet.
| | 02:39 | They haven't been shown.
| | 02:40 | Now I'm going to do a Windows+C to
bring up the Charms, go to Settings and at
| | 02:45 | the top of this list are my two
setting commands with my text and watch what
| | 02:50 | happens when I click on these items, so
I'm going to click on this Red one and
| | 02:53 | my custom control shows up.
| | 02:55 | Now of course, I can click on this
and drag this item to a new location.
| | 02:59 | That's changing the settings and then I
can click on this Back button, which will
| | 03:03 | take me back to the Settings pane.
| | 03:05 | Now I'll click on the Group Tours
(green) and see that user control.
| | 03:12 | Let's go look at some of the UI now.
| | 03:13 | I'll return back to Visual Studio
and we'll go over here and look in this
| | 03:19 | SettingsControls folder and
look at RedSettingsControl.
| | 03:24 | As you can see, it's just a user control
that contains a pop-up and within the
| | 03:31 | pop-up is a number of UI elements,
including down here at the bottom, a couple of
| | 03:36 | Toggle Switches and I've also got a
button here that is the Back button and I
| | 03:42 | made it look like the back arrow.
| | 03:44 | Now I put this inside a pop-up so that
I can float it over top of the rest of
| | 03:48 | the UI and I can also animate it into view.
| | 03:51 | I have also done the same
thing in the GreenSettingsControl.
| | 03:55 | Again it's the UserControl, it has a
pop-up and everything else I just showed
| | 03:59 | you with some different controls.
| | 04:00 | Now let's look at the code
behind for the RedSettingsControl.
| | 04:04 | There's a lot of code in here, but the
key parts are this Show method that was
| | 04:10 | called by the first page.
| | 04:12 | I'm passing in that command, remember?
| | 04:14 | What I'm doing is setting the
content of this control to this pop-up and
| | 04:18 | then showing the pop up.
| | 04:20 | And then of course, that slides into view.
| | 04:23 | When the user clicks on the Back button,
I'm going to the Settings pane and I'm
| | 04:28 | saying, would you re-show the SettingsCharm?
| | 04:30 | Let's run the app again now that we've seen
some of these UIs and see what it looks like.
| | 04:35 | Ctrl+F5, bring up the Charm, go to
Settings and now I'll click on this, you'll
| | 04:41 | see how I animate that item in from the
side and when you click on this button,
| | 04:45 | it's going to take you
back to the Settings pane.
| | 04:47 | Now there are a couple of
things to talk about here.
| | 04:50 | For one, I haven't saved the settings,
so you should persist these settings at
| | 04:54 | some point in the file system
so you can read them back later.
| | 04:57 | The second thing is a lot of the
applications out there will actually load the
| | 05:01 | settings into this area.
| | 05:02 | That's how the Calendar control worked.
| | 05:04 | But there's no built-in support for
that inside a WinRT application, but
| | 05:09 | there is a third party library
called Callisto out there, which you can
| | 05:14 | download for free and run and it
does have the ability to put something
| | 05:18 | within the Settings panel itself.
| | Collapse this transcript |
|
|
15. Working with SensorsWorking with sensors and devices| 00:00 | Windows 8 and WinRT
support a broad range of sensors.
| | 00:04 | To work with these instruments in
your code, you must declare the required
| | 00:07 | capability in the application manifest.
| | 00:10 | Otherwise, your application will
throw an exception upon access.
| | 00:14 | If you choose to use a sensor,
remember that the consumer may choose not
| | 00:18 | to install your app.
| | 00:19 | Also, once the app is installed, you must
check to see if the sensor is available.
| | 00:25 | That's because the user might
choose to disable the sensor.
| | 00:28 | Perhaps, they are trying to save their
tablet battery and have turned off the GPS.
| | 00:33 | You need to check for another reason.
| | 00:35 | The average desktop
computer has a few sensors on hand.
| | 00:39 | The framework contains a
rich set of sensor classes.
| | 00:42 | Here is the complete list.
| | 00:46 | The framework also works with
devices that are sensor-like.
| | 00:48 | For example, the webcam and
microphone are a couple of devices that are
| | 00:53 | commonly accessed in apps.
| | 00:55 | In the next few minutes, I'll discuss
a few of the more interesting sensors.
| | 00:59 | The accelerometer measures the
acceleration of the device on three axis' X, Y
| | 01:06 | and Z. the compass
measures the earth magnetic field.
| | 01:08 | It returns the position of true
north and magnetic north in degrees.
| | 01:15 | The inclinometer class provides
information in the form of Yaw, Pitch and
| | 01:20 | Roll angles, which are common terms
used to describe forces affecting objects
| | 01:24 | moving in 3D space.
| | 01:27 | The WinRT API has several orientation layers.
| | 01:32 | I discussed the orientation
display properties in another chapter.
| | 01:36 | Here, I'm talking about a
different set of orientation sensors.
| | 01:40 | The SimpleOrientationSensor uses the
accelerometer and other sensors to return a
| | 01:45 | simple value representing
the current orientation.
| | 01:48 | It has Not Rotated, Face Up,
Face Down and several angle values.
| | 01:55 | If you want your orientation data
provided in a rich set of data wrapper
| | 01:59 | classes, use the OrientationSensor class.
| | 02:02 | It gives you the information
back in the SensorQuaternion and the
| | 02:06 | SensorRotationMatrix.
| | 02:09 | Finally, we have these three sensors.
| | 02:11 | The LightSensor gets a value for the
ambient light surrounding the device.
| | 02:15 | Use it to brighten or dim your app display.
| | 02:17 | The Location API combines the
information from all the location sensors
| | 02:21 | available on a device.
| | 02:23 | You get latitude, longitude and altitude values.
| | 02:27 | If the device has a GPS,
you get very accurate values.
| | 02:31 | If not, it uses the other
location items to determine the value.
| | 02:35 | You just get a less precise result.
| | 02:37 | The Proximity sensor creates a
communication channel with nearby devices or items.
| | 02:42 | Near Field Communication
or NFC is very promising.
| | 02:47 | It can read information from an NFC chip.
| | 02:49 | You have to be very close within a
few centimeters to pick up the signal.
| | 02:54 | So there you have it, a summary of the
Sensor API available on the WinRT Framework.
| | 02:59 | Check out the rest of that chapter for details.
| | Collapse this transcript |
| Moving elements with the accelerometer| 00:00 | This tilt and bounce demo inside Visual
Studio is a nice example of a bouncing ball app.
| | 00:07 | The direction of the ball is influenced by the
X, Y values retrieved from the accelerometer.
| | 00:12 | Remember, the accelerometer detects
movements in the X, Y, and Z planes.
| | 00:18 | This sample is taken with
permission from Charles Petzold's Excellent
| | 00:21 | Programming Windows 6th Edition Book.
| | 00:24 | Let's look at the UI in the MainPage.
| | 00:29 | Let me resize this so it's a little bit easier to see.
I'll choose Fits All.
| | 00:33 | It's a black canvass and in the center, it
has a few text blocks inside a blue stack panel.
| | 00:38 | I'm going to show the X, Y, and Z
accelerator values inside this blue area.
| | 00:43 | The black area is where the ball is
going to move around and bounce off, the
| | 00:47 | edges of the screen.
| | 00:48 | The code is over here in MainPage.xaml.cs.
| | 00:54 | Here's the first thing we want to look at, line 40.
| | 00:56 | This is how you get the
accelerometer on the computer.
| | 01:00 | I'm holding the accelerometer in this variable.
| | 01:03 | Next, on the loaded event, I'm going to
check to see if I got an accelerometer
| | 01:08 | and if not, we're going to
say that one is not available.
| | 01:12 | Otherwise, we're going to set the
CompositionTarget.Rendering event.
| | 01:17 | What this does is fire the event every
time there's a frame update on the computer.
| | 01:22 | So this is how we're going to
animate the ball around on the screen.
| | 01:26 | Another way we could have
accomplished this is by listening for the
| | 01:29 | accelerometer ReadingChanged.
| | 01:32 | Every time a reading changes, this event fires.
| | 01:37 | Here's the code for
OnCompositionTargetRendering.
| | 01:40 | The first thing we're going to do is ask
the accelerometer for our current reading.
| | 01:44 | It will go query the accelerometer
and I'll get back a piece of information
| | 01:48 | stored in this variable.
| | 01:49 | Then the next part that's interesting
is we're going to go to that reading
| | 01:54 | and get the acceleration in the X, Y and Z
planes and store them in these three variables.
| | 02:01 | Then this is a part I'm going to
output to the screen, three separate messages
| | 02:06 | explaining what those values are.
| | 02:09 | The rest of the code is interesting,
but I don't have time to explain it.
| | 02:12 | This is the code that bounces the ball
off the wall and positions it on the screen.
| | 02:17 | I'll switch to the surface to
see this application in action.
| | 02:22 | The Tilt and Bounce app is open on the surface.
| | 02:25 | I'm holding the surface horizontal to the floor.
| | 02:28 | As I tilt the tablet left, right and
other directions, the ball moves around the
| | 02:33 | screen and bounces nicely off the screen edges.
| | 02:37 | In the center of the screen
are the acceleration values.
| | 02:41 | The top value is the X acceleration,
the middle one is the Y value and the
| | 02:45 | bottom is the Z value.
| | 02:47 | As I tilt to the left, the X value is negative.
| | 02:51 | Tilt to the right and it becomes positive.
| | 02:54 | The same thing happens when I tilt
forward and back for the Y values.
| | 03:00 | It's harder to see the Z
values change on the camera.
| | 03:03 | I have to tilt the screen to point
towards the floor to get negative Z values.
| | 03:07 | With just a little work, this app
could be turned into a fun, casual game.
| | 03:11 | See what you can do with the code.
| | Collapse this transcript |
| Exploring Bing Map and the Location and Compass APIs| 00:00 | I don't know if you've considered
using the Bing Map service in your apps.
| | 00:04 | If not, you should.
| | 00:05 | Your Mapping software has seen
considerable improvement in the last five years.
| | 00:10 | The Bing Map control makes it a
snap to add a map to any page.
| | 00:14 | Before you can work with the Map control,
you need to install the Bing Map SDK.
| | 00:19 | That's easy to do with the
Visual Studio Extension tool.
| | 00:22 | You'll also need a Bing Map developer account.
| | 00:25 | Sign up for a free account at
bingmapportal.com then get yourself a
| | 00:30 | credential key for your app.
| | 00:32 | Without this key the map control won't work.
| | 00:35 | A word of caution, if you use Bing Map
for commercial purposes, you will have to
| | 00:40 | pay a licensing fee.
| | 00:43 | In Visual Studio, I've opened a solution
called, UsingBingMap that has three projects.
| | 00:48 | The first project using Bing Map is where
I'll demonstrate how to add a Bing Map control.
| | 00:53 | The second project shows
the finished version of that.
| | 00:56 | The third one is an example I'm
planning on running at a surface tablet.
| | 00:59 | Let's start by opening this using
Bing Map and opening this MainPage.xaml.
| | 01:04 | I want to be able to add a
Bing Map control to this designer.
| | 01:08 | To do that, I need to add
the SDK to Visual Studio.
| | 01:11 | I'll choose tools>Extensions and
Updates then I'll go to the Online section.
| | 01:19 | In the Search box, I'll type in bing.
| | 01:24 | Here's the item I'm looking for,
Bing Maps SDK for Windows Store apps.
| | 01:29 | The green check mark signifies I've
already installed it on my Visual Studio copy.
| | 01:34 | You'll see a Install or
Download button, which you'll click.
| | 01:37 | Wait for about a minute then,
install and restart Visual Studio.
| | 01:42 | I've already got it installed here.
| | 01:45 | I'll close this dialog.
| | 01:47 | Before I can continue, I need to add
the location capabilities to my app.
| | 01:52 | I can do that by opening
Package.appxmanifest and choosing
| | 01:57 | Capabilities, Location.
| | 02:03 | Also I need to set the processor
type before I'm running the app.
| | 02:06 | This is a limitation of the C++
library referenced by the Bing SDK.
| | 02:10 | To do that, I would open up
Properties then, choose Build.
| | 02:16 | Since I plan on using the
simulator for the first demo, I'll set the
| | 02:19 | Platform target to x86.
| | 02:22 | Now I should be able to compile the
application, Ctrl+Shift+B. Next I'll go back
| | 02:27 | to MainPage and add my map
control to this designer surface.
| | 02:32 | I can do that by going to my toolbox,
finding the Map control and dragging it on
| | 02:37 | the designer surface.
| | 02:40 | You'll get this error message, click OK
and then close and restart the designer
| | 02:46 | MainPage.xaml and then, try that again.
| | 02:49 | Drag the map over and at
this point we have our map.
| | 02:55 | I need to make some changes to it.
| | 02:57 | Rather than type all the code;
| | 02:58 | I'll go over to this finished
application and show you the results.
| | 03:03 | I'll close these designers up here and
then I'll open up UsingBingMapsFinished
| | 03:12 | and open up MainPage.xaml.
| | 03:14 | Let me make this a little bit taller and
let's look at the XAML. Here is my Maps.
| | 03:19 | I've set a few items down here.
| | 03:21 | I've given my Map a name, set the
Horizontal and VerticalAlignment to Stretch so
| | 03:26 | it fills up the inside of the page.
| | 03:28 | Set to ZoomLevel of the Map to 8, the
MapType to Road and in this Credentials
| | 03:34 | section I've added my own credential key.
| | 03:37 | Remember, you need to get
your own credential key.
| | 03:39 | You can't have mine.
| | 03:42 | Next let's look at the code behind.
| | 03:44 | I need to get the location from the
device and then use that to center the Map.
| | 03:49 | Here's the code, in the MainPage
constructor, I'm setting up a loaded event.
| | 03:54 | The reason I need to do that is
I need to make an async method.
| | 04:00 | See how I have the async keyword here?
| | 04:02 | And you can't use the async
keyword on the constructor.
| | 04:04 | So I created this MainPage Loaded event.
| | 04:07 | And in here, I'm going to the
device and getting the Geolocator.
| | 04:12 | Then I'm getting the current position of
the device and storing it in this variable.
| | 04:17 | Then I'm telling the Bing Maps to
use that as the Center position.
| | 04:20 | So I use the geoPosition and I say,
get the current coordinates, latitude
| | 04:25 | and longitude value.
| | 04:27 | Remember you can also get the
altitude from your GeoLocator.
| | 04:31 | This is a one time event.
| | 04:32 | It's only going to fire when the page loads.
| | 04:35 | If you want to keep updating
the map, you would have to look at
| | 04:38 | PositionChanged event to do that.
| | 04:41 | I'm ready to try this on the simulator.
| | 04:43 | So I choose the simulator from the
dropdown, and then press Contro+F5 to
| | 04:48 | run the application.
| | 04:49 | There's my Bing Map, you may see a
permission dialog pop-up that ask permission
| | 04:54 | to use the location services.
| | 04:56 | Now I can drag with my
mouse and move to new positions.
| | 05:01 | I can Zoom In by double-clicking.
| | 05:04 | And I can also set a New
Location with this Set location item.
| | 05:09 | Let me show you how that
one works. I'll click here.
| | 05:12 | Currently, it's using my real location.
| | 05:15 | I can simulate any other location by
checking this check box and then, typing
| | 05:19 | in my own values here.
| | 05:21 | Let's set this to 46 for the Latitude.
| | 05:26 | Set the Location and close this.
| | 05:27 | Now you're not going to see any
changes because I don't have an event listing
| | 05:31 | for that, but I can solve that by
shutting this down and restarting the app.
| | 05:38 | Now you see I'm in a different location.
| | 05:42 | To make this app even better, I'd like
to add a compass, that's what this app
| | 05:46 | does down here, WithCompass.
| | 05:47 | I'll make this my start-up and
show you the code I have in here.
| | 05:52 | I decided to make a custom
CompassControl, here it is.
| | 05:56 | It has a black, circular background,
and a yellow hand that's going to serve
| | 06:02 | as the compass needle.
| | 06:03 | It's based on the gauge control I
showed you in the custom controls video.
| | 06:08 | It has some custom code here.
| | 06:12 | And what I did is I set-up a
Loaded event here, too, and I set-up the
| | 06:18 | CompassControl_Loaded event.
| | 06:20 | And here I'm getting one of the
other sensors on this computer.
| | 06:23 | I'm working with the Compass, so I
say get the default compass and store it
| | 06:26 | here, and I tell it to update
me whenever the reading change.
| | 06:29 | So down here on the OnCompassReadingChanged,
I set the Degree of my control to
| | 06:38 | the arguments I'm getting from the Reading.
| | 06:39 | So this is the information coming from
the Compass, I get the Reading and I ask
| | 06:44 | for the HeadingMagneticNorth and then I
need to rotate that 180 degrees to make
| | 06:49 | my compass control work correctly.
| | 06:51 | That's all we have to show you here,
the rest of the demo I'll show you on
| | 06:56 | the surface tablet.
| | 06:58 | The app is loaded on to the surface.
| | 07:00 | The Map control is on the right side and it
works the same as it did on the simulator.
| | 07:05 | The compass is also working.
| | 07:07 | I'll hold the surface horizontal to the ground
and pivot around the center. Excellent!
| | 07:12 | The compass is moving like it should.
| | 07:15 | The combination of location services,
Compass API and the Bing Map control
| | 07:19 | provide a nice way to add interactive
mapping to your application.
| | Collapse this transcript |
| Capturing still images and video| 00:00 | If you've ever created an application
that captures media from the computer's
| | 00:04 | attached devices, you know that
it can be a tricky proposition.
| | 00:08 | When our team makes some big
improvements in the media API's it provides a
| | 00:12 | straightforward way to capture audio,
video, and images in your application.
| | 00:17 | I'm inside a project called CapturingMedia.
| | 00:20 | The first thing you need to do to work with
media is to set the capabilities in your app.
| | 00:25 | To do that, I'm going to work with my
Package.appxmanifest file, double-click on
| | 00:30 | that file, go to Capabilities.
| | 00:33 | I check the webcam capability that
provides the video and picture features.
| | 00:39 | To get audio, you have to
add the Microphone capability.
| | 00:43 | Be warned that if you're capturing a
live video from the webcam, you'll also
| | 00:48 | need the Microphone capability.
| | 00:49 | The easiest way to get a picture into your
app is to use the camera capture UI class.
| | 00:55 | It captures a single photo or video from
an attached camera and provides all the
| | 01:00 | captured UI for your application.
| | 01:01 | Let me show you the XAML for this first example.
| | 01:05 | I'll open up CameraUiPage.
| | 01:09 | This is a simple page, it has an
image control and it has a button to
| | 01:15 | activate the Get Image code.
| | 01:17 | In my code behind, I'll press
F7 to switch to my code behind.
| | 01:22 | I'm calling from the button, this
method that I wrote called CapturePic and I'm
| | 01:27 | going to use that class image in a few
seconds at the CameraCaptureUI class.
| | 01:32 | Once I have the CameraCaptureUI, I'm
going to attempt to get the picture,
| | 01:37 | CaptureFileAsync and I tell it what
kind of picture I want from the webcam, in
| | 01:42 | this case a photo, and I store that in this file.
| | 01:45 | Then I create a stream from that file.
| | 01:49 | I'm going to use that
stream to create a BitmapImage.
| | 01:51 | I'm doing that on these two lines of code here.
| | 01:54 | I'm setting the source of the stream and then
applying the BitmapImage to my image source.
| | 01:58 | I've got a catch block down here;
| | 02:00 | you cannot capture a picture
if the app is in snap state.
| | 02:03 | So I'm catching that down here and ignoring it.
| | 02:05 | Capturing video is just as easy.
| | 02:09 | Here's a VideoUiPage, the
difference is on the UI is that I'm using a
| | 02:14 | MediaElement instead of an ImageControl.
| | 02:18 | And I'm also setting up a
handle here for MediaOpened.
| | 02:22 | This event fires when the media
stream is fully loaded into the player.
| | 02:26 | This isn't important for many scenarios.
| | 02:28 | Imagine you're streaming a file from the web.
| | 02:30 | You don't want to start showing the video
until the framework signals that the file is ready.
| | 02:34 | That's what this event gives you.
| | 02:36 | I'm my example, press F7 to switch to the code;
| | 02:40 | I'm using that to dispose of
my video stream I'm opening.
| | 02:44 | Rest of the code is exactly the same as
the previous example with one exception.
| | 02:49 | This line of code here, when I ask
for the CaptureFileAsync I tell I want a
| | 02:54 | video stream as oppose to an image stream.
| | 02:56 | Let's see what this looks like on the device.
| | 03:00 | Here in the capture app, I'll touch to
Get Image button to load the first page.
| | 03:05 | In the center of the screen is my image element.
| | 03:08 | I'll touch the Get Image button.
| | 03:11 | This CaptureUI shown on the
screen is provided by the framework.
| | 03:15 | Filling the screen is the feed from the camera.
| | 03:18 | To take a picture, touch the screen.
| | 03:22 | Now I can choose to press OK or
retake the picture. I'll try Retake.
| | 03:29 | There's also a Timer option.
| | 03:31 | I'll press the Timer button;
| | 03:33 | see how the button has a white background?
| | 03:35 | That signals that I'm in Timer mode.
| | 03:38 | Touching the screen activates the Timer.
| | 03:41 | This is perfect for getting
yourself in a group picture.
| | 03:45 | Next, I'll press the Crop button.
| | 03:47 | I can size the Crop area with the white handles
and move the crop area with my finger.
| | 03:56 | When I touch OK, the image is
returned to my app and added to the app UI.
| | 04:01 | This camera app is very convenient.
| | 04:03 | Now let's see what
happens with the video stream.
| | 04:06 | Press the Get Video with CameraUI button.
| | 04:10 | Press the Get Video button.
| | 04:12 | I'll turn off the Timer and touch the
screen to start capturing the video.
| | 04:18 | Now I can see the video time
code in the lower-right corner.
| | 04:22 | Touch the screen again to stop the capture.
| | 04:26 | The video starts to playback
immediately in my media element.
| | 04:30 | I can preview and scrub the video, and
when I'm satisfied with the output touch
| | 04:34 | OK to add the video stream to my app UI.
| | 04:37 | With a small amount of code,
I've added media capture to my app.
| | 04:42 | Back in Visual Studio, I'm going to
switch to this page, CaptureElementPage.xaml
| | 04:50 | and I'm going to click on this element
here, this is called the CaptureElement.
| | 04:55 | The two examples I demonstrated on
the tablet show how easy it is to grab
| | 04:59 | a media information.
| | 05:01 | The CameraCaptureUI class does a lot of
work showing the capture screen to the user.
| | 05:06 | That is not a good
solution for some types of apps.
| | 05:09 | Think how video chat programs work.
| | 05:12 | The live feed from your webcam is
shown on the chat program itself.
| | 05:15 | You don't go to a separate app;
| | 05:17 | capture the video then
return to the chat app later.
| | 05:20 | That would be pointless.
| | 05:22 | You need to show the
live stream in the chat app.
| | 05:25 | To enable this type of interface
you use this element on the screen,
| | 05:28 | the CaptureElement.
| | 05:30 | It allows me to show the
live feed within my page itself.
| | 05:35 | I've got two other elements
on the bottom of the screen.
| | 05:39 | The button starts to live capture.
| | 05:42 | The user should be able to
opt into showing the live feed.
| | 05:45 | This is good for many reasons.
| | 05:47 | For one, the user may not be
ready to be seen on camera.
| | 05:51 | For this reason, I believe you
should never start the camera and capture
| | 05:54 | automatically upon an app start up.
| | 05:57 | The second interesting UI
element is this Toggle switch.
| | 06:00 | Once the camera is alive, enabling
this Toggle causes a timer to run taking
| | 06:05 | pictures every half second.
| | 06:07 | Let's look at the code. Press F7;
| | 06:12 | let's start by looking at the
Toggle switch code, that's very simple.
| | 06:16 | When the Toggle Switch is turned on, I start
the timer, when it's turned off I stop the timer.
| | 06:22 | I scroll back up, here's the
Previewbutton_Click event handler.
| | 06:29 | What I'm doing here is I want to switch
to the back camera on my surface tablet.
| | 06:34 | So what I'm doing in this line of
code is I'm finding all the devices on my
| | 06:38 | tablet that can capture video.
| | 06:41 | And then I'm grabbing one of those videos,
the back camera and I'm assigning it
| | 06:47 | to the setting class.
| | 06:49 | Then here, I'm initializing the capture.
| | 06:52 | This starts the capture process
and I'm passing in my settings value.
| | 06:56 | And then once I've got the feed ready,
I load that into my capture element on
| | 07:02 | the XAML page, then I start
showing a live preview here.
| | 07:06 | This CapturePic method gets
called on the Timer tick event.
| | 07:10 | What it's doing is it's creating a JPEG
file or a set of property I should say.
| | 07:16 | Then it's giving an InMemoryRandomAccessStream,
it's using the capture object
| | 07:21 | to capture the current frame into the
stream using my properties when I was on a JPEG.
| | 07:28 | I flash out the stream here.
| | 07:30 | The rest of this code is creating a
BitmapImage and then what this code down
| | 07:34 | here does is it creates a brand new
instance of an image element and then adds
| | 07:38 | it to a ListView on the page.
| | 07:41 | Let's go see what this one
looks like on the Tablet PC.
| | 07:45 | To see the demo, I press
the capture element button.
| | 07:49 | At the top of the screen is my capture element.
| | 07:52 | Press the Show Preview button.
| | 07:54 | Now I'm giving a live feed into my UI.
| | 07:58 | To start grabbing frames from the live feed,
I'll slide the Toggle switch to the On position.
| | 08:03 | The frame show up on the right side of the UI.
| | 08:07 | To stop the frame capture, slide the Toggle Off.
| | 08:11 | The capture API is fully featured.
| | 08:13 | There are many areas that I
didn't show in this video.
| | 08:16 | For example, I didn't demonstrate
how to capture an audio only stream.
| | 08:20 | You'll be happy to know that it's
just as easy as the other examples.
| | 08:24 | Once you have the audio stream you
can save it to WMA, M4A, and MP3 file formats.
| | Collapse this transcript |
|
|
16. Working with FilesGetting file access permission for your app| 00:00 | Windows developers are accustomed to
unlimited access to the file system.
| | 00:05 | This is not the case in
the Windows Store app world.
| | 00:07 | File access is constrained due to security concerns.
| | 00:11 | The app framework provides a mechanism
by which we can specify what locations
| | 00:15 | our app expects to access.
| | 00:17 | This information is shown to the user
when they are considering installing the app.
| | 00:22 | The user chooses whether or not they
trust the app enough to download and
| | 00:25 | install, given that it has
access to certain file locations.
| | 00:29 | I'll cover how to declare these
file intentions in this video.
| | 00:32 | Here inside this project, I'm going
to modify my request for file access by
| | 00:37 | double-clicking on this Package.appxmanifest file.
| | 00:40 | Then I'm going to click on the Capabilities section.
| | 00:45 | This shows the different capabilities I can request.
| | 00:49 | I can ask for access to the Music
Library and the Pictures Library.
| | 00:53 | I can also ask for an access to the Videos Library,
Removable Files, say on a USB
| | 01:00 | drive, and on the Document
Library on the local computer.
| | 01:05 | Note, you can only submit an app that
accesses a document or removable store if
| | 01:09 | you have a business store account.
| | 01:12 | Individual store accounts cannot
create apps which use these capabilities.
| | 01:15 | Now let me go look at the Declarations page.
| | 01:19 | One thing you might want to do with
your app is have a specific file extension
| | 01:23 | that means something to your app.
| | 01:25 | To work with that, you have to
declare what is known as a File Type
| | 01:28 | Association. Click here and then click
on Add and then over in this section I
| | 01:35 | have to specify a group name and I have
to specify the extension type, from my
| | 01:42 | example it will be .tour.
| | 01:44 | And then if I have another file
extension my app might want to work with, I
| | 01:48 | click on Add again and I'll do the same thing.
| | 01:52 | Choose a name and choose a file extension.
| | 01:56 | Now our application is ready to use the files.
| | 01:58 | Another video in this chapter shows
how to work with a storage file and a
| | 02:02 | storage folder classes.
| | Collapse this transcript |
| Working with storage files| 00:00 | This is the Music Library on my computer.
| | 00:03 | It has a few folders and a few music MP3 files.
| | 00:06 | I'm going to show you how to write
code to manipulate the folders and files
| | 00:10 | within this location.
| | 00:12 | I'll switch to Visual Studio in this
project called WorkingWithStorageFiles.
| | 00:16 | When you're working with files from
codes, there are a few classes you'll
| | 00:19 | need to understand.
| | 00:21 | The classes used for Windows Store
apps are not the same as those you may be
| | 00:25 | familiar with on the desktop.
| | 00:26 | The biggest challenge is that
definition of file from an API perspective has
| | 00:32 | been expanded to include
resources and remote files.
| | 00:36 | Most of the code for this
demos inside this Demo.xaml file.
| | 00:40 | Let's take a look at the UI.
| | 00:42 | Here is the design view.
| | 00:44 | I have three list of views:
| | 00:46 | one, two, and the third one you can't see yet.
| | 00:51 | And I have a number of buttons that are
going to Create Folders and Create Files
| | 00:54 | and List Those Files.
| | 00:56 | Let's start by creating
a folder programatically.
| | 01:00 | The first thing I'm going to do is
create a variable to hold the StorageFolder.
| | 01:05 | Next, I'm going to load that with the
information from one of the known locations.
| | 01:13 | I'll use this KnownFolders enumeration, which
lists all of the areas I can access in my code.
| | 01:20 | I should say these are
potential areas I can access.
| | 01:23 | I still need to have the
permissions to use these folders.
| | 01:26 | I'm going to choose the PicturesLibrary.
| | 01:28 | Later, if I want to work with the
MusicLibrary, take this one instead.
| | 01:34 | Of course that's where my files are so
that's what I'm going to use in this demo.
| | 01:39 | Next, I need to create my folder.
| | 01:42 | To do that, I'm going to create a
variable and then I'm going to call the await
| | 01:51 | keyword and then I'll take my variable folder.
| | 01:56 | and here I'm going to CreateFolderAsync.
| | 02:02 | Yes, I need to provide a name for this folder.
| | 02:07 | And then there's an argument I can pass
in called the CreationCollisionOption,
| | 02:14 | which I'm going to use.
| | 02:15 | And here I'm saying, if the folder
already exist, just replace the existing folder.
| | 02:19 | Next I'll comment out these two lines and
then we'll run the app by pressing Ctrl+F5.
| | 02:25 | I see I have a build error, that's because
I have a typo, this should be a capital F.
| | 02:32 | Press Ctrl+F5 to run the application
and click on the Create Folder button.
| | 02:39 | And at the bottom of the screen you
see a folder is created at 8:03 PM.
| | 02:43 | Let's see if it was in fact
created in the Music folder.
| | 02:46 | I'll switch to Music and there is my new folder.
| | 02:50 | Next I'll show you the storage of file class.
| | 02:52 | That's down here in this
CreateFile_Click event handler.
| | 02:56 | Again I start off by getting the
MusicLibrary and I call CreateFileAsync and ask
| | 03:01 | for a file called BeatTrack.mp3.
| | 03:04 | My collision option is to generate a
unique name if the file already exists.
| | 03:09 | Once you have a handle on that file
and you can do the things like MoveAsync.
| | 03:15 | Here I can move it to the PicturesLibrary,
delete the file or even open the
| | 03:20 | contents of the file and load them into a stream.
| | 03:24 | Run the app, click on Create File a
few times, switch back to my Music Folder
| | 03:30 | and there are my three new MP3 files.
| | 03:35 | The next demo shows how to
list the files in a Library.
| | 03:39 | I'll start off with the MusicLibrary,
then I write this foreach loop.
| | 03:43 | Here I'm getting the files asynchronously
from the folder and adding them to this ListView.
| | 03:50 | Down here I'm doing the same thing but
I'm calling GetFolderAsync, which will get
| | 03:54 | me the child folders of the Music folder.
| | 03:57 | I'll click on this button, the first
column shows the song names and the second
| | 04:03 | column shows the folder names.
| | 04:05 | I can also do the same thing
by clicking on this button.
| | 04:09 | I'm getting the files but I'm using a
slightly different technique to load
| | 04:12 | them into the List View.
| | 04:14 | Here's what I'm doing, I'm calling folder
GetItemsAsync and loading that in this variable.
| | 04:21 | And then, I'm taking that variable and
assigning it to the ItemsSource of the FilesListView.
| | 04:26 | This is binding to the underlying file system.
| | 04:30 | The last demo shows that I can
make the user control prettier.
| | 04:35 | So what I'm going to do is add some
icons to the file folders so it looks nicer.
| | 04:39 | Let me show you that demo. Here it is.
| | 04:44 | So I'm listing the folders but this
time I'm putting a file icon on the side.
| | 04:49 | If you want to see how this was done,
and examine the XAML, it's over here on
| | 04:53 | this folder TemplatedListViewFile.
| | 04:55 | Check this one out, here is the XAML.
| | 05:01 | The key part is there's a ListView and
then there's a DataTemplate and somewhere
| | 05:05 | in this DataTemplate is the
images that's getting loaded.
| | 05:08 | The storage API is full of interesting
methods for working with files and folders.
| | 05:13 | In the next video, I'll show you
how to filter the file system with the
| | 05:16 | built-in querying tools.
| | Collapse this transcript |
| Querying files| 00:00 | This is my Music folder on my PC.
| | 00:03 | It has a number of MP3 files;
| | 00:06 | it also has some non-music files
like this license.txt and this zip file.
| | 00:11 | There is also a wav file in here.
| | 00:14 | If you look inside these children
folders, you'll see there are also some files
| | 00:17 | further down the folder tree.
| | 00:20 | There are times when you will not want to
show all the available files to the user.
| | 00:24 | The wrong way to filter your list is to
get all the files and then filter the result.
| | 00:29 | It's better to use the File Query
features incorporated in the API.
| | 00:33 | In that way, the operating system
can do the filtering for you in a fast
| | 00:36 | and efficient manner.
| | 00:38 | Let's see how you do that in your code.
| | 00:42 | In this project I'm going to
look at the Demo.xaml file.
| | 00:46 | This UI has two buttons on the left
side and two list boxes in the center which
| | 00:50 | I'm going to fill with
information from my queries.
| | 00:53 | Let's look at this first query.
| | 00:55 | I want to query the files and
pull back a subset of the files.
| | 00:59 | I start by getting a known folder, in
this case the MusicLibrary folder, and
| | 01:05 | then I set up a QueryOption.
| | 01:07 | This is some of the extra settings
that I want to do it with my query.
| | 01:10 | I want to choose to order them in
alphabetical order by Music Properties and I
| | 01:17 | want to specify a list of extensions.
| | 01:19 | So I'm only interested in MP3 files and wav files.
| | 01:24 | So let's pass in a listed string here.
| | 01:26 | Those two options are stored in
here then I go down and I say my
| | 01:30 | FolderDepth option is Shallow.
| | 01:33 | And I would like to use the Indexer.
| | 01:35 | If the operating system has indexed
this location, I want to go ahead and use
| | 01:39 | the Indexer to retrieve the information.
| | 01:41 | Now this shallow depth means that
I'm only looking at the top level.
| | 01:45 | Later I'll switch it to deep and go
look deeper in those children folders.
| | 01:49 | So now I'm ready to create my query.
| | 01:51 | I call CreateFileQueryWithOptions
and then pass in my option values.
| | 01:55 | And then I call queryResult.GetFilesAsync.
| | 01:59 | That gives me back a list of the files
from the query and then I can just assign
| | 02:04 | those as the item source for this file list.
| | 02:07 | Let's see what this looks like.
| | 02:08 | Ctrl+F5 to run the app.
| | 02:13 | Click on the Query Files, there are four
files listed, let's go look at my music
| | 02:18 | folder to see what we have there, four music files.
| | 02:22 | Okay, so I left out the license.txt and a zip file.
| | 02:25 | Now I'm going to switch back to
my code and make one modification.
| | 02:29 | I'll switch this to Deep and run the query again.
| | 02:38 | And this time the results show some
of the files in the children folders.
| | 02:41 | Another thing I like about this API is
that you can set up a watcher to monitor
| | 02:46 | that folder and if there's any
changes, your code is notified.
| | 02:50 | I'm going to do that with
this Query and Monitor folders.
| | 02:53 | Let me show you how it works
first and then I'll show you the code.
| | 02:56 | I'll click here, I'm monitoring my pictures folder.
| | 02:59 | So I'm going to go back to the File explorer.
| | 03:02 | Go to my Libraries and go to Pictures.
| | 03:08 | I have one child folder in my Pictures folder.
| | 03:12 | I'm going to add another one, I'll call
this one, Art and then I'll take a few
| | 03:18 | of these pictures and move
them in to this Art folder.
| | 03:22 | Now when we go back to my application,
you'll see that I was updated in my code
| | 03:27 | and I was able to show that
there's a new folder available.
| | 03:30 | I also got the timestamp down here that the
folder was changed at 9:27 and 56 seconds.
| | 03:36 | Let's see how you do that in the code.
| | 03:38 | I start by getting the PicturesLibrary
then I set up a variable called the
| | 03:43 | StorageFolderQueryResult.
| | 03:46 | When I clicked on that button, I create
what's called the folderQuery then, I
| | 03:51 | wire up this event handler
for the ContentsChanged a bit.
| | 03:55 | Then I call method that I wrote
called GetFolders, here's my GetFolders.
| | 04:00 | My GetFolders is returning a task, which
means it can be called in the basic risk
| | 04:05 | fashion, all my code in this method
doing is getting the folders asynchronously
| | 04:10 | and then assigning them to my FoldersListView.
| | 04:13 | But if I have one more bit of code to
show you, that's here, that's the
| | 04:17 | query_ContentsChanged.
| | 04:18 | This fires when you add a folder or
delete a folder and all I did in here was
| | 04:24 | I'd put a message and I call the dispatcher.
| | 04:27 | I have to do this because the code is
going to be running in on background
| | 04:31 | thread what I enters this and I
have to switch over to the UI threads, so
| | 04:35 | that's why I'm going Dispatcher.
RunAsync then, saying update a
| | 04:38 | messageTextBlock in that page.
| | 04:40 | And then I call a GetFolders again,
which runs this to return the query for the
| | 04:45 | folders and then I show that in the list box.
| | 04:48 | There's more to explore in the query API.
| | 04:50 | Some of the GetFile methods take a
query parameter for active filtering.
| | 04:54 | The important concept to take from
this video is that you should leverage the
| | 04:57 | operating system for fast,
efficient querying and file monitoring.
| | Collapse this transcript |
| Choosing content with file pickers| 00:00 | There are times when your app should
prompt the users to select the file for action.
| | 00:05 | A photo editing tool, for example, has the
user select a file to load into the editor.
| | 00:11 | In a traditional Windows application,
you use the File>Open dialog method to
| | 00:15 | accomplish this task.
| | 00:17 | In WinRT, this is done with the File Pickers.
| | 00:20 | Pickers work with local and network files.
| | 00:23 | They also work with logical files,
which means that a WinRT application can
| | 00:27 | serve as a file source.
| | 00:29 | My examples today are in this Demo.xaml file.
| | 00:34 | Let's look at the code and the user interface.
| | 00:39 | This has three buttons on the left
side and a checkbox in the bottom.
| | 00:45 | And then over here, it's hard to see,
but there's an image control in this
| | 00:47 | location, image control is
called show chosen image.
| | 00:52 | This first bit of code on the
FileOpenPickerbutton_Click event handler is going
| | 00:58 | to ask user for an image file.
| | 01:01 | I start off by wiring up an
event handler called ImageFailed.
| | 01:05 | This fires if you cannot load the image for any reason.
| | 01:09 | Perhaps, the file they pick is in the wrong format.
| | 01:13 | Here, I have a method named EnsureUnsnapped.
| | 01:17 | If you try to open a file picker or
folder picker when you're in snap mode, it
| | 01:22 | will throw an exception.
| | 01:23 | So what this code does is check to see
whether you're in the snapped view and if
| | 01:29 | you're not, it tries to call the TryUnsnap method.
| | 01:33 | Then I create my FileOpenPicker, store it in a variable.
| | 01:37 | Here, I'm suggesting a starting location.
| | 01:40 | The first time the user works with
your app, this is where they'll start.
| | 01:44 | If they open a different location, the
application remembers where they're at.
| | 01:48 | So the next time they open the
FileOpenPicker, they'll used their most
| | 01:51 | recently used location.
| | 01:54 | This little bit of code
here just checks that checkbox.
| | 01:57 | If the checkbox is checked, I open the
picker mode with the thumbnail views.
| | 02:01 | Otherwise, I open it with the List views.
| | 02:03 | Then I add a couple of filters in the
FileTypeFilter, looking for png and jpeg files.
| | 02:09 | And then finally, I ask for the file.
| | 02:12 | Now this is going to show that
dialog to the user, the user is going to
| | 02:16 | pick the file or cancel.
| | 02:17 | At that point, I'm going to
have a variable stored here.
| | 02:20 | If they canceled, it's going to
be null, so I do a check for that.
| | 02:23 | If they select a file, then I output
you picked such and such of file and then
| | 02:28 | I call this function called SetupImage.
| | 02:31 | By the way, if you want to have the
users work with multiple files, you use this
| | 02:34 | method PickMultipleFilesAsync
instead of PickSingleFileAsync.
| | 02:40 | My image code is being set up here.
| | 02:42 | This is the method called SetupImage.
| | 02:45 | It takes a storage file in as an input
parameter, creates a temporary bitmap
| | 02:50 | image, uses that StorageFile that was
passed into, open the file in asynchronous
| | 02:55 | mode and read the contents,
creates a stream out of that.
| | 02:59 | Then it uses that stream to set the
source on what's called the tempImage, this
| | 03:03 | BitmapImage up here.
| | 03:04 | And then finally, it assigns that
image to the source of my image control.
| | 03:10 | That was a long-winded explanation.
| | 03:12 | Let's just see what it looks like.
| | 03:13 | Ctrl+F5, click here.
| | 03:19 | User decides to cancel.
| | 03:23 | My text says, You didn't pick a file.
| | 03:25 | Now I'm going to click on this
checkbox and open that dialog again.
| | 03:28 | Now you see I just have
thumbnails of the pictures.
| | 03:31 | I'll pick this abstract image
and then I'll click on Open.
| | 03:38 | And there is my abstract
image loaded in this location.
| | 03:41 | Let's try one more time.
| | 03:42 | I'll pick this great photo
over here; that looks nice.
| | 03:47 | You can also save a file with a File Save
Picker and there's also a Folder Picker.
| | 03:53 | We're returning back to
Visual Studio to look at that code.
| | 03:55 | Here's the code for the File Save Picker.
| | 03:57 | I create a FileSavePicker dialog.
| | 04:02 | I choose what I want to say on the
Commit button, Save your vacation picture.
| | 04:07 | I also suggest to start
location in the DocumentsLibrary.
| | 04:11 | I suggest the file name for the user,
beach.png and then I add a set of choices
| | 04:18 | that they could see for their
file types that they can save.
| | 04:21 | Once again, I call the PickSaveFileAsync
to open the picker and then of course I
| | 04:27 | would save the file contents here.
| | 04:28 | I'm not actually saving the image,
I'm just showing you how to open the dialog.
| | 04:32 | Back to the app, click the second button.
| | 04:35 | You see I'm in the Documents folder,
the suggested file name is beach.png and
| | 04:40 | here is my list of filter types.
| | 04:42 | There's only one right now, png file.
| | 04:45 | My text has been updated,
Save your vacation picture.
| | 04:49 | Now I don't have to stay in this folder, right?
| | 04:51 | I can click on Files and here is the approved
locations where the user can go work with their files.
| | 04:57 | So I can switch over to the Picture
folder if I wanted to and then save it there.
| | 05:01 | They say, oh no, I don't want to save that.
| | 05:05 | Never mind, and then cancel.
| | 05:08 | Back to Visual Studio.
| | 05:09 | Let's look at the FolderPicker event handler.
| | 05:11 | Let's start off by creating a picker,
picking my location, no pun intended,
| | 05:16 | saving my file type png, then I choose
whether I want to use thumbnail or list view again.
| | 05:23 | And then, I open my PickSingleFolderAsync.
| | 05:26 | Here I'll check to make sure I got a folder back.
| | 05:29 | This little bit of code grants me some
future permissions so that the operating
| | 05:33 | system can get me access to
the files a little bit quicker.
| | 05:36 | And then, down here I tell you
which folder you picked or whether you
| | 05:40 | didn't pick a folder.
| | 05:41 | So let's see what that one looks like.
| | 05:43 | Back to the running app, click on Folder Picker.
| | 05:47 | We'll start here at the Documents level.
| | 05:50 | I'm looking for PNG files, right?
| | 05:52 | So if I go look in this Visual
Studio 2012, I'm not seeing any PNG files.
| | 05:56 | If I try to choose this folder, it will
tell me down here it picks it but this
| | 06:01 | says, there is no files in that.
| | 06:04 | If I want to pick one of the pictures
in it, we'll go up here to Pictures, then
| | 06:10 | Art, and then Choose this folder.
| | 06:13 | Again, it shows me the folder is picked,
then OK, and it says, You picked the Art folder.
| | 06:18 | So as you've seen, the File Pickers
make it easy to ask the user for a file or
| | 06:23 | a folder location.
| | Collapse this transcript |
| Understanding URI file paths| 00:00 | The URI is a common way to locate unique resources.
| | 00:03 | The URI and URL have been part of the HTTP
and web programming world for a long time.
| | 00:09 | Basically, they are a unique string
that identifies a resource on a web server.
| | 00:14 | When Microsoft created the Windows
Runtime, they had to decide how to
| | 00:18 | identify resources.
| | 00:19 | Many of you maybe familiar with the
GUID or Globally Unique Identifier used in
| | 00:24 | other Microsoft languages.
| | 00:26 | While the GUID is used in some parts of
WinRT, the URI was a choice for file look up.
| | 00:33 | The URI is the approved way to get
files and other resources in WinRT apps,
| | 00:37 | which is why I'm discussing it in this chapter.
| | 00:39 | The XAML shown on this page is loading a
picture, the grapes.png file, into an image.
| | 00:46 | The image source property is set with a URI.
| | 00:50 | Note, the lack of the beginning forward
slash indicates the root of your application.
| | 00:55 | In this case, the grapes.png
file must be part of your project.
| | 00:58 | While using relative URIs like this is
easy, I prefer to use the schema prefixes
| | 01:04 | shown on the next slide. Why?
| | 01:07 | Because you cannot use relative syntax
when passing the URIs to the WinRT runtime.
| | 01:12 | Therefore, for consistency,
I always use schema prefixes.
| | 01:16 | There are three approved
prefixes you can use to access files.
| | 01:20 | The first one should look familiar.
| | 01:22 | It is the HTTP prefix used for accessing web pages.
| | 01:26 | The other two are Microsoft inventions.
| | 01:29 | Note how both start with the ms- syntax
and have three forward slashes at the end.
| | 01:35 | With the HTTP prefix, you have
access to any resource on the Internet.
| | 01:39 | There are no cross-domain issues, just
specify the URL and watch the magic happen.
| | 01:44 | Microsoft created a special URI prefix for
accessing application files. It's ms-appx:///.
| | 01:54 | The ms-appx prefix signifies that the
resource is part of the app package.
| | 02:00 | In other words, the files are installed with the app.
| | 02:03 | The three forward slashes indicate
the file path from the project root.
| | 02:08 | If you use two slashes, the path is
relative to the current XAML file.
| | 02:12 | Just remember, you cannot use relative
paths with sending URIs to the runtime.
| | 02:17 | The ms-appdata prefix signifies that the
resource is located somewhere on the user's drive.
| | 02:24 | Use the temp prefix to work with the
local machine's Temp folder for this app.
| | 02:28 | The temp location is best when you need
to write disposable or transitional files.
| | 02:33 | Use the local prefix to work with
files in the apps local data store.
| | 02:37 | This is typically used for a
state that is specific to the machine.
| | 02:41 | Use the roaming prefix to work with
files in the apps roaming data store.
| | 02:45 | This is synchronized between PCs
and is associated with the account of
| | 02:49 | the logged in user.
| | 02:51 | This is the best place to store app-specific
data which the user may want to
| | 02:54 | share between machines.
| | 02:56 | Now let's go see how to use
these URIs in our application.
| | 03:01 | Here I am inside Visual
Studio inside this Demo.xaml file.
| | 03:05 | Here is an image that's using a local
path to retrieve a picture that is stored
| | 03:11 | in my Assets folder.
| | 03:12 | So over here in my Assets folder,
I have beach.png and grapes.png.
| | 03:16 | It is just a simple matter of using a relative path.
| | 03:19 | You can see that relative path in a couple of places.
| | 03:23 | I can go to my XAML and look at it. Here it is.
| | 03:27 | Another thing I like to do is to use
the Editor tool or the Properties tool on
| | 03:32 | this side to set the path.
| | 03:33 | The way I can do that is choose the
image, open the Properties window, find the
| | 03:39 | Source property, and then I can click on
this down button here to choose another item.
| | 03:46 | I'll switch that to beach, and now I'll switch
back to the designer to see what it looks like.
| | 03:52 | Again, that's a relative path.
Here is the prefix path.
| | 03:54 | I have to use ms-appx or ms-appdata
like we mentioned on the slides.
| | 04:00 | I'm going to change the URI for this picture in code.
| | 04:05 | So let's see what's behind this button.
| | 04:07 | You have to create an instance of a System.Uri.
| | 04:10 | This is a string we're using here
but it needs to be converted into a URI
| | 04:14 | before I can use it.
So that's what I'm doing h |
|
|
