IntroductionWelcome| 00:00 | (Music playing)
| | 00:03 | Hello!
| | 00:04 | I am Walt Ritscher and I'd like
to welcome you to Silverlight 3
| | 00:07 | Essential Training.
| | 00:08 | Silverlight is a powerful framework
for building line of business programs.
| | 00:12 | It does an amazing job of reproducing
the world of Desktop applications and a
| | 00:16 | browser deployed cross-platform framework.
| | 00:19 | In this course, I'll start with an
overview of the Silverlight platform.
| | 00:23 | Then take a close look at the new
Extensible Application Markup Language,
| | 00:27 | more commonly known as XAML, and see how it
simplifies writing Silverlight interfaces.
| | 00:32 | I'll cover user controls, UI
templates, adding media to your interface,
| | 00:38 | energizing your application
with animations and plenty more.
| | 00:42 | Along the way, you'll discover lots of
interesting tips on how you use Visual
| | 00:44 | Studio and Expression Blend to
make Silverlight development a snap.
| | 00:49 | This course is targeted at
developers, so a working knowledge of the C#
| | 00:52 | programming language will be
required for most of the course.
| | 00:55 | I've been working with Silverlight
since the first version was released back
| | 00:58 | in 2007, and I am delighted to have this
opportunity to introduce you to Silverlight.
| | 01:03 | So, let's get started with
Silverlight 3 Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the
lynda.com Online Training Library or if you
| | 00:05 | are watching this tutorial on a DVD-ROM,
you have access to the exercise files
| | 00:10 | used throughout this title.
| | 00:11 | I have copied the Exercise Files
to my Desktop. Let's take a look.
| | 00:13 | I'm going to open the folder.
| | 00:16 | The Exercise Files are arranged by chapter.
| | 00:19 | This is the Controls chapter, and inside
each chapter are the individual movie files.
| | 00:25 | Let's take a look at movie number 07.
| | 00:27 | This is the starter project for the
ExploringSilverLightToolkit project.
| | 00:31 | If you open this one up,
you'll see that there is a SLN file.
| | 00:35 | This is the file that you open in
either Expression Blend or Visual Studio.
| | 00:40 | Since I've Visual Studio installed in
this computer, I can double-click on the
| | 00:43 | SLN file and it will launch Visual Studio.
| | 00:45 | Within Visual Studio, each of the files
that are used by Silverlight are arranged
| | 00:49 | over here in the Solution Explorer.
| | 00:51 | This closely mimics the
file system on your hard drive.
| | 00:53 | Let me return back to the
Exercise Files and I will open this
| | 00:57 | ExploringSilverLightToolkit folder
and in here, you see matching folders.
| | 01:02 | There is Properties. There is App.xaml.
| | 01:05 | There is MainPage.xmal.
| | 01:07 | You'll learn more as the course goes along.
| | 01:09 | This is a mirror image of
what you see in Visual Studio.
| | 01:12 | The key to remember is once you've
opened the Solution, you do not need to
| | 01:15 | return to the file system.
| | 01:16 | We are also using
Expression Blend during this course.
| | 01:19 | Let me show you how that works.
| | 01:21 | I've switch to Expression Blend. To open
the Solution file here, I would go to
| | 01:25 | File>Open Project/Solution, find my
Exercise Files folder on my desktop.
| | 01:31 | Go to the same chapter, Controls, Movie
number 07, double-click on this folder
| | 01:37 | and then double-click on this Solution file.
| | 01:39 | Expression Blend looks very different
from Visual Studio, but it still uses a
| | 01:43 | similar Tree view to viewing
your files in your project.
| | 01:46 | If you are a monthly subscriber or
annual subscriber to lynda.com, you don't
| | 01:50 | have access to the Exercise Files,
but you can follow along from scratch
| | 01:54 | with your own assets.
| | 01:56 | Let's get started.
| | Collapse this transcript |
| Exploring the finished project| 00:00 | I'm going to show you the
finished application for this course.
| | 00:03 | It's called PixelSmith and it
demonstrates many of the features of Silverlight 3.
| | 00:08 | We'll be working on this application
repeatedly throughout this course, as we
| | 00:12 | build it up using tools like
Visual Studio and Expression Blend.
| | 00:16 | I have it opened inside Visual Studio.
| | 00:18 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:21 | the PixelSmith solution.
| | 00:23 | I'm going to press F5 to run the application.
| | 00:26 | Visual Studio launches Internet
Explorer as the default browser, but PixelSmith
| | 00:32 | works equally well in Firefox.
| | 00:34 | I'll copy the URL, switch to Firefox and
paste it in the URL, and then press Enter.
| | 00:40 | And as you can see,
PixelSmith is running over here too.
| | 00:44 | I'm going to close Firefox to
return to Internet Explorer.
| | 00:47 | As I said, this is a sample application so
it demonstrates many of the new features.
| | 00:52 | For one, it demonstrates some of the
new controls like the Accordion control.
| | 00:56 | You can click here to snap
open different parts of the UI.
| | 00:58 | It shows dynamic controls.
| | 01:02 | I'm going to place the control in this
area of the screen by clicking on the Add
| | 01:05 | Ellipse button, not only that,
I'll add an ellipse to my work area.
| | 01:11 | I can interact with this
ellipse by clicking on these buttons.
| | 01:15 | I can also add a rectangle.
| | 01:17 | There is one of the new
tooltips available in Silverlight 3.
| | 01:19 | I'm going to click on the Add
Rectangle and note what happens to the Toolbar,
| | 01:24 | the Toolbar changes.
| | 01:26 | I can switch back and forth between
the Ellipse and the Rectangle and the
| | 01:30 | Toolbar knows about the
two items in the artboard.
| | 01:33 | I can also add fancier items like the Octopod.
| | 01:38 | I can work with several Popup type windows.
| | 01:40 | You've already seen the tooltip, but
if I go back to the Ellipse menu there's
| | 01:44 | the Print button, which brings up
something called a child window.
| | 01:48 | I can choose items in here, like a
dialog, and then when I click OK, the
| | 01:51 | information is passed back to
the main UI, as you can see right here.
| | 01:56 | Another kind of Floater
is what's called the Popup.
| | 01:58 | If I click on this button, you can see
I have a little mini window pop up down
| | 02:02 | here, which I can interact with and then close.
| | 02:04 | We can have some fun with Physics Objects.
| | 02:07 | You can drag these around on the
screen and see if I can knock the rest of
| | 02:14 | them off the screen.
| | 02:17 | You'll also work with
images throughout the course.
| | 02:20 | For this first example, I'm
going to choose From File.
| | 02:24 | I'll go out and choose my Pictures
folder, then the Sample Pictures folder.
| | 02:28 | Choose a photograph from this
collection, and then once you have the image in
| | 02:33 | here, we can add special
effects: Blurs, Drop Shadows.
| | 02:38 | You're even going to learn to write your
own Custom Shaders, like this ripple effect.
| | 02:41 | We spend some time with the file system.
| | 02:43 | You'll learn how to write to Isolated Storage.
| | 02:46 | This will analyze the number of items
on the work area and save it out to a
| | 02:49 | file and then I can read out the value.
| | 02:51 | I can save to my local hard drives.
| | 02:52 | You'll learn how to do that.
| | 02:53 | There is a section on Animations.
| | 02:55 | If I click on this logo at the
bottom, it will start a storyboard and
| | 02:59 | animate the item into View.
| | 03:01 | And lastly, you'll learn how to use Media.
| | 03:03 | I'm going to click on the video help link,
which will launch another child window.
| | 03:08 | This is my alter ego.
| | 03:09 | He is going to talk to you about PixelSmith.
| | 03:12 | Walt in video: Hello. My name is Arturo Diega and I'm the
founder and CEO of PixelSmith labs. You can call me cra-
| | 03:20 | You'll learn how to control media,
change the Volume, find out your current
| | 03:24 | location in the video, and much more.
| | 03:27 | Let's get started building PixelSmith.
| | Collapse this transcript |
| What you should know before taking this course| 00:00 | I want to talk to you for a minute
about the training we offer for Silverlight
| | 00:04 | 3 and Silverlight 4.
| | 00:05 | You may have noticed that we
offer both courses here at lynda.com.
| | 00:09 | The Silverlight 3 course is where you
should start if you are new to Silverlight.
| | 00:12 | In that course, I cover all the
essentials to get you started as a
| | 00:15 | Silverlight developer.
| | 00:17 | The best way to think about our
Silverlight 4 course is that it is an addendum
| | 00:21 | to the Silverlight 3 title.
| | 00:23 | It is in this title that I
concentrate on the new features.
| | 00:27 | I'm particularly happy with the
improvements that make Silverlight better for
| | 00:30 | creating desktop-style applications,
but I encourage you to watch and see which
| | 00:34 | new feature is your favorite.
| | 00:36 | Here is the important point that I
want to make if you're learning about
| | 00:39 | Silverlight development:
| | 00:41 | the core technologies in Silverlight
4 are unchanged from Silverlight 3.
| | 00:46 | There are literally hundreds of
features shared between the two versions.
| | 00:50 | That's good for us, as that means we can
leverage our skills from the previous release.
| | 00:55 | These courses are targeted at
developers, and I assume that you know how to
| | 00:58 | write code and are familiar
with C# and the .NET framework.
| | 01:02 | So let me summarize.
| | 01:04 | If you are new to Silverlight
development, you should check out the Silverlight
| | 01:07 | 3 Essential Training Series, here at
lynda.com, or pick up a copy of the DVD.
| | 01:12 | Every movie in that title
applies to Silverlight 4 development.
| | 01:16 | If you want to learn about the
improvements available in Silverlight 4, watch
| | 01:19 | the Silverlight 4 New Features title.
| | 01:21 | Regardless of which title you watch, I
know you're going to love what you can
| | 01:24 | do with Silverlight.
| | Collapse this transcript |
|
|
1. Getting StartedSilverlight 3 explained | 00:00 | From a modest start less than three years
ago, Silverlight has grown into a serious
| | 00:04 | competitor in the Rich Internet Client space.
| | 00:07 | Currently, it is installed on 47%
of all internet connected devices.
| | 00:12 | In some areas of the world, most notably
Europe, the number climbs to 60%.
| | 00:17 | For another important indicator in
the growing influence of Silverlight
| | 00:21 | just look around the internet and tally up
the companies betting on this new technology,
| | 00:25 | over 350 partners in all.
| | 00:27 | These companies are placing a strategic
bet on Silverlight for several reasons.
| | 00:31 | One, Microsoft is a dominant player in
many technologies and it seems likely
| | 00:36 | that the Silverlight platform will be a success.
| | 00:38 | Two, Silverlight is similar to other
Microsoft frameworks, like WPF and is
| | 00:45 | programmed in familiar Microsoft
languages like Visual Basic and C#.
| | 00:49 | There is a website that shows
statistics on market penetration that you can use
| | 00:52 | to learn more about the
competing RIA frameworks.
| | 00:55 | It is called www.riastats.com.
| | 00:58 | At the time I'm recording this movie, it
looks like they are tracking 17 million
| | 01:01 | daily visits and Silverlight 3 has
slightly more than 47% installed base.
| | 01:07 | Microsoft has expended considerable
time and effort creating new UI Platforms.
| | 01:11 | Windows Presentation Foundation, WPF,
was the first of the new generation UI
| | 01:16 | frameworks to emerge from Microsoft.
| | 01:18 | WPF leverages the powerful GPU
processor available on your local computer.
| | 01:22 | WPF is based on a time
tested UI engine, known as DirectX.
| | 01:28 | One common trait cropping up in modern
UI generation tools is reliance on an
| | 01:32 | XML based markup language.
| | 01:34 | In WPF and Silverlight, that language
is called XAML. While powerful, there is one
| | 01:38 | major drawback to WPF.
| | 01:40 | It only runs on Windows operating systems.
| | 01:44 | Silverlight is a few years newer than
WPF and as such, it benefits from the work
| | 01:48 | done by the WPF team.
| | 01:50 | Silverlight is based on WPF, and
follows familiar and comforting
| | 01:54 | programming models.
| | 01:55 | Don't be fooled. Silverlight has
undergone some serious reworking before being
| | 01:59 | released to the web.
| | 02:01 | For one, the size of the framework
has been drastically reduced to speed up
| | 02:04 | the install process.
| | 02:07 | Silverlight underwent a long security
rewrite too, just to make doubly sure that
| | 02:11 | a rouge Silverlight application
can not damage the client computer.
| | 02:15 | Silverlight runs on many operating
systems including Mac OS X, Windows XP,
| | 02:21 | Windows Vista, and Windows 7.
| | 02:24 | It's also available on several of
Microsoft's server products, including Windows
| | 02:29 | 2000, Windows 2008 and surprisingly,
it's also available on Linux, though not
| | 02:35 | through Microsoft, through
the Mono/Moonlight framework.
| | 02:38 | It also works in many browsers.
| | 02:41 | It works in IE7 and IE8.
| | 02:44 | It works in Firefox for
Windows and Firefox for Mac.
| | 02:47 | It's also available on Safari and there
are plans to have it work in Google Chrome.
| | 02:53 | Silverlight 3 is deployed to the
client by way of a browser plug-in.
| | 02:56 | The reason for this choice is obvious.
| | 02:57 | It provides a mechanism for reaching
a wider audience for your application.
| | 03:00 | This is not a new idea.
| | 03:02 | Microsoft tried it years
ago with Active X controls.
| | 03:05 | Many competing frameworks also use
this model, including Flash, Flex and Java.
| | 03:11 | Another huge benefit of using a
proprietary runtime on a client is that
| | 03:14 | Silverlight applications are not HTML-based.
| | 03:18 | You can interact with the HTML on the
page, but Silverlight is its own critter.
| | 03:22 | You get better graphic rendering and
avoid all those browser compatibility
| | 03:26 | issues at the same time.
| | 03:27 | For me, that is a compelling package.
| | 03:31 | Another benefit, especially if you are
currently using .NET, is that Silverlight
| | 03:35 | can be programmed in familiar languages
like C# and Visual Basic. Not content to
| | 03:39 | incorporate classic .NET languages,
Microsoft created several new dynamic
| | 03:43 | languages like IronRuby and IronPython.
| | 03:46 | Finally, the Silverlight framework is
nearly the same as the .NET framework,
| | 03:49 | which is awesome if your
programs have .NET knowledge.
| | 03:52 | So, I just like to say that
Silverlight is filled with compelling features.
| | 03:55 | They have really simplified building
modern graphic rich applications and
| | 03:58 | I think it's time we start showing
you how to make your own Silverlight
| | 04:01 | applications.
| | Collapse this transcript |
| Showcasing amazing Silverlight applications| 00:00 | I know you're ready to start creating
your own Silverlight application, but
| | 00:03 | stay with me for a moment because I
want to show you some great examples of what
| | 00:06 | other people are doing with Silverlight.
| | 00:08 | Silverlight has already proven
capable of streaming media applications.
| | 00:11 | Look at the Sunday night football site
or the upcoming Winter Olympic site to
| | 00:14 | see some terrific use of live
streams and multimedia channels.
| | 00:18 | In this movie, I would like
to show you three examples.
| | 00:20 | In the exercise file folder, in the
Getting Started chapter, there is a folder
| | 00:24 | called Amazing Sites.
| | 00:25 | There are number of sites in here.
The ones we are going to look at in this
| | 00:28 | movie are in the Today folder.
| | 00:29 | I'm going to start by looking
at the Behind Bing, New Features.
| | 00:34 | Bing has a new visual search feature.
| | 00:36 | I'm right-clicking in the
browser to show you that it's a
| | 00:41 | Silverlight application.
| | 00:42 | It's got some nice hover effects as you
move over the items in the screen.
| | 00:47 | I'm going to click down here in VISUAL SEARCH,
a little animation there and then I'm going to
| | 00:53 | click on to see THIS FEATURE IN ACTION
ON BING.COM, maximize my browser and then
| | 00:59 | I can choose to Sort. The difference
here is I'm sorting and getting a visual
| | 01:03 | representation of the data I'm sorting on.
| | 01:05 | So, I'm going to look at New Cars, 336
New Cars. Today, I'm interested in the
| | 01:11 | Safest car. You can see that Bing
rearranges those in a nice, animated fashion.
| | 01:18 | Let's look at by Make.
| | 01:21 | For the second site I'd like to
look at Today, I'm going to look at the
| | 01:24 | Microsoft-Center des Usage, which is a
very Flash-like site,
| | 01:32 | (Speaker talking in Spanish)
| | 01:36 | I'm going to mute that so that I can
talk over what's going on here.
| | 01:39 | This has got a nice
animation between pages in the book.
| | 01:44 | Go back to previous page. I love watching
these things fold up. It's one of my
| | 01:50 | new favorite things to do and one more
page before we move on to the next application.
| | 01:56 | And finally, I'd like to look at a game.
| | 01:59 | Games drive a lot of the industry and
it's no different in the Silverlight world.
| | 02:03 | Here is a Silverlight shock game. I click
on Play, choose my experience and then click Play.
| | 02:25 | I'm going to press Escape and
then close the browser window.
| | 02:32 | You can continue playing on your own.
These are just a tiny subset of the
| | 02:36 | interesting applications currently
released in the Silverlight space.
| | 02:39 | I've included links to more
sites in the Exercise Folder.
| | 02:41 | Now it's time to start making
your own Silverlight masterpieces.
| | Collapse this transcript |
| Setting up your developer computer| 00:00 | All right! You've heard about Silverlight and
are ready to start learning this new UI
| | 00:03 | platform, 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 create
| | 00:11 | Silverlight 3 applications.
| | 00:13 | The premiere developer tool
available from Microsoft is Visual Studio.
| | 00:18 | There are many versions of Visual
Studio available. There is the Pro
| | 00:21 | version, the Standard and my
favorite, Team, and each is suited for
| | 00:25 | Silverlight 3 development.
| | 00:27 | Each version requires a paid license.
| | 00:30 | Note that you'll need an hour
or more to install Visual Studio.
| | 00:33 | I'd also like to point out that Visual
Studio 2010 will include the Silverlight tools.
| | 00:38 | By the way, you can pause and copy
down the link if you want to check it out.
| | 00:42 | After installing Visual Studio, you should
install the Silverlight tools for Visual Studio.
| | 00:47 | These tools configure Visual Studio to
work with Silverlight applications.
| | 00:51 | The reason that you have to install this
additional piece is that Silverlight 3
| | 00:54 | shipped nearly a year after Visual
Studio 2008 did and therefore, Visual Studio
| | 00:59 | does not include any Silverlight editors.
| | 01:02 | If you don't have a license for
Visual Studio, you can install Visual Web
| | 01:06 | Developer Express 2008.
| | 01:08 | This is a free version of Visual Studio
that can create Silverlight 3 applications.
| | 01:12 | It is installed via the new Web
Platform Installer, which is the latest
| | 01:16 | installer technology to emerge from Microsoft.
| | 01:19 | Web Platform Installer is a single
location for installing any tools necessary
| | 01:22 | for web development.
| | 01:24 | Web Platform Installer installs the
Silverlight SDK, the Web Express ID and many more tools.
| | 01:30 | You won't get a database server with
Web Express, but there is also the free SQL
| | 01:34 | Web Express for data base development.
| | 01:36 | Another thing you should consider
installing is the Microsoft Silverlight
| | 01:41 | toolkit. Don't be fooled by the name.
| | 01:43 | The Silverlight toolkit is a Vital
install for this Silverlight 3 developer.
| | 01:47 | The toolkit is a Microsoft
product that ships out of the normal
| | 01:50 | Silverlight timeline.
| | 01:51 | Here you'll find tools that are slated
for future releases of the Silverlight
| | 01:55 | API but are available now.
| | 01:57 | I thought I would like to go take a
look at the site for a minute and see some
| | 02:00 | of the features in the Silverlight toolkit.
| | 02:01 | Let me switch over to my
browser. Here is the site.
| | 02:04 | It's Silverlight.codeplex.com and if
you scroll down the page, you'll see
| | 02:08 | there are some new controls, like the
TreeView control, a series of charts, the
| | 02:13 | new AutoCompleteBox.
| | 02:17 | Here is a more complete
list, further down in the page.
| | 02:20 | I highly recommend that
you install this toolkit.
| | 02:23 | I'll be using it throughout the series.
| | 02:27 | Microsoft also has a set of Designer tools.
| | 02:30 | I recommend that you install Expression Blend 3.
| | 02:33 | Blend is the best Visual Design tool
for crafting Silverlight 3 interfaces.
| | 02:36 | Blend is marketed more towards UX
designers, but I strongly believe that it is an
| | 02:40 | essential tool for developers.
| | 02:42 | It's available through your MSDN
subscription or other Microsoft channels.
| | 02:46 | Here is where you can find
a free evaluation version.
| | 02:49 | There are additional Silverlight
tools available that are not used in this
| | 02:52 | series but are worth looking at. Deep
Zoom Composer allows you to take a series
| | 02:56 | of photos and arrange them in a
constantly zoom-able photo montage.
| | 03:02 | Another intriguing tool is .NET RIA services.
| | 03:06 | This tool set simplifies connecting
to services on the server by creating
| | 03:09 | client proxies on your behalf.
| | 03:11 | As you have seen in this movie, you've
got some work ahead to you to get ready
| | 03:13 | for Silverlight development.
| | 03:15 | I'd say you're looking at spending
a few hours of your day downloading and
| | 03:18 | installing these
applications before you're ready to go.
| | Collapse this transcript |
| Contrasting the Silverlight versions| 00:00 | Microsoft has released three
versions of Silverlight and there is another
| | 00:03 | version looming on the horizon.
| | 00:05 | In this movie, I want to comment on
these versions and help clarify the benefit
| | 00:08 | of using Silverlight 3.
| | 00:10 | Silverlight 1 was released in September of 2007.
| | 00:14 | The primary reason for releasing this
version was to get the product on the market
| | 00:18 | and the number one feature
was high-definition video.
| | 00:21 | It had a very limited programming support.
| | 00:23 | It only supported one language, JavaScript.
| | 00:26 | A year later, Microsoft released Silverlight 2.
| | 00:28 | That was a huge jump in features in
this version, and probably the most
| | 00:33 | important for me was the inclusion of
the managed language and a managed runtime.
| | 00:38 | This means, of course, that you can
program in your favorite .NET language,
| | 00:41 | like C# or Visual Basic.
| | 00:42 | They also added input controls.
| | 00:46 | There were no controls in Silverlight 1,
much better networking, added support
| | 00:51 | for Microsoft's new LINQ Integrated Query.
| | 00:54 | The ability to work with the storage
system on the local computer and other benefits.
| | 00:59 | About nine months later,
Microsoft released Silverlight 3.
| | 01:04 | By the way, I'd like to talk about
the versioning. Microsoft calls it
| | 01:06 | Silverlight 3 and not Silverlight 3.0.
| | 01:08 | That's right. Microsoft decided not to
use the dot release name for Silverlight.
| | 01:12 | There is a huge set of
features in Silverlight 3.
| | 01:16 | We will cover a large number of these
in this title. And finally, the newest
| | 01:22 | version is Silverlight 4.
| | 01:23 | That's not released yet, but it's
expected sometime in the summer of 2010.
| | 01:28 | As usual, it continues the upgrade
path with interesting things like
| | 01:32 | drag-and-drop support, web cam
support and other interesting pieces.
| | 01:37 | As you can see, the Silverlight team
and Microsoft is moving quickly to make
| | 01:39 | Silverlight as full-featured as possible.
| | Collapse this transcript |
| Using Visual Studio to create a Silverlight project| 00:00 | If you're a .NET Developer, you're
probably familiar with Visual Studio.
| | 00:03 | It excels as a developer IDE
for many types of projects.
| | 00:06 | Remember, however, that Visual Studio
2008 does not understand Silverlight
| | 00:10 | projects unless you have installed the
Silverlight 3 tools for Visual Studio 2008 SP1.
| | 00:16 | This is due to the offset and shipping
schedules, because Silverlight 3 shipped a
| | 00:20 | year after the release of Visual Studio 2008.
| | 00:22 | In this movie, I'd like to show you how
to create a Silverlight application or two.
| | 00:26 | To demo this, I'm going to launch
Visual Studio 2008 and I'm going to go up to
| | 00:30 | the File menu and choose New>Project.
| | 00:35 | There are two languages prevalent in
Visual Studio: Visual Basic, and Visual C#.
| | 00:40 | For this series, I'm using Visual C#.
| | 00:42 | So, I'm going to come down to Visual C#
and then I'm going to look to see if
| | 00:45 | there are some Silverlight apps.
| | 00:47 | There is a Filter button available,
where I can come down here and click
| | 00:50 | the Silverlight node in the tree to
shrink this down to only the templates
| | 00:54 | that have Silverlight.
| | 00:55 | And I'm going to start by
creating a Silverlight application.
| | 00:58 | If you are following along, you
can pick any location you want.
| | 01:00 | By default, Visual Studio starts in
Documents folder and then under a folder
| | 01:05 | called Visual Studio 2008\Projects.
| | 01:08 | I'm going to leave it there, and then
I'm going to choose a nice new name for
| | 01:11 | my SilverApp and then click OK.
| | 01:18 | The next thing that Visual Studio is going to do
is ask me if I want to create a companion site.
| | 01:23 | For this first demo, I don't
want to create the companion site.
| | 01:25 | So, I'm going to uncheck
the checkbox and click OK.
| | 01:29 | And here's our first screen.
| | 01:31 | Over on the right side of the screen is
the Solution Explorer and it shows all
| | 01:35 | of the files who were
are added by this template.
| | 01:36 | There is my project name.
| | 01:39 | Here are two files.
| | 01:40 | There is an App.xaml file
and a MainPage.xaml file.
| | 01:43 | And inside the MainPage.xaml is this
Grid, which is going to be used to contain
| | 01:47 | all our elements if we
want to show to the end-user.
| | 01:50 | Right now, the only thing I'm going to do
is change the background color of the Grid.
| | 01:55 | I'm doing this by typing in the IDE
and Visual Studio has an IntelliSense
| | 01:59 | engine, which prompts me for names like
Background and the colors that I want to choose.
| | 02:03 | Okay, I'm done. I can save this.
| | 02:07 | Next thing I want to do is run
it to demonstrate how it works.
| | 02:09 | We'll go up and choose Build, which
will compile my application, and then
| | 02:13 | secondly, I'm going to go
choose Debug, Start Debugging.
| | 02:16 | Now what I've just done is
I've launched the Browser.
| | 02:23 | In this case, it's my
default Browser that is IE 8.
| | 02:26 | It's loaded our test page in.
| | 02:28 | It's colored the entire
surface area of the Browser with the
| | 02:31 | Silverlight application.
| | 02:32 | If I right-click anywhere inside the
Browser, you can see that it's Silverlight.
| | 02:36 | I don't get the HTML menu you
usually do, and lastly, it has attached the
| | 02:41 | debugger in Visual Studio to this, so I
can put breakpoints in my code and walk
| | 02:45 | through the code if necessary.
| | 02:47 | There's another movie in this
series detailing more about debugging.
| | 02:50 | Okay, I think I've seen enough.
| | 02:51 | We'll close down the Browser, which
will also detach the Debugger and return me
| | 02:55 | back to Visual Studio.
| | 02:57 | Another way of creating a
project is to go to File>New>Project.
| | 03:03 | I'll call this one Silevrapp2. I click OK.
| | 03:09 | This time, I am going to allow Visual
Studio to create this Host the Silverlight
| | 03:12 | application and a new website.
| | 03:14 | I have two possibilities here for
the type of project that I'll create.
| | 03:18 | I can have it create a web
application or an ASP.NET website.
| | 03:23 | I don't want to go into the
differences right now between the two.
| | 03:25 | Those are almost identical.
| | 03:26 | For this one, I'm going to choose
website, and then I get to pick a name if I
| | 03:30 | want, but I'm going to leave it at the default
and then I'm going to click OK. What do you think?
| | 03:37 | Does it look any different?
| | 03:38 | I have a XAML page here.
| | 03:41 | But if I look in my Solution Explorer
on the right edge of Visual Studio, it
| | 03:44 | seems like there is a lot more items over here.
| | 03:47 | If you look closely, you can see that
Silverapp2 is down here, and there is my
| | 03:50 | App.xaml, there is my MainPage, but
up here is a brand-new website that
| | 03:54 | contains regular ASP.NET items, like
here's an ASPX page, here's an HTML page,
| | 04:00 | here's a default page.
| | 04:01 | If you're already an ASP.NET Developer,
this should be very familiar to you.
| | 04:06 | When I go up and I choose Debug start this time -
by the way you don't have to do Build first.
| | 04:11 | If you choose Debug start, it'll
automatically run the Compiler first and then
| | 04:15 | launch the Debugger.
| | 04:16 | So, you could save yourself a step by
going up here, Debug > Start Debugging.
| | 04:21 | Visual Studio has to decide
which of these two projects to run.
| | 04:25 | It can only attach a
Debugger to one process at a time.
| | 04:27 | It determines that by looking at
what you called your startup project.
| | 04:31 | Since Silverlight2.Web is in bold, that
tells me that that's the startup project,
| | 04:36 | but you can change that by right-
clicking, and say Set as Startup Project.
| | 04:41 | Now you see Silverapp2 is in bold.
| | 04:43 | If I run this application by pressing
F5, another way to launch the Debugger,
| | 04:52 | you'll see that I get the page.
| | 04:54 | It's kind of hard to tell because
it's white, but it's the Silverlight page.
| | 04:57 | You see that it's loading the TestPage.html.
| | 05:01 | But if I come back to Visual Studio and
make this my startup project and run, by
| | 05:08 | pressing F5, a couple of
different things happen.
| | 05:11 | First of all, ASP.NET is not set
up for debugging automatically.
| | 05:15 | There has to be a change in the
configuration file, and Visual Studio is
| | 05:18 | prompting me and asking me if
I want to go ahead and do that.
| | 05:20 | Is it okay to modify the
Web.config to enable debugging? Yes.
| | 05:27 | And then another thing that's
different is now it says a local host up here,
| | 05:30 | which means it's running off my local
web development server, whereas before it
| | 05:34 | was just running up the hard drive and
it's now learning that TestPage.aspx and
| | 05:37 | if I right-click, you see
it says Silverlight in here.
| | 05:39 | What you have just seen is a
lot closer to the real world.
| | 05:44 | Most of the time when you create a
Silverlight application, you're going to put
| | 05:47 | your Silverlight item on a webpage,
because that's how your users are going to
| | 05:52 | find your application.
| | 05:54 | There are other movies in this series
that are go into a lot more details on
| | 05:57 | how you add the Silverlight control
to a page - what's actually in here.
| | 06:02 | We'll take a very brief look, but on
this HTML page, I just double-clicked on it,
| | 06:06 | in Solution Explorer.
| | 06:07 | There is a lot of stuff going on here,
which will make more sense when you look
| | 06:11 | at some of the other movies in the series.
| | 06:13 | Down here, of course, it's where
it's actually adding the Silverlight
| | 06:16 | application to the webpage.
| | 06:18 | That's about all I have for this movie,
but I hope you saw was that it's very
| | 06:21 | easy to create Silverlight
applications using the Visual Studio IDE.
| | Collapse this transcript |
| Using Expression Blend to create a Silverlight project| 00:00 | Expression Blend is a great editor for
working with Silverlight applications.
| | 00:03 | In this movie, I'd like to show you how
to create a Silverlight project in Blend.
| | 00:07 | I've already got the Expression Blend 3
interface open and I'm going to create a
| | 00:11 | brand-new Silverlight application.
| | 00:13 | Naturally, you go to the File menu and look
for something like this File>New Project.
| | 00:19 | When you click on the menu item,
it opens this New Project dialog.
| | 00:24 | You can see that Expression Blend
works with both Silverlight and WPF.
| | 00:27 | In Silverlight, there are several
possible projects. The two we're interested
| | 00:31 | in today are the Silverlight Application
and the Silverlight Applications + Website.
| | 00:36 | This creates a standalone app and it
creates a default webpage to host it on.
| | 00:40 | If you choose this option, it creates
the application plus the companion website
| | 00:44 | an ASP.NET website.
| | 00:45 | Let's choose this first option.
| | 00:47 | I'm going to just leave it at the
default name, SilverlightApplication2, and it's
| | 00:52 | going to go into the default location
| | 00:54 | on this machine. You can choose to put
the application wherever you like to go on
| | 00:57 | your machine and click OK.
| | 00:58 | Now in Expression Blend, you have a Project
Explorer over on the left edge of the screen.
| | 01:05 | At the top is your Solution, below
that is your Project, and here are our two
| | 01:09 | XAML files: App.xaml and MainPage.xaml.
| | 01:13 | I'm going to edit the background of
this page and blend the way you edit the
| | 01:17 | background is you would choose the
Route Canvas and you'd go to the Property
| | 01:22 | window on the right edge and pick your color.
| | 01:24 | In the previous movie, I picked an orange color.
| | 01:26 | Now I'm ready to run the application.
| | 01:29 | In Visual Studio, you press F5 to build and
run the application and attach a Debugger.
| | 01:35 | Expression Blend doesn't have a
Debugger, but you'll launch the Silverlight
| | 01:39 | project the same way.
| | 01:40 | You go to Project and you can choose
Build, or you can choose Run, which is the
| | 01:46 | same shortcut key, F5.
| | 01:47 | So, let's just try that. F5, and
there's our Silverlight test page.
| | 01:54 | There's our Silverlight user control.
| | 01:56 | With Expression Blend and Visual Studio,
you use the same project file format
| | 02:04 | and the same solution file format.
| | 02:06 | So, that means that I should be able
to open this brand-new project I created
| | 02:09 | inside Visual Studio.
| | 02:10 | Let's test that out.
| | 02:11 | I'm going to launch Visual Studio.
| | 02:12 | I'm going to go to File>Open>Project.
| | 02:18 | We'll go to the default location, which
is Documents/Expression/Blend 3/Projects,
| | 02:28 | and here's the new application that it's created.
| | 02:31 | Here's that SLN file, which both Blend
and Visual Studio understand, and now I'm
| | 02:38 | editing the project in Visual Studio.
| | 02:40 | And now, of course, I can do things
that will make sense for a developer.
| | 02:43 | I can put breakpoints in here.
| | 02:44 | I can edit my code.
| | 02:46 | I can watch the code as it's running.
| | 02:48 | Let's just verify that it works.
| | 02:49 | Press F5, and it looks exactly the
same as the website we had in
| | 02:54 | Expression Blend.
| | Collapse this transcript |
| Touring the Visual Studio interface| 00:00 | When you become a Silverlight
Developer, you're going to spend a lot
| | 00:02 | of time in two tools.
| | 00:04 | Visual Studio is a great tool for
writing code and editing your XAML.
| | 00:08 | The second tool is called Expression Blend.
| | 00:11 | It has the designer that
Visual Studio is missing.
| | 00:13 | Visual Studio does not have a visual
designer for Silverlight 3 applications.
| | 00:18 | I have Visual Studio open and I'm
going to go up to the File menu and
| | 00:21 | choose File>Open>Project.
| | 00:26 | And then I'm going to go to the
Exercise Files folder, the Getting Started
| | 00:29 | folder and then open this PixelSmith Tour
folder, and then double-click on this sln file.
| | 00:35 | Sln stands for Solution.
| | 00:38 | Solutions can contain multiple projects.
| | 00:40 | I'll click on the Solution.
| | 00:43 | You'll note over in the Solution
Explorer on the right edge of the screen, a
| | 00:46 | number of files and folders have appeared.
| | 00:49 | I'll explain more about
this in a couple of minutes.
| | 00:50 | We also have details about the Solution
Explorer in another movie in this course.
| | 00:54 | I am going to open this MainPage.xaml
file, and what you see here is the main
| | 01:00 | programming language for
Silverlight. It's called XAML.
| | 01:03 | XAML is XML.
| | 01:04 | There is also a code version of this.
| | 01:07 | I can press F7 while I'm in this window to
launch the code version of the same control.
| | 01:12 | As I mentioned, there is another
tool that's called Expression Blend.
| | 01:14 | I'm going to switch over
to Expression Blend now.
| | 01:16 | I've already opened the same solution
in Expression Blend and I've opened the
| | 01:20 | same MainPage.xaml file.
| | 01:23 | Blend has this beautiful
designer for editing your UI.
| | 01:26 | I have another movie in this course
detailing more about Expression Blend.
| | 01:29 | For now, I just want to show you one demo.
| | 01:31 | I'm going to come over to the
Toolbar and click on rectangle.
| | 01:34 | Then we're going to draw the rectangle in
my Artboard and then we'll save the project.
| | 01:40 | I want to turn back to Visual Studio.
| | 01:43 | Visual Studio detects the changes
that I've made inside Expression Blend.
| | 01:48 | That's because both Expression Blend and
Visual Studio are sharing the same files.
| | 01:52 | I'm going to click Yes to All, and
now the changes have been imported
| | 01:56 | into Visual Studio.
| | 01:58 | For the rest of this movie, we're
going to stay in Visual Studio.
| | 02:00 | Let's start by looking at the Solution
Explorer on the right side of the screen.
| | 02:04 | Solution Explorer is a virtual
representation of your file system.
| | 02:07 | It contains folders and files from your project.
| | 02:11 | Below that is the Properties window.
| | 02:13 | The Properties window is not used a
lot during the Silverlight development,
| | 02:17 | but it is in other application
development like WPF or WinForms.
| | 02:21 | On the left side of the
screen is a dockable Toolbar.
| | 02:25 | If you mouse over this section of
your screen, the Toolbar will pop out.
| | 02:29 | You can dock it to the side by
clicking on the Auto-Hide button.
| | 02:33 | Once you've done that, you can
drag these items to your XAML file.
| | 02:37 | Let me show you an example.
| | 02:38 | I'm going to scroll down in
my XAML file, to this area.
| | 02:46 | Line 101, and then I'm going to take this
CheckBox control and drag it over to my XAML page.
| | 02:52 | And as you can see, Visual Studios
dubs in CheckBox and then CheckBox.
| | 02:57 | Now it's time to compile your application.
| | 02:59 | I'm going to unpin this toolbox,
so we get more screen real estate to see.
| | 03:03 | I'd like to spend a minute or
so talking about the Build menu.
| | 03:06 | In any .NET application, you
have to compile your application.
| | 03:10 | In Visual Studio, the compile process is
handled by MS Build, which is a build engine.
| | 03:15 | When I go to the Build menu, I have
three choices: Build Solution, Rebuild
| | 03:21 | Solution or Clean Solution.
| | 03:23 | I should say I have six choices
because I also have Build, PixelSmith,
| | 03:27 | three times down here.
| | 03:28 | The difference is you may have more
than one project inside a solution.
| | 03:34 | I can choose to build the entire
solution in all of its subsets or I can
| | 03:38 | choose to build only one.
| | 03:40 | It's also possible to right-
click over here and choose Build.
| | 03:45 | When you choose Build, it goes out and
verifies that all your code is correct.
| | 03:49 | As you can see, I have some errors in my code.
| | 03:51 | The name 'media1' does not
exist in the current context.
| | 03:55 | And it's having trouble finding
something called PhysicsControllerBehavior and
| | 04:00 | so I have got some issues to fix in my
application before I can successfully
| | 04:03 | deploy my application.
| | 04:06 | There are three choices up here.
| | 04:08 | First is a normal build process where
it gathers up all the information about
| | 04:11 | the Build and runs through the compile process.
| | 04:13 | During the Build process, Visual
Studio caches certain files to make things
| | 04:17 | faster the next time.
| | 04:19 | If I choose Rebuild, it throws out
all the temporary cached files and
| | 04:23 | starts from scratch.
| | 04:25 | And lastly, if I choose Clean Solution,
it throws out all the cached files but
| | 04:30 | doesn't do the second half,
which is to compile the application.
| | 04:34 | You must have a compiled
file for Silverlight to work.
| | 04:37 | I have more details on the compile
process in the programming chapter.
| | 04:40 | Next to the Build button is the Debug menu.
| | 04:42 | In the Debug menu, I can press Start Debugging.
| | 04:46 | Here's the key about the Start Debugging menu.
| | 04:47 | It runs through the build process first.
| | 04:49 | So, if I press F5, it does everything I
just told you about the Build menu, then
| | 04:54 | it starts up Internet Explorer,
launches my application and attaches a Debugger
| | 04:58 | to Internet Explorer.
| | 04:59 | I also have more details
about this in another movie.
| | 05:02 | You're going to spend a lot of time
looking at your XAML and your code.
| | 05:05 | To make your life more pleasant, you can go
to Tools>Options and configure some settings.
| | 05:10 | Let's do that. Tools>Options.
| | 05:14 | The first thing I'm going to
look at is Fonts and Colors.
| | 05:17 | You get to pick your favorite
monospace font or other font here.
| | 05:20 | I like to use Consolas, which
is a Windows Vista/Windows 7 font.
| | 05:25 | It looks very nice on LCD screens.
| | 05:27 | More important is the
area called the Text Editor.
| | 05:31 | Each editor inside Visual Studio has its
own rules on how to color code the text
| | 05:36 | and what are the allowed key words.
| | 05:38 | Therefore, in the Text Editor section,
there are specific tools for configuring
| | 05:42 | each of those text editors.
| | 05:44 | I want to look at the XAML Text Editor.
| | 05:50 | You can control things like how your
words wrap on the screen, whether or not
| | 05:54 | you have line numbers - as you can
see, I have line numbers turned on.
| | 05:58 | I can also control things
like how my Tabs are constructed.
| | 06:02 | The reason I like to use two
spaces while teaching is that I can see
| | 06:05 | more code on the screen.
| | 06:07 | In the Miscellaneous section, I can
auto insert Closing tags and I can auto
| | 06:12 | insert Attribute quotes.
| | 06:13 | I like to have both of those enabled.
| | 06:15 | And then finally, my favorite section is
in the Formatting section, under Spacing.
| | 06:20 | I can tell Visual Studio to layout
my text according to these patterns.
| | 06:26 | The pattern I like is to position
each attribute on a separate line.
| | 06:30 | Here's an example, right here. Header, IsSelected,
FontSize and so on are all on a separate line.
| | 06:38 | I like the way this looks in my screen.
| | 06:40 | I also like to choose Position first
attribute on the same line as start tag,
| | 06:45 | which you can see here on line 110.
The Header attribute is on the same line.
| | 06:50 | You can also control what
happens with empty lines.
| | 06:52 | I like to Collapse multiple empty
lines into content into a single one.
| | 06:57 | Let me show you what that does.
| | 06:58 | I'll click OK here.
| | 06:59 | Add a couple of spaces.
| | 07:02 | I'm also going to move the
FontSize up to this line.
| | 07:08 | So, now it's not on a separate
line and I've got these extra spaces.
| | 07:11 | Now I'm going to format my document.
| | 07:13 | I'll go to Edit>Advanced>Format Document,
or you can use this keystroke, Ctrl+K
| | 07:21 | and then Ctrl+D. Watch what happens.
| | 07:24 | It removes the blank lines.
| | 07:27 | It also rearranges my
attributes the way I like them.
| | 07:30 | We'll be using Visual
Studio a lot in this course.
| | 07:33 | In other movies, I'll be
providing you with more details.
| | Collapse this transcript |
| Touring the Expression Blend interface| 00:00 | Expression Blend is a premiere tool
for editing your UI in a designer.
| | 00:05 | It works with Visual Studio as you might
have seen it in another movie in this course.
| | 00:08 | I'm in the Expression Blend and
I've opened the PixelSmith application.
| | 00:11 | For this demo, I'm going to create a
brand new UserControl, which will allow me
| | 00:15 | to show you some of the tools that
are available in Expression Blend.
| | 00:18 | To do that, I'm going to right-click on
the PixelSmith project and then choose
| | 00:22 | Add New Item, select UserControl.
| | 00:27 | I'm just going to leave it at
the default name and click OK.
| | 00:30 | This is the work area.
| | 00:32 | You can zoom in and zoom out of the work
area by moving down to this Zoom button.
| | 00:37 | This allows me to show you one of
the tools inside Expression Blend.
| | 00:40 | Do you see the four-headed arrow there?
| | 00:42 | That indicates that I can hold down my
left mouse button and I can now move up
| | 00:46 | or down, or left or right to modify the value:
| | 00:50 | up, down, left or right.
| | 00:55 | Many of the UI elements inside
Expression Blend use this feature.
| | 00:59 | There are tools like snap to grid
and snap to guidlines available.
| | 01:04 | If you want to add an item to this
area here, this is called the artboard -
| | 01:08 | this is where you do all your work -
| | 01:09 | you need to move over to your tool
panel and slide down and pick one of these
| | 01:12 | items like a Button.
| | 01:14 | If you click and hold, a slide-out menu pops.
| | 01:16 | Let's try that again.
| | 01:17 | I'm going to click on the Rectangle and hold.
| | 01:20 | If you just do a click,
it only selects the item.
| | 01:22 | So, here there is a
single click, click and hold.
| | 01:25 | I'm going to choose the Button and then
I'm going to draw the button in the artboard.
| | 01:30 | As I'm drawing the button, you can see
sizing handles. You can see that I've snap to
| | 01:36 | the button above it with the red dotted line.
| | 01:39 | Once I've drawn the item, I can
choose one of these two selectors.
| | 01:45 | Blend has two selectors.
| | 01:46 | It has something called the Selection (V)
and it has the Direct Selection (A).
| | 01:49 | Note the letter A and the letter V.
That means that I could press V to turn on
| | 01:54 | this tool and A to turn on
this tool. Let's try it.
| | 01:57 | A, the cursor changed to an arrow.
| | 02:00 | Now I'm going to press V. The cursor
changes to a slightly different arrow.
| | 02:04 | Also, I can see some
different handles showing up.
| | 02:06 | Let's click in this button.
| | 02:07 | I'll press A. So, with A,
I can move the item around.
| | 02:11 | When I have V selected,
then I can see the margins.
| | 02:16 | I can also see the sizing handles.
| | 02:18 | I'm also able to manipulate
things like the rotation of the object.
| | 02:24 | If you move your mouse over the edge of
this dot, it changes from a two-headed
| | 02:28 | arrow to a rounded arrow.
| | 02:30 | Now I can grab this item and rotate the angle.
| | 02:34 | It's just setting something called
a Transform, which you'll learn about
| | 02:37 | later in the course.
| | 02:39 | If you note, there's a little
white dot in the center of the button.
| | 02:42 | That's the rotation center point.
| | 02:43 | So, I can grab that and slide it to a
new location and now when I rotate, the
| | 02:48 | button will rotate around that center point.
| | 02:51 | You can also apply things like
skewing and many other transforms.
| | 02:56 | I'll delete the button by pressing the
Delete key and then I'm going to move
| | 02:59 | this up where I can see it.
| | 03:01 | For the next demo, I'm going to draw an ellipse.
| | 03:04 | I'll go over to my Tool panel, click on
the Rectangle, hold, then choose Ellipse
| | 03:09 | and then I'll come over here and draw my circle.
| | 03:12 | If I want a perfect circle, I can hold
down the Shift key while I'm drawing.
| | 03:18 | I'll choose V to move it to a new position.
| | 03:21 | For the next portion of my demo, I
want to talk about the Properties panel.
| | 03:25 | You'll spend a lot of time over here
modifying the objects in your artboard, so
| | 03:29 | you should learn how they work.
| | 03:31 | The first section is the Brushes section.
| | 03:33 | You can collapse this section by
clicking on the white triangle, like so.
| | 03:40 | When you editing things like Color, you
can come over here and choose to dial in
| | 03:44 | the Color or you can choose to use
the Lightness and Hue and Saturation.
| | 03:49 | If you do not see those values on your
machine, you might need to click and hold
| | 03:53 | on one of these letters, like this,
and then choose like Red, Green, Blue.
| | 03:58 | If you're looking for a property and
you don't see it, one quick way to find it
| | 04:02 | in Blend is to use the Search feature.
| | 04:04 | I can come up here and type search.
| | 04:05 | For instance, let's look for width,
W-I-D, and it shows there are three
| | 04:10 | properties in the Property panel with
the word Width and in the Width property
| | 04:14 | and the MinWidth property
and the MaxWidth property.
| | 04:16 | There is also these little pop out areas.
| | 04:18 | I'm going to turn off my search.
| | 04:21 | When you're in a panel, like say
the Appearance panel, there is a little
| | 04:26 | button here at the bottom called Show advanced
properties, which allows you to see more details.
| | 04:30 | This just gives you a feel for
what you can do with Expression Blend.
| | 04:33 | In other movies in this course, I'll
be providing you with more details.
| | Collapse this transcript |
|
|
2. Project OverviewUnderstanding the Visual Studio project structure| 00:00 | When you create a Silverlight project
in Visual Studio, it uses a template to
| | 00:03 | generate an assortment of application
settings and files and it places these in
| | 00:07 | one or more projects.
| | 00:08 | In this movie, I want to explore
exactly what items are produced for us.
| | 00:12 | I'm in Visual Studio. If you're
following along in the Exercise Files, you're
| | 00:15 | going to want to open the solution
called UnderstandingProjectStructure.
| | 00:20 | I'm going to make my Solution
Explorer a little bit wider here.
| | 00:22 | When I created this project, I permitted
Visual Studio to create the companion website.
| | 00:27 | So, I ended up with two
projects inside one solution.
| | 00:29 | Just for review, a solution is a
container for multiple projects and a project
| | 00:33 | is a container for multiple files and settings.
| | 00:36 | The first project is called
UnderstandingProjectStructure, this is my
| | 00:40 | Silverlight application.
| | 00:41 | My second project is called
UnderstandingProjectStructure.Web.
| | 00:45 | This is my companion website.
| | 00:46 | Just for review, the project that has
the bold text is the one that will start.
| | 00:51 | Since I want my website to start, I
would come down here, right-click, choose
| | 00:55 | Set as StartUp Project, and now when I
run the application by pressing F5 - we're
| | 01:01 | choosing Start Debugging -
| | 01:02 | it will launch this application.
| | 01:05 | All Visual Studio projects have a Properties
node and a Reference node in the tree view.
| | 01:11 | The Reference node contains all of the
files that are going to be included when
| | 01:16 | I compile the application.
| | 01:18 | The Properties node is where I can
change some of the properties affiliated
| | 01:22 | with this application.
| | 01:23 | Let's take a look at the
Properties in a Silverlight app.
| | 01:27 | Double-click on the Properties node.
That will open a new window and on the side
| | 01:33 | of the window are tabs.
| | 01:34 | Each one of these tabs opens up a
form where I change the settings.
| | 01:37 | The only two tabs we're going to look at
today are the Silverlight tab and the Debug tab.
| | 01:41 | In the Sliverlight tab, I can
change the name of my output file.
| | 01:45 | I can change the name of my default namespace,
which is a programmatic piece as part of my C#.
| | 01:51 | I can change my Startup object and I
can also change the name of my XAP file.
| | 01:59 | The XAP file, we'll talk more about
in a later movie, but this is where your
| | 02:03 | application is stored along with all of
your dependency files, like JPEGs and so
| | 02:09 | on, and this is a compressed file.
| | 02:11 | It's very much like a zip file,
except it has an XAP extension.
| | 02:14 | I would also like to look at the Debug tab.
| | 02:18 | In here, the default setting is
usually Dynamically generate a test page.
| | 02:21 | What this means is if I don't have a
companion website and I choose this as my
| | 02:26 | startup and I try to run it, you can't
run a Silverlight application unless you
| | 02:30 | have a webpage to host it on.
| | 02:32 | In this case, Visual Studio will
automatically create a dynamic page, on the fly,
| | 02:36 | for me and then load that in the browser.
| | 02:38 | There are two other important files
in this project. There's App.xaml.
| | 02:43 | This contains application level code
and it also contains a place where I can
| | 02:47 | store global settings, like global
variables and global stylesheets.
| | 02:52 | And it also contains MainPage.xaml,
which, in our case, is the only page we have
| | 02:57 | in the Silverlight app.
| | 02:59 | In a later movie, we'll see
how to create multiple pages.
| | 03:01 | That's all I want to look at in this project.
| | 03:03 | I'll collapse this by clicking in the
Minus sign and then I'll go down and take
| | 03:07 | a look at the website.
| | 03:08 | This is a traditional ASP.NET site.
The key part here is that it has a
| | 03:13 | Reference node and a Properties node
and I'm going to go in and change some of
| | 03:17 | the properties for the ASP.NET application.
| | 03:20 | Remember, you do that by double-
clicking on the Properties node.
| | 03:24 | It also has an Application pane where
you can change Assembly names and so on.
| | 03:28 | But the only one I'm interested in
today is the Silverlight Applications tab.
| | 03:32 | So, what's going on in here?
| | 03:34 | When you create an ASP.NET webpage,
you might have more than one Silverlight
| | 03:38 | project as part of it.
| | 03:40 | Here's where I can configure
Visual Studio to load those projects.
| | 03:44 | By default, when I created my
Silverlight project and I told it I wanted a
| | 03:48 | companion website, it automatically
added my Silverlight project to the
| | 03:52 | ASP.NET application.
| | 03:54 | Well, that's about it for the
tour of the ProjectStructure.
| | 03:56 | What I want you to take away from
this movie is that Visual Studio uses a
| | 04:00 | template to create your Silverlight
application, which generated two separate
| | 04:03 | projects, and each one of these
projects has separate dedicated settings that
| | 04:08 | make sense for that type of .NET project.
| | Collapse this transcript |
| Creating a Silverlight page/UserControl| 00:00 | Silverlight applications are often
composed of many separate UserControls.
| | 00:04 | In this movie, I will show you how
to add additional UserControls to your
| | 00:06 | project and how to change the StartUp Control.
| | 00:09 | I've opened up Visual Studio.
| | 00:11 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:14 | the CreateSilverlightControl solution.
| | 00:17 | I created this project in Visual
Studio, but I did not choose to have Visual
| | 00:21 | Studio create the companion project.
| | 00:23 | So, I just have the
single Silverlight application.
| | 00:26 | There is a single user control in here
called MainPage.xaml. I'm going to double-
| | 00:30 | click on MainPage.xaml.
| | 00:32 | It'll open up the editor. I'll make
the window a little bit narrower here
| | 00:36 | so it's easier to see our XAML and I want you
to note what it says at the top, UserControl.
| | 00:41 | So, UserControl is the type
that is used to create this page.
| | 00:45 | Let me address the odd naming that
occurs in Silverlight before I go any further.
| | 00:48 | In earlier versions of Silverlight,
mostly due to historical reasons, people
| | 00:52 | often used the term Silverlight pages.
| | 00:55 | This is in keeping with traditional names for
web items, for example, webpage or Java page.
| | 01:00 | In reality, however, Silverlight
page was a Silverlight UserControl.
| | 01:04 | That tradition has endured and in
Version 3, both Visual Studio and Expression
| | 01:09 | Blend create a MainPage.
| | 01:11 | An Expression Blend created a UserControl, but
they name it MainPage, which I find confusing.
| | 01:16 | So, just as long as you know.
| | 01:18 | It's called Page in the name only, but
the data type that it's going to create in
| | 01:24 | .NET is a UserControl.
| | 01:26 | Now if that's not confusing enough,
Silverlight 3 debuted a brand-new Page class.
| | 01:32 | So, there really is a Page class now,
which makes this even more brutal, and
| | 01:37 | they should have been called Main UserControl.
| | 01:39 | Let me show you the Page class.
| | 01:41 | File>New>Project. Silverlight has
this new type of project called the
| | 01:48 | Silverlight Navigation Application.
| | 01:51 | Now I have a movie dedicated to this
later in the series, but I want to take a
| | 01:55 | quick look at it now.
| | 01:56 | I'm just going to go ahead and say OK.
Do not create the companion website.
| | 02:03 | Now look what's different here. There
is a MainPage and if I double-click on
| | 02:08 | MainPage, it's still tough type
UserControl and then if I go into the Views
| | 02:13 | folder, let's say, look at this
Homepage here, Home.xaml. What's its data type?
| | 02:21 | Page, but they put them in a Views folder.
| | 02:24 | Pages are used to enable URL-based
navigation of Silverlight applications.
| | 02:29 | Occasionally, you're going to see
things named Pages where they're really
| | 02:31 | UserControls. That's what
I wanted you to see here.
| | 02:35 | Let's go back to the other application.
| | 02:37 | Now the way you can do that in Visual
Studio is go to File>Recent Projects and
| | 02:41 | then choose CreateSilverlightControl.
| | 02:43 | Now we're back where we were and we
were talking about this UserControl.
| | 02:46 | So, the point of this movie is to show
you how you can add other UserControls to
| | 02:51 | your project and that's really simple.
| | 02:53 | Right-click on your
projects, choose Add>New Item.
| | 02:57 | Visual Studio will bring up a dialog
saying what type of item would you like to add?
| | 03:02 | It's suggesting to me
Silverlight UserControl. That sounds good.
| | 03:06 | I'll come in here and
rename this one About, like so.
| | 03:10 | I don't need to put the extension
because Visual Studio will do that work for me
| | 03:13 | and then I'm going to press the Enter key.
| | 03:16 | There is my own new UserControl. There
is a root element, UserControl. Here's
| | 03:20 | my new name, About.
| | 03:22 | Now your Silverlight application has a
problem and the problem is I've got two
| | 03:26 | pages. Which one should I start with?
| | 03:29 | By default, it's going to start with the
one I already have, which is MainPage, but
| | 03:32 | I don't want to start with MainPage.
| | 03:33 | I would like to start with my About page.
| | 03:35 | So, I need to go somewhere in my code
and tell Visual Studio, or more correctly,
| | 03:40 | to tell Silverlight to start with my new page.
| | 03:43 | That is done in App.xaml.
| | 03:45 | App.xaml is where you do
global events, write code
| | 03:48 | that applies to the whole application.
| | 03:50 | So, I'm going to open up App.xaml
and I'm going to go to the C# file.
| | 03:55 | This is called the code-behind file and we'll
talk more about that in details in another movie.
| | 03:59 | Double-click on the CS file and within
this Application class is a Startup function.
| | 04:08 | Functions are called methods in .NET.
| | 04:10 | There is a function in here that's telling it
to start the RootVisual with the new MainPage.
| | 04:16 | All I need to do to make this change
is go and type the name of my new class,
| | 04:21 | About, recompile the
application and start it up.
| | 04:28 | Now to prove that I'm using the About
page, we need to put some text on here.
| | 04:31 | So, I'm going to double-click back on
the About and go over here and I'm going
| | 04:35 | to add a TextBlock, like so.
| | 04:43 | The TextBlock is inside my grid.
My grid is inside my UserControl.
| | 04:46 | This is my About UserControl.
| | 04:48 | If I did everything correctly, I should
be able to go to Debug>Start Debugging
| | 04:52 | and see my new page.
| | 04:57 | All right, so there you go.
| | 04:59 | That's how easy it is to add
your own UserControls to a Project.
| | Collapse this transcript |
| Discovering what happens during a compile| 00:00 | When you compile your Silverlight application,
a number of critical actions are performed.
| | 00:04 | In this movie, I'll show you what
happens during the Build process and
| | 00:07 | what files are created.
| | 00:10 | Microsoft has a
sophisticated build tool called MSBuild.
| | 00:15 | Like other modern build tools, it
uses XML format for the script content.
| | 00:20 | You create the script that contains the
set of instructions for the build tool.
| | 00:24 | The instructions are arranged
in the preferred build sequence.
| | 00:27 | MSBuild then reads the build file and
performs the task in the given order.
| | 00:33 | There are hundreds of predefined tasks,
and if you can't find a task that you
| | 00:37 | like, the system is extensible, which
means you can create your own tasks.
| | 00:43 | When you create a Visual Studio project,
you're really creating a MSBuild file.
| | 00:47 | In fact, here is a little tip.
| | 00:49 | You can open your CSPROJ file in a text
editor and see the Build instructions.
| | 00:55 | When you build your application in
Visual Studio or in Expression Blend, it
| | 00:59 | calls MSBuild, which
eventually calls the language compiler.
| | 01:02 | The language compiler then compiles your C# code
into the finished executable. Let's go and see.
| | 01:09 | Once again, I am back in Visual Studio.
| | 01:11 | If you're following along with the
Exercise Files, you're going to want to open
| | 01:14 | the CompilingYourProject solution file.
| | 01:18 | This is a very simple Silverlight application.
| | 01:21 | It's a standalone app.
| | 01:22 | It only has default items,
App.xaml and MainPage.xaml.
| | 01:27 | When you want to build your
application, you go to your Build menu and you
| | 01:30 | choose one of these three top options:
| | 01:32 | Build Solution, Rebuild
Solution or Clean Solution.
| | 01:34 | The only one we're
interested in today is Build Solution.
| | 01:36 | So, I'll click on Build
Solution. That will call MSBuild.
| | 01:40 | MSBuild is going to invoke my compiler
and when it's done, it's going to issue a
| | 01:43 | status report in the Output
window at the bottom of the screen.
| | 01:47 | Here is my status report.
| | 01:49 | One build succeeded or updated.
| | 01:51 | I had 0 failed builds and 0 skipped builds.
| | 01:55 | Now I am on a really simple project
so I don't have a lot of dependencies.
| | 01:58 | So, there is not much to report.
| | 02:00 | If you want to read more details, here they
are, like here it was compiling my DLL file.
| | 02:06 | Once you have compiled your
application, it also generated some files you
| | 02:09 | can see that it generated a file called
CompilingYourProject.dll, but where are they?
| | 02:14 | You just have to know how to tell
Visual Studio to turn on your hidden files.
| | 02:17 | Let's go to Solution
Explorer and look at this project.
| | 02:20 | Really, this is a simplified
version of your File Explorer.
| | 02:23 | It's not showing you all the files in
your project, but you can enable that by
| | 02:27 | clicking on the Show All Files button up here.
| | 02:31 | Now you get these little white folders.
| | 02:33 | Those represents the files that are
out there on the hard drive, but are not
| | 02:37 | being shown to you inside Visual Studio.
| | 02:38 | Why don't they show you the Bin file?
| | 02:41 | Because it's generated every time you do a
build, you don't need to look at it normally.
| | 02:44 | What's in here? Let's take a look.
| | 02:45 | Double-click on the Bin folder. I just
did a debug build, so I also need to look
| | 02:49 | in the Debug folder.
| | 02:52 | And in here, you'll see there are five files.
| | 02:56 | The most important of these is your DLL.
| | 02:58 | This is the file that contains your code.
| | 03:01 | Not only does it contain code, but it also
contains all the XAML files from your application.
| | 03:07 | So, what the compiler has done is taken
your XAML files and put them inside this DLL.
| | 03:12 | This is good because you never
lose track of that inside your DLL.
| | 03:16 | Next is this one called
CompilingYourProject.pdb.
| | 03:20 | PDB stands for Portable Debug and
these are your debugging symbols.
| | 03:24 | If you're in the Visual Studio and you
want to walk through your code while the
| | 03:28 | application is running, it helps if you
have a debug file, because it contains
| | 03:32 | things that make your
debugging experience more pleasant.
| | 03:35 | The third file I would like to
talk about is AppManifest.xaml.
| | 03:40 | This file contains information
about your application dependencies.
| | 03:43 | I will talk more about this in a later movie.
| | 03:46 | The fourth file is this XAP file.
| | 03:49 | Remember that XAP is pronounced Zap.
| | 03:52 | The XAP file is a compressed file.
| | 03:54 | It really is a zip file with an XAP extension.
| | 03:57 | So, let's open it by
tricking the operating system.
| | 03:59 | I am going to click on this and
change the name to zip, press Enter.
| | 04:04 | Visual Studio is going to warn me
that I am changing the file extension.
| | 04:08 | So, I will say, this is
okay. I know what I am doing.
| | 04:10 | And now I am going to double-click on
the zip file, and you see there is a
| | 04:15 | DLL and my Manifest.
| | 04:17 | Now nice thing about the XAP file is
this is the only file you need to send
| | 04:21 | to your web server.
| | 04:22 | Everything you need for your
Silverlight application to run successfully
| | 04:25 | is inside this file.
| | 04:27 | One more file to talk about, TestPage.html.
| | 04:31 | You might remember from a previous
movie that if you go to Properties>Debug
| | 04:36 | and choose Dynamically generate a test
page, that will create a test harness page
| | 04:40 | for you to try out your application.
| | 04:42 | That's what this file is here, TestPage.html.
| | 04:46 | What this movie has shown is you is
that Visual Studio generates five different
| | 04:49 | files for your output
every time you do a compile.
| | Collapse this transcript |
| Using core runtime assemblies and other assemblies| 00:00 | Silverlight applications
are client-side programs.
| | 00:03 | In order for them to work, the
code must be available on the
| | 00:06 | customer's computer.
| | 00:08 | The mechanism for deploying code in .NET
is called an Assembly, which is nothing
| | 00:13 | more than an especially
configured executable file.
| | 00:16 | In Silverlight, that will be a DLL file.
| | 00:19 | This DLL file must be downloaded to
the customer's computer before your
| | 00:22 | application can start.
| | 00:24 | Your code also uses other .NET classes.
| | 00:27 | So, when you compile your App, you'll
take dependencies on other .NET assemblies.
| | 00:31 | This means that these additional
assemblies must also be available on the
| | 00:35 | customer's computer.
| | 00:37 | Silverlight has a number of assemblies
that are compiled specifically for use by
| | 00:40 | Silverlight applications.
| | 00:41 | They contain all the types that are
necessary to run your App plus hundreds
| | 00:46 | of additional classes.
| | 00:48 | In this regard, they are similar
to the .NET and WPF assemblies.
| | 00:52 | The Silverlight framework has been
relentlessly reworked to be small and lean.
| | 00:56 | This is to enable a fast
install on the client's machine.
| | 00:59 | It has also undergone a complete
security refactoring to ensure that it is safe
| | 01:03 | to run in a browser.
| | 01:05 | There are two sets of assemblies available.
| | 01:08 | The first set is the Core Assemblies.
| | 01:11 | These are essential libraries and are
pre-installed on the client's computer.
| | 01:15 | So, the way of saying this is when
the user install Silverlight, the Core
| | 01:19 | Assemblies are
automatically copied to their machine.
| | 01:21 | I've highlighted the Core assemblies on
the right side of this slide in orange.
| | 01:27 | There are five of them.
| | 01:29 | The nice thing about this is your
application does not need to download these
| | 01:33 | files to the user's computer.
| | 01:36 | The second set are called the SDK Assemblies.
| | 01:40 | These are additional
Silverlight-specific libraries.
| | 01:43 | They are useful but not critical.
| | 01:45 | They are specifically compiled, so they
work with Silverlight, but they are not
| | 01:50 | automatically added to the user's computer.
| | 01:53 | If you want to use something that's
in the SDK assemblies, you have to do
| | 01:56 | some additional work.
| | 01:57 | First, you must add them to your
project in Visual Studio or Expression Blend,
| | 02:01 | and second of all, those must be
downloaded to the user's computer.
| | 02:05 | So, the deficit of this approach is
your download is now bigger because you've
| | 02:09 | decided to choose a Silverlight SDK Assembly.
| | 02:13 | Let's see how this works.
| | 02:15 | I have switched back to Visual Studio.
| | 02:16 | If you're following along with the
Exercise Files, you're going to want to open
| | 02:19 | the CoreRuntimeAndOtherAssemblies solution file.
| | 02:23 | This is a simple project.
| | 02:24 | A core message for this movie is to
show you what files are generated.
| | 02:27 | So, I just have it very
simple application with one page.
| | 02:30 | I am going to build my application,
and then I am going to go look at
| | 02:33 | my References folder.
| | 02:35 | If you open the References folder,
you'll note that I just have the Core
| | 02:38 | assemblies in here,
mscorlib, System.NET and so on.
| | 02:42 | When I compile the application, it
will create that DLL in my XAP file.
| | 02:46 | Let's go and take a look at those.
| | 02:47 | I am going to go up here and choose
Show All Files, and then I am going to
| | 02:51 | scroll down to the Bin folder and double
-click and drill down, double-click on
| | 02:55 | Debug and we're going to find this XAP file.
| | 02:59 | You might recall that the XAP file is
just a ZIP file with another extension on it.
| | 03:04 | In order to look at the contents of
this I just need to go and change the
| | 03:07 | extension to zip, satisfy Visual Studio
that I know what I am doing by clicking
| | 03:14 | on Yes, and then double-click on this ZIP file.
| | 03:17 | Now what I want you to see here is there is
only my DLL and a single AppManifest file.
| | 03:24 | None of the Core DLL files are in here
because they are already on the user's
| | 03:27 | computer and Silverlight assumes that.
| | 03:29 | I am going to add a
reference to an SDK assembly.
| | 03:34 | I think before I do that though I should
delete the ZIP file, because it's going
| | 03:38 | to generate another XAP file and this
will make things easier for me later.
| | 03:42 | Then I am going to go up to my
References folder, and I'm going to tell Visual
| | 03:46 | Studio to use a SDK Assembly.
| | 03:48 | Right-click, choose Add
Reference, scroll down, and find
| | 03:53 | System.Windows.Controls.
| | 03:57 | This assembly contains interesting
controls like the TreeView control.
| | 04:02 | Click OK and what do you see that's different?
| | 04:05 | I now have a new node in the Reference
folder called System.Windows.Control.
| | 04:10 | If I compile my application and go down
to my Debug folder and open up this XAP
| | 04:16 | file, again, I'll have to change the
extension, choose Yes, double-click on the
| | 04:25 | ZIP and here is what I want you to see.
System.Windows.Controls.dll is inside my XAP file.
| | 04:32 | When I deploy my application and the
user runs it for the first time, it's going
| | 04:36 | to take this file, download it to the
user's computer, and it's now going to
| | 04:40 | have a copy of
System.Windows.Controls.dll for it to use locally.
| | 04:45 | It's also possible for you
to use your own assemblies.
| | 04:50 | So, I'll show you an example of how to do that.
| | 04:52 | I am going to go up here and collapse my
main Silverlight Project, and then I am
| | 04:58 | going to add a brand new
project to the Solution.
| | 05:00 | I am going to right-click on the
Solution and choose Add>New Project.
| | 05:06 | What I want to do is build a
library that I will use in multiple
| | 05:09 | Silverlight applications.
| | 05:11 | So, the key thing that I need to
do here is tell Silverlight this is a
| | 05:15 | special version of a .NET assembly
that works with Silverlight Apps, because
| | 05:19 | they are different, they have
different security contexts than say .NET
| | 05:23 | WinForms or .NET WPF Applications.
| | 05:26 | So, I use the Silverlight Class
Library, not the normal .NET Class Library.
| | 05:31 | So, I'll choose Silverlight Class
Library, and I'll call it something
| | 05:34 | like LyndaLib for lynda Library and then
I'll create a Class in here, add a new class.
| | 05:44 | I have this VideoGenerator Class,
and now I am ready to compile.
| | 05:54 | I have two projects.
| | 05:55 | So, if I tell Visual Studio to compile,
it's going to compile both of these.
| | 05:59 | What I want to have happen is I want
this DLL that's generated for LyndaLib -
| | 06:02 | let's go look at that, here is the
Bin folder, here is the LyndaLib.dll -
| | 06:11 | what I want to do is move that
into my Silverlight XAP file.
| | 06:20 | It's really easy to do in Visual Studio.
| | 06:22 | I go to the Silverlight application and
I add a reference here, just like before,
| | 06:28 | Add a Reference. Remember I am in
the Silverlight App now, not the lynda
| | 06:30 | Library, and I click on the Projects tab.
| | 06:34 | These are all the known the .NET
libraries that work with Silverlight.
| | 06:39 | It doesn't know about my library however,
so I will go to Projects and choose LyndaLib.
| | 06:44 | By doing this, Visual Studio will
help me by every time I do a compile,
| | 06:48 | it will first make a copy of LyndaLib
in this folder, and then I will take it and
| | 06:54 | copy it over to this Bin folder.
| | 06:57 | Let's see how that works, Build Solution.
| | 07:02 | Now it says two successful builds.
| | 07:09 | I also can see I have a reference now to
LyndaLib in my References folder and if
| | 07:14 | I drill down into the Bin folder, I'll
have to delete this ZIP file, so I don't
| | 07:19 | get a name conflict later.
| | 07:21 | I am going to rename the XAP file.
| | 07:25 | You should be getting used to this
by now. Press OK or Yes, and then
| | 07:33 | double-click on the ZIP file, and
what's the key thing to takeaway here?
| | 07:37 | LyndaLib is in my XAP file.
| | 07:40 | So, now this will get downloaded to
the user's computer and it's available.
| | 07:44 | Can you see any problems
with this? I can see one.
| | 07:47 | Every single time you run this
application it has to copy these files to
| | 07:50 | the local computer.
| | 07:51 | If these are big files,
it's going to take a while.
| | 07:53 | That's going to mean that your
application is going to be slower starting.
| | 07:56 | Now what I can do is I can cache these.
| | 07:59 | Silverlight has special cache.
| | 08:00 | It's not the web cache.
| | 08:02 | It's a special Silverlight cache.
| | 08:04 | What I can do is tell it
to stash these in the cache.
| | 08:07 | I will stash these files in the cache.
| | 08:09 | And then the first time I run the
application, it will put them in
| | 08:11 | the Silverlight cache.
| | 08:12 | The second time I run the application,
it will use the local copy and I won't
| | 08:15 | have to download these anymore.
| | 08:16 | This is another simple fix.
| | 08:18 | I'll show you how to do it.
| | 08:18 | We'll go up to Properties.
| | 08:21 | Again, this is my Silverlight App,
double-click on the Properties node, come
| | 08:25 | over here to the Silverlight tab,
and choose Reduce XAP size by using
| | 08:29 | application library caching. Done.
Save the project. We'll choose build.
| | 08:34 | Let's see what's different.
| | 08:41 | There is the ZIP file for
System.Windows.Controls and here is my
| | 08:45 | CoreRuntimeAndOther. I don't need
that, and I'll delete this one again.
| | 08:49 | Now, there is two ZIP files and they'll both
get downloaded and the contents of this
| | 08:53 | file will go in the local cache.
| | 08:56 | By now, you should have a better idea
of what files are created and stored in the
| | 09:00 | XAP file whenever you do a compile.
| | Collapse this transcript |
| Deploying your Silverlight application| 00:00 | Once you have compiled your Silverlight
application, you'll want to share it with the world.
| | 00:04 | To do that, you need to
deploy it to a web server.
| | 00:06 | Microsoft has simplified the deployment
story by creating the XAP File format.
| | 00:11 | The XAP file, as it is commonly called,
contains all the necessary files for your
| | 00:15 | application in a nice, compressed format.
| | 00:17 | Just upload the XAP file to your server
and you are ready to go. Well, not quite.
| | 00:22 | You are going to need a webpage
to host your Silverlight content.
| | 00:25 | I talk more about the host pages
in another movie in this series.
| | 00:29 | You also must configure your web
server to deliver the XAP file when asked.
| | 00:34 | If you have Windows server 2008, you
are in luck, as IIS7 on that operating
| | 00:39 | system is already configured property.
| | 00:42 | For other servers, including Apache,
you'll need to set the MIME type for the
| | 00:47 | XAP file extension.
| | 00:49 | I'd like to show you that.
| | 00:50 | I would like to point out that in this
demo I am going to be using my web server.
| | 00:54 | If you don't already have your own web
server set up, you are not going to be
| | 00:56 | able to follow along in the example.
| | 00:58 | I am back in Visual Studio.
| | 00:59 | If you are following along in the
Exercise Files, you are going to want to open
| | 01:03 | the Deploying solution file.
| | 01:05 | Again, this is a really simple application.
| | 01:07 | The only thing in here is a comment
that says what I just said in the intro.
| | 01:11 | Your web server has to have the
MIME type for the .XAP extension.
| | 01:16 | You can use any web server you want, and
here is the actual extension and the MIME type.
| | 01:22 | This is the newest MIME type.
| | 01:23 | Let me go and show you how
it configured this in IIS.
| | 01:26 | I am on Vista, so I am going to
come down here and choose Remote/
| | 01:32 | Desktop Connection.
| | 01:33 | I am going to log in to
my web server and click OK.
| | 01:47 | This is Windows Server 2008 and
I've opened up IIS. I am looking at the
| | 01:51 | different websites that are
available on this web server.
| | 01:53 | And the one I want to modify this one,
which is called Shazzam-tool because I know
| | 01:57 | this one has a
Silverlight application available.
| | 01:59 | So, I am going to double-click on
Shazzam-tool and then I am going to go over
| | 02:04 | here and double-click on MIME Types.
| | 02:07 | These are all the registered MIME Types
that are available to serve from this server.
| | 02:12 | If you scroll down to the X's, you'll
see that XAP extension is already there.
| | 02:17 | But if it wasn't, I could just come
over and click on Add, type in XAP here for
| | 02:21 | the extension and then copy that code I
just showed you in the demo and here is
| | 02:26 | the MIME Type and click OK.
| | 02:27 | That's all you need to do to set it up.
| | 02:29 | Apache and other servers
are just as easy to configure.
| | 02:33 | So, that concludes the remote connection.
| | 02:35 | Let's close that window.
| | 02:35 | Now you are almost ready.
| | 02:38 | All you need to do now is upload your
files to the server and you are ready to go.
| | 02:42 | All you need now is a host HTML page.
| | Collapse this transcript |
| Starting up your application| 00:00 | Get ready to take a trip
through the Start up process of a typical
| | 00:02 | Silverlight application.
| | 00:03 | The key players in this movie are
the Application Manifest file and the
| | 00:07 | Silverlight plug-in.
| | 00:08 | I'd like to walk you through the
process of what happens when you ask for a
| | 00:11 | page that contains Silverlight content.
| | 00:13 | The first step is the user requests an
HTML page from the server, downloads the
| | 00:17 | page and detects that there's
Silverlight content in the page.
| | 00:21 | It does this by seeing that there is an
object tag on the page. Then the browser
| | 00:26 | loads the Silverlight plug-in
because of the MIME type.
| | 00:28 | Once the Silverlight plug-in is loaded,
the browser goes back to the server and
| | 00:32 | asks for the XAP file.
| | 00:34 | I'd like to show you that process.
| | 00:36 | I'm using a tool called Fiddler2.
| | 00:38 | Fiddler is a HTTP Debugging Proxy and it
let's us monitor traffic from a website.
| | 00:44 | I've started up Fiddler and now I am
going to go to my browser and ask for a
| | 00:47 | page that I know contains Silverlight content.
| | 00:49 | I am going to www.shazzam-tool.com,
shazzam-tool is a Pixel Shader Utility that
| | 00:54 | I wrote that you can use to
generate your own Custom pixel shaders.
| | 00:57 | Now I am going to go back to
Fiddler and see the traffic that happened.
| | 01:00 | I've got two requests here.
| | 01:03 | The first result is a 200,
which says I got the page back.
| | 01:06 | Then there is a 304 result, which says
we had to go back to the server and get
| | 01:11 | ClientBin/Shazzam.Silverlight.xap.
| | 01:14 | Now the XAP file is on the local computer.
| | 01:17 | The browser opens a XAP file, which you
remember, is just a Zip file and reads
| | 01:21 | the AppManifest.xaml file.
| | 01:24 | I'll show you that.
| | 01:25 | If you're following along, you are
going to want to open this StartingUp
| | 01:28 | Solution and then click on
the Show All Files button.
| | 01:32 | Build your application and then look
in your Bin folder for the XAP file.
| | 01:41 | If you've changed the extension on
this to zip, you can open it up with the
| | 01:48 | standard Zip utility.
| | 01:51 | Here is the files that are inside the XAP,
| | 01:53 | the AppManifest and all my dll's that I need.
| | 01:56 | Next step is the Manifest contains a
list of assemblies to load, so let's look
| | 02:01 | at the Manifest file.
| | 02:02 | I am going to double-click on AppManifest.xaml.
| | 02:08 | On the bottom-half of the screen,
you see there are three assembly parts.
| | 02:12 | It needs the StartingUp.dll and it needs
System.Windows.Controls.dll and it also
| | 02:17 | needs System.Windows.Data.dll.
| | 02:21 | That's telling the Silverlight runtime
what it needs to load into its own process.
| | 02:27 | The plug-in then loads the Silverlight
runtime and then loads those assemblies.
| | 02:31 | Next, it goes back to the manifest
and reads the manifest to find out
| | 02:34 | information about your StartUp class.
| | 02:36 | Again, we'll go into the AppManifest
and see that up here in the top line.
| | 02:46 | Here is the class that it needs
instantiate, StartingUp.App, and here is the name
| | 02:50 | of the assembly that contains the
code where you will find this class.
| | 02:54 | There is also a note to Silverlight,
which runtime version it needs.
| | 03:00 | App.Constructor raises the startup
event, which we can catch in our code.
| | 03:05 | Our code run a startup procedure and
creates the main page of that class and
| | 03:09 | shows it in the plug-in by setting it to
the root visual. Once that happens, your
| | 03:12 | code starts running.
| | 03:13 | Once your application is running, it
will continue to run forever, unless one of
| | 03:17 | the three things happens:
| | 03:18 | there is an unhandled exception, the
user navigates away from the host page or
| | 03:22 | finally the browser is closed.
| | Collapse this transcript |
| Embedding Silverlight content on web pages| 00:00 | I'd like to talk for a minute about
the differences between a Web page and a
| | 00:03 | Silverlight application.
| | 00:05 | Both are stored on a web server. Both
are downloaded to the client computer.
| | 00:10 | The webpage, however, is
interpreted by the browser engine.
| | 00:13 | The Silverlight application
ultimately must be run inside the Silverlight
| | 00:17 | runtime. To make this work, the
Silverlight application must be hosted on a
| | 00:21 | webpage and must be placed
within the Silverlight plug-in tag.
| | 00:25 | This plug-in is ultimately
responsible for launching your App through
| | 00:28 | the client's browser.
| | 00:29 | This movie teaches you how to
create the plug-in on a web page.
| | 00:32 | I'm in Visual Studio.
| | 00:34 | If you're following along with the Exercise
Files, you are going to want to open the
| | 00:36 | EmbeddingInHost Solution file.
| | 00:39 | This is one of those projects that
has a Silverlight application, called
| | 00:44 | EmbeddingInHost, and a companion website.
| | 00:46 | There is nothing new to talk
about in the Silverlight application.
| | 00:50 | We are going to spend most
of this demo in the website.
| | 00:53 | For convenience sake, Visual Studio
creates this ClientBin folder inside my
| | 00:58 | ASP.NET website and every time I
compile my Silverlight application, it copies
| | 01:04 | some files into this ClientBin.
| | 01:05 | Let's see what's in here.
| | 01:07 | There is my XAP file.
| | 01:09 | There is my XAP file.
| | 01:09 | You remember from previous movies that
that's what contains our compressed data.
| | 01:14 | So, for convenience sake, Visual Studio
copies that over here, and the idea is,
| | 01:18 | at some future point,
| | 01:19 | you're in ASP.NET Web Company and you're
going to deploy this to the application.
| | 01:24 | All you need to do is copy this entire
website, just directly over to your web
| | 01:28 | server and you are done.
| | 01:29 | It's got the XAP file in there.
| | 01:31 | This, however, doesn't make the
XAP file up here on the page itself.
| | 01:35 | To do that, we're also in luck,
Visual Studio creates these two test pages.
| | 01:39 | I'll think I'll take a look at
what's inside this HTML page.
| | 01:43 | The difference between the ASPX
page and the HTML page is very minor.
| | 01:47 | It's just a few characters difference.
| | 01:50 | This is an HTML page.
| | 01:51 | It's got your normal head tags, body tags,
these are some CSS items up here at the top.
| | 01:57 | We've got some JavaScript in here,
including one that's specific to Silverlight.
| | 02:04 | We'll come back and talk about that in a minute.
| | 02:06 | Here is my <body> tag, and let me
narrow this down a little bit, so it's little
| | 02:11 | bit easier to read the comments.
| | 02:13 | I have a note here that says, note there
is no Silverlight XAML in the host page.
| | 02:17 | The XAML is over here in
this MainPage.xaml file.
| | 02:22 | Over here in the web page, we are just
responsible for loading the Silverlight
| | 02:25 | plug-in and telling it which XAP file to load.
| | 02:28 | Let's skip over this <div> tag and
come down here to the <object> tag.
| | 02:33 | This is the actual plug-in.
| | 02:35 | It's an <object> tag that tells the
browser to load the Silverlight plug-in and
| | 02:39 | then down here, it's says the <object>
tag will load the Silverlight plug-in
| | 02:43 | for version 2 or 3.
| | 02:45 | Then down here, it sets the width and
height of the object to 100% and 50%.
| | 02:48 | Like it says here, by default the plug-in occupies
100% of the page, but I can size it as necessary.
| | 02:53 | So, if I run this now, verify that
this is bold, press F5 to run, Enable
| | 03:00 | Debugging, Yes, that'll be okay,
| | 03:03 | and you see that the top-half of the
page is the Silverlight control and the
| | 03:08 | bottom-half down here is HTML.
This is HTML. This is Silverlight.
| | 03:16 | This is the plug-in. I can also
specify to the plug-in settings, like
| | 03:20 | I'm saying, look here.
| | 03:21 | I would like to use this XAP file,
ClientBin, go to the ClientBin and find a
| | 03:28 | file that called
EmbeddingInHost.xap and load that in.
| | 03:32 | If there's an error, I have a JavaScript
error code that I would like you to run.
| | 03:36 | That's up here in the JavaScript
area and there's the onSilverlightError.
| | 03:40 | In case an error happens in your
Silverlight application, it just whites out
| | 03:45 | the Silverlight area on the screen and it
doesn't cause any more problems with a website.
| | 03:51 | I also have set the background
color to yellow and I specified
| | 03:55 | the minRuntimeVersion.
| | 03:57 | This is the version number for
Silverlight 3. And so if I were to change this to
| | 04:01 | like say number 4 here and
try to run this application,
| | 04:04 | what you think would happen?
| | 04:05 | It says I can't load this. I can't
find a version of Silverlight, with
| | 04:10 | this version number.
| | 04:11 | You need to go and load it somewhere.
| | 04:12 | I have a movie later in the series,
talking about how to change the version
| | 04:16 | numbers of your application
and how to control this screen.
| | 04:23 | That showed up because I have
this setting here set to true,
| | 04:25 | "autoUpgrade"="true".
| | 04:27 | Also, I have, down here, the
alternate content. If the plug-in is not
| | 04:30 | available, show this link.
| | 04:31 | There is a lot of other parameters
available here, splashScreenSource, whether
| | 04:37 | it's a windowless
application and many other pieces.
| | 04:39 | So, let me recap what we seen here.
| | 04:41 | You can write your own HTML very
similar to what I've shown you or you can let
| | 04:45 | Visual Studio or Expression Blend write
the Silverlight plug-in in HTML for you.
| | 04:49 | I would encourage you to let Visual
Studio do it because it's so much easier.
| | Collapse this transcript |
| Understanding the end user install process| 00:00 | There are three possible scenarios when
the user arrives at your website: they
| | 00:04 | have Silverlight 3 installed on their
computer, they have a previous version of
| | 00:08 | Silverlight installed on their computer
or they are living in a sad, depressing,
| | 00:12 | Silverlight-deprived world.
There is good news, though.
| | 00:15 | It only takes a few seconds to
resolve Silverlight and best of all, the
| | 00:18 | Silverlight plug-in takes
care of all the details.
| | 00:20 | Let me show you what the install
experience looks like on a computer
| | 00:22 | without Silverlight.
| | 00:23 | I already have Silverlight installed
on this computer and I'll bet you're
| | 00:27 | probably in the same position.
| | 00:28 | So, I'll show you how to test your
application to simulate not having
| | 00:32 | Silverlight 3 installed.
| | 00:34 | I have Firefox open and I'm going to go
to a website that I know has Silverlight.
| | 00:38 | I'm going to go to my Pixel Shader
Utility website called shazzam-tool and
| | 00:43 | Firefox goes ahead and loads the
Silverlight application into the browser.
| | 00:47 | I will now switch to Internet Explorer.
What I have done in Internet Explorer is
| | 00:52 | disable the Silverlight plug-in.
| | 00:54 | That will simulate not
having Silverlight installed.
| | 00:57 | To do that you go to Tools>Internet
Options, select the Programs tab, then
| | 01:02 | click Manage add-ons, find the Microsoft
Silverlight add-on and click the Disable button.
| | 01:12 | You'll get a warning that
you might need to start Internet Explorer
| | 01:14 | but in my case, I do not have to do that.
| | 01:16 | Now I'm going to go to the same
website, shazzam-tool, and Internet Explorer
| | 01:23 | thinks that I need to install Silverlight.
| | 01:25 | This the default look, sometime it's
called a badge that you get when you go to
| | 01:30 | a site that does not have Silverlight
installed. The user is supposed to click
| | 01:33 | here and click on this Run button.
| | 01:37 | Once you click on the Run button,
it'll go through the normal install process,
| | 01:40 | which takes about 20 seconds.
| | 01:42 | The install experience on
a Mac is nearly identical.
| | 01:45 | Some companies like to rebrand this
user interface with their own look.
| | 01:50 | I have Netflix open. I have tried to
run a movie in their Instant Queue while I
| | 01:56 | have the Silverlight add-on Disable.
| | 01:58 | This is what Netflix shows you.
| | 02:00 | You're almost ready to watch this movie,
install the Silverlight plug-in now,
| | 02:05 | it only takes a minute, a few other bits
of information and then some promo down
| | 02:11 | here about watching the movie instantly.
| | 02:13 | If I click the Install Now button, I
get the same installer that I saw with
| | 02:19 | the more generic badge.
| | 02:21 | Later in this movie, I'll show you
how to create your own UI to customize
| | 02:25 | the install process.
| | 02:26 | I'm going to go back and re-
enable the Silverlight plug-in.
| | 02:30 | Back to Internet Options > Programs >
Manage add-ons, choose the Microsoft
| | 02:37 | Silverlight add-on and
click Enable. Then click OK.
| | 02:42 | There's the warning I had
mentioned and now I will press Refresh.
| | 02:47 | I'd like to switch to Visual Studio and
show you some of the details on how the
| | 02:51 | Silverlight Control manages the Auto-update.
| | 02:54 | If you're following along with the
Exercise Files, you're going to want to open
| | 02:57 | the EndUserInstall solution.
| | 02:59 | Within this solution are two projects.
There is the Silverlight project itself
| | 03:03 | and then there is the website.
| | 03:05 | It's helpful to have them command your
website to customize the HTML page that
| | 03:10 | Silverlight Control lives on.
| | 03:11 | I'm going to open the website and
then I am going to go down to the
| | 03:14 | NotInstalledDefaultLook.html page.
| | 03:18 | I'm going to double-click on the file,
and we are going to scroll down and look
| | 03:22 | at the Silverlight Control.
| | 03:26 | Here's the Silverlight Control,
All the normal parameters telling it what
| | 03:32 | Silverlight file to load and so on.
| | 03:34 | And down here is the
minRuntimeVersion I need for my application to work.
| | 03:38 | And I've entered a bogus
version number. There is no 5.0.
| | 03:41 | So, if I try to run this page, I'll
make this my Start page by right-clicking
| | 03:47 | and choose Set As Start Page and
then we will do a Debug>Start Debugging,
| | 03:54 | the Silverlight Control detects that it
already has Silverlight installed, but I
| | 03:57 | do not have the correct version.
| | 03:59 | This time, I get an alternate version
of the UI that says this page requires a
| | 04:03 | more recent version of Silverlight.
Would you like is to install the latest
| | 04:06 | version from the Silverlight website?
| | 04:08 | If I click on Install Now, it takes me
to the Microsoft site and says I can't
| | 04:14 | find a 5.0 version, which make
sense. They haven't shipped it yet.
| | 04:20 | Also on the main page, you see this
Click to install the required version.
| | 04:25 | If I want to brand this with my own
look, we're going to want to change this
| | 04:30 | change this autoUpgrade parameter to false.
| | 04:32 | Then it won't prompt us
with the Microsoft default UI.
| | 04:35 | So, I have another page to check that out.
| | 04:37 | It's called
NotInstalledCustomLook.html. Double-click here.
| | 04:42 | I'll scroll down to the Silverlight section.
| | 04:46 | Again, I have a future
version for the minRuntimeVersion.
| | 04:50 | I've set the autoUpdate to false.
I've included some anchor tags in here.
| | 04:56 | I've written some of my own UI.
| | 04:58 | Let's see what my custom UI looks like.
| | 05:00 | I'll right-click on
NotInstalledCustomLook.html > Set As Start Page, press
| | 05:07 | F5 to run the application.
| | 05:11 | And there is my branded page.
| | 05:13 | It says PixelSmith at the top,
which is the application we are building
| | 05:15 | throughout this course.
| | 05:17 | I can click on this button to launch the
Microsoft Installer or I can click here
| | 05:21 | to go to the Microsoft
Silverlight website and pull the file down.
| | 05:25 | From this point forward, it's
the normal Microsoft install.
| | 05:28 | So, you can see there we can allow the
plug-in to generate the Install page or
| | 05:32 | we can customize the page with our own look.
| | Collapse this transcript |
|
|
3. The Programming SideExploring the relationship between XAML and .NET| 00:00 | You cannot be a Silverlight
developer or designer without being
| | 00:02 | exposed frequently to XAML.
| | 00:04 | XAML, more properly known as
Extensible Application Markup Language, is a
| | 00:09 | declarative way to express your UI
design and it permeates every corner of a
| | 00:14 | Silverlight application.
| | 00:16 | XAML is a declarative way to
describe a related group of items.
| | 00:20 | In Silverlight this is usually a visual
tree of objects, for example, like grid
| | 00:24 | with two columns and three rows,
| | 00:25 | a text box you placed in column 1 row 2
and so on. Because XML is hierarchical,
| | 00:31 | it's near perfect for describing the
hierarchy between instantiated objects.
| | 00:36 | It also makes an intuitive
way to set up properties.
| | 00:38 | Here is and example of a
UI you might want to create.
| | 00:41 | We have a couple of labels, a couple of
text entry areas, called TextBoxes in
| | 00:45 | Silverlight, and an activation button,
just called a button in Silverlight.
| | 00:49 | This is the equivalent XAML.
| | 00:52 | You can see on line 10 we have a grid,
on line 12 through 20, we're defining
| | 00:57 | some rows and columns.
| | 00:59 | On line 22 and 25 we're defining a
TextBlock and then on line 29 through 32
| | 01:06 | we're defining the TextBoxes and
then finally we're defining the Button.
| | 01:09 | You can see that the Buttons are inside
the Grid and you can see that the Button
| | 01:14 | has certain content and you can see
that the Button instructs Silverlight where
| | 01:18 | it wants to go, in this case Grid Row number 2.
| | 01:23 | XAML is not exclusive for Silverlight.
| | 01:25 | Since it is just a way to describe a
tree of .NET object, it is possible that
| | 01:28 | XAML could have been used for any .NET types.
| | 01:31 | In fact, the XAML team is working
with many other teams within Microsoft to
| | 01:34 | enable this scenario.
| | 01:36 | I'll bet that if the Windows forms
team was under active development at
| | 01:40 | Microsoft, you might see them
using XAML as a markup language.
| | 01:43 | XAML is intended to be easy to generate
from tools and it makes it much easier
| | 01:48 | to separate out the
design from the coding tools.
| | 01:50 | Conceivably, each member of a UI team
could use a different tool, Visual Studio,
| | 01:55 | a 3-D modeler, your designers could be
using Expression Blend and the tools would
| | 01:59 | emit the correct XAML.
| | 02:01 | Is XAML a programming language?
| | 02:03 | Well, you can certainly use it like one.
| | 02:05 | Here are some of the similarities
between a language like C# and XAML.
| | 02:09 | They are both a programming language.
They each have their own specific set of syntax rules.
| | 02:14 | Each one of them can
declare variables for reuse later.
| | 02:18 | You can set property values.
| | 02:20 | You can call methods.
| | 02:22 | Methods are what Microsoft calls functions.
| | 02:26 | You can wire up delegates. That means
you can instruct Silverlight to call some
| | 02:30 | code and you can do that in your XAML.
| | 02:33 | Here is an example of some procedural code.
| | 02:35 | This is a C# code.
| | 02:37 | This is the equivalent of the UI
that I showed you a few slides ago.
| | 02:42 | I think this is a lot harder to read.
| | 02:44 | It's harder to see the
relationships between the items.
| | 02:47 | You can see we're creating a Grid up
here at the top, we're defining some rows.
| | 02:51 | I have to then call this RowDefinitions.Add
and then pass in the row that I added.
| | 02:57 | Here I'm creating columns. Here, on line
47, I'm creating a TextBlock, setting a
| | 03:02 | property value, assigning a Grid, Position.
| | 03:05 | I want it to go to row# 0 and column# 0.
| | 03:10 | To me, you can walk through this code
and figure what it's doing, but in a
| | 03:13 | hierarchical declarative language,
it's a lot easier to see the relationships
| | 03:17 | and it's a lot easier for a tool to
show you those with Tree View and you can
| | 03:20 | collapse a section you're
not interested in looking at.
| | 03:24 | XAML was originally created for WPF, but
a lot of teams at Microsoft heard about
| | 03:29 | XAML and then started
adopting it for their products.
| | 03:32 | For instance, the Windows Workflow
Foundation team has picked it up, the XML
| | 03:37 | paper specification, which is
Microsoft's new open source fixed document format
| | 03:42 | and finally Silverlight.
| | 03:44 | XAML is just XML text that gives us all
the benefits of XML, which are listed here.
| | 03:51 | It's very readable.
| | 03:52 | You can archive your XAML and pull it
out five years from now and be guaranteed
| | 03:57 | that you will be able to
read it with a Text Editor.
| | 03:59 | It's easy to generate from tools.
| | 04:01 | It was deliberately designed to be toolable.
| | 04:03 | It's validate-able, which means that
you can verify that the elements you're
| | 04:07 | writing in your XAML are
correct and are permitted.
| | 04:11 | There are two problems with XAML, however.
| | 04:13 | One is that it takes a while to parse
the contents and figure out what the
| | 04:18 | tree of objects is and the second
problem is that the files are larger than
| | 04:22 | the binary version.
| | 04:24 | And that translates into a longer download time.
| | 04:26 | So, when you are writing your
Silverlight application, you can choose to write
| | 04:30 | it with XAML only, Code only,
or a combination of the two.
| | 04:35 | Really, as a developer,
you're going to use both.
| | 04:37 | Sometimes you're going to use XAML and
sometimes you're going to use C# and as
| | 04:40 | we go through the course that's
exactly what you're going to see.
| | Collapse this transcript |
| Choosing a Silverlight programming language| 00:00 | While you can craft your UI with XAML,
the rest of your Silverlight application
| | 00:03 | will use regular .NET code.
| | 00:05 | If you are new to .NET, you might be
wondering which programming language to
| | 00:08 | use, this movie will help you decide.
| | 00:10 | Silverlight is part of the .NET family.
| | 00:13 | It has its own SDK and a dedicated Runtime.
| | 00:16 | If you're not familiar with the term
SDK, it stands for Software Developer
| | 00:20 | toolkit, which is a set of development
tools that allows the software engineer
| | 00:24 | to create applications.
| | 00:26 | It also has a re-factored set of
.NET assemblies, but fundamentally, it is
| | 00:30 | still a .NET technology.
| | 00:32 | In .NET and in Silverlight, you
write code in a .NET language.
| | 00:36 | At compile time, your code is turned
into a special byte code version, known as
| | 00:40 | Intermediate Language or
sometimes it's called IL.
| | 00:43 | This IL is not ready to run on the CPU
however. Instead, it has to go through a
| | 00:49 | second compile at runtime.
| | 00:50 | The runtime compiler is called
the just in time or JIT compiler.
| | 00:54 | It's the JIT compiler's
responsibility to turn your IL into native code.
| | 00:58 | C# and Visual Basic are the most
popular of the .NET languages and I find that
| | 01:03 | they have more similarities with each
other than differences. Since they are so
| | 01:07 | similar and compile down to nearly
identical code, choosing one or the other
| | 01:11 | becomes a matter of personal choice.
| | 01:13 | There have been colossal debates over
the last decade regarding which is better.
| | 01:17 | I say use what you like or
what your company chooses.
| | 01:21 | For this course, I will choose C#.
| | 01:23 | To prove their similarity, I
have a simple example on this slide.
| | 01:27 | On the left side we have C# code and on the
right side we have some Visual Basic code.
| | 01:31 | Line 17 on the C# code is declaring a
class constructor and I'm calling some
| | 01:37 | Initialize Code in here - this is some
Silverlight specific code - and then in C# I
| | 01:42 | have a comment that is two slashes
where the comment in VB is an apostrophe.
| | 01:48 | When you declare a variable on C# use
the name of the type button, the name of
| | 01:52 | your variable and then you say equal new Button.
| | 01:55 | In Visual Basic, you say Dim b As New Button.
| | 01:58 | In Visual Basic, you never put a
semicolon on the end of a line, you just hit the
| | 02:01 | Enter key, whereas in C# you tell the
compiler you're done with the line of code
| | 02:05 | by putting a semicolon there.
| | 02:07 | Here I'm doing a property assignment,
b.Content = and I'm assigning a string,
| | 02:13 | The equivalent VB code is exactly the same
except there is no semicolon on the end and so on.
| | 02:18 | Here I'm declaring an If statement,
checking this condition. If this condition
| | 02:22 | is true then we are going to run this
line of code. VB it's almost same except
| | 02:25 | we have an End If at the
end instead of the End }.
| | 02:29 | Down here is a function.
| | 02:31 | In .NET, we don't call them functions.
| | 02:33 | We call them Methods.
| | 02:34 | So, you declare a method by saying the
scope public, what it's going to return,
| | 02:39 | C# is not going to return any value,
whereas in VB we use a sub for that, to
| | 02:44 | signify that and then there is a name
of our function and here's the parameter
| | 02:48 | that's going into the function, same over here.
| | 02:50 | VB uses As String whereas
C# puts the string in front.
| | 02:53 | As you can see, they're very similar.
| | 02:55 | I'd also like to show you how to create
these in Visual Studio, so let's switch,
| | 02:59 | over to Visual Studio.
| | 03:01 | If you're following along in
Exercise Files, you're going to want to open
| | 03:03 | that choosing language solution file, and what
you can see here is I have two separate projects.
| | 03:08 | The first one is called
CodeInCSharp and the second is called CodeInVB.
| | 03:12 | They look identical, until you open
up this little Plus symbol here under
| | 03:17 | App.xaml and you can see in
here it says, App.xaml.cs.
| | 03:21 | And if you open that little plus
symbol in the VB project, you'll see that
| | 03:24 | this is App.xaml.vb.
| | 03:26 | That's how the compiler knows that
this is a VB file and this is a C# file.
| | 03:30 | If you double-click, you'll see C#
code here and if I double-click on the
| | 03:35 | App.xaml.vb, you'll see Visual Basic code.
| | 03:39 | Creating a project is easy.
| | 03:42 | File>New>Project and here is the key
part, when you're creating a project with
| | 03:47 | the different language.
| | 03:48 | You want to go to the Project type
and choose either Visual Basic or C#.
| | 03:51 | If I want a Visual Basic Silverlight
app, I would click here and then choose
| | 03:55 | Silverlight application and then click OK.
| | 03:57 | You've already seen how to do this in
other movies, so I want to finish the process.
| | 04:01 | Microsoft has been experimenting
with other types of languages recently.
| | 04:05 | These so called dynamic languages
have some benefits for the language
| | 04:08 | implementers and also for the developer.
| | 04:10 | Silverlight supports several dynamic languages.
| | 04:13 | There are two examples on this slide. One is
called IronPython and one is called IronRuby.
| | 04:18 | I'm not going to spend a lot of time on
the syntax here because we're not going
| | 04:22 | to be using either one of
these languages in the course.
| | 04:24 | I just thought you might be interested
in seeing what the syntax looks like for
| | 04:28 | some of these new dynamic languages.
| | 04:30 | Again, it's pretty easy to figure out
here on this line in Python I'm saying
| | 04:33 | b.Text="Hover here" and over here in
IronRuby it's b.text="Hover here."
| | 04:38 | The code looks the same.
| | 04:39 | It looks the same as the Visual Basic code.
| | 04:41 | It's almost identical to the C# code,
except the C# code had a semicolon on the end.
| | 04:46 | As you have seen in this movie, there
are several languages to choose from, each
| | 04:48 | with special syntax that should appeal
to a segment of the programming world.
| | 04:52 | In this course, I'm going to
use C#. Which one will you pick?
| | Collapse this transcript |
| Exploring the code-behind file| 00:00 | In Visual Studio and Expression Blend,
whenever you create a XAML file you will
| | 00:04 | also get a code behind file.
| | 00:07 | What does it mean when I say code behind?
| | 00:09 | If you recall, XAML is really XML text,
primarily used to specify the visual
| | 00:15 | object tree for your control.
| | 00:17 | You are likely to write
code to a sister XAML file.
| | 00:20 | For example, you might define a button
in XAML, but you'll have to write the
| | 00:24 | button click code in C#.
| | 00:26 | The code behind file is the default
location for this affiliated code.
| | 00:30 | You can store the code elsewhere, but
that requires extra work on your behalf.
| | 00:34 | Visual Studio and Expression Blend
always create a code behind file when you
| | 00:37 | make a new XAML file.
| | 00:39 | In Silverlight, each bit of code that you
write is always placed in a code wrapper.
| | 00:43 | This wrapper is known as a type.
| | 00:45 | The most common types use in .NET
are the class type and the struct type.
| | 00:49 | Silverlight uses classes
for the code behind file.
| | 00:52 | When you write your class, you have to
put it in a physical file on your computer.
| | 00:56 | So, I could say code is stored in text files.
| | 00:58 | This means that if you're writing code
for a Silverlight control, it will exist
| | 01:01 | in a file somewhere.
| | 01:02 | And actually, it can exist in more than one file.
| | 01:04 | So, there are several ways you can do this.
| | 01:06 | I could put one class in a single text
file or I can put multiple classes in
| | 01:10 | a single text file,
| | 01:11 | Class A and Class B. I find it's a really
difficult way to work because it's hard to find.
| | 01:16 | It is hard to work with other
developers if you put more than one type in
| | 01:20 | a single text file.
| | 01:22 | And then lastly, you can split the
class and put it in multiple text files.
| | 01:27 | I can write class A and put it in a file.
| | 01:31 | I can write other parts of class A and
put it in a second file and then I have
| | 01:35 | to tell the compiler to put the two of
them together with the partial keyword.
| | 01:38 | I would like to show you how this works.
| | 01:41 | I've switched to Visual Studio.
| | 01:42 | If you're following along with the
Exercise Files, you are going to want to open
| | 01:45 | the ExploringCodeBehind solution.
| | 01:48 | I have three XAML files in this
project: App.xaml, MainPage.xaml
| | 01:54 | and ProductEntry.xaml.
| | 01:56 | These three files represent
the entire UI of my application.
| | 01:59 | If you look at ProductEntry and
click on this Plus sign here in the
| | 02:03 | SolutionExplorer, you'll see there
is another file nested underneath it.
| | 02:08 | This is called the code behind file.
| | 02:10 | This is this how Visual
Studio represents this to you.
| | 02:13 | If I double-click on
ProductEntry file, it opens up the XAML page.
| | 02:19 | If I double-click on the .cs file,
it opens the code behind page.
| | 02:24 | Now these two are linked together.
| | 02:25 | So, let's explain how they are linked together.
| | 02:29 | Go back to my XAML.
| | 02:30 | At the top of my XAML is
a tag called UserControl.
| | 02:34 | This specifies what type
Silverlight is going to create.
| | 02:37 | It could be a user control.
| | 02:38 | It could be a page.
| | 02:39 | It could be other types.
| | 02:41 | If you're a programmer, this means that this
is the base class of our page, ProductEntry.
| | 02:47 | Over here in this next line, it
specifies where to find the code.
| | 02:52 | So, there is two problems we have to solve here.
| | 02:54 | One is where is the file that contains the code?
| | 02:56 | That's over here, the physical file.
| | 02:58 | And then when I compile it, it's
going to turn that into a class and at
| | 03:01 | runtime it needs to know which class to
instantiate, so that's what this line here signifies.
| | 03:06 | Go create an instance of the class,
ExploringCodeBehind, which is the Name,
| | 03:09 | Space, Period and the name
of the class ProductEntry.
| | 03:13 | So, somewhere in my code
should be a class called
| | 03:15 | ExportingCodeBehind.ProductEntry.
| | 03:17 | Let's see if we can find it. Here it is.
| | 03:20 | Here is my namespace,
ExportingCodeBehind and here is my class.
| | 03:26 | Notice the partial keyword here.
| | 03:28 | Remember what I said earlier?
Partial means I can split the code across
| | 03:31 | two separate files.
| | 03:32 | I have a class called ProductEntry that
derives from UserControl, and again that
| | 03:37 | matches the root element here.
| | 03:39 | This is the root element, which
becomes the base class for a type.
| | 03:43 | In Visual Studio, when I press Build
button, Visual Studio will create a
| | 03:47 | third file that's hidden.
| | 03:49 | It's normally hidden away.
We can take a look around and find it.
| | 03:52 | I am going to go over to my Solution
Explorer and choose Show All Files.
| | 03:55 | I am going to Open this obj folder,
and drill down into the Debug folder.
| | 04:01 | In inside here, you'll see one
file for each of my three XAML files.
| | 04:04 | There's a MainPage.g.cs, and a
ProductEntry.g.cs and a App.g.cs.
| | 04:12 | These are generated by the MS
BuildEngine, and this is where the parser
| | 04:17 | instructions for the runtime engine are stored.
| | 04:20 | I am not going to go into a lot of details here.
| | 04:22 | Also if you create any event procedures,
this is where the automatic wiring up
| | 04:25 | of the event procedures goes.
| | 04:28 | But let's just look briefly in here
ProductEntry, see that it's warning us, this
| | 04:32 | was generated by a tool don't touch
anything in here, and down here is public
| | 04:37 | partial class ProductEntry.
| | 04:39 | This is the other
partial piece of my class code.
| | 04:45 | Let's write some code.
| | 04:46 | We've got a ProductEntry, I'd like
to change the background color of the
| | 04:50 | grid when it's loaded.
| | 04:51 | I am going to go to my grid. I am
going to type in the Loaded events.
| | 04:57 | You'll learn more about
this in the XAML chapter.
| | 04:59 | I am going to press Tab to have Visual
Studio name my event procedure, and then
| | 05:04 | I am going to switch over to the code
behind and you'll see that it's written
| | 05:09 | this bit of code for me right here.
| | 05:11 | And I am just going to come in here and
say in my code, LayoutRoot, which is the
| | 05:17 | name of my grid, .Background
= new SolidColorBrush.
| | 05:24 | I am going to choose colors
.Orange and that does it.
| | 05:33 | I need to go to switch my start up
page in my C# file, from my App.xaml and I
| | 05:39 | need to come down here and change this
from MainPage to ProductEntry, and then
| | 05:45 | press F5 to run, and at runtime, my code
in the code behind should run and change
| | 05:50 | the color of the grid.
| | 05:50 | So, I wrote my code in the code behind.
| | 05:53 | I have executed the code because
Silverlight found the code, saw that it was
| | 05:57 | part of the Loaded event, ran the
code and I now see I have an orange
| | 06:01 | background on my UserControl.
| | 06:03 | What I like you to take away from this
demo is that any code that you write has
| | 06:07 | to go somewhere in code and that's
usually going in the code behind the file that's
| | 06:11 | affiliated with the UserControl.
| | Collapse this transcript |
| Debugging Silverlight applications| 00:00 | Sooner or later, you'll run into problems
that can only be resolved by looking at
| | 00:03 | your code in a debugger.
| | 00:04 | Microsoft debuggers have been first-
rate for a long time, and the Silverlight
| | 00:08 | debugger continues the tradition.
| | 00:10 | There are two other tools I would like
to mention, even though I will not be
| | 00:12 | showing them in this movie.
| | 00:14 | They are Silverlight Spy and Fiddler.
| | 00:16 | Debugging an application is
an important skill to learn.
| | 00:18 | If you are new to programming or .NET, I
encourage you to get comfortable with these tools.
| | 00:23 | If you are a seasoned .NET developer,
feel free to skip to the next movie.
| | 00:27 | If you are following along with the
Exercise Files, you are going to want
| | 00:29 | to open the DebuggingSilverlight Solution
and then double-click on MainPage.xaml.cs.
| | 00:34 | In here, I have got some code. I
already have a breakpoint on line 29.
| | 00:39 | You may not have this red dot in Visual Studio.
| | 00:41 | It's very easy to add however,
just click on the gray bar.
| | 00:44 | Now I do not have a breakpoint on this
line. Clicking on the gray bar a second
| | 00:48 | time turns it back on.
| | 00:49 | You can also press F9 to
turn on or off breakpoints.
| | 00:53 | The Debug menu is our main entry
point for all of our debugging tasks.
| | 00:58 | You can choose to start debugging by
choosing this menu item. That will launch a
| | 01:01 | browser, launch your Silverlight
application and attach a debugger to the
| | 01:05 | running browser process.
| | 01:06 | Let me show you an example.
Press Start Debugging.
| | 01:08 | I am going to click on this
first button and I hit my breakpoint.
| | 01:14 | The yellow arrow signifies
that I am at my breakpoint.
| | 01:17 | I can now step through my code by
clicking on this button, which moves one line
| | 01:22 | of code at a time, and I can examine
each line of code or I can shut down the
| | 01:26 | application by clicking on this
button here, the Stop Debugging button.
| | 01:30 | These buttons may be in
different locations on your toolbar.
| | 01:32 | I am going to stop the application.
| | 01:34 | Occasionally, you need to attach a
debugger to an already running process.
| | 01:37 | Let me show you how to do that.
| | 01:39 | I am going to launch the
application without attaching a debugger.
| | 01:42 | I click on the button and I do not hit
my breakpoint, even though the code in
| | 01:48 | there is running. I then go to Debug>
Attach to Process, scroll down the list
| | 01:55 | till I find the browser I am looking
for, iexplore. This is my application.
| | 02:00 | I choose Attach and then I switch
back to my application and click on the
| | 02:05 | button and I hit my breakpoint.
| | 02:07 | When you are at a breakpoint, you have
several choices of how to run your code.
| | 02:12 | You can click on this Step Into button
and then, once you're looking at this
| | 02:16 | line of code, you can hover over the data
to find out what's currently stored in it.
| | 02:20 | I have a string with nothing in it at the
moment. It's got a null value stored in it.
| | 02:23 | But as soon as I step into the next
line of code, you can see that it has the
| | 02:27 | word 'danger' in there.
| | 02:28 | You can also read this information,
by going to your locals window.
| | 02:32 | Again, your version of Visual Studio
may look slightly different than this.
| | 02:35 | I am going to click on Locals, and
then I'm going to click on the stick pin
| | 02:38 | over here to Auto Hide it, so I can see it.
| | 02:41 | Autos and Locals and
Watch all do the same thing.
| | 02:44 | They permit me to watch variables
while the application is running.
| | 02:48 | Autos does things for me automatically.
| | 02:50 | It watches my cursor and gives
me information around my cursor.
| | 02:53 | Locals gives me all of the variables in
scope inside this procedure and Watch is
| | 02:58 | one of my favorites,
because I can add anything I want.
| | 03:00 | I can come down here and type X and
I can see the value of X. I can come
| | 03:04 | down here and type tb.
| | 03:05 | It gives me the results of the text box.
| | 03:09 | I can type in this, which will give me
information about the page that I am on.
| | 03:13 | These little plus symbols here let me
drill down and get more information.
| | 03:17 | I am going to press F5 to continue running.
| | 03:22 | For the next example, I'd like to show
you how you can examine the call stack.
| | 03:25 | I have a breakpoint here in this
Watch Window, and one here in the Array.
| | 03:33 | I don't think I have set one yet in
my call stack. Here it is, right here.
| | 03:37 | I am going to press F9 and then we
click on the button and I am going to step
| | 03:42 | into my code. This time, I am going to
use the keyboard. I am going to press F11.
| | 03:45 | This function
CalculateMonthlyFee is a function in another class.
| | 03:49 | It's over here in this Financial class.
| | 03:51 | So, when I press F11 to step through
the line of code, you'll see that I move
| | 03:54 | into another class and now the
breakpoint is walking through the code over here.
| | 03:59 | If you ever wonder where you are, you
can go to the Call Stack and it will tell
| | 04:03 | you that you're currently in this
method CalculateMonthlyFee and you came from
| | 04:08 | this method calButton_Click.
| | 04:10 | You can switch back and see the
previous line of code by double-clicking here.
| | 04:15 | Now you see I have got a green line
that signifies I am not at this line
| | 04:18 | actually right now but this is
where I enter the other method.
| | 04:21 | And then I can go back to the Call
Stack and double-click on this line to
| | 04:24 | return to where it was.
| | 04:25 | I'll step through the code by pressing F10 and
now you can see, balance has a value of 1590.
| | 04:32 | I am going to press F5 to continue.
| | 04:38 | Arrays are interesting.
| | 04:39 | Arrays hold multiple items.
| | 04:40 | This is an array of doubles.
| | 04:42 | I am going to press F10 to
load this with information.
| | 04:44 | When I hover over it, I get a little
plus symbol, which I can pop open to see the
| | 04:48 | values that are in the array.
| | 04:50 | Here is a list of string.
| | 04:52 | This is the generic list.
| | 04:54 | It can hold multiple items,
but they all have to be strings.
| | 04:57 | So, I'll step through by pressing F10 or
F11 and then I am going to come down to
| | 05:02 | the Watch Window, delete a few of these
lines by hitting the Delete Key and I am
| | 05:08 | going to type in days.
Shows there's 4 items in there.
| | 05:12 | There is another favorite window of
mine called the Immediate Window. I can go
| | 05:17 | to the Immediate Window and
type in days.Add, Saturday.
| | 05:24 | Basically, what the Immediate Window
does is allow me to run one line of code
| | 05:30 | while I'm sitting in a breakpoint.
| | 05:31 | I hit Enter. I come back. I have a five count.
| | 05:35 | It's in red. That tells me this value has
changed and if I open up my days list, I see
| | 05:39 | that Saturday has been added to the list.
| | 05:41 | I'll press F5 to continue.
| | 05:46 | For this last demo, I would like
to talk about breakpoint settings.
| | 05:48 | I am going to put a breakpoint inside
this loop, by clicking over here, then
| | 05:55 | I am going to right-click on the breakpoint
and choose Condition or Hit Count or Filter.
| | 06:01 | Hit Count says I would like to break
when the hit count is a multiple of.
| | 06:04 | So, I can say when the hit count is a
multiple of 50. OK and now I get a little
| | 06:11 | white symbol over there.
| | 06:13 | And what this allows me to do is click
on the button and not have to step over
| | 06:18 | and over through this loop.
| | 06:19 | It will stop when the counter gets to
49, in this case, and I could step through
| | 06:23 | that line of code to see what's
happening, and then I can press F5 to continue,
| | 06:26 | and the next time it hits the
breakpoint, it's a multiple of 50.
| | 06:29 | We are just touching the tip of the
iceberg here in the debugging tools.
| | 06:33 | Remember, if you're new to Visual
Studio be sure and spend sometime and get
| | 06:36 | comfortable with these tools.
| | Collapse this transcript |
|
|
4. XAMLWorking with XAML Elements and Property Attributes| 00:00 | I can state this with complete confidence.
| | 00:02 | If you want to become a Silverlight
developer, you need to learn how to read
| | 00:06 | and comprehend XAML.
| | 00:07 | There is no doubt in my mind that this is true.
| | 00:10 | A natural place to start your
journey to XAML mastery is by studying XAML
| | 00:14 | elements and attributes.
| | 00:16 | Before discussing elements, however, let
me briefly comment on the rules of XML.
| | 00:20 | XAML docs are really XML docs.
Therefore, your XAML must follow all the
| | 00:24 | standard rules of XML.
| | 00:25 | There is really only a handful to learn.
| | 00:27 | A XAML doc or XML doc is
limited to a single root element.
| | 00:31 | In Silverlight, that is
almost always a user control.
| | 00:35 | The other normal XML rules are as follows.
| | 00:38 | When you have attribute values, you
must delimit those with a pair of matching
| | 00:41 | items, like a matching pair of double
quotes or matching pair of single quotes.
| | 00:46 | You have to use proper tag closure.
| | 00:48 | That means you open a tag,
| | 00:50 | you close it with a matching tag with
the Slash on the front or use the special
| | 00:55 | one tag version of that.
| | 00:58 | A XAML element maps to a single .NET class.
| | 01:01 | Here is an example.
| | 01:02 | That class is called
System.Windows.Controls.Button and you will create that in
| | 01:08 | your XAML by doing angle
brackets <Button> like this.
| | 01:13 | Line 9, I am specifying
that I want a button element.
| | 01:16 | The equivalent C# code would be on line 27
in the code example Button b1 = new Button.
| | 01:23 | The Content = "Save,"
| | 01:25 | that is a property assignment.
| | 01:26 | I am assigning a value to a
property in the Button class.
| | 01:29 | So, the equivalent C# is on
line 28, b1.Content = "Save".
| | 01:36 | The angle bracket <Button> is called
an object element. Using that element in
| | 01:41 | XAML is exactly the same as
instantiating an instance of the Button class and
| | 01:45 | calling the default parameterless constructor.
| | 01:49 | XAML elements have several types of attributes.
| | 01:52 | There is one called the Property
attribute that corresponds to the object's property.
| | 01:56 | Here is an example of how you
would set that, Margin = "20".
| | 01:59 | There is a property on a Button
class called Margin and I'm assigning a
| | 02:04 | thickness value of 20 to it.
| | 02:06 | There is also Event attributes.
| | 02:08 | In that case, it
corresponds to an object's events.
| | 02:12 | Here is a sample code.
| | 02:13 | I'm saying on this button, I have a
Loaded event and I have some code called
| | 02:17 | Window_Loaded, which I want you to
invoke, if this event ever happens, if
| | 02:21 | this event ever fires.
| | 02:22 | There is also something
called a directive attribute.
| | 02:26 | That's a parser instruction that
has no programmatic or C# equivalent.
| | 02:30 | For instance, I would like to
assign a localization ID with X:Uid.
| | 02:36 | Localization is used when I want to
have different language-specific strings
| | 02:41 | displayed to the user.
| | 02:43 | Then there is also something
called the Attached property attribute.
| | 02:47 | This is a special syntax we are
working with attached properties.
| | 02:49 | I am going to switch to Visual Studio
and we will take a look at those four
| | 02:52 | types of attributes.
| | 02:54 | This is a typical Silverlight application.
| | 02:56 | If you're following along on the
Exercise Files, you're going to want to open
| | 02:59 | the XamlElements.sln.
| | 03:01 | I have an App.xaml and a MainPage.xaml and in my
Main Page.xaml, I've created a Rectangle class.
| | 03:11 | That's the object element and I've
assigned the four different kinds of properties.
| | 03:15 | This is the fill. This is a regular
property attribute and I am assigning a
| | 03:18 | color of Orchid to that.
| | 03:20 | This is an event property.
| | 03:22 | I'm saying when the mouse enters
this rectangle, call my code called
| | 03:25 | Rectangle_MouseEnter.
| | 03:28 | Here, I'm using a directive
attribute to assign a name to my rectangle.
| | 03:33 | Names are important when you're
writing code, because then it gives a
| | 03:36 | programmatic handle for this rectangle.
| | 03:39 | Lastly, is an attached property.
| | 03:41 | I have a movie dedicated to attached
properties, but what's happening here is an
| | 03:45 | attached property means that one class
exposes the property, in this case the
| | 03:49 | canvas, but I'm setting it on a different class.
| | 03:52 | The Rectangle class is setting the value,
but it doesn't actually own the data.
| | 03:57 | The Canvas class is the one
that's interested in the data.
| | 03:59 | It has a special syntax with a
period in the middle. Canvas.Left.
| | 04:03 | Let's see how you would do that in code.
| | 04:05 | Go to the code behind page.
| | 04:09 | On line 25, I am going to insatiate a
Rectangle class and on line 27, I'm going
| | 04:15 | to set the Property attribute.
| | 04:16 | It's just a simple assignment, Width = 40.
| | 04:19 | Here, I am going to read the value out
of the property and assign it to this
| | 04:23 | double variable called w. This is
how I wire up events in my code-behind.
| | 04:28 | The Rectangle has a MouseLeave
event and I used the special C# syntax.
| | 04:33 | Again, I have another movie later in
the series that deals more with events.
| | 04:36 | That says, please wire up
this bit of code to this event.
| | 04:40 | I don't have any directive attributes,
because they're only usable in XAML.
| | 04:45 | Then finally, this is how
you set an attached property.
| | 04:47 | I go to the Canvas class and call
SetLeft and the I pass the rectangle in and
| | 04:52 | the value that I would like to assign to it.
| | 04:54 | To read an attached property, I go to
the Canvas class and call GetLeft and pass in
| | 04:59 | the rectangle reference and store
that here this double variable called l.
| | 05:03 | For those of you that would like to see
how to do this in a designer, let's move
| | 05:07 | to Expression Blend.
| | 05:09 | In Expression Blend, I've
opened the same project.
| | 05:11 | I am going to double-click on the
MainPage.xaml and I'm going to draw a new
| | 05:16 | rectangle by clicking on the
toolbar and drawing a rectangle here.
| | 05:21 | Then let's assign a
opacity value of let's say 50%.
| | 05:24 | So, we will come over here. One of the
things you can do in Blend is move your
| | 05:28 | mouse over this or just slide with
your mouse to set the value left or right.
| | 05:31 | There is 50% and we will go look
at the XAML that was written for us.
| | 05:41 | There is the property setting.
| | 05:43 | The point here is that you can use a
designer tool and it will generate the
| | 05:47 | XAML on your behalf and there you go.
That's the basics for using objects
| | 05:50 | elements and object properties.
| | Collapse this transcript |
| Investigating XAML namespaces| 00:00 | There are hundreds, if not thousands,
of types available for use in your
| | 00:03 | Silverlight application.
| | 00:05 | If you want to use a .NET type in XAML
file, you need understand XAML namespaces.
| | 00:10 | Using a XAML element in your
Silverlight application is the same as
| | 00:13 | instantiating a .NET class.
| | 00:15 | To reduce the amount of text contained
in the XAML file, Microsoft created the
| | 00:18 | notion of namespace mapping.
| | 00:20 | In .NET code, it's common to put
your types in segregated namespaces.
| | 00:24 | Code that works with files is
stored in a namespace called, System.IO.
| | 00:28 | Code that works with databases is
stored in a different namespace System.Data.
| | 00:33 | This prevents name collisions,
especially when you're working with libraries of
| | 00:36 | other developers' code.
| | 00:38 | On line 23, I am trying to
declare a variable of type FileInfo.
| | 00:42 | This class is written by Microsoft.
| | 00:44 | We also have a library, the lynda
Library that has the FileInfo class.
| | 00:48 | By putting in the lynda
namespace it avoids confusion.
| | 00:52 | The compiler knows which class I want.
| | 00:54 | In XML it's also common to put groups
of elements into namespaces. You can bind
| | 00:58 | to these XML namespaces
with the XMLNS attribute.
| | 01:03 | Here is an example. I have a XML file.
| | 01:06 | In my first element here, I have the
trucks element and I say all of the elements
| | 01:11 | that I want to use should be
validated against this namespace.
| | 01:15 | So, when I use truck, the validating
parser in XML will verify that that is
| | 01:19 | allowed in this namespace.
| | 01:22 | I've also specified that I would like
to work with an additional namespace.
| | 01:25 | This is not the default namespace.
| | 01:27 | So, in XML what you do is you type in XMLNS:
| | 01:30 | and then an alias to the namespace.
| | 01:33 | Then within your XAML, you use the alias.
| | 01:35 | So, on line 8, I am saying I'd like
use the service element or the mechanic
| | 01:39 | element on line number 9.
| | 01:40 | And the validating parser will verify that
the mechanic element exists in this namespace.
| | 01:47 | Silverlight combines these two ideas.
| | 01:49 | It has XML namespaces and .NET namespaces.
| | 01:53 | Common UI elements in Silverlight
are mapped to a special namespace.
| | 01:57 | That defines how the XAML parser knows
that <button> should really
| | 02:03 | be an instance of
System.Windows.Controls.Button and how it knows that rectangle
| | 02:09 | should be an instance of
System.Windows.Shapes.Rectangle.
| | 02:12 | So, that's called namespace mapping,
| | 02:14 | when you take a .NET namespace and a
Silverlight namespace and you say map
| | 02:19 | the two these together.
| | 02:21 | There are two kinds of namespace mapping.
| | 02:22 | One is called pre-assigned.
| | 02:24 | The idea here is that a developer
creates an assembly containing some classes,
| | 02:27 | somebody at Microsoft let's say, and
they add some classes to a .NET namespace,
| | 02:32 | for instance, System.Windows.Shape.Rectange.
| | 02:36 | The developer then creates a unique
identifier called a URI and they add a
| | 02:41 | special tag in their code called the
XmlnsDefinitionAttribute and they say,
| | 02:47 | look, I've already created this predefined URI.
| | 02:51 | Another developer comes along and adds
his known URI to XAML namespace list.
| | 02:55 | There is another one called Ad Hoc.
| | 02:57 | You won't see this in any Microsoft
documentation, because I made this one up.
| | 03:01 | In this case, the library developer
creates an assembly containing some classes,
| | 03:04 | but they don't predefine a new mapping data.
| | 03:06 | So, then later the consumer that's
using that library picks a namespace alias
| | 03:10 | and notifies the parser
where to find the .NET namespace.
| | 03:13 | It probably helps to see an example.
| | 03:15 | So, let's look at one.
| | 03:16 | Here is a default namespace, XMLNS, and
this is the unique URI that Microsoft picked.
| | 03:22 | That's predefined.
| | 03:23 | So, I put that in here.
| | 03:25 | I put another predefine namespace on line
number 4 and now I can come down here and say Grid.
| | 03:30 | And that's going to go look up the
class called Grid inside that namespace.
| | 03:34 | It looks up the mapping and finds
that Grid is really is System.Whatever.
| | 03:38 | Here is a polygon. That's also
coming from a predefined namespace.
| | 03:41 | This is an Ad Hoc namespace.
| | 03:43 | I brought in to scope my assembly.
| | 03:46 | I said I have an assembly called
LyndaLib and I have a namespace inside of
| | 03:50 | that called LyndaLib.
| | 03:52 | And I would like to use that in my XML.
| | 03:54 | So, I give it this alias and then I
come down here and say lynda:StarShape and
| | 03:58 | then a Fill value of
BurlyWood, which is a color.
| | 04:01 | Really quickly, I would like to
look at this in Visual Studio.
| | 04:04 | If you're following along with the
exercise files, you are going to want to
| | 04:07 | open the Namespaces.sln.
| | 04:09 | This solution has two projects in it:
LyndaLib, which contains the StarShape, and
| | 04:14 | namespaces, which is my Silverlight application.
| | 04:17 | I am going to go down and double-
click on the ShowNamespaceMapping file.
| | 04:22 | The demo that I'd like to show now is how easy
Visual Studio makes it to add a Ad Hoc namespace.
| | 04:27 | I will come to the top of my XAML
window and I am going to the type in
| | 04:30 | xmlns:demo = Visual Studio prompts me
and says where would you like to get your
| | 04:41 | .NET types for this new alias you created?
| | 04:44 | I am going to choose LyndaLib, just
like we did before, like you see here.
| | 04:49 | Now I can come down to my body of my
XML, choose demo and I can see that inside
| | 04:56 | there is something called the
StarShape and then there's all the properties
| | 04:59 | available for me to set.
| | 05:01 | That's it for this movie.
| | 05:03 | What I hope you got out of this demo
was how easy it is to do namespace mapping
| | 05:06 | and how Silverlight uses the built-in namespace.
| | Collapse this transcript |
| Converting XAML properties with TypeConverters| 00:00 | When you assign a value to a property
in XAML, there is a high probability that
| | 00:04 | the assignment is processed by a TypeConverter.
| | 00:07 | That is because .NET, in most
cases, is a strong typed framework.
| | 00:11 | What do I mean by strong typed?
| | 00:13 | Let's look at this code.
| | 00:14 | In C #, on line 22, I am declaring a
variable called numbers and I'm giving it a
| | 00:19 | specific type, a list of double.
| | 00:22 | This means I want to store lists and
the only thing I want to store in the
| | 00:24 | list is double values.
| | 00:26 | Then on line 23, I try to assign a value
to numbers, but I'm not using a list of
| | 00:30 | numbers, I am assigning a DateTime = Now.
| | 00:32 | If I try to do this, the C#
compiler will catch this and say you cannot
| | 00:36 | implicitly convert type System.DateTime to
| | 00:40 | System.Collections.Generic.List<double>.
| | 00:43 | Here is another illegal item.
| | 00:45 | This is a string, 200, and I'm trying to
assign a value to a width, which is of type double.
| | 00:51 | So, .NET tries to protect us.
| | 00:53 | It's not usually a good idea to store
something that doesn't belong in a variable.
| | 00:56 | I will get a casting error here.
| | 00:57 | I cannot implicitly
convert type string to double.
| | 01:00 | In that case, I must use either the C #
cast operator or one of the parse methods.
| | 01:04 | In this case, I would use parse.
| | 01:06 | I will take double.Parse. Here is
the string. Go to the double class.
| | 01:09 | You figure what this is is a number and get me
the double value and assign it to this variable.
| | 01:13 | Or here, take weight, which is a double and
I want to store it in a variable of type int.
| | 01:17 | So, run it through the casting
operator and turn it into an int.
| | 01:21 | So, that's the underlying part of .NET.
| | 01:24 | XAML is built on top of that.
| | 01:25 | Let's switch to Visual Studio and see
what happens when we try to do this in XAML.
| | 01:29 | If you are following along with the
Exercise Files, you're going to want to
| | 01:32 | open the XamlTypeConverter.sln and then
you're going to want to double-click on MainPage.
| | 01:38 | I am going to scroll down a little bit.
What's wrong with this line of XAML?
| | 01:44 | It's hard to tell unless you
know a little bit about the type.
| | 01:47 | Background is a brush. This is a
string. That looks like a Type Conversion.
| | 01:53 | I have a string and I am trying to
assign a string to the background.
| | 01:56 | Since that's not possible, when you
compile this, I will go to a TypeConverter
| | 02:00 | and the TypeConverter will look this up,
find out what related TypeConverter
| | 02:03 | there is, run the string purple through
the TypeConverter and out the other side
| | 02:07 | will come the actual brush
that we will assign to this.
| | 02:10 | Here is another example.
| | 02:11 | This is a string to string.
| | 02:13 | The text property expects
the string. I have a string.
| | 02:16 | No casting necessary.
| | 02:17 | Let's continue down and look at the textbox.
| | 02:19 | This is a brush that is no
longer using a color string.
| | 02:22 | This is a using hexadecimal value.
| | 02:23 | Again, this will get passed to the Text
to Brush Converter. This'll get passed
| | 02:28 | from the Text to Number Converter.
This will get passed from the Text to the
| | 02:33 | Enumeration Looked up Converter.
| | 02:35 | So, it will look up the cursor
enumeration and find out what value should be set.
| | 02:39 | If you need your conversion to happen at
runtime instead of a compile time, then
| | 02:43 | you use a special thing
called the MarkupExtension.
| | 02:45 | We have more on
MarkupExtension in another movie.
| | 02:48 | On line 39, I'm saying I
have a background. It's a brush.
| | 02:53 | I don't know until run time.
| | 02:55 | At runtime, go look up a
resource named fireBrush.
| | 02:58 | So, what will happen is it will go up
here to my Resources section, find a
| | 03:04 | brush called fireBrush, which has a
color of Red, and assign that to the
| | 03:10 | background of this textbox.
| | 03:11 | Normally, in .NET Microsoft has
written all the TypeConverters for you, but
| | 03:15 | occasionally you're going
to write your own types.
| | 03:17 | In that case, you would need to
write your own TypeConverters.
| | 03:19 | I thought I'd show you a brief example of that.
| | 03:21 | I have a WeatherControl class over here.
| | 03:23 | It's a user control, has a TextBlock on
it that says the word WeatherControl and
| | 03:32 | in the code-behind for this, I wrote a property.
| | 03:35 | I created a public property called
WeatherBackground and it's of type brush.
| | 03:41 | If I go to use this in my XAML, switch
back to the MainPage, there is going to
| | 03:45 | be a conversion happening here.
| | 03:47 | WeatherBackground expects a brush,
but I am pathing in a string.
| | 03:50 | So, how does it know to turn the
string Sunny into the Yellow solid color
| | 03:54 | brush that they want?
| | 03:55 | The answer is I need to write a TypeConverter.
| | 03:57 | So, I come over here. I double-
click on WeatherTypeConverter.
| | 04:01 | This is the TypeConverter that I wrote.
| | 04:03 | It's the class that derives from TypeConverter.
| | 04:07 | It's called WeatherTypeConverter.
Keep that in mind for later.
| | 04:09 | There is a method called CanConvert.
| | 04:13 | What I do in here is I
look at the incoming type.
| | 04:15 | If it's of type string
then I say, yes, it's okay.
| | 04:17 | I know how to convert that.
| | 04:18 | Return True and collapse this section down.
| | 04:22 | Here is the actual conversion code.
| | 04:24 | I wrote a function called ConvertFrom.
| | 04:26 | I get the incoming value here. That would
be the Sunny string or the cloudy string.
| | 04:32 | I do a little bit of casting here.
| | 04:35 | Then I have a switch statement, which
says, if you get the string Sunny, Return
| | 04:40 | the SolidColorBrush Yellow.
| | 04:41 | So, see how I'mg converting?
| | 04:43 | It comes in as a string.
| | 04:44 | I turned it into a brush.
| | 04:45 | It comes in as a string Foggy,
I turned it into a gray brush.
| | 04:49 | I have one more thing to do.
| | 04:50 | I have to tell .NET to affiliate my
custom converter with my WeatherControl.
| | 04:53 | So, let's go back to
WeatherControl.xaml.cs and see how I did that.
| | 04:59 | On line 16, I said let's affiliate
whenever you go to assign a string to
| | 05:04 | WeatherBackground, call my
TypeConverter and now, I can go over here to
| | 05:08 | MainPage, pass in the string
Sunny and it will get assigned to the
| | 05:12 | WeatherBackground property.
| | 05:13 | Let's see what this looks like. Press F5
and there's my WeatherControl and it has
| | 05:19 | a yellow background.
| | 05:20 | Come back, close the application down,
and switch this to - what was one of my
| | 05:25 | other types? How about we choose Rainy,
switch back to MainPage, run this app,
| | 05:33 | and I should get a Blue
WeatherControl. Success!
| | 05:36 | Now you know a little bit more about
how TypeConverters are called whenever you
| | 05:39 | assign a value to XAML in a non-string property.
| | Collapse this transcript |
| Nesting more complex structure with Property Elements| 00:00 | By now, if you have watched some of
the other XAML movies in this course, you
| | 00:04 | know how to use object elements to
create elements, and how to set values with
| | 00:08 | property attributes.
| | 00:09 | It turns out that property
attributes are inadequate in some scenarios.
| | 00:13 | So, I am going to show you an
alternative called Property Elements.
| | 00:16 | In many scenarios, a
property assignment is simple.
| | 00:19 | For example, assigning a number to a
Width property is easy to express in a string,
| | 00:24 | but with other assignments, it
can get more awkward. Why is that?
| | 00:29 | Well, sometimes the item you want to
assign to a property is itself an object
| | 00:33 | with its own properties that need to be set.
| | 00:35 | The classic example in Silverlight is
when you want to assign a background to an
| | 00:39 | element, but you don't want a simple color.
| | 00:43 | Instead, you think that a multicolor
gradient or a tiled image would make
| | 00:47 | a nicer background.
| | 00:48 | This complexity is difficult
to express within a string.
| | 00:51 | For a short example, look
at the XAML on this slide.
| | 00:54 | As my code notes, this is
Bad XAML, do not mimic this.
| | 00:59 | I have a rectangle.
| | 01:00 | I would like to assign a linear
gradient brush to the Fill property.
| | 01:03 | But in order to do that I need to
create a linear gradient brush and add
| | 01:07 | many gradient stops.
| | 01:08 | The more complex the assignments get, the
harder this gets to write inside a string.
| | 01:13 | To simplify expressing these
complex scenarios, Silverlight has the
| | 01:17 | Property Elements syntax.
| | 01:19 | They can be substituted
wherever a property attribute is used.
| | 01:22 | Some tools, especially Expression Blend,
are notorious for using Property Elements
| | 01:27 | in their generated code.
| | 01:29 | Just to clarify, an object element
results in the instantiation of a .NET type.
| | 01:34 | A Property Element, in XAML,
does not create instance.
| | 01:38 | Instead, it sets the value of a property.
| | 01:41 | Property elements are always nested
inside an object element, and they are
| | 01:45 | distinguished from object elements
by having a period in the element name.
| | 01:50 | Here is a short example.
| | 01:51 | On line 9, I am using a property element,
the Text property, to assign the text
| | 01:58 | value to the TextBlock.
| | 02:00 | And on line 10, I'm setting
the Width property to 150.
| | 02:03 | Let me show you a more detailed
example by switching to Visual Studio.
| | 02:08 | If you're following along with the
Exercise Files, you are going to want to open
| | 02:11 | the PropertyElements solution.
| | 02:13 | And then, you are going to want
to open the MainPage.xaml file.
| | 02:20 | Let's look at our XAML. I have an ellipse.
| | 02:23 | That's an object element.
| | 02:24 | I am then going to set the
Ellipse.Fill property element.
| | 02:27 | I am going to instantiate a linear
gradient brush, and then I am going to set
| | 02:32 | the GradientStops property.
| | 02:34 | To do that, I need three instances
of the GradientStop object element.
| | 02:38 | I would like a Blue stop, and a Green
stop, and a gradient stop with its own
| | 02:46 | nested property elements.
| | 02:47 | In this case, the Offset is equal to 0.7,
and the color is equal to LightBlue.
| | 02:53 | Remember what I said earlier.
| | 02:54 | You can substitute a property
element anywhere that you would use a
| | 02:57 | property attribute.
| | 02:58 | I also thought I would show you, in Blend,
how it generates these property elements.
| | 03:04 | I have switched to Blend.
| | 03:06 | I'm in the same solution I
had opened inside Visual Studio.
| | 03:09 | I'm going to go to this page called
AddPropertyInBlend and then I am going
| | 03:14 | to select my checkbox.
| | 03:15 | I'm going to go to my Property panel
and scroll to the bottom and open the
| | 03:21 | Transform section, and I am going
to use the new Projection property.
| | 03:25 | I am going to come down here, and I am
going to grab the Y value with my mouse,
| | 03:29 | and slide around and set the
value to like say 20 or 30.
| | 03:32 | And you can see, in my designer, that
I'm applying a projection to this checkbox.
| | 03:37 | I will also do the same
thing with the X projection.
| | 03:41 | Then I will switch to the XAML View,
and what you see is that Expression Blend
| | 03:46 | has created a property element
CheckBox.Projection and a plain projection with a
| | 03:52 | rotation Y, and rotation X values set.
| | 03:56 | I encourage you to familiarize yourself
with both the property syntaxes as you
| | 03:59 | will encounter them
frequently in Silverlight examples.
| | Collapse this transcript |
| Assigning runtime data via XAML Markup Extensions| 00:00 | If you need runtime calculation of a
value, and you want to assign that value to
| | 00:04 | a property in XAML, you
must use a markup extension.
| | 00:07 | These handy classes are injected into
your XAML and enable powerful features
| | 00:11 | like binding and resource lookup.
| | 00:13 | Markup extensions let you break away
from the static compile-time assignment of
| | 00:17 | a string to a string, or the other
kind of assignment we have is a string
| | 00:20 | which goes through a type converter and then
is eventually assigned to the destination type.
| | 00:25 | Markup extensions allow us to do it.
| | 00:26 | Run time is go out and run some code, the code
will determine what to return, and then
| | 00:30 | that gets assigned to the destination type.
| | 00:33 | Another way of saying it is they permit
runtime calculation or creation of data.
| | 00:37 | There are four major types of
markup extensions built into Silverlight.
| | 00:41 | Probably the most powerful is Binding.
| | 00:43 | This means to link two elements together.
| | 00:45 | I have a data source value and I
assign it to a property in another element.
| | 00:51 | Template Binding gets a value from a
control template and assigns it to a property.
| | 00:55 | We will learn more about
control templates in another movie.
| | 00:58 | Static Resources allow me to look up a
resource I have already predefined and
| | 01:01 | assign it to a property at runtime.
| | 01:04 | And then lastly, sometimes
you need to turn off the value.
| | 01:07 | In .NET, you do that by assigning
what's called a null value to a reference.
| | 01:12 | If you want to do the same thing in XAML,
you need to use the null markup extension.
| | 01:16 | I think we should look at this in Visual Studio.
| | 01:17 | If you're following along with the
Exercise Files, you should open the
| | 01:21 | MarkupExtensions solution,
and then open up MainPage.xaml.
| | 01:28 | I'll scroll down here to my TextBox.
| | 01:31 | The first markup extension is a Binding.
| | 01:33 | I have a TextBox and I have a second TextBox.
| | 01:37 | The background color of the
first TextBox is set to Goldenrod.
| | 01:40 | In the second TextBox, I am going to
use a markup extension to say at runtime,
| | 01:44 | go find out the bound value, the source
is an element called textHello, and the
| | 01:52 | property that you want to look at
over there is the Background property.
| | 01:56 | So, these two elements should
have the same background color.
| | 01:59 | In this TextBox, I am going to bind to myself.
| | 02:02 | It's called a RelativeSource Binding.
| | 02:04 | I say go to a Binding, read the Text
property on the TextBox, which in this case
| | 02:09 | is Red, and assign that to
yourself to the Background property.
| | 02:14 | This is interesting, because when I run
the application, you can see that the first
| | 02:19 | two text boxes have the same background color.
| | 02:22 | In the third text box, I can type in
values in here like Green or a hexadecimal
| | 02:28 | number to get my colors.
| | 02:34 | That's a self binding.
| | 02:36 | These last two are a
StaticResource and a Null MarkupExtension.
| | 02:40 | Null means to reset to the default and
this is going to look up a StaticResource.
| | 02:44 | Let's look at the XAML.
| | 02:49 | In my StaticResource MarkupExtension,
I am setting the background from a
| | 02:53 | resource that I've defined elsewhere in my XAML.
| | 02:55 | I have defined something called
seaBrush, and if I scroll up here to the top,
| | 03:00 | you can see that I have this
LinearGradientBrush with a key assigned seaBrush.
| | 03:04 | And runtime is finding this brush and
assigning it to the background of that TextBox.
| | 03:08 | And lastly, here is the Null MarkupExtension:
| | 03:11 | Background = '{x:Null}'.
| | 03:14 | The x means it is coming out
of the special XAML namespace.
| | 03:19 | There's only a few markup extensions
in Silverlight, certainly not as many as
| | 03:22 | you will find in its cousin, WPF.
| | 03:24 | Even more disappointing for me is that
Silverlight markup extensions are not extendable.
| | 03:28 | So, that means you cannot
create your own markup extensions.
| | 03:31 | Still, I would say that the few
that we do have are among the most
| | 03:34 | powerful available.
| | Collapse this transcript |
| Digging into the Dependency Property System| 00:00 | When you investigate a visual element a
like the button or a list box, you see
| | 00:03 | a lot of properties.
| | 00:05 | You might be surprised to learn that
most of these properties in Silverlight
| | 00:08 | Elements rely on a special UI system
known as the Dependency Property System.
| | 00:12 | This system was first
conceived and created by the WPF team.
| | 00:16 | This new system enhances the underlying
.NET framework and permits elements to
| | 00:19 | plug into useful services
like animation or styles.
| | 00:23 | It is important for a modern UI to be
responsive to animation input to allow
| | 00:27 | binding to data whether the data is
stored in templates or in data sources.
| | 00:31 | It's also important for it to be
easy on critical resources like memory.
| | 00:35 | And that's the purpose of the dependency system.
| | 00:38 | The core piece of the
dependency system is something called the
| | 00:40 | Dependency Property.
| | 00:41 | As I said earlier, most of
the properties on an element are
| | 00:44 | dependency properties.
| | 00:45 | The button's Font Size property is one example.
| | 00:49 | When you're looking at a Silverlight element,
it's hard to tell a dependency property
| | 00:52 | from a .NET property, just keep this in mind.
| | 00:54 | You can set your Font Size directly in
code, or you can set the Font Size by one
| | 00:59 | of the Silverlight services.
| | 01:01 | Here is an example.
| | 01:02 | I have an animation running.
| | 01:04 | I have the animation changing the font size.
| | 01:07 | If I go to my button and say
what's your current Font Size?
| | 01:09 | The Silverlight services are
going to say, wait a minute.
| | 01:12 | I have to figure this out.
| | 01:14 | It's going to go calculate the value.
| | 01:16 | It's going to see if there is an
animation running, and other services running.
| | 01:19 | It's going to determine which one has
precedence and it's going to give me back
| | 01:22 | the result based on what it looks up.
| | 01:24 | Let's go see how you set
dependency properties in Visual Studio.
| | 01:27 | If you are following along with the
Exercise Files, you are going to want to
| | 01:30 | open the
DiggingIntoDependencyProperties solutions.
| | 01:33 | And the first file you are going to
look at is this one called SettingDPInCode.
| | 01:38 | Double-click on the C# portion of that,
the code behind and then scroll down to
| | 01:42 | this section here, line 24.
| | 01:47 | This is the Font Size property on the button.
| | 01:49 | Here, I am assigning a value of 40.
| | 01:51 | It looks just like a normal .NET assignment.
| | 01:54 | That's because the author of the
button wrote a .NET wrapper so I can access
| | 01:59 | it directly like this.
| | 02:01 | To read the value, I can go to the
instance of the button and ask for the
| | 02:04 | FontSize and then store it as a variable.
| | 02:07 | If I would rather bypass the .NET
wrappers and go directly to the dependency
| | 02:10 | system, I use the SetValue or
the GetValue methods on the object.
| | 02:17 | Here I am setting the value.
| | 02:18 | So, I call SetValue and I pass in the
name of the dependency property, FontSize
| | 02:23 | property, and the new value that I want.
| | 02:26 | On line 31, I am calling GetValue,
retrieving the FontSize property, and then
| | 02:32 | casting it to a double, because the
dependency system stores it as an object.
| | 02:36 | As I mentioned earlier, one of the
most notable features of dependency
| | 02:39 | properties are that many different
Silverlight services might be attempting
| | 02:42 | to set the DP value.
| | 02:44 | Silverlight takes a look,
prioritizes each service and the highest
| | 02:47 | priority service wins.
| | 02:48 | Here is the priority resolution.
| | 02:52 | Down at the bottom is the lowest priority.
| | 02:55 | When you create a dependency
property, you can pick a default value.
| | 02:58 | The next highest priority is
Property Value Inheritance.
| | 03:01 | That means that if you have a value set on a
parent, it can trickle down to its children.
| | 03:05 | Next in the list comes Styles.
| | 03:07 | Styles take precedence over
Property Value Inheritance.
| | 03:10 | We will learn more about
styles in another movie.
| | 03:13 | Then there's Local Value.
| | 03:14 | What do I mean by Local Value?
| | 03:16 | That means I am setting it directly
in my XAML, or I'm applying it in code.
| | 03:20 | And then lastly, the highest
priority service is Animation.
| | 03:24 | So, if I have written some code that
sets the value to 20 for the FontSize
| | 03:28 | and an animation is running, and it's currently
at 30, what do you think the FontSize would be?
| | 03:33 | The answer is 30,
because it's a higher priority.
| | 03:35 | I've got another demo that
shows the Priority Resolution.
| | 03:38 | So, I will switch back to
Visual Studio, and close this window.
| | 03:43 | You are going to want to open
this one called OrderOfPrecedence.
| | 03:46 | We are going to be working with TextBoxes,
and see what the order of precedence is.
| | 03:55 | This first TextBox, I have not
assigned any value to the Background property.
| | 04:00 | Therefore, it will use the default.
| | 04:02 | In the second TextBox, I have done a local
value assignment because I have set it in my XAML.
| | 04:08 | Let's run the application by
pressing F5, and see what these look like.
| | 04:12 | Here is my browser.
| | 04:15 | The first TextBox is using the
default background, which is white.
| | 04:18 | The second TextBox is blue
because I assigned it in my XAML.
| | 04:22 | In the third example, I am going to
click on this button and I have some code
| | 04:26 | that's going to assign a background brush.
| | 04:29 | You see that that takes
precedent over the white default value.
| | 04:32 | And I can then clear that by clicking on
this button, which sets it back to the default.
| | 04:38 | There is a difference between setting
it back to the default, and assigning
| | 04:41 | a white brush to it.
| | 04:42 | How do I solve this problem?
| | 04:44 | Let's go back to Visual Studio and
look at my C# code, double-click on this
| | 04:49 | OrderOfPrecedence.xaml.cs file.
| | 04:56 | Here's how I assign the brush.
| | 04:58 | I create a brand new SolidColorBrush
and assign it to the background. That takes
| | 05:01 | precedence over the default.
| | 05:03 | And here I'm clearing the value.
| | 05:05 | I'm not assigning a white brush.
| | 05:07 | I am calling codeTextBox.ClearValue
and then I am saying here is the value in
| | 05:11 | his TextBox I want you to clear,
the TextBox's Background property.
| | 05:15 | Now it's back to the default of white.
| | 05:18 | What's next in our order?
| | 05:19 | Let's switch back to the browser and look.
| | 05:21 | Here I have got a pink background.
| | 05:23 | It says it's set via style.
| | 05:25 | So, let's take a look.
| | 05:27 | Go back to Visual Studio, back to my XAML.
| | 05:32 | On line 88, I have a TextBox.
| | 05:35 | It has a style applied to it.
| | 05:36 | We will learn more about
styles in another movie.
| | 05:39 | If I scroll to the top, you'll see that I
have a style up here called myStyle, and it
| | 05:46 | has a Property Setter that says the
Background property should be Pink.
| | 05:50 | So, that takes
precedence over the default value.
| | 05:55 | In this TextBox, however, look what's happened.
| | 05:57 | We have got conflicting settings.
| | 05:59 | I have a Style set, the same
style as before, but I have also said
| | 06:03 | Background equals LightBlue.
| | 06:04 | And if you remember the order of
precedence, Local takes precedence.
| | 06:10 | So, even though it had the style
assigned, the local blue color is what I see.
| | 06:14 | In the next example, I
show Property Inheritance.
| | 06:18 | I have a text block and the size of the
font in this text block is coming from
| | 06:23 | somewhere, we can't see where yet.
| | 06:25 | In the second text block, we can
see we have assigned it directly.
| | 06:29 | Where is the size of this one coming from?
| | 06:32 | Through property inheritance, it's
coming from the UserControl, FontSize = 14.
| | 06:36 | So, this percolates down to all of the
children elements who don't override it
| | 06:39 | by assigning their own local values.
| | 06:41 | And lastly, I said that
animation takes precedence.
| | 06:45 | I will switch back to my browser and I
click on this Start Animation button.
| | 06:49 | This TextBox Background is currently
red, because I have a locally assigned
| | 06:55 | value of Background Red.
| | 06:56 | But when I click on the button,
it's going to start an animation, which
| | 06:59 | will modify that value.
| | 07:00 | And you can see it changing from blue to
white, and then over here, I am reading
| | 07:10 | the current value on a timer.
| | 07:12 | So, you can see that this is
the currently assigned value.
| | 07:15 | So, even though it's set in Red in my
XAML, it's not red anymore because the
| | 07:18 | animation is changing the value.
| | 07:20 | Now, there is a lot going on in this demo.
| | 07:23 | I really encourage you to spend some
time going through the examples yourself,
| | 07:26 | so you can get more comfortable with
the prioritization levels available within
| | 07:29 | Silverlight dependency properties.
| | Collapse this transcript |
| Creating a custom Dependency Property| 00:00 | You are far more likely to use a dependency
property than find the need to create one.
| | 00:04 | Nevertheless, there will be times
when making a dependency property is
| | 00:07 | appropriate, like when you create a
custom user control and need to configure
| | 00:11 | some of its properties as dependency properties.
| | 00:13 | If you were to implement these
properties only as .NET properties, then sooner
| | 00:17 | or later, you will discover that you
have created a UI Element that cannot be
| | 00:20 | animated or styled, and that
would be a tragedy. So, let's review.
| | 00:24 | The Dependency Property System
exists to provide services to your
| | 00:27 | Silverlight elements,
| | 00:28 | for instance, the services like
animation or control templates or styles.
| | 00:33 | Your elements can also partake of these
services, but in order to do that, you
| | 00:38 | have to register with the
dependency property system.
| | 00:41 | And that means you have to write
what I call ugly registration code.
| | 00:45 | You will see what I mean about
this ugliness in a few seconds.
| | 00:50 | Microsoft has a naming convention,
which you can follow if you like.
| | 00:53 | Microsoft always applies the property
suffix to all dependency properties.
| | 00:58 | So, the FontSize property
becomes the FontSizeProperty.
| | 01:02 | Now when I say it, they sound exactly
the same, but if you look at the slide,
| | 01:05 | you can see they are different.
| | 01:06 | This is the FontSize property and that
becomes something called FontSizeProperty
| | 01:10 | with no space between the Size and Property.
| | 01:14 | Here is one line of the registration code.
| | 01:16 | I'm going and saying, I want
to register a Points property.
| | 01:20 | This is the name I just showed you and I
want to register it with the dependency
| | 01:25 | system and here are some
details about the registration.
| | 01:27 | I think it's better to
look at this in Visual Studio.
| | 01:30 | So, here I am in Visual Studio, once again.
| | 01:33 | If you're following along with the
exercise files, you're going to want to open
| | 01:36 | the CreatingCustomDependencyProperty
Solution and then you're going to want to
| | 01:40 | open the MainPage.xaml.
| | 01:43 | In here, I'm using a StarShape that I created.
| | 01:46 | I created my own custom
user control called StarShape.
| | 01:49 | I've brought it into scope by bringing
the namespace in to scope up here in line 6.
| | 01:54 | It has a property that I wrote called
the Points property and this allows me to
| | 01:58 | change the number of points on the star.
| | 02:00 | Let's see what this looks like.
| | 02:01 | We'll press F5 to run and you see
that I have two 5-pointed yellow stars.
| | 02:05 | Now something is not quite right yet,
because I said I wanted six points here.
| | 02:11 | I'm only getting five.
| | 02:12 | We'll go look at the StarShape itself.
| | 02:15 | I'm not going to look at the XML.
| | 02:16 | That's not very important.
| | 02:18 | The important part is what's in the C# file.
| | 02:22 | Here's our registration.
| | 02:23 | The first thing I'm going to do to
register my dependency property is to create
| | 02:26 | a variable in my code called
PointsProperty and the datatype of this variable
| | 02:32 | is DependencyProperty.
| | 02:34 | There are some other keywords.
Public expresses its scope.
| | 02:37 | Static means this is available without
having to instantiate the StarShape and
| | 02:41 | readonly means that you can only set
the value in the static constructor.
| | 02:45 | And I have one of those,
right here, static StarShape.
| | 02:48 | That's my constructor.
| | 02:49 | Inside my constructor, I'm going to
register by going to the Dependency Property
| | 02:53 | class and calling its
static method called Register.
| | 02:56 | Then I provide several pieces of data:
the short name of my property, the
| | 03:01 | datatype of my property and the
type that it's affiliated with, StarShape.
| | 03:06 | We'll ignore this parameter for the moment.
| | 03:11 | Optionally, you can
create your own .NET wrapper.
| | 03:14 | This is a C# property, called Points.
| | 03:18 | And when you go to get the value for
the point, it really just calls out to the
| | 03:22 | Dependency System and says, hey!
| | 03:23 | What's the current value of the Points property?
| | 03:26 | When you go to set the value, it comes
in and says, okay Dependency Property,
| | 03:30 | while it's doing a direct
assignment of the property.
| | 03:33 | This is for convenience so that VB
programmers and C# programmers can set it
| | 03:37 | directly in code without
having to do it through XAML.
| | 03:39 | I've got my Dependency Property changed.
| | 03:41 | Now I can create an animation and change the
value of the points from 5 to 6 on the animation.
| | 03:45 | I still have one problem left
though is that when I changed the number,
| | 03:48 | it doesn't actually
changed the number of points.
| | 03:51 | For me to make that work, I have to
register what's called a callback.
| | 03:54 | We'll go up here and I'll
uncomment these two lines of code.
| | 03:58 | I will comment this one out.
| | 04:02 | Let me explain what the code is doing.
| | 04:05 | I'm doing the same registration as
before, except in the last argument, I'm
| | 04:10 | creating a PropertyMetadata.
| | 04:12 | This is extra data that I'm going to
give to the Dependency System by saying the
| | 04:15 | default value -- if I don't provide
any value, it's 5. I want 5 points.
| | 04:20 | I have a callback. If
the value ever changes, Mr.
| | 04:23 | Dependency System, you need to go
out and find this method down here, the
| | 04:27 | propertychanged and run my code.
| | 04:31 | All this does is look to see if I pass
in a number 6, and if so, then I show my
| | 04:35 | 6-pointed star.
Otherwise, I show my 5-pointed star.
| | 04:38 | Now let's run this a second time, and
you see I have a 6-point star in the
| | 04:42 | bottom and a 5-point star on the top.
| | 04:44 | Dependency properties are hugely
important for you to learn, especially if you
| | 04:48 | are going to create custom user controls.
| | Collapse this transcript |
| Understanding Attached Properties| 00:00 | Often, in UI applications there is a
conversation taking place between your UI elements.
| | 00:04 | Imagine that you have a tree view
and a few other controls inside a form.
| | 00:08 | The tree view indicates to the form
where it should be placed on the screen.
| | 00:11 | This might be done with absolute
coordinates are depending on the
| | 00:14 | form implementation,
| | 00:15 | the tree view might indicate the
location with a dock property or by
| | 00:18 | specifying an anchor value.
| | 00:20 | The problem with this model, which is
actually an older model from the Microsoft
| | 00:23 | Windows Forms framework, is that you end
up with tight coupling between the form
| | 00:27 | and any controls that are hosted by the form.
| | 00:30 | If an innovative new layout ID appears,
both the form and every hosted control
| | 00:34 | must be changed to make this work.
Granted you can create a control base class
| | 00:38 | to mitigate some of the
coupling, but there's a better way.
| | 00:40 | That better way is called the attached property.
| | 00:43 | The attached property is a dependency
property, which means that's it's managed
| | 00:46 | by the dependency property systems.
| | 00:48 | And it helps provide a
decoupled extensible model.
| | 00:52 | You can think of attached properties as
global properties, global in the sense
| | 00:56 | that they are available as
a property on any XAML type.
| | 00:59 | They are defined within a type or owned
by a type, let's say, the Canvas class.
| | 01:04 | The Canvas then has to register that type.
| | 01:06 | It does that with the
DependencyProperty.RegisterAttached method.
| | 01:11 | Once that is done, then the property is
no longer isolated to the Canvas class.
| | 01:15 | Any other element can set
the new attached property.
| | 01:19 | It uses the special dotted syntax,
which is the TypeName canvas, dot,
| | 01:23 | and then the AttachedProperty.
| | 01:25 | I would say that the most common place
that you see attached properties are in
| | 01:28 | the Layout panels, like the
canvas or the grid or the dock panel.
| | 01:33 | They use attached properties to let
their children elements know where they want
| | 01:36 | to be positioned on the screen.
| | 01:38 | Let's take a look at the key points here.
| | 01:40 | An attached property value is
stored in the dependency property system.
| | 01:43 | That value that is stored is associated
with an element that assigns the value,
| | 01:47 | let's say, a button that's inside a canvas.
| | 01:50 | The owning class, again the canvas, will
ask the dependency property for the value.
| | 01:55 | And then it will make a decision
about what to do with that value.
| | 01:57 | I think we should go
look at a couple of samples.
| | 02:00 | I'm in Visual Studio. If you're
following along with the exercise files, you're
| | 02:03 | going to want to open the
UnderstandingAttachedProperties Solution, and then
| | 02:07 | you're going to want to double-
click on main page to open it.
| | 02:12 | We are going to start by
looking at this radio button element.
| | 02:15 | The radio button is setting a
toolTipService.toolTip = Sample.
| | 02:20 | That is an attached property.
| | 02:22 | Let's see what happens if I come in
here and I put another radio button in and
| | 02:27 | then I get the dropdown list.
| | 02:28 | All of these items that you see
here like Background, BorderThickness,
| | 02:33 | Cachemode, these are dependency
properties, not attached properties.
| | 02:37 | And they have been registered and
they're available to use in this button.
| | 02:40 | So, I can set BorderThickness equal to whatever.
| | 02:43 | If I pick a non-existing property,
like say ABC, I'm going to get a parser
| | 02:50 | error, because the radio button does
not have a dependency property called ABC.
| | 02:56 | Well, the radio button also does not
have a toolTipService.toolTip property, but
| | 03:01 | because the toolTipService class
registered the toolTip property at an attached
| | 03:06 | property, I'm allowed to use it here.
| | 03:10 | Here is how it's used elsewhere. I have a grid.
| | 03:13 | This list box is using the attached
Grid.Column property to say that it wants to
| | 03:17 | go in the fourth column.
| | 03:18 | This TextBlock is saying, if I'm inside
a canvas, I want the canvas to place me
| | 03:23 | 50 pixels from the top.
| | 03:25 | Is the TextBox inside a canvas? No.
| | 03:28 | But it stored that value in the
dependency system and it's wasted memory, but
| | 03:32 | it's not going to cause a parser error.
| | 03:34 | Here are more examples down here.
| | 03:37 | I am in the CheckBox class.
| | 03:40 | I'm setting its Canvas.Left.
| | 03:42 | I'm sitting its AutomationProperties. I'm
affiliating this AcceleratorKey with the CheckBox.
| | 03:47 | Here, I'm telling you whether the ScrollViewer.
VerticalScrollBarVisibility should be hidden.
| | 03:52 | It doesn't make any sense for the
CheckBox to have the ScrollViewer, but for
| | 03:55 | other elements, it might make sense.
| | 03:57 | That's all I have for attached properties.
| | 04:00 | As I've said, they are commonly used
with layout panels and you can find more
| | 04:03 | information about their usage
in other movies in this series.
| | Collapse this transcript |
|
|
5. Layout ContainersUnderstanding layout| 00:00 | A good UI rendering engine must facilitate
placing elements and positions on the screen.
| | 00:05 | This is called layout and it means
what the name implies, controlling the
| | 00:09 | location and sizes of a section of the screen.
| | 00:12 | A great layout system will prove
resilient to changes in browser size and font
| | 00:17 | settings and it will also remember
spatial positioning between related elements.
| | 00:22 | For example, your toolbar buttons should
remain together in a horizontal row in
| | 00:25 | spite of changes to the
top location of the toolbar.
| | 00:28 | Silverlight user controls can
only hold one child element.
| | 00:32 | Since windows and content elements only
hold a single child, there must be other
| | 00:35 | elements that can hold many children.
| | 00:38 | In Silverlight, there are
panels and there are items controls.
| | 00:41 | panels are responsible for
layout and have no UI of their own.
| | 00:44 | Each panel has a layout specialty.
| | 00:47 | Items controls are more
sophisticated and also can contain children.
| | 00:51 | These are controls however, not panels,
and can have sophisticated UI templates
| | 00:56 | applied to dramatically change their appearance.
| | 00:59 | The panel base class is provided as a
base class for all layout containers.
| | 01:03 | And as you remember, I said just a
few minutes ago, each user control can
| | 01:07 | only have one child.
| | 01:09 | Therefore, if you want to have a
usable UI, you're going to have to have a
| | 01:12 | container as the first
child of the user control.
| | 01:15 | Silverlight ships with a
handful of built-in panels.
| | 01:18 | There is the Stackpanel, which is good
at stacking elements, the Grid, which
| | 01:22 | excels at dividing the screen into
rows and columns and the Canvas, which
| | 01:26 | arranges its children by absolute coordinates.
| | 01:28 | The Silverlight toolkit also
provides two more essential panels.
| | 01:32 | That would be the WrapPanel and the DockPanel.
| | 01:35 | Details regarding the panels on this slide
are available in other movies in this title.
| | 01:39 | Silverlight contains a panel base class
too, which makes it possible to create
| | 01:42 | your own custom panels.
| | 01:43 | Since the rest of this chapter
elaborates on the built-in panels, I thought in
| | 01:47 | this movie I would show you
an example of a custom panel.
| | 01:49 | To do that, I need to switch to Visual Studio.
| | 01:52 | If you're following along with the
exercise files, you're going to want to open
| | 01:55 | the CustomPanel Solution.
| | 01:57 | There are two key parts in this example.
| | 01:59 | There is my Custompanel, which is
called CircularPanel. I'll open that one up
| | 02:03 | briefly and look inside of it.
| | 02:04 | I have a class called CircularPanel,
which derives from the abstract base class
| | 02:08 | panel and there are a couple methods.
| | 02:11 | I won't go into the details, but there
is one called MeasureOverride and one
| | 02:14 | called ArrangeOverride.
| | 02:16 | I have written some custom logic in
there that will arrange items in a circle
| | 02:19 | position on the screen.
| | 02:21 | Then I go to my main page and I add an
instance of my CircularPanel to my UI.
| | 02:28 | I brought this into scope here with
the local prefix and I have a custom
| | 02:32 | namespace defined up here.
| | 02:34 | I now have my custom CircularPanel and
I have added several buttons and I have
| | 02:39 | also created a little Button_Click code here.
| | 02:41 | When I click on this button, I will
add another button to the CircularPanel.
| | 02:44 | Let's see what this looks like.
| | 02:45 | There are my five buttons
arranged around the circular position.
| | 02:51 | When I click Add more, you can see
we're adding a lot more buttons and they're
| | 02:57 | being positioned around the edge of the circle.
| | 02:59 | So, what you see here is that
Silverlight provides an extremely flexible layout
| | 03:03 | system that can be configured in
endless permutations, one of which is sure to
| | 03:07 | be the layout you are looking for.
| | Collapse this transcript |
| Painting background and borders| 00:00 | If you want to control the layout of
a visual element, you must place those
| | 00:03 | elements in a Silverlight panel.
| | 00:05 | Each panel excels at arranging
children in a specialized fashion.
| | 00:08 | All panels have one interesting property
that I want to explore for the next few minutes.
| | 00:12 | That property would be the Background Property.
| | 00:15 | The Background Property
expects to have a brush assigned.
| | 00:18 | In Silverlight, there are many brushes
to choose from. There is the Image brush,
| | 00:22 | the Video brush, the Linear and
Gradient brush, but for this movie, I will
| | 00:26 | concentrate on the simplest
brush of all, the SolidColorBrush.
| | 00:30 | If you are following along with the
Exercise Files, you are going to want to
| | 00:32 | open the PaintingBackground
project and then you'll open the
| | 00:36 | DefaultBrush.xaml file.
| | 00:38 | I'll do that by double-clicking.
| | 00:40 | My intention here is to show you what
happens if you do not assign any color to a panel.
| | 00:45 | For this example, I have a grid, named
LayoutRoot, and you'll note there are no
| | 00:51 | color values assigned here.
| | 00:52 | There's no brush assigned
to the Background property.
| | 00:54 | That means that Silverlight uses
what's called the default brush.
| | 00:57 | And to verify what the default brush
is I've written a little bit of code.
| | 01:01 | So, we'll look at the code by going
over here to Solution Explorer and
| | 01:03 | double-clicking on the CS file.
| | 01:06 | There is only a single line of code. I
am going to turn off the break point for
| | 01:09 | a minute to make it easier to read.
| | 01:11 | I'm grabbing the LayoutRoot, which is my
grid and I am asking for the Background brush.
| | 01:16 | And then I am assigning that
to a variable type brush.
| | 01:19 | If I put my break point in here by
clicking in this gray bar, I can stop here
| | 01:23 | and examine that in Visual Studio.
| | 01:25 | Visual Studio allows me to drill
down and look at values at runtime.
| | 01:28 | In order to do that, I need to make
sure they are run in the debug build.
| | 01:31 | So, I'll choose Start Debugging from my
menus and wait a few seconds and you'll
| | 01:36 | see that the application
runs and I hit my break point.
| | 01:39 | The yellow line signifies I
am sitting at my breakpoint.
| | 01:41 | And now I can hover over these items.
| | 01:44 | If I hover over Background, you'll see
that I get a tooltip that pops up that
| | 01:47 | says the Background has a null brush.
| | 01:49 | Usually that means you end up
with a White Background color.
| | 01:52 | I need to stop this application,
so I can show you the next demo.
| | 01:55 | So, I am going to go up here and
click on the Stop Debugging button.
| | 01:58 | Now for my next demo, I would
like load this file, AssignBrushInXAML.
| | 02:04 | I also need to ensure that Visual
Studio uses that as my start page.
| | 02:07 | So, I need to go to my App.xaml and the
C# page there and modify Startup.
| | 02:13 | So, I no longer need the
default brush as my RootVisual.
| | 02:16 | Instead, I need the
AssignBrushInXAML, and I'll switch back to this
| | 02:22 | AssignBrushInXAML file and the key
things I want you to note here are I am
| | 02:26 | assigning two different
grids a Background brush.
| | 02:29 | This first grid I am assigning a
orange solid color brush and in the second
| | 02:34 | grid, I am assigning my own
custom color, using a hexadecimal value.
| | 02:39 | Remember from an earlier movie that
this means a hexadecimal number and then
| | 02:43 | these are the four values.
| | 02:44 | This is the alpha channel. This is the
red channel. This is the green channel,
| | 02:49 | and this is the blue channel.
| | 02:52 | If I run this, you'll see
some nice looking colors.
| | 02:54 | The outside grid is orange. The inside
grid is some sort of custom purple value.
| | 03:01 | When I shut down the browser, it will
stop my debugging session, which will
| | 03:05 | return me back to Visual Studio.
| | 03:07 | As a programmer, there might be times
when you need to programmatically change
| | 03:10 | the color of an element and
you can do that in your code.
| | 03:13 | So, for the next example, let me
close a few windows so it's easier to see
| | 03:17 | what's going on here, and we'll move
to the AssignBrushInCode.xaml file.
| | 03:22 | If you take a look at my XAML here,
you'll see that it's a number of grids nested.
| | 03:29 | I've got four grids named layoutRoot,
secondGrid, thirdGrid, and fourthGrid.
| | 03:34 | Each of these grids has a TextBlock
inside of it that's telling you the
| | 03:37 | purpose of the demo.
| | 03:39 | Only the first grid has a
Background value applied.
| | 03:41 | So, the rest of them, I am going
to write code to accomplish this.
| | 03:44 | Naturally, that means I need
to switch to the code window.
| | 03:47 | So, I'll come over here and double-
click on the AssignBrushInCode C# file.
| | 03:51 | And in the AssignBrushInCode
constructor, I'm going to construct a brand-new
| | 03:55 | solid color brush and I am going to go
to the Silverlight libraries. I am going
| | 03:59 | to ask for the yellow brush.
| | 04:01 | I don't know what the real values are
for the yellow brush, but Silverlight does.
| | 04:04 | This is an enumerated value called
yellow, and I am taking the yellow brush and
| | 04:09 | I am assigning it to the
Background at this layout root.
| | 04:11 | In the next line of code, I want to
use some of the operating system colors.
| | 04:17 | So, there is a class called
SystemColors and it has the ControlColor, which will
| | 04:21 | go look up the user settings on this OS,
| | 04:24 | determine what they have got set for
the ControlColor, and assign that to the
| | 04:27 | Background of this grid.
| | 04:28 | You saw how I was able to
do a custom color in XAML.
| | 04:31 | I can also do custom colors in my code.
| | 04:34 | In order to do that, I need to use the
color class and it has a method called FromArgb.
| | 04:39 | A stands for alpha, r stands for
red, g stands for green and so on.
| | 04:43 | And what I am doing here is assigning a
byte value of 255 for the alpha channel
| | 04:49 | and 122 for the red channel and so on.
| | 04:51 | In the last example, I want to show you
how you can set a transparent color, so
| | 04:55 | in this example, I am setting
60 as my transparency value.
| | 04:59 | 255 is fully opaque, a
value of 0 is fully transparent.
| | 05:04 | Would you like to see what this looks like?
| | 05:05 | Well, of course we need to go back to
my App.xaml.cs file and make sure that we
| | 05:11 | have this RootVisuals as my Startup.
| | 05:15 | Run the application.
| | 05:16 | That time I pressed F5 to run the application.
| | 05:19 | There is my Yellow brush, there is my
System Color Brush and there is my two
| | 05:22 | Custom Brushes including the one
with the semi-transparent color.
| | 05:26 | For my last demo, I would
like to show you borders.
| | 05:29 | By default, none of the
panels have a border around them.
| | 05:32 | So, there's a special element in
Silverlight I call the border element.
| | 05:35 | For this demo, let me close a few windows first.
| | 05:39 | I am going to use the
WrappingInBorder.xaml file.
| | 05:43 | If you take a look at my XAML here,
you'll see that I have a grid and outside of
| | 05:49 | my grid I've wrapped it in a border.
| | 05:52 | In the border element, if you want to
change the color of the border, use
| | 05:55 | something called the BorderBrush.
| | 05:57 | And again this can take solid color,
video brush, whatever type of brush you want.
| | 06:00 | In this case, it's using a
solid color Orange brush.
| | 06:03 | I've created a second border, down
here on line 11 and in here, I have set a
| | 06:07 | margin of 50 so that I give myself a
little breathing room around the outside
| | 06:10 | edge and then, I set the
BorderBrush to DarkOrange and I specified the
| | 06:15 | Thickness as a border here.
| | 06:17 | In Silverlight, you can set the
thickness in a number of ways.
| | 06:19 | This is setting a value of 2 pixels for
the left and right border and a value of
| | 06:25 | 10 pixels for the top and bottom border.
| | 06:28 | And then, lastly, I want to round off
the corners and make it look pretty.
| | 06:32 | So, I set a CornerRadius of 10.
| | 06:33 | I am wrapping that again,
around the TextBlock element.
| | 06:37 | I need to switch my Startup one last time.
| | 06:42 |
| | 06:45 | I press F5 to run the application,
maximize the browser so it's easy to see.
| | 06:51 | And there's my Orange color brush.
| | 06:53 | Notice I have a 10 pixel top and bottom,
nice rounded corners, and there is my
| | 06:58 | TextBlock inside the border.
| | 06:59 | Painting bright areas of your UI is
accomplished by setting the Background
| | 07:03 | brush on your panel.
| | 07:04 | Drawing a line around any of the
four sides of an element, however, is the domain of the
| | 07:08 | border class.
| | Collapse this transcript |
| Getting colorful with gradient brushes| 00:00 | A common UI pattern in recent years is
filling portions of your UI with blended colors.
| | 00:04 | In Silverlight, this is
accomplished with the two GradientBrushes.
| | 00:08 | With gradients, you specify two or more
colors and Silverlight determines the
| | 00:12 | intermediate color ranges.
| | 00:13 | While you can set gradient ranges in
XAML or in Visual Studio, you'll be much
| | 00:18 | more efficient if you use
Expression Blend 3 as your editor of choice.
| | 00:21 | I have opened up Expression Blend for this demo.
| | 00:23 | If you're following along with the
Exercise Files, you are going to want to open
| | 00:26 | GradientBrushes project.
| | 00:28 | In this GradientBrushes project, I have
a single file called MainPage.xaml and
| | 00:33 | on that file I have two grids. I have the
LayoutRoot and I have a second Grid with no name.
| | 00:40 | The second Grid is the one that I am going
to be manipulating with the color brushes.
| | 00:44 | In Expression Blend, to change the
brushes you go to the Properties panel and
| | 00:48 | you open the Brush section in your tool section.
| | 00:51 | At the top of the Brush
section are five buttons.
| | 00:54 | The first button is for assigning a Null brush.
| | 00:57 | If I click on this button, I
now have a Null brush assigned.
| | 01:00 | If I click on the second
button, I get a Solid Color brush.
| | 01:03 | This is where you can start having fun.
| | 01:05 | I don't like this orange color, so I
can come over here and drag this up and
| | 01:08 | down to pick a different color tint and
then I can grab this little circle here
| | 01:12 | or just move around with my
mouse to dial in the new color.
| | 01:16 | Less saturated colors on this side,
more saturated colors on right side.
| | 01:20 | There is a number of other things
you can change over here by grabbing
| | 01:22 | your mouse and sliding up and down, changing
the red color or changing the Alpha value here.
| | 01:28 | And every time you do this, Blend
creates the hexadecimal number in this area.
| | 01:33 | So, if you need the hexadecimal number
later, you can just copy this out and use
| | 01:37 | it somewhere else in your code.
| | 01:38 | Even more fun is playing
around with the GradientBrushes.
| | 01:41 | Clicking on this button
brings up the Gradient Editor.
| | 01:44 | Now the Gradient Editor is one of my favorites.
| | 01:47 | It starts off with two gradient values,
a black and a white, and I can drag this
| | 01:52 | White button on the Gradient bar to a
new position or I can change the color by
| | 01:56 | dialing in a new value.
| | 01:57 | I have selected the white button down here.
| | 01:59 | I am going to dial in a yellow color and
then for the black value, I am going to
| | 02:04 | dial in a nice blue color. And you can see,
| | 02:08 | it interpolates the
colors between the two of them.
| | 02:10 | Now, if you want to add more gradient
stops you would just click on the Gradient
| | 02:14 | Bar, move it to a new position. See how
that changes as I move over there? This
| | 02:18 | Blue changes over to the other side.
| | 02:19 | I will make that kind of a purple
color and if you don't want the gradient
| | 02:26 | stop anymore, you take it with your
mouse and you pull down off the gradient
| | 02:30 | bar and it removes it.
| | 02:32 | Another really fun tool of
GradientBrushes is over here on the toolbar.
| | 02:36 | If you move over to the toolbar
section of Expression Blend, there is this
| | 02:38 | button called Gradient tool, or you can
just press the G key on your keyboard.
| | 02:44 | When you select the Gradient tool, you
get an arrow in the main artboard region
| | 02:48 | and this arrow mimics the Gradient Bar
and even more important, you can grab
| | 02:53 | this arrow and slide it around to
change the angle of the gradient.
| | 02:55 | So, I am going to move this
arrow down here to the bottom corner.
| | 03:00 | This circle here represents the
Gradient Stop over here, so if I move the
| | 03:04 | Gradient Stop over here or on the
arrow, it adjusts it the same way.
| | 03:08 | So, this is a way you can dial in
your gradient by looking at it instead
| | 03:11 | of trying to guess.
| | 03:13 | Finally, all of this is being written
out in XAML, so if you switch over to your
| | 03:16 | XAML view, by clicking on this button
in Expression Blend, you can see that
| | 03:20 | there's a grid with a background
assigned using the property element syntax.
| | 03:25 | And then there is my
LinearGradientBrush and then there are my two
| | 03:27 | GradientStop values.
| | 03:29 | Using Expression Blend to create
and modify GradientBrushes is fast and
| | 03:32 | intuitive, and I'd say it's much
easier than hand-editing the XAML.
| | Collapse this transcript |
| Controlling your layout with StackPanel| 00:00 | The Stack panel is an example of a
Silverlight panel that does one simple task.
| | 00:04 | It will stack its children in a
vertical or a horizontal stack while keeping
| | 00:08 | each child as close to its neighbor as possible.
| | 00:11 | Children elements can negotiate extra
space around their designated area, but I
| | 00:15 | will save the details regarding
how they do that for another movie.
| | 00:18 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:22 | the UsingStackpanel project.
| | 00:25 | For this example we're
going to be working in MainPage.
| | 00:27 | I thought I would show you an example
of where Stack panel is used in the real
| | 00:30 | world. In Visual Studio, you can see
an example over here in the toolbox.
| | 00:34 | I will move over to the toolbox and in
Visual Studio, you can pin this toolbox to
| | 00:39 | the edge of the screen by
clicking on the Auto-Hide button.
| | 00:43 | This is an example of a Stack panel.
| | 00:45 | Each one of these items is stacked
immediately below its neighbor.
| | 00:48 | All right. Let's see how we do that in Silverlight.
| | 00:53 | You create a Stack panel
and you put elements in it.
| | 00:55 | That's as simple as it is.
| | 00:57 | Here is a TextBlock and a couple of buttons.
| | 00:59 | When I press F5 to run this in the
browser, you'll see that it puts the
| | 01:05 | two TextBlocks at the top and it puts the
three buttons immediately below the TextBlocks.
| | 01:10 | Notice how close they are.
| | 01:11 | That's because none of the children
elements have negotiated any extra space.
| | 01:15 | The only other interesting thing
about the Stack panel is that you can
| | 01:19 | change the orientation.
| | 01:21 | So, I will go into my Stackpanel on
line 12 and add one property, Orientation=
| | 01:27 | Horizontal. Press F5 to see this in
action and now you see there is a TextBlock,
| | 01:35 | and then a second TextBlock, and then
the three buttons stacked in a horizontal
| | 01:39 | stack as opposed to a vertical stack.
| | 01:41 | Stack panel has a single
responsibility - to stack elements.
| | 01:44 | As such, it is handy for many common
layout arrangements like grouping the OK and
| | 01:48 | Cancel button together at
the bottom of your window.
| | Collapse this transcript |
| Exploring additional layout controls in the Silverlight toolkit| 00:00 | The Silverlight API ships with three
Layout panels. They are the Stack panel,
| | 00:04 | the Canvas and the Grid, which are
first rate for many common layout scenarios.
| | 00:09 | WPF, which is Silverlight's older
Cousin, has other panels, however.
| | 00:14 | Not to be left out, the Silverlight
team has released these additional panels.
| | 00:17 | They are the Wrap panel and the Dock panel.
| | 00:21 | Due to time constraints, these panels are
contained in the Silverlight toolkit, a
| | 00:24 | download available from codeplex.com.
| | 00:27 | These panels are not some amateur hack job
but are written and managed by a Microsoft team.
| | 00:32 | The primary difference is that elements
in the toolkit have their own shipping
| | 00:35 | schedule and will be folded into
the mainstream at a future point.
| | 00:39 | If you are following along with the
Exercise Files, you are going to want to
| | 00:42 | open the toolkitpanels Solution.
| | 00:45 | Before I show you any code in this demo,
I want to show you an example of a Dock
| | 00:48 | panel inside Visual Studio.
| | 00:50 | I am going to go over to my toolbox,
I am going to dock it to the edge by
| | 00:53 | clicking on this Auto-Hide button.
| | 00:55 | In Visual Studio there is a Dock panel
that is docking the toolbars at the top,
| | 01:00 | the toolbox along the left edge, some
additional windows along the bottom edge,
| | 01:05 | and the Solution Explorer and
Properties window along the right edge.
| | 01:09 | Again, this is an example of a Dock
panel, and we are going to accomplish the
| | 01:12 | same thing in Silverlight.
| | 01:13 | To do that, I am going to open the
UseDockpanel.xaml file, and we are going to
| | 01:19 | talk about what you need to
have in order for this to work.
| | 01:22 | In order for you to use the
Silverlight toolkit, you have to download it
| | 01:25 | from the codeplex.com/Silverlight
website and you need to add a reference to
| | 01:32 | your References folder.
| | 01:33 | I don't believe I have a reference,
Let's go take a look.
| | 01:35 | No, there's nothing in
here that says toolkit on it.
| | 01:40 | I could right-click on the Reference
folder and choose to Add Reference, but I am
| | 01:45 | going to show you a trick in Visual
Studio which will allow me to have it
| | 01:47 | Auto-generate my reference for me.
| | 01:50 | The trick is to go to your
toolbox and find the Dockpanel.
| | 01:55 | Now the Dockpanel is
inside the Silverlight toolkit.
| | 01:58 | It won't be on your toolbox unless
you've installed the Silverlight toolkit.
| | 02:02 | Because I've installed that earlier,
it's available to me. It's right here.
| | 02:05 | I am going to grab this. I am going to
drag it into my XAML file and I want you
| | 02:10 | to watch line 1 of the code when I drop this.
| | 02:14 | So, a couple of things happened. One is
it added a line down here on line six,
| | 02:19 | where it's saying, here is my Dock panel.
| | 02:21 | Secondly, it knew that I
needed a new namespace reference.
| | 02:24 | So, at the top of my screen, Visual
Studio added this line, which is the XML
| | 02:28 | namespace that contains the
controls I need, in this case it's
| | 02:30 | System.Windows.Controls.toolkit.
| | 02:33 | We've covered the details on
this in another movie in the series.
| | 02:36 | Now to clean up I need to delete this
line. This won't work right now because
| | 02:40 | the user control can only have a single
child and doing my demo I added a second child.
| | 02:44 | So, I am going to go ahead and delete
this line, line 7 and then all my blue
| | 02:48 | squiggles at the bottom of
the window should disappear.
| | 02:50 | All right, we are ready to go.
| | 02:52 | I have created a grid.
| | 02:54 | Inside the grid, I have created a Dock
panel and I have added a few buttons in here.
| | 02:58 | This first button I have chose to
dock it to the left edge of the screen.
| | 03:02 | Now I am using an AttachProperty to do this.
| | 03:04 | There is another movie detailing more
about AttachProperties and what I am doing
| | 03:08 | here is I am saying that this
button should be docked to the left edge.
| | 03:12 | And then the second button should be
docked to the left edge and then the third
| | 03:15 | button should be docked to the bottom and so on.
| | 03:17 | Let's press F5 to see what it looks like.
| | 03:19 | There is the first button docked to the left.
| | 03:23 | There is the second button docked to the left.
The third button was docked to the bottom.
| | 03:27 | Notice that the third button doesn't
go all the way over to the edge, because
| | 03:31 | these two items were docked first.
| | 03:33 | So, they get priority.
| | 03:34 | Now watch what happens if I come into my XAML.
| | 03:37 | I am going to close the browser. I am
going to take this button called Third,
| | 03:40 | I am going to cut that out and I am going
to move it up here to the top of the border.
| | 03:45 | This is called the Z index and I have
now said that you should dock to the
| | 03:49 | bottom first and then
dock this button to the left.
| | 03:52 | Let's see what this looks
like by pressing F5.
| | 03:54 | Do you notice any difference?
| | 03:57 | Yes, the third button now goes all
the way to the edge of the panel.
| | 04:01 | Another thing you can do is you can
change what happens to this last item.
| | 04:05 | The last item, when it's put in there,
there is a rule called LastChildFill.
| | 04:09 | If you look in my XAML you
will see that LastChildFill -
| | 04:13 | let me undock this, so we get a
little more screen real estate -
| | 04:15 | the LastChildFill is set to True, which
means it takes up whatever space is leftover.
| | 04:19 | What do you think would happen if I
change this to False? - which is not the
| | 04:22 | default. The default is True.
| | 04:24 | Press F5 again to run.
| | 04:27 | There is that sixth button,
but it is a lot smaller now.
| | 04:31 | The other panel that was added in
the toolkit is called the Wrap panel.
| | 04:36 | Wrap panel is a lot like the Stack panel.
| | 04:38 | Now, I have already added the name
space, so we can just go ahead and start
| | 04:43 | using the Wrap panel.
| | 04:44 | I have already added the Wrap panel and
inside the Wrap panel I have several buttons.
| | 04:48 | I don't have to set any values on there.
| | 04:50 | The Wrap panel is a lot
simpler than the dock panel.
| | 04:53 | What the Wrap panel does is it
tries to work like the Stack panel.
| | 04:56 | It tries to get as many items on the
same line as possible, but if it doesn't
| | 04:59 | fit it, it will move it down to the next line.
| | 05:01 | So, since this is marked as Orientation
= Horizontal, it's going to try to fit as
| | 05:06 | many on one line before
moving down to the next line.
| | 05:09 | I'd like to show you a demo, but before I
do that I have to change my Startup object.
| | 05:12 | I will open up my App.xaml.cs file and
uncomment this line and comment this line
| | 05:20 | so I am going to just tell
it to use the new Wrap panel.
| | 05:22 | And let's see what this looks like.
| | 05:24 | Press F5 again to run. There are my
buttons all on the same line, but if I
| | 05:29 | make the browser window narrower, you will
see that they moved down to the second row.
| | 05:33 | Here is a quiz for you.
| | 05:37 | What do you think will happen
if I change this to say Vertical?
| | 05:42 | I want you to envision this in your
mind what this will look like. Press F5.
| | 05:50 | Now it's wrapping them vertically and
they will move to a second column if I
| | 05:55 | make this shorter.
| | 05:58 | Wrap panel and Dock panel are two
of the newest available Layout panels
| | 06:02 | for Silverlight.
| | Collapse this transcript |
| Exploring sophisticated layout with the Grid| 00:00 | The Grid panel is unchallenged as the
most powerful layout panel in Silverlight.
| | 00:04 | When you create a new XAML document in
Visual Studio or Expression Blend, you
| | 00:08 | automatically get a grid as the main UI element.
| | 00:11 | Using a grid is a two step process.
| | 00:13 | First, you define the rows and columns
and then you assign each child element a
| | 00:17 | location in the suitable row
and column within the grid.
| | 00:21 | If you are following along, you are going
to want to open the UsingGrid Solution file.
| | 00:26 | For my first demo, I am going to
look in this AddingRows.xaml file.
| | 00:30 | Let's see what I have in here.
| | 00:32 | By default, as I mentioned, you
automatically get a grid element as the root.
| | 00:36 | Since I am doing a demo, I thought I
would put a second grid item in here, and I
| | 00:40 | have already defined three rows.
| | 00:42 | Notice how they are defined in a
section in my grid called RowDefinitions and
| | 00:46 | what I need to do now is
define two more columns.
| | 00:49 | I can copy and paste, but I thought
to show you the IntelliSense inside
| | 00:52 | Visual Studio here.
| | 00:53 | You can see that ColumnDefinition is
the only available choice, because I am
| | 00:56 | inside the ColumnDefinitions area.
| | 01:03 | And then I will copy and paste
because it's fast and convenient.
| | 01:07 | Now I have nine cells:
| | 01:10 | three rows and three columns.
| | 01:11 | I want to place this Button in the correct cell.
| | 01:15 | If you don't supply a number, it's
going to put it in cell 0, row 0.
| | 01:20 | If I demonstrate it by running the
application, you can see that the Child
| | 01:25 | Element, this button is up here
in the upper left-hand corner.
| | 01:28 | For debugging purposes, you can't see
the lines in the cell, so there is a
| | 01:33 | property you can switch on called
ShowGridLines in the grid element itself right up here.
| | 01:40 | If I select ShowGridLines="True" and
run the same demo, press F5, you'll see
| | 01:47 | these ugly dotted lines.
| | 01:49 | For debugging purposes,
you can set these to true.
| | 01:51 | These grid lines are not attractive however,
so I never use them on the finished pages.
| | 01:56 | Now you can see that this child
element is up here in the cell 0, row 0.
| | 02:00 | I want to move it into this
cell right here, the middle cell.
| | 02:04 | To do that, I will come down to the
Button and I am going to use something
| | 02:07 | called an attach property, which
we have reviewed in another movie.
| | 02:10 | Attach Properties are part of
an element that's not the button.
| | 02:13 | In this case, it's the grid.
| | 02:14 | So, I am going to come in here.
| | 02:15 | I am inside my Button, and I
am going to say Grid.Row=1.
| | 02:24 | Silverlight uses 0 as the starting number,
so I want to go the second row, which
| | 02:28 | is row one and then I'm going to say
Grid.Column=1, and to prove that it's in
| | 02:36 | the correct place, we'll press F5. Success!
| | 02:41 | It's now in the middle cell.
| | 02:43 | For my second demo, I am
going to look inside this file,
| | 02:47 | PlacingStackpanelInGrid.
| | 02:49 | A very common scenario in
Silverlight is to nest different layout panels.
| | 02:54 | The grid is the most powerful.
| | 02:56 | It's almost always the root element, but you
end up putting other panels into the columns.
| | 03:02 | So, for this example, I thought I'd show
you placing a stack panel within a grid.
| | 03:06 | I have got my grid.
| | 03:09 | Again, I have got my second grid inside
the first grid, and I have got one row
| | 03:13 | and a couple of columns defined in this
grid, and then I have decided to place
| | 03:17 | this Stackpanel here inside one of the columns.
| | 03:21 | I put it in the last column and then
inside there, I have got a several buttons
| | 03:25 | that are going inside the Stackpanel itself.
| | 03:28 | All right, so I have defined my column
where I want the Stackpanel but then I
| | 03:31 | need some buttons to stack
up inside the Stackpanel.
| | 03:34 | I need to go to my App.xaml.cs file to
change the Startup object, and there you go.
| | 03:48 | Here is the stack panel within the third column.
| | 03:50 | The next thing I want to look at is sizing.
| | 03:52 | How can I control the
sizes of my columns or my rows?
| | 03:56 | The answer to that is by
setting values in my RowDefinition.
| | 04:04 | Now I just opened up the
ControllingSizesFinished to take a quick look in here.
| | 04:08 | When I go to this RowDefinition, I can
set, in this case, row has a height value.
| | 04:12 | I can set the Height value and I can
pick a hard coded number, like 12 pixels, or
| | 04:17 | I can choose auto-defined column.
| | 04:20 | Rather than editing them here in Visual
Studio, I think I am going to switch to
| | 04:23 | Expression Blend, because Expression Blend
has an easy-to-use editor for setting sizes.
| | 04:28 | I am going to switch to Expression Blend,
where I have already loaded the same
| | 04:32 | project and I am going to double-
click on this ControllingSizes.xaml file.
| | 04:37 | What you see, if you look at my Objects
and Timeline, is that I have a LayoutRoot,
| | 04:41 | which is a grid, and inside
that I have a number of buttons.
| | 04:44 | Now these buttons are all overlaid
over top of each other, because if you
| | 04:47 | look at my XAML, I haven't specified a row or
column, so they are all in the same location.
| | 04:51 | In fact, I don't even have
any rows or columns defined.
| | 04:53 | So, I am going to fix that by using the
designer, called the artboard. Here is the key.
| | 04:58 | When you select a grid, like this
LayoutRoot, look what happens in your mouse
| | 05:02 | when you move in Expression Blend.
| | 05:03 | You get this little gray bar across
the top and as you hover your mouse over
| | 05:06 | it, you get a little Plus symbol on your mouse,
plus you get a gold triangle and a line.
| | 05:12 | If I click now, I have just added
two columns. Let's verify that.
| | 05:17 | There is the two columns.
| | 05:19 | I am going to add a third column over here.
| | 05:23 | And then I am going to
add a couple of rows, okay.
| | 05:28 | Now that I have got these rows and
columns, I can grab this and size it if I
| | 05:30 | don't like the size, and I can put one
of these elements in the desired column.
| | 05:35 | Let's say I want to put this Button
here in the second row and second column.
| | 05:38 | I can click on this Button and then I
can go over to my Property Editor and find
| | 05:44 | the Layout section,
where it says Row and Column.
| | 05:46 | So, this belongs in Row number 0, Column 1.
| | 05:51 | And for this button, I want it to
be in row 0, and column number 2.
| | 05:57 | Then I will go to this Button and I want
to put that in Row number 1, the Column 0.
| | 06:01 | Remember that Silverlight uses
a zero based numbering system.
| | 06:04 | So, column 0 would be this column right here.
| | 06:07 | Let's go and verify that this is working.
| | 06:09 | I will go and click on my XAML and
you will see that it wrote. There it is,
| | 06:16 | right here, Column="2", Row="1" and so on.
| | 06:19 | So, that's how you move your
elements into the correct position.
| | 06:25 | You can also have an element
span multiple rows or columns.
| | 06:28 | It will be easier to see this if I
delete a few of the extra buttons.
| | 06:32 | I will go to the Objects and Timeline
panel, select the Button and press the
| | 06:36 | Delete key a few times.
| | 06:37 | So, now I have single button and it's
spanning all three rows and three columns.
| | 06:43 | You can see that over here again by looking in
the Property Grid, RowSpan = 3, ColumnSpan = 3.
| | 06:48 | I really only want this to be in
a single row and a single column.
| | 06:52 | So, I just want to change those to 1
and 1 and now you see it's up in the
| | 06:55 | cell where it belongs.
| | 06:56 | If I want it to span multiple cells,
like I want it to go across 2 rows, I will
| | 07:00 | type a 2 in here, and you see what happens.
| | 07:03 | The grid always stays the same
number of columns and same rows.
| | 07:06 | It's the element that gets changed
to span across the different cells.
| | 07:10 | Let's talk about sizing for a minute.
| | 07:12 | These cells currently are sized
using what's called Star sizing.
| | 07:19 | This is a proportional system.
| | 07:21 | What happens is Silverlight calculates all
three of the rows or all three of the columns.
| | 07:26 | I am going to use columns as far
as my demos, but the same applies for rows.
| | 07:29 | Let's change these to some simpler
numbers, 2, 2, and what adds up to 10.
| | 07:35 | 2+2 equals 4. We'll do 6, so that's 6 star.
| | 07:40 | This is 60%. This is 20%,
and this 20% of the size.
| | 07:45 | So, it adds up whatever the widths of
the entire grid is and then gives this 20%.
| | 07:49 | If I want to change that to 10%, just
type the number and now that this is
| | 07:53 | one-ninth of the size.
| | 07:55 | So, it's proportional sized.
| | 07:58 | There are two other sizes and you can
change the size by clicking on this little
| | 08:02 | button here in the corner
and you get the little padlocks.
| | 08:08 | What this little button up here
does is change it to what's called the
| | 08:10 | Canvas layout mode.
| | 08:11 | Right now, it's in Canvas layout mode and
this is switching it to Grid layout mode.
| | 08:16 | Now I can click on this to change
the size. It's currently Star Sized.
| | 08:19 | If I click on it again, it turns
what's called Pixel sized and that means
| | 08:22 | it's hard-coded now.
| | 08:23 | Whatever I specify for the pixel width is
the only width it will be. It never changes.
| | 08:27 | And if I click on it a third time, it
switches to what's called Auto size.
| | 08:31 | Auto size is cool for things like, where you
have got a bunch of labels in the first
| | 08:34 | column and you don't know how
long the text is going to be.
| | 08:37 | So, you say make this first column be
Auto sized and it will analyze all of
| | 08:41 | the elements in that column and
whatever the widest one is, that's how wide
| | 08:45 | that column becomes.
| | 08:46 | And looking at my XAML, you
will see that that now says Auto.
| | 08:50 | I'm going to click on this two more times to
switch you back to closed padlock and
| | 08:55 | switch over here, you now see that it
says, Width 89, no star in there, which
| | 09:00 | means it's fixed width.
| | 09:03 | Another way of adding a control to the
cell is to drag it directly into the cell.
| | 09:07 | So, let's add a new button.
| | 09:08 | Click over here, come over, draw a new Button.
| | 09:12 | This time, I am drawing the button in the cell.
| | 09:14 | Click on this arrow up here, the
Selection arrow, to make it a little bit easier
| | 09:18 | to see what I am doing.
| | 09:19 | And now I can just pick this up
and drag it into the new cell.
| | 09:22 | That should automatically change the
row and column numbers as I move them into
| | 09:26 | the new hosting cell.
| | 09:29 | I find this much easier than switching over
to the XAML view and editing it over there.
| | 09:34 | Well that's about all the
time I have for the Grid panel.
| | 09:37 | As you have seen, it is the most
diverse panel available in Silverlight.
| | Collapse this transcript |
| Sizing cells using the GridSplitter| 00:00 | You may want to allow your users to
resize the Grid panel at run-time.
| | 00:03 | You see this behavior in
many Windows applications.
| | 00:05 | For example, here in Visual Studio, I
can resize the width of the sidebar, over
| | 00:10 | here by the Solution Explorer, by moving my
mouse over the edge of the Solution Explorer.
| | 00:15 | The mouse changes cursors.
| | 00:17 | Grab it with my mouse and
move it to a new position.
| | 00:19 | What I have just done here is made the
Solution Explorer wider and I have made
| | 00:23 | the work area more narrow.
| | 00:25 | We can mimic this in Silverlight.
| | 00:28 | If you are following along with the
Exercise Files, you are going to want to
| | 00:30 | open the SizingWithGridSplitter solution.
| | 00:33 | For this demo, I am going to use
the UsingGridSplitter.xaml file.
| | 00:37 | Let's take a look what we have got in this file.
| | 00:39 | I have already predefined a
grid that has five columns.
| | 00:44 | The first, third and
fifth column are fixed size.
| | 00:49 | I am going to put my grid splitter
in the second and fourth columns.
| | 00:54 | Now this is not necessary, but I
found over the years, that it's better to
| | 00:58 | dedicate a column for the splitter itself.
| | 01:00 | There are some rules on the size.
| | 01:02 | One of the rules is you want
the column to be Auto sized.
| | 01:06 | You will also need a
reference to System.Windows.Controls.
| | 01:09 | This happens automatically if you drag
the GridSplitter from the toolbox, like this.
| | 01:13 | Just scroll down here and find that
GridSplitter and drag it over here and drop
| | 01:21 | it somewhere in my XAML.
| | 01:22 | So, it has added in my reference folder,
System.Windows.Controls, and it's also
| | 01:26 | added at the top of my XAML file,
where it says xmlns:controls.
| | 01:32 | Delete this temporary GridSplitter down here.
| | 01:35 | I have already written the code for this demo.
| | 01:36 | So, let's just go down here and uncomment it.
| | 01:38 | I have got these two GridSplitters.
| | 01:41 | Here is a neat old trick
inside Visual Studio to uncomment.
| | 01:44 | You can hold down the Ctrl key
and tap K, U, which means uncomment.
| | 01:49 | You can also use these two buttons
here, the Comment and Uncomment button.
| | 01:53 | Let's see what we have got.
| | 01:54 | I am placing this GridSplitter in column 1.
| | 01:57 | I am placing this GridSplitter in column 3.
| | 02:00 | I am setting the vertical alignment and
the horizontal alignment values here and
| | 02:06 | I am specifying 6 pixels for the width.
| | 02:08 | There is one other difference
between the two GridSplitters.
| | 02:12 | The second GridSplitter
has a ShowsPreview= True.
| | 02:15 | Let's see what that means.
| | 02:16 | Pres F5 to run the app, and there we go.
| | 02:20 | I now have a white 6-pixel-wide
GridSplitter in this column, and I can grab it
| | 02:26 | and resize the first column.
| | 02:28 | I have 6-pixel-wide GridSplitter over here.
| | 02:32 | The difference is this is set to
ShowsPreview and I get this gray bar when I
| | 02:35 | drag and it's not until I release
the mouse that it resizes the column.
| | 02:40 | That's what the ShowsPreview does.
| | 02:42 | The GridSplitter is a simple control.
| | 02:43 | It's narrowly focused.
| | 02:44 | It only does one task.
| | 02:46 | It has this job of sizing the two
columns or two rows on either side, but if you
| | 02:50 | need to provide sizable
cells, it's the tool you need.
| | Collapse this transcript |
| Absolute positioning with the Canvas panel| 00:00 | Sometimes you don't need all
the power of the layout system.
| | 00:02 | You just want to brute force a
location of element on the screen.
| | 00:06 | This is a terrible idea for data entry
forms or other standard input screens,
| | 00:10 | but perfect when you need a
drawing surface in your application.
| | 00:13 | Another use is when creating logos or Clip Art.
| | 00:16 | In this case, you need to keep the
parts of your artwork closely positioned
| | 00:19 | within the overall drawing.
| | 00:21 | The Canvas panel is the only layout
container that permits assigning location
| | 00:24 | based on a pixel coordinate.
| | 00:26 | If you are following along with the
Exercise Files, you are going to want to
| | 00:29 | open the Solution PositionWithCanvas,
and then open the CanvasBasics.xaml file.
| | 00:36 | In this example, I have
a Button inside a Canvas.
| | 00:40 | The Canvas's job is to figure out where
to put all of its children and arrange
| | 00:44 | them on the screen, and in my case,
the first button has not told the canvas
| | 00:48 | where it wants to go.
| | 00:49 | So, the Canvas will make a
decision and put it at position 0,0.
| | 00:53 | Left 0 and top equal 0.
| | 00:55 | I will show you in example.
| | 00:57 | I will run this app.
| | 00:58 | And you will see that my Button is
positioned at the upper left hand corner.
| | 01:03 | It's really supposed to go at position 50, 50.
| | 01:08 | So, I will go back to my XAML and I will
notify the Canvas that I want to change
| | 01:15 | its position with an attach property.
| | 01:17 | The reason it's called an attach
property again, is because the property belongs
| | 01:21 | to the Canvas, but I am
using it inside the button.
| | 01:24 | So, I will type in Canvas.Left=
'50', and then Canvas.Top= '50'.
| | 01:35 | Now when the Canvas goes to position
the button, it has a better idea where I
| | 01:39 | want it to go and it will
honor my request, better.
| | 01:44 | It's not as good as I'd like however,
because this button is overlapping.
| | 01:48 | I will need to move this
button over a little bit.
| | 01:50 | If I was using Expression Blend, I
could just drag this in the artboard, but
| | 01:53 | since I am using Visual Studio, I
have to go write some XAML to do this.
| | 01:56 | I will come down here and say the left
position of this button should be at 220.
| | 02:02 | This is a terrible way of writing a UI.
| | 02:04 | It's much better if you can use your
eyes and your mouse to figure out where
| | 02:07 | things belong on the screen.
| | 02:08 | The next problem is to work with these
two buttons and these two buttons are
| | 02:12 | positioned in relatively the same space.
| | 02:14 | They overlap with each other.
| | 02:16 | The Green button and the Orange button
are near each other and when I run the
| | 02:19 | application, you will see that the
Orange button overlaps the Green.
| | 02:25 | These two no longer overlap because I
moved them out of position, but sometimes
| | 02:28 | you want items to overlap each other.
| | 02:30 | If you want them to overlap, then you will
have to specify which one is drawn on top.
| | 02:35 | How does Silverlight solve that problem?
| | 02:36 | In Silverlight's case, I didn't specify
where I want to go, so it uses the order
| | 02:41 | that I add them as children.
| | 02:43 | This Green button was put in
before the Orange button, so F5 to run.
| | 02:51 | The Green button is behind the Orange button.
| | 02:53 | If I take this Orange button and
reposition it inside the canvas, like so and
| | 03:02 | run the application,
| | 03:03 | again, by pressing F5, it switched positions.
| | 03:07 | There is another way to change the
ZIndex and that's by using an attach property
| | 03:12 | called Canvas.ZIndex.
| | 03:14 | In this situation, I have the redButton
ZIndex 11 and the blueButton is ZIndex 10.
| | 03:21 | So, the smaller number ends up,
| | 03:23 | press F5, behind the other one.
| | 03:27 | So, the red index is 11 so that shows up on top.
| | 03:30 | The way you would change
this, of course, is obvious.
| | 03:32 | You would go down here and set ZIndex to 12.
| | 03:35 | I need to shut my application
down first before I can edit my code.
| | 03:41 | Change this to 12, and run again and
notice that they have swapped positions.
| | 03:48 | I can also do this programmatically.
| | 03:49 | I will go back to my XAML.
| | 03:52 | I am going to press Ctrl+Z to undo
my change and I have written a Click
| | 03:56 | procedure down here.
| | 03:57 | When I click on the button, I am going
to programmatically change the ZIndex
| | 04:00 | to a higher number.
| | 04:01 | Let's look at the code behind.
| | 04:03 | Switch to CanvasBasics.xaml.cs, double-
click on that file, and since it's an
| | 04:08 | attach property, you have to use the
special syntax on the Canvas class.
| | 04:12 | Canvas.SetZIndex and then the item that you
want to apply the change to and the new value.
| | 04:17 | So, I am saying change the ZIndex.
The canvas will say, okay you have changed
| | 04:21 | the ZIndex. I need to draw you in a
higher position than you were before.
| | 04:28 | Click on the button, narrow a little
window here to click on and it should move
| | 04:32 | to the top of the stack. The Canvas is simple.
| | 04:35 | It does one thing.
| | 04:36 | It excels at positional layout.
| | Collapse this transcript |
| Scrolling content with the ScrollViewer| 00:00 | None other Silverlight layout
containers support scrolling.
| | 00:03 | To add scrolling to your content,
you must wrap a container within the
| | 00:07 | ScrollViewer Control.
| | 00:08 | If you're following along with the
Exercise Files, you are going to want to open
| | 00:12 | the AddScrollViewer.
| | 00:14 | For this demonstration, I am going to
work in Expression Blend, so I can show
| | 00:17 | you some features in there.
| | 00:19 | First of all, I want to open the
MainPage. This is the existing page in the
| | 00:23 | PixelSmith application.
| | 00:25 | I am going to add scrolling to
the gray canvas, here in the center.
| | 00:29 | Currently, this canvas is configured to
automatically size to the underlying grid.
| | 00:33 | When I run the application, by
pressing F5, and size the browser, you can see
| | 00:42 | that the canvas sizes dynamically.
| | 00:45 | But the trouble I have with this is
that I want to be able to continue to see
| | 00:49 | the two white ellipses and I cannot
do that because I can't scroll down, to
| | 00:53 | bring them into view.
| | 00:56 | To fix this I will place the
canvas within a ScrollViewer.
| | 00:59 | To do this, I will use a nice feature of
Expression Blend, which is called the Group Into.
| | 01:03 | I am going to select my canvas. When I
select it in the Artboard, you'll notice
| | 01:08 | the sizing handle will show up.
| | 01:10 | I could also move over to my Objects and
Timeline and can click the Canvas over here.
| | 01:15 | To use the Group Into function, I right-
click on the canvas and scroll down to
| | 01:20 | the Group Into menu item and then
pick one of my containers. In this case, I
| | 01:24 | want to use the ScrollViewer.
| | 01:27 | Did you notice the change in the
Objects and Timeline? It's subtle.
| | 01:31 | You no longer see canvas over here.
| | 01:33 | If I click on the little triangle and
open that up, you can see the Canvas has
| | 01:37 | been embedded inside the ScrollViewer.
If you ever want to remove this outer
| | 01:41 | item inside Expression Blend, you right
-click and choose Ungroup, but I don't
| | 01:46 | what to remove the group right now.
| | 01:47 | There is another difference.
Look over here in my canvas.
| | 01:51 | In my canvas, there is a
scroll bar on the right edge.
| | 01:55 | Now when I run the application by
pressing F5, and resize the browser, you can
| | 02:02 | see the scroll bar shows up when it's needed.
| | 02:08 | Now that the bottom part of the canvas
is being cut off, the scroll bar shows up
| | 02:12 | and I can now scroll down to
see my white ellipses as needed.
| | 02:18 | Silverlight assumes that I
only want a vertical scrollbar.
| | 02:21 | If that's not the case, I can quickly
add a horizontal scroll by changing the
| | 02:24 | property in Expression Blend, close the browser.
| | 02:26 | I'll choose my ScrollViewer in the
Objects and Timeline and then we're going to
| | 02:32 | go over to the Properties panel and
search for the word SCROLL. When I do that,
| | 02:40 | the Property panel shrinks down to
only show two properties and they are the
| | 02:46 | HorizontalScrollBarVisibility
and the VerticalScrollBarVisibilty.
| | 02:50 | I am guessing you can figure out
which property I am going to set.
| | 02:53 | I am going to go
HorizontalScrollBarVisibilty, turn that to Auto and run
| | 02:59 | the application again.
| | 03:03 | Because it's set to Auto, it doesn't
show up until I make the canvas too narrow.
| | 03:07 | There is my horizontal
scrollbar and now it's gone.
| | 03:11 | So, as you can see, it's quite
simple to add scrolling to any container.
| | Collapse this transcript |
| Adjusting content with alignment, margins, and sizing| 00:00 | Layout panels are benevolent dictators.
| | 00:02 | They force their children into position
on a page, but each child can influence
| | 00:06 | its parent container.
| | 00:08 | In this movie, I will look at three ways the
element can affect its ultimate location.
| | 00:11 | These properties are size, alignment and margin.
| | 00:15 | Each element has a number of size properties.
| | 00:16 | You can hard code a size for an
element, but this is rarely a good idea.
| | 00:20 | It is better to allow an element to
grow or shrink based on its content.
| | 00:23 | For an example, increasing the font
size on the button should cause the button
| | 00:27 | to get taller, unless the
button has a fixed height.
| | 00:30 | Size is always honored if you specify it.
| | 00:32 | If you do not indicate a size, however,
then Silverlight has to make some decisions.
| | 00:37 | The panel will size the element to its content.
| | 00:39 | For instance, if I have a button and
it has a really long string in it, then it
| | 00:42 | should make the button wider.
| | 00:43 | Once it's sized it big enough to hold the
content, then it applys its own sizing rules.
| | 00:47 | For example, the Stackpanel stretches
all content to fit horizontally. If you do
| | 00:52 | not specify a size, it will
always make it as wide as the panel.
| | 00:56 | Other examples, the TextBlock's width
is determined from a string content, a
| | 01:01 | button's height is determined from its
font size and the Stackpanel will then
| | 01:05 | stretch that button width to the
Stackpanel width, unless it hard codes its own
| | 01:08 | width, as I mentioned before.
| | 01:10 | Let's look at this inside Expression Blend.
| | 01:12 | I've opened Blend. If you are
following along with the Exercise Files, you are
| | 01:15 | going to want to open the
AdjustingContent Solution and then doubleclick on
| | 01:19 | the LiveDemo.xaml file.
| | 01:21 | In this example, we are going to build
a toolbar for our PixelSmith application.
| | 01:25 | PixelSmith is the application
that we build throughout the course.
| | 01:28 | Most toolbars have text and they
have buttons and the buttons are stacked
| | 01:32 | right next to each other.
| | 01:33 | For example, in Blend, if you come
over here to the toolbar, click and hold,
| | 01:37 | you'll see this is a sample of a little
flyout toolbar. It has an image and some
| | 01:41 | text and each button is stacked
immediately next to its neighbor.
| | 01:45 | That's the type of view I
want to mimic for this example.
| | 01:48 | To do that, you need to click the
arrow button, select your Stackpanel, by
| | 01:53 | looking inside the border and then, we
are going to over and choose the button
| | 01:56 | and double-click on it.
| | 01:57 | Because I had the Stackpanel selected,
the button was automatically placed
| | 02:01 | in the Stackpanel and the
Stackpanel stretched the button to the entire
| | 02:05 | width of the Stackpanel.
| | 02:06 | If I hard code a size, say a width of 120,
now it's no longer stretched to the
| | 02:13 | width of the Stackpanel.
| | 02:14 | And once it's no longer stretched to
the width of the Stackpanel then I can
| | 02:17 | control the HORIZONTAL and VERTICAL ALIGNMENT.
| | 02:20 | Here, for instance, I can say I want
to align this to the Left edge of the
| | 02:23 | Stackpanel, or center it, or right
align or the default is to stretch,
| | 02:29 | which is supposed to it stretch it to the
width but I've hard coded the width of the button.
| | 02:33 | If you ever want to send it back to Auto,
just click on this button here and blend.
| | 02:38 | The Layout panel's where you find all of
these settings. There's also some lesser
| | 02:41 | used settings in the section
called Advanced Properties.
| | 02:44 | For instance, in here I can change
the HorizontalAlignment of the content.
| | 02:49 | The content, in this case, is
strings but buttons can also hold things
| | 02:52 | like images and so on.
| | 02:54 | So, I can align the text
inside the button as well.
| | 02:59 | Let's add a couple of more
buttons and then we'll set some margins.
| | 03:02 | I am going to go back to my toolbar,
double-click on the button again.
| | 03:05 | Then I want to come over
here and select my Textblock.
| | 03:11 | I'll select the Textblock, Ctrl+C
to Copy and then select my Stackpanel
| | 03:17 | and Ctrl+V to paste.
| | 03:19 | And now I need two more buttons,
double-click two more times.
| | 03:23 | The only issue I have left with this
toolbar is the buttons are too close together.
| | 03:26 | What I can do is add a margin around
the edges and that's very simple to do.
| | 03:31 | Let me select all four buttons.
| | 03:32 | I am going to come over to my Object
and Timeline and do a Ctrl+Click, till all
| | 03:38 | four buttons are selected.
| | 03:40 | And then, I am going to go over to my
Margin settings in the Properties panel
| | 03:43 | and type in 9 for each of the margins.
| | 03:51 | I think that's too far apart between
the two buttons, so I will change the top
| | 03:55 | and bottom margins to 4
and I am happy with that.
| | 04:02 | And now you have a little better
understanding of how each element can control its
| | 04:05 | position in this Layout panel.
| | Collapse this transcript |
| Enlarging your window with Full Screen mode| 00:00 | Removing the browser chrome and
maximizing the screen size is advantageous for
| | 00:03 | certain types of Silverlight applications.
| | 00:06 | Video players are a prime example
of an application type that commonly
| | 00:09 | launches as full-screen.
| | 00:11 | If you're following along in the
Exercise Files, you need to open the
| | 00:14 | FullScreenApp Solution.
| | 00:16 | Once you've opened that, you might
want to take a few minutes to look at
| | 00:20 | the MainPage.xaml. This is our PixelSmith
application we've seen in earlier movies.
| | 00:25 | Now it takes a single line of
code to implement full screen mode.
| | 00:29 | And for my case, I am going to
do that in a button click event.
| | 00:32 | So, I have a button down here on line 44
that has a click event procedure and if
| | 00:38 | I switched to my code view by pressing
F7 in Visual Studio, you'll see that it's
| | 00:43 | a real simple line of code.
| | 00:44 | I am going to the Application. I am
getting the current application, getting the
| | 00:49 | browser host, and then saying the
content of that browser host should be shown
| | 00:53 | in full screen, meaning to turn off the
toolbars and all the rest of the browser
| | 00:56 | chrome, very easy to do.
| | 00:58 | Let's run the application and see what
it looks like. Press F5 and there it is.
| | 01:05 | Clicking on this button
will Enter Full Screen mode.
| | 01:07 | You have to have user
intervention to enter full screen mode.
| | 01:10 | This usually is done using a button
click, sometimes with a keystroke.
| | 01:13 | The reason for this is to prevent your
application from arbitrarily starting in
| | 01:16 | full screen mode and
spoofing a desktop application.
| | 01:19 | The primary security concern is tricking
the user in order to steal their user passwords.
| | 01:25 | To prevent this, full screen
mode disables most keyboard keys.
| | 01:29 | You can use the standard navigation
keys, like Home or End, Page Up and Page
| | 01:34 | Down, the Spacebar and the Tab key
and the arrow keys are all usable.
| | 01:38 | But you cannot capture the alphanumeric keys.
| | 01:41 | Let's see what it looks like.
| | 01:42 | I am going to click on the
Enter Full Screen mode. Silverlight
| | 01:45 | automatically puts this message in
the middle of the screen that says
| | 01:48 | Press Escape to leave full-screen mode.
| | 01:51 | I'll press Escape to go back to the regular mode.
| | 01:54 | Let's see that again, press Full Screen
mode, there is the message from Microsoft.
| | 01:58 | There's another way to close full-
screen mode and that's to write code.
| | 02:02 | I've that by creating this Press
Escape or click here to close button. When I
| | 02:05 | click on that, we'll go back to normal mode.
| | 02:09 | Again, this only takes a
single line of code. Let's look.
| | 02:12 | The only difference here, as
I said, IsFullScreen = false.
| | 02:16 | As you see, it only takes a single line
of code to provide your users with
| | 02:19 | a full screen experience.
| | Collapse this transcript |
| Manipulating elements with transforms| 00:00 | The container system is fairly flexible
and there are a number of panels which you
| | 00:03 | can choose to lay out your elements.
| | 00:06 | There are certain situations,
however, that don't lend themselves well to
| | 00:08 | manipulations strictly with panels.
| | 00:10 | In that case, Silverlight
exposes the Transform class.
| | 00:14 | All transforms in Silverlight are
rendered transforms, which means that the
| | 00:18 | transformation happens after the layout pass.
| | 00:20 | So, what this means is after every
single panel's had an opportunity to
| | 00:25 | manipulate your element, pick its
position, give it a size and it's done with
| | 00:30 | what's called the layout pass, then
the rendered Transform pass happens.
| | 00:34 | At that point of time, you can
further manipulate the element.
| | 00:37 | There are four basic categories of
transforms and we'll look at them now.
| | 00:41 | If you're following along with the
Exercise File, you are going to want to
| | 00:43 | open the
ManipulateWithTransforms solution file and then open
| | 00:47 | TheFourTransforms.xaml file.
| | 00:51 | This gives you a overview of the four
types of transforms that you can render.
| | 00:55 | Let's run the applications
and see what it looks like.
| | 00:59 | In the first row, I have a Normal
button with no render Transform applied.
| | 01:05 | In the second row, I am
applying a Scale Transform.
| | 01:08 | I have told Silverlight to make this
button smaller than it normally would be.
| | 01:13 | In the third, I have told it to rotate it.
| | 01:16 | In the fourth example, I've
Translated, which means to move it to a new
| | 01:20 | position on the screen.
| | 01:21 | In this case, I've translated it to the
right of the original position and in
| | 01:25 | the last example, I've done a Skew
Transform, which as you can see, changes the
| | 01:30 | angle. I no longer have a right angle between
the left edge and the top edge of the button.
| | 01:35 | So, we are angling the top and
the bottom sides down a little bit.
| | 01:39 | These are the four
different kinds of transforms.
| | 01:42 | The best tool for manipulating
transforms is expression Blend.
| | 01:45 | So, let's go there.
| | 01:46 | I'll close the Browser window,
switch over to Expression Blend.
| | 01:51 | Here we are inside Expression Bled and
you can see I have the same project open
| | 01:54 | that I was looking at in Visual Studio.
| | 01:56 | If you are following along, you are
going to want to open this LiveDemo.xaml file.
| | 02:01 | What I have added here is a list
box filled with the days of the week.
| | 02:05 | I'm going to manipulate
this inside Expression Blend.
| | 02:07 | This is really easy to do.
| | 02:09 | The key in Expression Blend for
manipulating objects, if you don't remember, is to
| | 02:12 | go to one of these two selection arrows.
| | 02:15 | This first one is called the Selection,
and when I choose it and come over
| | 02:18 | here, and click on the List box, I get
sizing handles, margin indicators and if
| | 02:24 | you know which part of the window you want
to work with, you know how to apply Transform.
| | 02:28 | First let's go look at the XAML and
see that I just have a list box with a
| | 02:34 | bunch of text blocks inside of it.
| | 02:36 | No Transforms applied yet.
| | 02:37 | I'll switch back to my Design view and I
am going to apply a RotateTransform.
| | 02:43 | To do that, I'm going to move my
cursor over the corner and I can size it by
| | 02:47 | grabbing it and moving the arrow left or right.
| | 02:51 | If I move just a few pixels beyond the
edge of that selector handle, then it
| | 02:55 | changes to a rotation arrow.
| | 02:58 | Now I can grab that and rotate and let go.
| | 03:02 | That's how you do a RotateTransform.
| | 03:04 | Expression Blend generates a new section.
| | 03:08 | It creates a TransformGroup
inside the ListBox.RenderTransfrom.
| | 03:11 | So, that is saying, ListBox, you need
to apply this Transform and these are the
| | 03:17 | four different kinds of
transforms that I want you to do.
| | 03:20 | Notice that Scale, Skew, and Translate
don't have any values in, so they are
| | 03:25 | basically empty transforms, but the
RotateTransform has an angle property set to -21.589.
| | 03:32 | As I continue to manipulate the list box,
you'll see those other items change.
| | 03:37 | For instance, I want to skew the items.
| | 03:39 | So, I'm going to move to this middle
sizing handle and we will get slightly
| | 03:43 | a few pixels off the edge of that, till the
cursor changes and now I can apply a SkewTransform.
| | 03:47 | One of the cool things about rotation
transforms is you can change the center
| | 03:54 | point by just moving this little circle here.
| | 03:56 | I'm going to come down and grab this
circle and move this circle down here just
| | 04:03 | off the edge of the list box.
| | 04:04 | Now when I do my RotateTransform,
it rotates around that circle point.
| | 04:10 | If you want to do a
TranslateTransform, which means to move it to a new
| | 04:13 | position, you don't pick
it up and drag it like this.
| | 04:16 | That sets the margins.
| | 04:18 | In order to do a TranslateTransform,
you need to go to your Properties window
| | 04:23 | and scroll down to the
bottom to the Transform section.
| | 04:27 | It usually helps to close a
few of these other sections.
| | 04:33 | I'll close the Layout section and the
Brushes section and then I'm going to open
| | 04:38 | the Transform section and
there are a number of tabs.
| | 04:41 | The first tab is the TranslateTransform,
the second tab is the RotateTransform.
| | 04:45 | Again, I can manipulate that by using
my mouse over here or by typing in a new
| | 04:50 | number, let's say 60 degrees
here, for the rotation value.
| | 04:54 | Here is that ScaleTransform.
| | 04:57 | I will make this 1.5 Larger, press
Tab to move to the next text box, and
| | 05:03 | lastly, I'll show you that you can click on
Translate and this is how you can move the item.
| | 05:08 | You might remember from an earlier
movie that you can hover over this box and
| | 05:13 | move your mouse cursor up and
down to change that X and Y value.
| | 05:16 | Well, that's about it for transforms.
| | 05:19 | If you can't find a layout panel
that suits your needs, chances are that a
| | 05:23 | Transform will solve your problem.
| | Collapse this transcript |
|
|
6. Understanding the Event ModelUnderstanding routed events| 00:00 | The .NET framework has supported
events since the very beginning and
| | 00:03 | A .NET event means this. A message is sent
via the .NET framework from one type to another.
| | 00:09 | It might be from the button to
the form that contains the button.
| | 00:12 | It might be from a TextBox to a window.
| | 00:15 | In .NET, when you create an
event you add it to a type.
| | 00:19 | If you create a class, you might
create a property on that class.
| | 00:22 | You might create a method on that class.
| | 00:23 | You also create events as part of that type.
| | 00:26 | So they're defined within the type and
the event is raised within the type.
| | 00:30 | For instance, if I have a TextBox, it
might raise the TextChanged event.
| | 00:35 | Other classes might be
interested in subscribing to that event.
| | 00:38 | To subscribe a developer creates a
function in the subscriber code with
| | 00:43 | the correct signature.
| | 00:44 | In that subscriber, you add a
function callback with special registration
| | 00:48 | syntax. In other words, you have to
register with the .NET framework that you're
| | 00:52 | interested in listening to that event.
| | 00:54 | When the event is raised, the .NET
framework looks to see how many subscribers
| | 00:58 | there are for each published event.
When the event fires it looks up all of the
| | 01:03 | subscribers and fires each event in turn.
| | 01:07 | There is this thing called the delegate in .NET.
| | 01:09 | At its core a delegate is
something called a safe function pointer.
| | 01:12 | A function pointer is just a way of
calling a function indirectly and they are safe
| | 01:17 | function pointers in the sense that you
have to register ahead of time with the
| | 01:21 | .NET framework what the
signature of the delegate looks like.
| | 01:24 | So what I say here, .NET uses delegates
to ensure that the event raised by the
| | 01:27 | publisher can call their code
registered in the correct way.
| | 01:32 | When WPF was released, which
is a precursor to Silverlight,
| | 01:36 | the WPF team decided to create
something called a routed event to solve this
| | 01:39 | thing called a composition problem.
| | 01:41 | And here's the problem. Many Silverlight
controls can contain sub-elements or other content.
| | 01:47 | For instance, I might have a button
that contains a border, within that border
| | 01:51 | is a grid and within that is an image.
| | 01:53 | Prior to this routed event, if an
element had child content, every child element
| | 01:58 | would have to write code
to handle the common event.
| | 02:01 | So, if I have an image inside a button,
I would have to write a MouseDown event
| | 02:04 | inside the image and I'd also
have to write it at the button level.
| | 02:08 | With routed events, however, events can
bubble up to the handler in the parent element.
| | 02:14 | Here is an example of the composition problem.
| | 02:17 | This is some XAML in Silverlight that
results in the button that looks like the
| | 02:21 | screenshot at the bottom.
| | 02:23 | I have a grid. Within the grid I have
a button and within the button I have a
| | 02:27 | border, a StackPanel, an image and a TextBlock.
| | 02:30 | If I click on the image and I have a
MouseUp event registered and I want to
| | 02:35 | react to that, let's say I want to
show a tooltip, I would have to write the
| | 02:39 | tooltip show code on the image but
also make sure that when you clicked
| | 02:43 | here on this part of the button that it
would show and when you clicked on this
| | 02:47 | part of the button, it would show.
| | 02:49 | So I would have to write the code at
the Image level and at the StackPanel
| | 02:52 | level and at the Border level and at
the Button level and it gets worse because
| | 02:56 | in Silverlight, you can replace the
entire look of the button with something
| | 03:00 | called a template.
| | 03:01 | In that case, somebody could come along
and say I'm going to define elsewhere in
| | 03:05 | my XAML what the look of this button is.
| | 03:07 | In that case, the designer would
have to write all the event-driven code.
| | 03:11 | So the answer to this is something
called routed events and a routed event
| | 03:14 | traverses the tree of UI elements and it
calls every handler on any node in that tree.
| | 03:19 | It starts at what's called the
originating leaf and moves up to the root node
| | 03:23 | and this solves the composition problem.
| | 03:24 | I can write the code once at the
button level, regardless of what template is
| | 03:29 | applied to that button.
| | 03:31 | I know it's always going to work.
| | 03:32 | Here are some examples of some common
events on regular Silverlight elements.
| | 03:37 | There's our LostFocus and GotFocus routed
events, KeyUp and KeyDown, and so on down this list.
| | 03:44 | These are all routed events so I can
have a MouseMove event at the parent level.
| | 03:48 | So you've also got these normal events.
| | 03:49 | You've got the Loaded event. What this
means is you can only have the Loaded
| | 03:54 | event on that actual element.
| | 03:55 | You can't route it up to its parent.
| | 03:57 | We also have the
LayoutUpdated and the SizeChanged.
| | 04:01 | WPF was the first technology from
Microsoft to use routed events.
| | 04:03 | So, far it has implemented a
simpler scaled-down version that eases UI
| | 04:08 | development, especially when you
consider defining replaceable UI in templates.
| | Collapse this transcript |
| Wiring up event handlers in Silverlight| 00:00 | In Silverlight, there are two
ways to subscribe to an event.
| | 00:03 | You can define the Event property in XAML
or you can write code in the CodeBehind.
| | 00:08 | I am in Visual Studio.
| | 00:09 | If you're following along in the
Exercise Files, be sure and open the
| | 00:12 | WiringUpEventHandlers solution.
| | 00:15 | I have two XAML pages I'm going
to be working in, in this demo.
| | 00:18 | I have one called InCodeBehind where
I'm going to wire up the event handlers in
| | 00:23 | my C# code and I have one called
InXaml where I'm going to be wiring up the
| | 00:27 | event handlers in my XAML.
| | 00:28 | Let's start here. Double-click on the
InXaml.xaml file and then I'm going to
| | 00:35 | scroll down to these buttons.
| | 00:37 | The idea that I have for this demo
is I'm going to click on the button.
| | 00:41 | It's going to run some code.
| | 00:43 | My code is going to update this
TextBlock down here with the output.
| | 00:48 | I'll start by going to this button.
| | 00:50 | In Silverlight, it often
helps to name your elements.
| | 00:53 | This first button doesn't have a name
whereas my second button does have a
| | 00:57 | name called DemoButton1.
| | 00:59 | When I go up here to my first button
and add the Click procedure. I'll type
| | 01:04 | in click and you'll note inside the
IntelliSense window that this has a lightning bolt.
| | 01:10 | That's how you know this is the
Click property and not a normal property.
| | 01:13 | In Visual Studio, I can press Tab to
finish typing and when I do that, Visual
| | 01:18 | Studio wants to help me by writing the
event procedure for me in my CodeBehind.
| | 01:22 | All I need to do now is press Tab
again and it stubs in Button_Click.
| | 01:29 | My second button has a name, so if I do
the same exact steps down here, Click,
| | 01:34 | Tab, choose New Event Handler by
hitting Tab, the difference is because this
| | 01:40 | button had a name, the name of my
procedure is a little more specific.
| | 01:44 | You can also apply event procedures to shapes.
| | 01:47 | I'll come down to this ellipse.
| | 01:49 | It has a name called DemoShape.
| | 01:51 | I'm going to use the Mouse events.
| | 01:54 | This one has a MouseLeftbuttonUp, so
I will hit Tab, Tab, and pick a nice long
| | 02:01 | name DemoShape_MouseLeftbuttonUp.
| | 02:04 | I'm ready that we'll look at the
code. To switch to your code view,
| | 02:07 | I could double-click on the CS file over here.
| | 02:11 | I could go to View > Code.
| | 02:13 | What I usually do however is press
F7 and there are my three procedures.
| | 02:19 | I'll make this window a little bit wider.
| | 02:19 | The first one is called button_Click and so on.
| | 02:24 | I'll go into my code.
| | 02:25 | You remember what's going to happen.
The Button class is going to raise the
| | 02:29 | event and my Silverlight UserControl is
going to react to that and run the code.
| | 02:33 | I'm inside my UserControl.
| | 02:35 | I'll go here and I'm going to say
I have this TextBlock called resultTextBlock.
| | 02:41 | I don't need to finish typing.
| | 02:42 | I just type the period.
Text="button." This should be a semicolon.
| | 02:56 | I'll copy this Ctrl+C, and paste it
into my other two event procedures and then
| | 03:01 | just change the string like so.
| | 03:10 | Press F5 to run the application and if
I did everything right, I should be able
| | 03:15 | to click in this button and see
a new output down in the TextBlock.
| | 03:22 | And finally let's click on the
ellipse. Excellent, everything worked.
| | 03:29 | Another common way of wiring up
events is to go to your CodeBehind.
| | 03:31 | I'll close two windows here.
Find my InCodeBehind.xaml file.
| | 03:39 | Let's look briefly at the XAML here.
| | 03:42 | It's almost exactly the same.
| | 03:43 | I have one button instead of two.
| | 03:44 | I have an ellipse and I also have the
same TextBlock called resultTextBlock.
| | 03:51 | What I'll do now is I'll go to my
CodeBehind, double-click on the C# file or
| | 03:55 | press F7, and now I'm going
to do all the wire up in code.
| | 03:59 | I'm going to do the wire up of
the code in this method here called
| | 04:03 | InCodeBehind_Loaded.
| | 04:08 | Here's the first example.
| | 04:10 | I have the demoShape.
| | 04:11 | This is the instance of the ellipse.
| | 04:13 | This is the event that's part of
that ellipse and this is the special C#
| | 04:18 | operator that does the wire up and this is the
code that's going to handle it. So, let's review.
| | 04:23 | The object that's going to raise the
event, the event itself, the code that's
| | 04:28 | going to handle the event and this
is the key to wiring the two together.
| | 04:33 | Here's a little more verbose syntax.
| | 04:35 | It's exactly the same except
it's using the delegate syntax here.
| | 04:38 | It's saying to create a
new MousebuttonEventHandler.
| | 04:41 | This is the legal syntax, but for
convenience sake C# allows you to do this
| | 04:46 | shorter syntax which I prefer
because I think it's easier to read.
| | 04:49 | You might recall we talked about
routed events in another movie.
| | 04:52 | Since this is a routed event,
there's also a way to go to the routed
| | 04:56 | event system and wire up the
event handler. That's done by going to your
| | 04:59 | shape and calling AddHandler.
| | 05:01 | This is part of the dependency system
and then it's a little more convoluted,
| | 05:05 | I have to type in this static member of
the Shape property and then I have to use
| | 05:11 | the new syntax here. I can't
get away with the shortcut.
| | 05:14 | And then I have to pass a Boolean
parameter for this last argument.
| | 05:17 | Most of the time, you'll
see it done like this example.
| | 05:20 | I though I'll show you a live wireup.
| | 05:22 | I'll come down here after this comment.
| | 05:25 | I have a button called demoButton1.
| | 05:29 | I want to wire up the Click event.
When I do the += syntax, Visual
| | 05:34 | Studio knows that this is an
event handler and says, would you like me to write
| | 05:38 | the rest of this line of code?
| | 05:39 | I press Tab if I do and it stubs in the
new RoutedEventHandler and a suggested
| | 05:45 | name for the new
event handlers it's going to write.
| | 05:47 | As you can see, in the yellow
tooltip, I can press Tab again.
| | 05:50 | It happened very quickly but what
happened is it wrote this chunk of code for me.
| | 05:59 | Come down here, type in Button and
to demonstrate this I need to change my
| | 06:07 | startup object so I'll go to my App.
xaml.cs, scroll down in here and change
| | 06:13 | my RootVisual to use my new InCodeBehind
and then press F5 to run and we have success.
| | 06:26 | What I would like you to take away with
this movie is there are two ways to wire
| | 06:29 | up your event handlers.
| | 06:30 | You can do it in your XAML file or your
CodeBehind and Visual Studio has a lot
| | 06:34 | of tools to help you write the code.
| | Collapse this transcript |
| Understanding Event Bubbling| 00:00 | You can define a routed event
handler in any element in the element tree.
| | 00:03 | When an event fires, it starts on the
original element and traverses the element
| | 00:07 | tree looking for event handlers.
| | 00:09 | Each handler encountered on the way to
the root element is called in sequence.
| | 00:12 | I'm inside Visual Studio.
| | 00:14 | If you're following along in the
Exercise Files, you're going to want to open
| | 00:17 | the EventBubbling solution.
| | 00:20 | I have three demos in this movie:
| | 00:22 | BasicBubbling,
BubbleToRoot and SuppressingEvents.
| | 00:26 | We're going to start with the BasicBubbling.
| | 00:28 | I'll double-click on this XAML
file and look at our tree of objects.
| | 00:33 | We start with the UserControl at the root.
| | 00:35 | It has a Grid within it, and
then within the Grid, I have a button.
| | 00:40 | The button is built out of complex content.
| | 00:43 | Inside the button is a border, and
inside that is a StackPanel, and inside that
| | 00:48 | at the bottom of the tree, often
called the leaf node are the two leafs,
| | 00:52 | the image and the TextBlock.
| | 00:55 | So if I left-click on the
image, it could handle the event.
| | 01:00 | Whether it handles or not, it's also
going to go to the StackPanel and see if it
| | 01:03 | has any event handlers
registered, and so on up the tree.
| | 01:07 | Eventually, you will get to the UserControl.
| | 01:10 | This is interesting, because I can
either handle things at individual levels
| | 01:13 | like here at this image, and at this
border level, or I could come up to the
| | 01:17 | UserControl to say, I want
to handle all the events.
| | 01:20 | Then all the children elements don't
have to have their own handlers. We can
| | 01:23 | handle them at once.
| | 01:24 | This is great, because it means I
don't have to write redundant code over and
| | 01:27 | over again for all of the
children of this button.
| | 01:29 | This button has a border
and a StackPanel and image.
| | 01:32 | In the old days, I would've had to write
an event handler for each one of those.
| | 01:35 | Now, I can just do here at the button level.
| | 01:37 | If you go look at the code behind
for this, double-click on the CS file,
| | 01:41 | you'll see that I've registered my intent to
listen to the event on several of my items.
| | 01:46 | The border and the button, the image,
the StackPanel, and the TextBlock have all
| | 01:50 | registered to listen for the
MouseLeftbuttonDown, and they've all said they want
| | 01:54 | to use the
CommonMouseDownCode, which is down here.
| | 01:58 | All I'm doing in here is gathering up
the string with the sender, the TextBlock
| | 02:03 | or the button that caused the event
to happen, and then I'm showing their
| | 02:06 | results in a list box.
| | 02:07 | What should happen is every item that
handles event should show itself in the list box.
| | 02:11 | Let's see if that happens.
| | 02:12 | Press F5. There is my complex
button with this complex content.
| | 02:18 | If I click on the image, you can see
that the image had a chance to handle it,
| | 02:22 | and since the image is a child of the
StackPanel and the border, you see that
| | 02:25 | they also handle the event.
| | 02:27 | I can dismiss this list box by clicking
on it with my left mouse button and then
| | 02:31 | we'll try it by just clicking on maybe
the border here. Because I didn't click
| | 02:36 | on the image, it never
got a chance to handle it.
| | 02:41 | For my second demo, I'm
going to choose BubbleToRoot.
| | 02:45 | It's exactly the same UI.
| | 02:49 | The difference is in my registration code.
| | 02:51 | I'm setting up my handler at the root.
| | 02:55 | This, in C#, means the current class.
| | 02:58 | My current class is the
BubbleToRoot: UserControl.
| | 03:01 | That's the same as in the XAML,
wiring it up here at the UserControl level.
| | 03:07 | So none of my children have their
own dedicated code to handling this.
| | 03:11 | What I'm doing here is I'm getting a
string with a little bit more detail.
| | 03:14 | I'm getting the sender.ToString, and
then I'm getting the OriginalSource.
| | 03:22 | I can't press F5 yet, until I go over here
and choose App.xaml.cs and change my startup.
| | 03:32 | Now, I can press F5.
| | 03:33 | I only have one handler at the root level.
| | 03:39 | I'll click on the TextBlock and
it says, okay, the sender was the
| | 03:43 | root, BubbleToRoot.
| | 03:44 | That's the user control and
the Original was the TextBlock.
| | 03:46 | Then I'll click on the border,
then I'm going to click on the image.
| | 03:50 | So, you see what's happening is the
parent is catching each one of these.
| | 03:54 | In my last demo, I want to show
that you can suppress the event.
| | 03:58 | As it's bubbling up the tree,
you can say, don't go any higher.
| | 04:03 | Same tree of objects.
| | 04:06 | Open up the code behind.
| | 04:08 | Here in my Constructor, I'm registering an
event for the UserControl and one for this image.
| | 04:14 | If you click on the image,
MouseLeftbuttonUp, I say e.Handled = true.
| | 04:19 | e is coming from the second
argument here, MousebuttonEventArgs.
| | 04:22 | When I say e.Handled = true, I'm saying,
don't let this bubble any further up the tree.
| | 04:29 | That means this code down here, which
is supposed to show the string with the
| | 04:32 | sender and the original, will never
get called and I won't see this string.
| | 04:37 | Once again, I have to switch the startup object.
| | 04:40 | Double-click on the App.xaml.cs file.
| | 04:46 | Uncomment the SuppressingEvents
user control, and then press F5.
| | 04:52 | When I click on the grid, I see
that that was the originating object.
| | 04:57 | I click here on the TextBlock.
That was the originating object.
| | 05:00 | I click on the border, that was the
originating object, but when I click on the
| | 05:02 | image, that code no longer runs. Now I'm
only writing the code that's inside the
| | 05:07 | image code, and it's suppressing the
event ever getting to parent object.
| | 05:12 | What I hope you take away from this
video is that event bubbling allows you to
| | 05:15 | capture events in the simple way, at
the parent level, and not have to write the
| | 05:19 | code in all the children.
| | Collapse this transcript |
| Detailing the mouse events| 00:00 | There are a handful of mouse specific
events available for Silverlight elements.
| | 00:04 | These events are unique in that they
send some mouse exclusive details to your
| | 00:07 | event code, via the MouseEventArgs parameter.
| | 00:11 | I've already opened my application, so
I can show you how these mouse events work.
| | 00:15 | This is a very simple interface.
| | 00:16 | I have a few ellipses and some
rectangles on the bottom of the screen.
| | 00:19 | If I moved this ellipse, I have set
the MouseEnter and MouseLeave event.
| | 00:22 | So, when I move in, it changes the
color and on the MouseLeave it sets it
| | 00:28 | back to the original.
| | 00:29 | Down here in the Mouse Wheel, if I
scroll my mouse wheel while my mouse cursor
| | 00:33 | is over this ellipse, I can shrink
or grow the width of the ellipse.
| | 00:38 | On this example, I'm
capturing the Mouse Move event.
| | 00:41 | So, as I move from pixel to pixel, you can
see where we are inside the user control.
| | 00:46 | And in the second example, it's where
we are in relationship to the ellipse
| | 00:49 | upper left-hand corner.
| | 00:51 | And then finally, we have Mouse Cursors.
| | 00:52 | These are not really events but they are
properties that are important for using in your UI.
| | 00:57 | As I hover over each one of these rectangles,
you'll see that the mouse cursor changes.
| | 01:06 | Let's see how this is done.
| | 01:07 | I will shut down the browser, which
should return me to Visual Studio.
| | 01:12 | If you're following along with the
Exercise Files, you're going to want to open
| | 01:14 | the DetailingMouseEvent solution.
| | 01:16 | In this application, I only have
one interesting page. That's MainPage.
| | 01:20 | Double-click to open that, and in this
example, I'm wiring up all my events in the XAML.
| | 01:25 | I'll show you a couple of examples.
| | 01:27 | Here's one for the Ellipse,
MouseEnter and MouseLeave.
| | 01:31 | Here is the one for the Ellipse MouseMove.
| | 01:37 | If I look at the code behind, double-click
over here in the C# file, here is my MouseEnter.
| | 01:43 | What's going on here?
| | 01:45 | I'm getting the sender, which will be
the ellipse, and I'm getting some mouse
| | 01:49 | specific information here in the MouseEventArgs.
| | 01:52 | In .NET I grabbed the sender,
which is typed as object.
| | 01:56 | That's not good enough however, because
I need to cast it to an ellipse type so
| | 01:59 | I can work with its Fill property.
| | 02:00 | So I'm using the C# As operator to that.
| | 02:03 | I say consider this as an ellipse,
I'd like to work with its Fill property and
| | 02:07 | now go get a brand-new brush
and assign it to this fill.
| | 02:09 | On MouseLeave, I do the same
thing except I set it to white.
| | 02:14 | In the MouseMove event, I have to write
some code to get the position on the screen.
| | 02:19 | That's done with a method on the e object.
| | 02:22 | I call GetPosition. I pass one
of my elements on the screen.
| | 02:25 | In this case, I'm passing the UserControl.
| | 02:28 | In the second example I'm
passing the MoveEllipse itself.
| | 02:31 | So, that gives me a point value.
| | 02:34 | I can then go read that point
value and read its X and Y coordinates.
| | 02:39 | What I do with those X and Y coordinates?
| | 02:40 | I format them into a string with a
comma between the two values and then show
| | 02:45 | them to the user in that TextBlock.
| | 02:48 | MouseWheel. Simple.
| | 02:49 | You get the Delta passed to
you in the MouseWheelEventArgs.
| | 02:53 | The Delta is which way you roll the mouse wheel.
| | 02:55 | Did you roll it up or down?
| | 02:57 | You get a positive Delta or negative Delta.
| | 03:00 | So, I take the Width and the Delta,
divide that Delta by 10 and then add that
| | 03:06 | to the existing width.
| | 03:08 | And I said, I would show you how cursors work.
| | 03:10 | To do that I need to switch back to my XAML.
| | 03:15 | Scroll down to these
rectangles and it couldn't be easier.
| | 03:20 | Here is my rectangle, there is my
cursor and this rectangle uses the Eraser
| | 03:25 | Cursor and this one uses the Hand Cursor.
| | 03:28 | Each one of these mouse events has
its place in your developer tool bag.
| | 03:32 | The MouseLeftButtonDown event is
often used to start a drag operation.
| | 03:36 | The MouseWheel works well for
providing a zoom feature in your application.
| | 03:39 | I encourage you to experiment
with each one to learn more.
| | Collapse this transcript |
| Detailing the key events| 00:00 | When you need to get text input in
Silverlight, you turn to the text controls.
| | 00:04 | And if you need to react to text
input events, you turn to the key events.
| | 00:08 | I'm in Visual Studio and if you're
following along with the Exercise Files,
| | 00:11 | you're going to want to open
the DetailingKeyEvents solution.
| | 00:14 | This is a simple project.
| | 00:15 | It has one interesting file, MainPage.
| | 00:19 | MainPage has some text boxes in it,
which I want to use for showing you
| | 00:23 | the keyboard events.
| | 00:25 | I'm scrolling down in my content
until I find several text boxes.
| | 00:31 | Here is one and it has a TextChanged event.
| | 00:34 | Here is one that has no event,
and a second one that has no event.
| | 00:40 | At the top level, I have a routed event setup.
| | 00:43 | So, at the Grid level I have a
KeyUp set for the entire grid.
| | 00:47 | What this means is it's going to call this
function, KeyUp, which I will show you right here.
| | 00:56 | And all I'm doing here is analyzing the
KeyEventArgs and finding out which keys you pressed.
| | 01:01 | So I look at some code.
| | 01:02 | If you've the keyboard modifier
turned on and you also press the keyboard
| | 01:06 | control, I'm going to show a string
Ctrl, and if you've the Shift key enabled,
| | 01:11 | I'm going to show you Shift.
| | 01:13 | And then I'm also going to show which
key you pressed, and then the modifiers.
| | 01:16 | Let's see what this looks like.
| | 01:18 | Press F5 to run the application.
| | 01:21 | Then I'll go to this text box and type
the letter a. And in the list box down
| | 01:24 | below you see that I typed the letter
a, and I didn't choose any modifiers.
| | 01:28 | Since this event is at the Grid level,
I can also go to this text box and type
| | 01:32 | say the letter b, and you see that
I typed the letter b with no modifiers.
| | 01:36 | Let's do Ctrl+A, which selects all the
text, and you see that I now get a Key = A,
| | 01:42 | and I have the modifier of Ctrl set. All right.
| | 01:45 | Let's go back and look at smart code.
| | 01:47 | Down here, I've one of my
TextBox set to have TextChanged.
| | 01:51 | This event fires every single time
the text is changed in any way in that
| | 01:55 | TextBox, by deleting a whole
bunch of characters and so on.
| | 01:58 | And while I'm in there,
we might as well look at this code.
| | 02:02 | This is at the TextBox.
| | 02:04 | Remember I've a KeyUp at the root level.
| | 02:07 | Now, I'm setting a KeyDown event for one of
the text boxes and only one of the text boxes.
| | 02:13 | What I'm doing is looking at the
KeyEventArgs, seeing which key you typed.
| | 02:17 | If it's equal to Key.B
then I reject the keystroke.
| | 02:21 | I say e.Handled = true, and that
says don't show the text in the textbox.
| | 02:27 | Let's see what this look like. Press F5 to run.
| | 02:31 | Come down here and type a few letters.
| | 02:34 | See that the TextChanged event fired.
| | 02:36 | I'm going to select this letter, and
then I'm going to choose Delete and that
| | 02:40 | should fire the TextChanged event.
| | 02:44 | For my last demo, I'll come down
here and I'll type the letter a.
| | 02:50 | Everything worked fine.
| | 02:51 | I'm going to type the letter b.
You can see that I typed the letter b in the
| | 02:55 | list box, but nothing shows up in the text box.
| | 02:58 | This is very handy when you have text
items where you don't want the user to
| | 03:01 | enter certain keystrokes,
like no numbers, no periods.
| | 03:05 | You can reject those without having to
check the text after it's been entered.
| | 03:09 | You can check it while it's
being typed in the text box.
| | 03:12 | There are only a handful of key
events in Silverlight. Even so they provide
| | 03:16 | several valuable services.
| | 03:17 | For example, they can help you
determine when text is changed so that you can
| | 03:20 | warn the user that their data should be saved.
| | Collapse this transcript |
|
|
7. Using Silverlight ControlsDisplaying text on the screen| 00:00 | It's hard to think of a practical user
interface that doesn't show text to the user.
| | 00:04 | Even the most intuitive touch-based
applications have lists of data or show text
| | 00:08 | in a hovering tooltip.
| | 00:10 | The text block and the label are the two
elements to show read-only text in Silverlight.
| | 00:14 | Since the label is mostly used for
data binding scenarios, that will leave us
| | 00:18 | with the text block as the
main subject for this movie.
| | 00:21 | In this movie, I decided to use
Expression Blend to edit my files.
| | 00:24 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:27 | the DisplayingTextOnScreen solution
and then double-click on MainPage.xmal.
| | 00:32 | In this application, I'm
enhancing our PixelSmith application.
| | 00:36 | PixelSmith is the application that we
built throughout the course and in this
| | 00:40 | chapter, we're going to be
modifying PixelSmith in nearly every movie.
| | 00:44 | I need to zoom out a little bit, so I'm
going to take my mouse wheel and scroll
| | 00:48 | and then, I'm going to hold down the
Spacebar and use the mouse to center the
| | 00:52 | PixelSmith UI on the screen.
| | 00:54 | What I'm going to fix in this
demo is this text block right here.
| | 00:58 | I cannot see the text.
| | 00:59 | So, I'm going to fix that
first by modifying the raw XAML.
| | 01:02 | I'm going to move to the XAML screen.
| | 01:06 | If you press F4 while you're in the
XAML view, you can see a full-screen view,
| | 01:11 | and then I'll scroll down
and find my comments in here.
| | 01:15 | The first change that I want to do
is I want to remove the Text property.
| | 01:18 | I'll cut all of the text and what
I'm going to do is place it between the
| | 01:26 | beginning and ending TextBlock tags.
| | 01:27 | So, now I will move to the end of the
TextBlock, delete this tag, type in an
| | 01:31 | angle bracket and then paste in
the text I just cut at this location.
| | 01:37 | Now why am I doing this?
| | 01:39 | Because later in the demo, I'm going to
start putting line breaks and multiple
| | 01:42 | fonts in here and the only way I can
do that is if I have text between the
| | 01:46 | beginning and ending tags.
| | 01:48 | Now it's time to return to my editor.
| | 01:51 | I'll click over here on the Design
button, and then I'll press F4 again to
| | 01:56 | get my toolbar back.
| | 01:57 | I ensure that I've got my TextBlock
selected and then I'm going to go over to my
| | 02:01 | Properties panel and type in wrap.
| | 02:04 | What that does is filter down
available properties, so that I can see
| | 02:08 | TextWrapping and then I can
say, I'd like to wrap the text.
| | 02:11 | As you can see, that's already an improvement.
| | 02:14 | Now it's time to go back to my XAML.
| | 02:16 | So, I'll click on the XAML button.
| | 02:18 | Press F4 to go to full-screen mode,
and what I want to do next is add
| | 02:23 | formatting to this text.
| | 02:24 | So, this is kind of like editing HTML text.
| | 02:27 | I want to put a line break in here, and I'm
going to do that right after the word "buttons."
| | 02:36 | I'll put two of those in here.
| | 02:40 | And then I'm going to
create something called a run.
| | 02:42 | I'm going to put a run
around this word "work area."
| | 02:46 | A run is a lot like a div tag in HTML.
| | 02:52 | I see that Expression Blend
Auto Complete has made a mistake.
| | 02:55 | I didn't want the word Runwork, so
I'm going to go ahead and delete it.
| | 03:00 | By placing a run around the word "work area,"
I can then format just a section of the text.
| | 03:19 | I've added the Foreground =
"Gold" and TextDecorations="Underline".
| | 03:23 | It's time to see what this
looks like in the designer.
| | 03:26 | Switch back to the Design
view and zoom a little bit.
| | 03:29 | There is my two line breaks and
there is my underscored and gold text.
| | 03:34 | So, that's it for formatting a text block.
| | Collapse this transcript |
| Gathering text input from the user| 00:00 | There are times when you need to
gather text input from your users.
| | 00:03 | There are three controls
I am going to look at today.
| | 00:06 | One is the TextBox.
| | 00:07 | The second is the Password Control.
| | 00:09 | And the third one is this interesting
new one called the AutoComplete Box.
| | 00:12 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:15 | the GatheringTextInput solution.
| | 00:17 | We're going to look at two places here.
| | 00:20 | MainPage is our typical PixelSmith application.
| | 00:23 | The only difference is --
press F5 to take a look at it.
| | 00:28 | In the UI, I have added this
button here called Show Options.
| | 00:30 | And when you click on the Show Options
button, it's going to launch a special
| | 00:34 | window called the child window.
| | 00:36 | I have a whole movie on child windows,
but let me just say this, child windows
| | 00:39 | are windows that pop-up over the main UI.
| | 00:43 | And then I can dismiss them and they disappear.
| | 00:45 | It typically uses dialog forms.
| | 00:47 | If I close the PixelSmith and return
to Visual Studio, here is the child
| | 00:53 | window, the OptionDialog.
| | 00:54 | And this is full of different TextBoxes.
| | 00:59 | We have the obvious one, the
simpleTextBox for just typing text in.
| | 01:04 | We also have another very easy
one to understand the PasswordBox.
| | 01:08 | All the PasswordBox does is
bullet out your text as you type.
| | 01:11 | You can customize the PasswordBox
with your own characters, if you don't
| | 01:15 | like the black bullet.
| | 01:18 | In the next TextBox, I have some sample
text in there and I want to spend a few
| | 01:22 | minutes talking about the selection
properties you can do in the TextBox.
| | 01:26 | So, I've added a few buttons.
| | 01:27 | Again let me show the demo, and
then we'll come and look at the code.
| | 01:31 | Click the Show Options
button, type some text here.
| | 01:35 | Type some other text here, so you
can see the block type characters.
| | 01:38 | And then in this example,
I can choose Get Selected.
| | 01:42 | I'll select some text here, and
choose Get Selected and it prints it out in
| | 01:45 | this other TextBox.
| | 01:47 | I can set the selected text by clicking here.
| | 01:49 | I can choose all the text and finally,
I can specify a string and it will find
| | 01:54 | the string within the
TextBox and select that value.
| | 02:01 | To see more, I am going to have
to go to the code behind page.
| | 02:06 | Here is the code for getting the selected item.
| | 02:09 | I go to the TextBox and I get the
SelectedText property and assign it to a string,
| | 02:13 | then I show it in the other text box.
| | 02:16 | In the setSelected, I move the Focus.
| | 02:19 | This is important, because if the Focus
isn't on the TextBox, it won't do what you want.
| | 02:22 | So, I set the Focus to the
TextBox and then I say Select.
| | 02:27 | You want to set the start position and the
number of characters that you want to return.
| | 02:32 | SelectAll is even simpler.
| | 02:33 | You just set the Focus and
then call the SelectAll method.
| | 02:36 | And then the selectByString, as I
move the Focus there, make sure that you
| | 02:41 | have something selected.
| | 02:43 | And if you do, then I
replace it with this string.
| | 02:46 | I will show you that in a few
minutes when I return to the demo.
| | 02:49 | The next one I want to look at is
the AutoCompleteBox. Here it is.
| | 02:57 | The AutoCompleteBox is part of another library.
| | 03:00 | So, I had to bring it into scope.
| | 03:03 | I have this property down here set.
IsTextCompletionEnabled = "True".
| | 03:07 | And I have a FilterMode that I can set.
| | 03:09 | In this case, I am saying, if
the word starts with my value.
| | 03:12 | The idea behind the AutoComplete is
you give it a list of words, and as you
| | 03:17 | type in the AutoCompleteBox, it gives
you a dropdown list of those words so
| | 03:20 | you can complete them.
| | 03:21 | The list of items comes from my
code behind up here in the constructor.
| | 03:29 | I have created a list of strings with
the day names available, and then I took
| | 03:34 | this list of strings and applied it as
the item source of the AutoCompleteBox.
| | 03:38 | So, now we'll run the application.
| | 03:42 | I have got two more parts
of this demo to show you.
| | 03:44 | One is if I've got some text
selected in here, I can select by string.
| | 03:47 | It replaces what I had
selected with the new string.
| | 03:53 | And then down here in the AutoCompleteBox,
I can type in Monday, Tuesday, and so on.
| | 04:00 | And the AutoComplete part is that I
don't have to finish typing anymore.
| | 04:03 | I can just hit Enter to have
it AutoComplete my date entry.
| | 04:07 | That's all I have for text controls.
| | 04:09 | All three of them are them are useful,
but I will have to say that my favorite
| | 04:11 | is the AutoCompleteBox.
| | Collapse this transcript |
| Using and embedding Silverlight fonts| 00:00 | In this movie, I like to talk to you
about using and embedding Silverlight fonts.
| | 00:04 | Any element in Silverlight that
displays text has a font property.
| | 00:08 | If you dig into the font property,
you'll find lot of interesting pieces there.
| | 00:11 | You can change the font
name through the font family.
| | 00:14 | You can you change its size
or its weight, make it bold.
| | 00:17 | You can change its style,
which means italics usually.
| | 00:20 | And then you can stretch it.
| | 00:22 | FontStretch only works on fonts that
have condensed or expanded versions.
| | 00:27 | Silverlight includes a number of built-in fonts.
| | 00:30 | As long as you use these fonts in your
Silverlight application, you won't have
| | 00:34 | to do any extra work.
| | 00:36 | However, if you use anything other
than the standard fonts, you have to embed
| | 00:39 | them in your Silverlight assembly.
| | 00:41 | Let me show you how to do that in this movie.
| | 00:43 | The basic steps are you add the font file
to the project, say a TTF or an OTF file.
| | 00:49 | You set the build action for that
font to resource and then in your code,
| | 00:53 | whenever you want to use it,
you use the font family name.
| | 00:55 | You use the physical filename and
then the # symbol and then the font name.
| | 00:59 | If you use the Expression Blend, you
don't have to go through any of this,
| | 01:02 | because Expression Blend
does all the work for you.
| | 01:04 | Be sure that you verify that you
have a license to embed this font.
| | 01:07 | If you're on Windows XP, there is a
utility called the Font Extension Utility
| | 01:11 | that lets you investigate this.
| | 01:13 | Here is a URL to find out more.
| | 01:15 | If you're on Windows Vista or Windows 7,
you can just right-click on the file
| | 01:19 | and choose Properties.
| | 01:20 | Let me show you that.
| | 01:21 | I am inside the Fonts folders
inside my Windows application.
| | 01:24 | Let's say I am interested in
trying to embed this font in my
| | 01:26 | Silverlight application.
| | 01:28 | I right-click on it, and choose
Properties, then go over to the Details tab and
| | 01:34 | look at the Font embeddability property.
| | 01:37 | The two legal values here are
Editable or Embeddable. All right!
| | 01:42 | Let's choose Blend to see
how it is to add a font.
| | 01:45 | If you're following along in the
Exercise Files, you're going to want to open
| | 01:47 | the UsingFonts solution, then
double-click on the MainPage.xaml.
| | 01:53 | This solution contains the PixelSmith
application, which we've been working on
| | 01:56 | throughout this course.
| | 01:57 | I can't see the top.
| | 01:58 | So, I am going to hold down the Spacebar and
then drag till I can see the word PixelSmith.
| | 02:03 | Then I am going to select PixelSmith.
| | 02:06 | Next, I am going to go to the
Property panel, go down to the Text property.
| | 02:10 | You might need to collapse a few of
the sections, and then in this dropdown,
| | 02:15 | you can see your fonts.
| | 02:16 | I am going to scroll to the top.
| | 02:19 | Any font that has this blue symbol
here is a built-in Silverlight font.
| | 02:22 | So, that means I can just click
Arial Black, and use that font.
| | 02:27 | If I pick a font that's not one of
the included font, like Aharoni, I get a
| | 02:33 | warning inside Blend.
| | 02:35 | The font, Aharoni, isn't a
built-in Silverlight font.
| | 02:38 | You must embed this font for it to
display in your application. Okay.
| | 02:42 | I will select Embed and run the application.
| | 02:47 | That's all you need to do.
| | 02:49 | The steps were choose the font,
make sure you select Embed.
| | 02:56 | You can also see, using the Font Manager,
which fonts you want to embed in the application.
| | 03:01 | You can see that I have got
one font embedded right now.
| | 03:03 | I guess the takeaway from this movie
would be use Blend whenever you want to do
| | 03:09 | a non-standard font.
| | Collapse this transcript |
| Understanding content controls| 00:00 | Before learning buttons and other
elements, we should spend a few minutes
| | 00:03 | learning about content controls.
| | 00:05 | This is a simple concept that
has powerful ramifications in
| | 00:07 | Silverlight Templates.
| | 00:09 | A few of the Silverlight
elements derive from ContentControl.
| | 00:12 | All this really means is that
the control can have child content.
| | 00:15 | In other movies, we've seen other elements
like the panel that can contain children.
| | 00:19 | But its main purpose is to
control the layout of its children.
| | 00:22 | And there's another element called
ItemsControl, which is used for showing lists of data.
| | 00:26 | Content controls just have one simple
job. They render any children content.
| | 00:32 | That could be a UI element, like an image
control or a TextBlock, or it can be a .Net type.
| | 00:37 | Now since .Net types don't usually have
a UI, you specify the UI with something
| | 00:42 | called a DataTemplate.
| | 00:44 | The number one rule about content elements,
they can only have a single child element.
| | 00:49 | Here are some of the content controls.
| | 00:52 | This is the base class, the
ContentControl, and then there is a ButtonBase
| | 00:55 | class, and then I see a few buttons over here.
| | 00:58 | There is the button that derives
from ButtonBase, the RepeatButton, the
| | 01:02 | Hyperlink and two types of
ToggleButton, the CheckBox and the RadioButton.
| | 01:07 | The other really interesting one is the
ToolTip, which is your little floating
| | 01:11 | tip that pops up as you hover over an item.
| | 01:13 | All of these can contain children content.
| | 01:17 | I have switched to Visual Studio.
| | 01:19 | If you're following along in the
exercise files, you're going to want to open
| | 01:21 | the ContentControl solution.
| | 01:23 | And then you're going to want
to double-click on MainPage.xaml.
| | 01:27 | We'll start by looking at a CheckBox.
| | 01:30 | A CheckBox is a content control.
I specified Content as a string.
| | 01:35 | Since strings cannot be loaded into the
visual tree, you have to place them in
| | 01:39 | something that can be shown in the visual tree.
| | 01:41 | In this case, it would be the TextBlock.
| | 01:43 | If you desire, you can specify your own
explicit TextBlock as I've shown here in line 31.
| | 01:48 | I have a TextBlock inside
the content of my CheckBox.
| | 01:51 | Let's see what they look like.
| | 01:54 | Press F5, and I have two
check boxes, both showing strings.
| | 02:01 | You might remember that I said just a
minute ago, that there is only a single
| | 02:07 | child allowed as content.
| | 02:09 | In this CheckBox, I have
a StackPanel as the child.
| | 02:12 | But since the StackPanel can handle
multiple elements, I have put two TextBlocks
| | 02:17 | within the StackPanel.
| | 02:25 | I've now added a CheckBox to the
StackPanel, which is inside the CheckBox.
| | 02:31 | Yes, it sounds odd, but let's take a look.
| | 02:34 | Here is my check box and here is
a check box inside the check box.
| | 02:38 | Now I am not encouraging you to go
ahead and do silly things like this in your UI.
| | 02:41 | But the point here is that
ContentControl can have any valid UI elements.
| | 02:46 | For instance, what about something more
useful like this image, and this text?
| | 02:50 | And this becomes really powerful later when
we start learning about control templates.
| | 02:54 | I can completely replace the UI of this
button with my own UI of any valid UI element.
| | 03:00 | Would you like to see how I put
this image in the button? Sure.
| | 03:08 | Here is my button, here is my content.
| | 03:11 | Inside the StackPanel,
I have an Image and a TextBlock.
| | 03:15 | We'll learn more about
content controls in other movies.
| | 03:17 | Content controls may seem like a simple idea,
but they enable some powerful features.
| | 03:21 | Most importantly, they enable data
templates and they enable control templates.
| | Collapse this transcript |
| Understanding the button controls| 00:00 | The button is a simple to understand control.
| | 00:02 | The most common use of the button is to
initiate an action, but you may be
| | 00:05 | surprised to learn that the check box and the
radio button are also considered button elements.
| | 00:10 | I think we should just go
right directly to Visual Studio.
| | 00:12 | If you are following along with the
exercise files, you're going to want to open
| | 00:15 | the ButtonControls solution and then
double-click on the MainPage.xaml file.
| | 00:21 | I thought I would show what the
user interface looks like first before
| | 00:23 | modifying any of the XAML.
| | 00:25 | Press F5 to run the application.
| | 00:28 | I have two buttons at the top, which I
am going to use to demonstrate the new
| | 00:30 | ClickMode feature in the button.
| | 00:32 | I am going to add another control called
the RepeatButton and then we are going
| | 00:36 | to discus the check box and radio buttons,
in particular how you can group radio
| | 00:40 | buttons into separate groups.
| | 00:41 | Let me start by scrolling down here to
the first button and I'm going to set
| | 00:48 | something called the ClickMode on this.
| | 00:50 | There are three ClickModes, only two
which you use regularly in Silverlight.
| | 00:53 | The first one we're going to look at is
the Release mode and the second one down
| | 00:58 | here will be the Press mode.
| | 01:03 | The difference is when the click
event fires. In the Press mode it fires
| | 01:06 | immediately as soon as you mouse down.
| | 01:08 | In the Release mode it does not fire
until you let go of the mouse button.
| | 01:11 | Let's see how that looks. Press F5.
| | 01:17 | On this first button,
I am going to click-and-hold.
| | 01:18 | You see that the button turned blue.
| | 01:20 | That signifies I am
holding the mouse button down.
| | 01:22 | I let go the mouse button
and you see my time-stamp.
| | 01:26 | On this one, I am going to click-
and-hold. The event fired immediately.
| | 01:29 | You can see I am still holding the button
down, because the button still blue.
| | 01:33 | When I let go of the button
nothing additional happens.
| | 01:37 | Sometimes in your application you want
to have a button that repeats an event
| | 01:40 | over and over again.
| | 01:41 | There is a special button
that does that in Silverlight.
| | 01:43 | It's called the RepeatButton.
| | 01:45 | For my demo I am going to copy this
button code right here and I am going
| | 01:50 | to paste it down here.
| | 01:54 | Then I need to modify a few things.
| | 01:55 | The first thing I need to do is change its
name. Otherwise the compiler will not like me.
| | 02:02 | Change the event handler name. Come up
here and change this to say RepeatButton
| | 02:07 | and then I am going to modify three properties.
| | 02:09 | I am going to delete the
ClickMode and I am going to add a delay.
| | 02:13 | I am thinking of one second delay or
1,000 milliseconds will do, and then I'd
| | 02:20 | like the interval-- When you repeat
what's the values that's going be added.
| | 02:24 | I think I will use 50 for this one.
| | 02:28 | We'll run the application again.
| | 02:35 | I did not change the text on the button,
but this is the RepeatButton here and
| | 02:39 | when I click on it, you see there is
a one second delay and then it starts
| | 02:44 | firing at 50 milliseconds.
| | 02:48 | Every time it fires I've got a
little bit of event code in my C# file.
| | 02:52 | Let's double-click over here, and
I am just incrementing a counter and then
| | 02:58 | calling the counter.ToString and assigning
that to the text property of this TextBlock.
| | 03:05 | Next, I would like to talk about check boxes.
| | 03:06 | They are pretty simple.
| | 03:08 | They're basically a toggle button.
| | 03:09 | You click once to turn them on.
| | 03:10 | You click another time to turn them off.
| | 03:12 | Instead of looking like a button though,
they have some text and they have a
| | 03:15 | checkmark within the check box.
| | 03:18 | In the first CheckBox, I've said
IsChecked is True, so it should automatically
| | 03:22 | have the checkmark in it when
we see this for the first time.
| | 03:25 | In the second CheckBox I've set
the IsChecked property to Null.
| | 03:28 | Well, what does that mean?
| | 03:30 | That means it's not checked and
it's not unchecked. It's neither.
| | 03:34 | That's used when you have two or more
items that have a Boolean property and you
| | 03:38 | can't represent them, like I have a read-
only file and not read-only file and I have
| | 03:42 | a check box that's supposed to
represent that and I'd select both files.
| | 03:44 | I can't use a check box to show that state.
| | 03:47 | In this third text block I've done
the same thing. The only difference down
| | 03:50 | here as I said IsThreeState = "True".
| | 03:52 | What this allows is the user can select
from checked, unchecked, and indeterminate.
| | 03:58 | Whereas in this check box, once they
click on the check box, they only have the
| | 04:02 | choice of checked or unchecked.
| | 04:05 | Press F5 to see what this looks like.
| | 04:08 | First check box on and off, the
second check box is currently Indeterminate
| | 04:12 | and I click on it once.
| | 04:13 | It goes unchecked and then back to checked and
so on and in the third one, it's ThreeState.
| | 04:21 | Next I want to talk about radio buttons.
| | 04:23 | I have three radio buttons here.
| | 04:25 | This is a color radio button, Orange and
Burgundy, and they're mutually exclusive
| | 04:30 | and then Shiny I want to be
part of a different group.
| | 04:33 | I am going to put another radio button in here.
| | 04:40 | There are my radio buttons.
| | 04:42 | You turn on the IsChecked property to
show the little black dot in the radio
| | 04:47 | button and for my last example down here
I am going to choose this last radio button.
| | 04:53 | Paste in a copy, do a
tab to fix things up a bit.
| | 04:57 | Change this to say Matte, IsChecked is
False and lastly, I want this to be part
| | 05:04 | of the same group name.
| | 05:06 | That's how you link two radio buttons together.
| | 05:09 | Both these radio buttons share the
same group name, so only one of these can
| | 05:12 | be checked at a time.
| | 05:14 | In the last radio button,
I have set the IsChecked to False.
| | 05:17 | Now when I run this, these two radio
buttons are part of the same groups.
| | 05:21 | So only one of them can be enabled at a time.
| | 05:22 | Let's give it a try.
| | 05:24 | Press F5 and if we look, the first two
radio buttons are mutually exclusive and
| | 05:31 | the second two radio
buttons are mutually exclusive.
| | 05:34 | Here is a little tip.
| | 05:36 | It's possible for you to set both of
these to True or both of them to False.
| | 05:44 | However, if you set them both to True,
you've created a set of radio buttons
| | 05:47 | that you can't disable the second radio button.
| | 05:50 | Sometimes developers like to have both
radio buttons not selected so the user
| | 05:53 | has to initialize the first value.
| | 05:55 | In that case we would
just set them both to False.
| | 06:04 | And run the application by pressing F5.
| | 06:08 | You see neither one of them
has a bullet in it, but now I can
| | 06:10 | switch back-and-forth.
| | 06:12 | Really that's all I have for buttons.
| | 06:13 | They are very simple controls, like
I said at the beginning of this movie.
| | Collapse this transcript |
| Showing list data with ItemsControls| 00:00 | I'll wager that you have
lists of data you need to show your users.
| | 00:03 | You probably have arrays packed with
financial information, lists of customer
| | 00:07 | statistics, warehouses full of data, and
you need a way to show those to your users.
| | 00:12 | That's why all UI
frameworks have list controls.
| | 00:15 | In Silverlight, these list
elements are called items controls.
| | 00:18 | Their purpose is to wrap a collection
of data and alternatively apply a data
| | 00:23 | template to the results.
| | 00:24 | I'm in Visual Studio.
| | 00:26 | If you're following along,
you're going to want to open the
| | 00:28 | ListDataWithItemsControls solution and
then double-click on the AddInXAML.xaml file.
| | 00:38 | On line 15 of my XAML, I have a list box.
| | 00:41 | You can add items directly.
| | 00:43 | This is common when you just have a simple UI
where you need one or two items in the ListBox.
| | 00:48 | I've decided to add a TextBlock and
then some more unusual items, a TextBox,
| | 00:53 | a Button, and a CheckBox.
| | 00:56 | Any valid UI element it can be
added as a child of a ListBox.
| | 00:59 | In fact, I am going to come down here and
add an Ellipse, fill it with orange.
| | 01:05 | Oh, I see I have got OldLace instead of Orange.
| | 01:08 | OldLace is a valid color, so I am going
to go ahead and leave it in, and I will
| | 01:10 | set the Width to 30 and the
Height to 30, close my element. Oops!
| | 01:18 | I have a typo here, too.
| | 01:22 | Now let's run this application.
| | 01:23 | Let's press F5 and you can see there is
my text block, there is a text box, which
| | 01:32 | I can type in even though
it's in the list box.
| | 01:34 | Hidden there at the
bottom is my OldLace ellipse.
| | 01:37 | Now you'll notice I can select it.
| | 01:39 | Ellipses by themselves are not
selectable, but it's inside the list box now, so
| | 01:43 | it does have a selection handle on it.
| | 01:46 | That is because all list controls
have a helper that works with them.
| | 01:50 | In our case, the ListBox has
something called the ListBoxItem.
| | 01:55 | So, when I put this CheckBox in up here,
it actually got wrapped in a ListBoxItem.
| | 01:59 | I can also do it explicitly as
I've done in this second ListBox.
| | 02:02 | Here is a more practical example of
what you might put inside a ComboBox or a
| | 02:06 | ListBox instead of an ellipse.
| | 02:08 | I've created a StackPanel and inside
the StackPanel I have an Image and a
| | 02:13 | TextBlock and then I close my StackPanel.
| | 02:15 | Then I am going to run this
application. I am supposed to be able to see my
| | 02:21 | ComboBox down here at the bottom of the screen.
| | 02:23 | I've made an error.
| | 02:24 | If you watch one of the earlier movies
we talked about avoiding hardcoding sizes.
| | 02:29 | In this example, if you take a look at
the top of my XAML file, you'll see that
| | 02:33 | I hardcoded the height of my UserControl.
| | 02:36 | So, it's not flexible enough to shift.
| | 02:37 | So, I can type something in here like Auto.
| | 02:41 | Run the application a second time, and
now the combo box appears and if you look inside,
| | 02:47 | there is my image of the
camera and the text that goes next to it.
| | 02:51 | That's a more practical use.
| | 02:52 | You can even do more with this with
something called data templates and we'll
| | 02:56 | talk more about data templates in another movie.
| | 02:58 | In the real world, you're probably going
to have code, however, that contains data.
| | 03:03 | So, there has to be a way to
programmatically add data to these ListBoxes.
| | 03:06 | So, that's what my second example will show.
| | 03:08 | First though I need to go to my App.xaml
.cs file and change my Startup object.
| | 03:17 | Then I need to open this
FromCollectionInCode.xaml file.
| | 03:23 | In the XAML itself I just have two list
boxes with names and in the code behind,
| | 03:26 | I am going to press F7 to go to the code behind.
| | 03:31 | I'm showing how you can go directly
to the ListBox it has a built-in items
| | 03:35 | collection and I can say
Items.Add and put a string in there.
| | 03:40 | Another way of doing this would
be to go and have some data store.
| | 03:43 | In this case I have a list.
| | 03:44 | This is a generic list of strings.
| | 03:46 | I declared a variable here called days.
| | 03:49 | I filled the list of strings with the
days of the week strings and then I can
| | 03:54 | assign the days list
directly to the ItemsSource.
| | 03:57 | Now notice there is a
difference, Items, ItemsSource.
| | 04:01 | You can only have one of these active at a time.
| | 04:03 | Again, I'll reiterate. This is the
built-in one that is part of the ListBox.
| | 04:06 | You use ItemsSource when
you are doing data binding.
| | 04:09 | Let's see what this one looks like.
| | 04:13 | And there you go.
| | 04:14 | There is the first list box with the
month names and here's the second one with
| | 04:18 | the days coming from that generic list.
| | 04:21 | There are a surprising number of
elements that derive from items control.
| | 04:24 | The TreeView is one that surprises
most people is the TabControl.
| | 04:27 | Also, there is one called the DataGrid,
which allows you to do multiple rows,
| | 04:32 | and multiple columns and you'll find
that inside the Silverlight toolkit.
| | Collapse this transcript |
| Exploring the Silverlight toolkit controls| 00:00 | The Silverlight toolkit is chock-full
of extra controls including the TreeView,
| | 00:05 | TabControl, several chart controls,
calendars, the DataGrid and many more.
| | 00:09 | In this movie, I'd like to show you a few of
the controls that are available in this toolkit.
| | 00:13 | Remember the toolkit is developed by
the Silverlight team, is free to use, and
| | 00:17 | is available from CodePlex.com website.
| | 00:20 | Using a control from the
Silverlight toolkit requires that you add a
| | 00:22 | reference to the toolkit DOL.
| | 00:23 | I will show you how to do that in Visual Studio.
| | 00:26 | If you're following along, you
are going to want to open the
| | 00:28 | ExploringSilverlightToolkit
project and then double-click on that
| | 00:33 | MainPage.xaml file.
| | 00:36 | The Silverlight application of this
project should look familiar to you.
| | 00:39 | It's PixelSmith, which we've
been building throughout the course.
| | 00:43 | When you install the Silverlight toolkit,
it adds a Silverlight controls to the
| | 00:46 | Visual Studio toolbox. Let's find them.
| | 00:49 | Here is the toolbox. I am going to pin
it to the side of window by clicking
| | 00:53 | the Autohide button.
| | 00:54 | I am going to take this Accordion
control and I'm going to drag it into my XAML.
| | 00:59 | When I do that, it's going to do two things.
| | 01:01 | It's going to add a new XML namespace to
the top of my UserControl and it's going
| | 01:04 | to add a reference to my References folder.
| | 01:07 | So I will open my Reference folder so
you can see that happened and I need to
| | 01:10 | scroll down here and drag my Accordion control.
| | 01:15 | Keep an eye on the References folder.
| | 01:21 | We now have two new references and I also
have a new XMLNS:layouttoolkit added to
| | 01:29 | the top of the UserControl.
| | 01:33 | I am going to run the application so
you can see what the user interface
| | 01:35 | looks like right now.
| | 01:37 | I have five buttons in this area and I
am going to wrap three these buttons in
| | 01:40 | one accordion item and two of
them in another accordion item.
| | 01:46 | To do that I need to take this ending
tag for the accordion and move it down
| | 01:52 | here where this comment tag is.
| | 01:54 | I am going to cut the ending
tag and paste it right here.
| | 02:00 | Next, I need to wrap this
StackPanel in an AccordionItem.
| | 02:11 | Again, I need to cut this end tag
and paste it after the end StackPanel.
| | 02:19 | Then I am going to take both these tags and
wrap them around the StackPanel down here.
| | 02:22 | I am going to copy these.
| | 02:23 | Copy this one, paste it here right
after the StackPanel, and copy the first one,
| | 02:29 | this AccordionItem right here on line
45, and paste it right above the StackPanel.
| | 02:36 | I am going to have in Visual Studio
rearrange my code. Format Document makes it
| | 02:43 | little bit easier to read.
| | 02:45 | Then I am going to hide my toolbox.
| | 02:47 | Then let me review what I've done here.
| | 02:49 | I have created an Accordion control.
| | 02:51 | I've created one AccordionItem.
| | 02:53 | I've wrapped the StackPanel and its
three buttons inside the AccordionItem.
| | 02:57 | Then I've created a second AccordionItem
and I've added this StackPanel with its
| | 03:02 | two children buttons within it.
| | 03:03 | Let see what it looks like.
| | 03:08 | Press F5, launch the browser, the
first three buttons are in the first
| | 03:12 | AccordionItem and the last two
buttons are in the second AccordionItem.
| | 03:15 | It's not quite perfect yet.
| | 03:18 | I am going to make two more changes.
| | 03:20 | I am going to add a
header to the AccordionItem.
| | 03:23 | So, I will find this one right here on line 46.
| | 03:29 | Header = 'Shapes' and we are
going to make the font larger.
| | 03:38 | Then I am going to copy this Header and
FontSize and I will paste it down here
| | 03:44 | on the second AccordionItem and
then modify this to say Images.
| | 03:51 | One final change I am going to go to the
Accordion itself and then I am going to
| | 03:57 | set the ExpandDirection to Right.
| | 03:59 | You will see what that does in a minute.
| | 04:01 | Press F5 to run the application.
| | 04:06 | By setting the ExpandDirection to Right
we now have the shapes turned sideways and
| | 04:15 | by adding a header, I know it's Shapes and
Images, so I know what will happen when I
| | 04:18 | click on this button.
| | 04:22 | There are a number of controls in the
Silverlight toolkit. Rather than write a
| | 04:27 | bunch of code in this demo, I'll
show you another way you can learn more
| | 04:29 | about these controls.
| | 04:30 | When you install the Silverlight
toolkit, it adds a demo application.
| | 04:34 | You can find that in all programs.
| | 04:37 | The Microsoft Silverlight 3 Toolkit
November 2009, that's the latest version I
| | 04:43 | have installed on my computer.
| | 04:46 | Then is folder I am going to
open up this toolkit Samples.
| | 04:50 | This is a really nice reference application.
| | 04:53 | You can spend hours in
here learning how this works.
| | 04:55 | I am going to start by looking at the
DataVisualization section and clicking on the pie chart.
| | 05:02 | What you see here is an
example of the pie chart in use.
| | 05:05 | You can come down here to the bottom
of the window and click PieSample or
| | 05:08 | PieSample.xaml.cs or Pie Sample.
xaml.vb to see the source code.
| | 05:14 | I can collapse this by
clicking this button over here.
| | 05:16 | This is a Silverlight control.
| | 05:20 | Scroll down to see
multiple versions of the chart.
| | 05:22 | You notice that some of them have
dynamic items being added on a timer or an
| | 05:30 | animation and then I can
click over to see animated charts.
| | 05:34 | Scroll up so you can see
those a little bit better.
| | 05:40 | That's fun. There is also a section
on clendars up here at the top.
| | 05:46 | Scroll through to find a date, select it.
| | 05:48 | There are several controls up here for
choosing how you want the control be configured.
| | 05:52 | Don't allow selection, Contiguous Dates
Selection, so I can choose multiple days
| | 05:57 | in a row, but I will also
show you the TabControl.
| | 06:01 | Here is the TabControl.
| | 06:02 | I can dynamically add items by
clicking on this button to this TabControl.
| | 06:06 | You can see up here you can
put sub-content on each tab item.
| | 06:13 | Another favorite of mine is
the BusyIndicator down here.
| | 06:18 | You can show this UI to your users
when they are waiting to have something
| | 06:21 | download, like for instance over here
and you can click on Cancel or Pause
| | 06:25 | during this process.
| | 06:27 | Lastly, I want to show you
the TreeView. There it is.
| | 06:32 | It looks like most TreeViews you expect.
| | 06:36 | You open a node and there are
your children nodes underneath it.
| | 06:41 | There are a massive amount of controls
available in this toolkit and I know you're
| | 06:44 | going to enjoy exploring them on your own.
| | Collapse this transcript |
| Digging into the DataGrid| 00:00 | The king of the ItemsList is the DataGrid.
| | 00:02 | This element can show multiple rows and
columns and has sophisticated layout and formatting.
| | 00:06 | It also supports a rich set of events,
which fire as the user manipulates
| | 00:10 | the data in the grid.
| | 00:11 | For this demo, I am going to use
Expression Blend primarily because it has some
| | 00:15 | excellent data binding tools.
| | 00:17 | If you're going to bind the data
grid to data, you need a data source.
| | 00:20 | In my project, I have a Person
class, which is quite simple.
| | 00:24 | Double-click on the Person.cs and you
can see that it's a Person class with a
| | 00:27 | FirstName, LastName, Gender
and ScienceGroup property.
| | 00:32 | I also have a Persons class, which
derives from the list of persons.
| | 00:38 | That means that it can contain multiple persons.
| | 00:41 | It's strongly typed to only hold the
Person class and as you can see, in my
| | 00:45 | constructor I'm adding a number
of new person items to the list.
| | 00:50 | If you're following along,
don't forget to open the
| | 00:52 | DiggingIntoDataGrid solution.
| | 00:55 | Double-click on BasicGrid.
xaml and now go to the Data tab.
| | 00:59 | This is one of the tools
I was mentioning in Blend.
| | 01:01 | If you go to the Data tab and come over
here and click on this button, the Add
| | 01:05 | live data source button, and then
choose Define New Object Source,
| | 01:10 | you are shown a list of
the potential data sources.
| | 01:12 | I want to use my Persons class so I will
come down here, and select it and then click OK.
| | 01:18 | Now note that I have a PersonsDataSource
and I have a Persons (Array) underneath that.
| | 01:24 | If I take the Persons (Array) and drag it
over to my artboard, you will see that
| | 01:27 | it says Create a ListBox and bind its
ItemSource property to PersonsDataSource.
| | 01:32 | If I let go, you will see
that I do get a ListBox that's bound.
| | 01:35 | It doesn't look quite right though
because FirstName, Gender, LastName
| | 01:39 | are all mixed together.
| | 01:40 | The solution to this is to create
something called a data template, which is the
| | 01:44 | topic of another movie.
| | 01:45 | I will delete the ListBox.
| | 01:46 | I will then go to the tool
panel and add a DataGrid.
| | 01:50 | Move over here, come down and click on
the Assets button, which allows me to
| | 01:55 | find any element that's available.
| | 01:59 | I type in datag, which brings up my
DataGrid in the filtered list. I choose it,
| | 02:06 | and then I can select it and
draw the data grid in my artboard.
| | 02:10 | Now I can take that Persons
(Array) and drag it over, and I get a
| | 02:15 | slightly different tooltip.
| | 02:16 | It now says Bind DataGrid
ItemSources to PersonsDataSource, and
| | 02:20 | that's precisely what I want.
| | 02:22 | I let it go with the mouse button, and
instantly the DataGrid is populated with data.
| | 02:27 | Now, all I need to do is make it look nicer.
| | 02:28 | I will go to the Properties pane.
| | 02:31 | You need to scroll down till you see
the Common Properties area, make sure
| | 02:35 | that's open, and then change
the HeadersVisibility to All.
| | 02:39 | Keep you eye on the
Data Grid now while I do this, there.
| | 02:43 | What happened is that it added a row header,
which makes it easy for your users to select the row.
| | 02:47 | I would also like to turn on
the Gridlines by selecting All.
| | 02:52 | This is subtle so keep your eye on the grid.
| | 02:54 | And then finally I am not
happy with this FirstName.
| | 02:57 | It should have a space in it.
| | 02:59 | I will go over to the panel, choose
Columns (Collections), click the button
| | 03:03 | with the three dots on it, select the first
column, and then I am going to do two things.
| | 03:09 | I am going to make it bold by
clicking the Bold button, and then I am going
| | 03:13 | to go up to this header and I am going to
type a space right here, and then click OK.
| | 03:20 | The result, all of the data in that column
is now bold, and the header now looks better.
| | 03:26 | The grid is very sophisticated.
| | 03:28 | It would take me several hours to go
through all the details of what you can
| | 03:30 | do with the Data Grid.
| | 03:31 | So, what I thought I would do from
my last demo is show you how you can
| | 03:34 | group data in a grid.
| | 03:35 | To do that you need to go look
at the GroupingData.xaml file.
| | 03:39 | I will also run the application so
you can see what this looks like.
| | 03:44 | Before I do that though, I must
switch my App.xaml start. Open up App.xaml,
| | 03:49 | open up App.xaml.cs, scroll down and
make sure you uncomment the line where we
| | 03:54 | set the GroupingData as the Startup
object and comment out this other line
| | 03:58 | where we had the basic grid.
| | 03:59 | Then press F5, and here is our
grid now with grouping available.
| | 04:07 | I can click on Gender,
and now it groups by Gender.
| | 04:11 | Male, Female -- Oh!
| | 04:13 | And I see we have a typo.
| | 04:14 | Linus somehow has a typo in his
gender so he shows up in a separate group.
| | 04:21 | Go back to ScienceGroup. Now they are
grouped by Chemist, Biologist and so on.
| | 04:27 | This is all done in my
code behind for grouping data.
| | 04:35 | I have a little bit of code down here.
| | 04:37 | This code fires whenever you
choose something new in the combo box.
| | 04:40 | This code runs the first time the page loads.
| | 04:43 | What I am doing is I am getting the
underlying data source for the DataGrid
| | 04:47 | with this here.
| | 04:48 | Then I am getting the PagedCollectionView,
which allows me to split the view
| | 04:52 | of my data into pages, and then I store that
here and then I say I have a group description.
| | 04:59 | Look for the
ScienceGroup in the underlying data.
| | 05:01 | Make that the criteria for the group.
| | 05:04 | Then I no longer bind that personGrid
directly to the underlying data source.
| | 05:08 | I bind it to this paged view instead.
| | 05:11 | And the DataGrid knows what to do with that.
| | 05:13 | It splits it into multiple pages,
in this case separate groups.
| | 05:17 | All my combo box code does down at the bottom
| | 05:19 | is swap out of the GroupDescription
based on Gender or ScienceGroup, what
| | 05:24 | it finds in the combo box.
| | 05:25 | So, it goes to the combo box, gets
the selected item in the combo box, which
| | 05:28 | should say something like
Gender, and then that sets the
| | 05:31 | PropertyGroupDescription over here.
| | 05:34 | What more can I say?
| | 05:36 | The DataGrid is very powerful and well
worth your time learning how to use it.
| | Collapse this transcript |
| Using DataBinding to work with data| 00:00 | One of the most satisfying areas in this
Silverlight API is the binding framework.
| | 00:04 | This is a huge topic, one
that deserves its own title.
| | 00:08 | So, in this movie, I will concentrate on
showing you a few simple data binding tricks.
| | 00:12 | In this movie, I am going to be using
both Visual Studio and Expression Blend.
| | 00:15 | I am going to start in Expression Blend.
| | 00:17 | If you're following along with the
Exercise Files, you are going to want to
| | 00:19 | open the DataBindingWithData
solution and then double-click on the
| | 00:23 | SetupBinding.xaml file.
| | 00:26 | I have three controls
here that I am going to use.
| | 00:28 | I have a check box, a text box and a text box.
| | 00:31 | What data binding does is it takes and
synchronizes the data in a source and
| | 00:37 | pushes it into the target.
| | 00:39 | Silverlight supports something
called element to element binding.
| | 00:41 | So, what I am going to do is I am
going to take the Text property of this
| | 00:44 | text box, I am going to bind it to
the Content property of this check box.
| | 00:48 | To do that, I select the check box,
move to my Property panel, type in content
| | 00:56 | and here is the Content property.
| | 00:57 | Normally, I can type a text in here,
like Hello, and you will see that it shows
| | 01:03 | up as the Content property of the checkbox.
| | 01:06 | Well, what I want to do is do a binding.
| | 01:08 | To do my binding, I am going to
click on this little white button.
| | 01:11 | Yes. This is a button.
| | 01:12 | Some of my friends on the Expression
Blend team are calling this as the Property
| | 01:14 | Peg now for setting properties.
| | 01:17 | You click on it once, and then we are
going to go down to this yellow section
| | 01:20 | called Data Binding.
| | 01:21 | Remember, that color yellow is
going to be important in just a second.
| | 01:25 | Click on Data Binding and what I am
doing is an element to element binding.
| | 01:29 | So, I am going to click on this middle
tab, and then I am going to choose the
| | 01:32 | source, which is the textBox, and then
I am going to choose its property, which
| | 01:38 | is the Text property. There it is.
| | 01:40 | It tells me the data type of the Text
property is String and then down here
| | 01:44 | it shows that I am binding
to the Text property again.
| | 01:46 | That's redundant information at this moment.
| | 01:49 | Click OK. I told you to keep an eye
on that color yellow. Do you see it?
| | 01:54 | In the Property panel, the peg is
now yellow, which signifies that it is
| | 01:58 | data bound, and it also reinforces that
by putting a yellow border around this.
| | 02:01 | That's to tell you that this data is no
longer coming directly from the element.
| | 02:04 | It's coming from a bound element.
| | 02:07 | If I run the application and type some
new text in here, it works like you expect.
| | 02:16 | For my next binding, I am going
to do something a little different.
| | 02:18 | I am going to bind the Is.Checked
property of the check box to the string
| | 02:24 | that's in this text box.
| | 02:26 | Now I have to do some extra work,
because the binding framework doesn't know
| | 02:29 | what to do with a String to a Boolean value.
| | 02:32 | So, all I have to do is run this through
a value converter, and when the binding runs,
| | 02:36 | it will run my
code in the value converter.
| | 02:39 | It will then tell it what to do with
this string and turn it into a Boolean.
| | 02:42 | I am going to use Visual Studio for
this editing because Visual Studio has much
| | 02:46 | more powerful tools than
Expression Blend does for writing code.
| | 02:48 | So let's switch over to Visual Studio,
and I am going to open this file called
| | 02:52 | TextToBooleanConverter.
| | 02:55 | It's going to take string in, text.
| | 02:57 | It's going to give me back a True or False.
| | 02:58 | So, I will come over here and I am
going to say I am going to implement
| | 03:01 | the IValueConverter interface, and here is
the part I want you to see in Visual Studio.
| | 03:06 | There is a little blue tip
below the I in IValueConverter.
| | 03:11 | If I hover my mouse over it,
a little combo box pops up.
| | 03:15 | I can select that with my
mouse, and then choose Implement
| | 03:17 | interface 'IValueConverter'. Wow!
| | 03:20 | Look at that.
| | 03:22 | It wrote my Convert method for me and it
wrote my ConvertBack and it placed them
| | 03:26 | all in a region tag, so I can collapse
this and not have to look at it later
| | 03:30 | when I am working on other parts of my code.
| | 03:33 | For my example, I am only going
to implement the Convert method.
| | 03:35 | So, I am going to come in here,
and I need to return a Boolean.
| | 03:39 | I'll start by declaring a string variable.
| | 03:48 | I'm going to get the
incoming value passed to me here.
| | 03:51 | I am going to take that and convert it to a
string and store it in a string variable.
| | 03:56 | Then I am going to say, return, I need
to return a Boolean, candidate.Length > 0.
| | 04:08 | If the string has
characters in it, then return True.
| | 04:11 | If the string has no characters in it,
return False. We will save this.
| | 04:15 | I will switch back to
Expression Blend, verify that my
| | 04:19 | TextToBooleanConverter was changed.
| | 04:22 | I will compile my project by choosing
Project > Build, or Ctrl+Shift+B.
| | 04:26 | Now I am going to do my binding.
| | 04:29 | I will switch back to my XAML file,
choose my checkbox, and go through the steps
| | 04:33 | I went through before.
| | 04:34 | I will find the IsChecked property,
click on the Property Peg, choose Data
| | 04:40 | Binding, make it an element to
element binding, click the textBox.Copy.
| | 04:46 | It's not going to find the Text
property when you look in the list, because
| | 04:49 | it doesn't think that it's bindable.
| | 04:50 | I am trying to bind to a
Boolean, so it won't show it to me.
| | 04:53 | So I will come down here,
and choose Show > All Properties.
| | 04:59 | Now you can see the Text property.
| | 05:01 | I will select Text and now I need
to bring the converter into the mix.
| | 05:04 | I will click on the Show advanced
properties, and then come down to where it
| | 05:08 | says Value converter, and
choose my new TextToBooleanConverter.
| | 05:14 | Click OK and let's test
out our binding. Press F5.
| | 05:21 | While there is text in the text box, I have
a check in the check box, when there is no
| | 05:25 | text in there, there is no checkmark.
| | 05:27 | I have one more example I would like to
show. Probably a little more practical.
| | 05:32 | That's here in the BindingToolTip.
| | 05:35 | I have a CalendarDays class, which has a
DayName and an IsWeekend Boolean value.
| | 05:41 | And then I filled this CalendarDays class,
which is a list of calendar days, with data.
| | 05:45 | Monday is not a weekend, and so on.
| | 05:48 | In this BindingToolTip, I have a
list box and this is your control and it is
| | 05:52 | bound to the tooltip.
| | 05:55 | Now tooltip is the little floater that
pops up when you hover over something.
| | 05:59 | I have bound the tooltip to the list box.
| | 06:03 | And then the key thing about this, I am
searching through my XAML to take a look,
| | 06:06 | is in my list box I say the tooltip
is bound to the SelectedItem.DayName.
| | 06:12 | What this means is when I start up the app,
let's be sure and change your Startup.
| | 06:16 | Go to App.xaml.cs and uncomment this line
for the BindingToolTip and then press F5 to run.
| | 06:30 | And I select an item and then I hover
my mouse over the list box that shows Friday.
| | 06:34 | I will select Sunday now and then
hover over the list box and it says Sunday.
| | 06:40 | I really love the data binding in Silverlight.
| | 06:42 | I can't stress enough that you
should learn more about how it works.
| | Collapse this transcript |
| Floating UI with Popup and ToolTip| 00:00 | The tooltip showed up in user
interfaces about 20 years ago and continues to be
| | 00:03 | a useful addition to your UI.
| | 00:05 | I guess the most common use for the
tooltip is for informational bubbles.
| | 00:10 | For example, the user hovers over a
button and the tooltip provides additional
| | 00:13 | context regarding what the button will do.
| | 00:15 | I have switched to Visual Studio.
| | 00:16 | If you're following along with the
Exercise Files, you are going to want to open
| | 00:19 | the FloatingUI solution.
| | 00:21 | This solution contains the PixelSmith
application, which we have been working on
| | 00:24 | throughout this course, and then
double-click on the MainPage.xaml.
| | 00:30 | Then you should double-click on MainPage.
xaml.cs, because I want to show you something.
| | 00:34 | Since the last time we saw PixelSmith,
I have added a little bit of code that
| | 00:38 | actually adds some ellipses
and rectangles to the work area.
| | 00:41 | It's some simple code.
| | 00:42 | I have an AddEllipse_Click event
that creates an ellipse, sets a few
| | 00:47 | properties, positions it on the canvas,
and then wires up an event procedure,
| | 00:52 | the MouseLeftButtonUp.
| | 00:54 | I also do the same thing for rectangles.
| | 00:57 | Let's see what it looks like.
| | 00:58 | I will press F5 to run the application.
| | 01:03 | And then I will click
the Add Ellipse button.
| | 01:06 | Oh! Look at that.
| | 01:07 | Some new orange ellipses.
| | 01:09 | I click on the Add Rectangle,
and I see some yellow rectangles.
| | 01:14 | There also should be a tooltip. If you
hover your mouse over the Rectangle button,
| | 01:18 | you will see a simple text tooltip show up.
| | 01:20 | I am going to show you how to
make that look better in a minute.
| | 01:23 | But I would also like to point
out this thing called Show Popup.
| | 01:25 | There is a related element that looks
a lot like a tooltip called the popup.
| | 01:30 | What's the difference between the two?
| | 01:32 | The tooltip is launched automatically by
the system when you hover over a control.
| | 01:36 | That tooltip only stays on the screen for a
limited amount of time, then it fades away.
| | 01:40 | The user cannot interact
with the tooltip in any way.
| | 01:42 | The popup on the other
hand must be launched by you.
| | 01:45 | Once launched, it can remain on the
screen or automatically fade away.
| | 01:49 | And another key difference is that the user
can interact with the content on the popup.
| | 01:53 | I can click here and there is a button, and
I can click on this button to close the popup.
| | 01:58 | The primary usage of popups is for
little workpad areas inside your
| | 02:01 | Silverlight application.
| | 02:03 | Let's close that one and then close
this, and let's show you how to make that
| | 02:07 | tooltip look a lot nicer.
| | 02:08 | I am going to switch to my MainPage.
| | 02:10 | I am going to do a Ctrl+F, and then look
for tooltip and then dismiss this dialog.
| | 02:19 | But here is my button.
| | 02:21 | Here is the ToolTipService.
| | 02:22 | This is an attached property, so that I
can attach a tooltip to any element and
| | 02:28 | here is the neat part about tooltips.
| | 02:31 | Inside the beginning and ending
ToolTip tags, I can put any UI I want,
| | 02:35 | any valid Silverlight UI.
| | 02:37 | For my example, I am going to put a
StackPanel in here and I will cut the end
| | 02:42 | StackPanel and paste it down here, on line 65.
| | 02:48 | I am going to change the orientation
of the StackPanel to horizontal and I am
| | 02:54 | going to add an image.
| | 02:55 | Now I already have an image in this project.
| | 02:58 | We haven't talked about how
to add images to projects yet.
| | 03:00 | We will cover that topic in
the Images and Media chapter.
| | 03:03 | For right now, I am just going to add
an image and set its Source property,
| | 03:06 | which tells it which picture to load,
and I am going to use this one over
| | 03:10 | here called burst.png.
| | 03:12 | Burst.png is a file I have
already added to the project.
| | 03:16 | And then I will close my Image
tag and I am going to press F5.
| | 03:24 | Are you ready to see this awesome tooltip?
| | 03:27 | Okay, so it could use a little more work.
| | 03:28 | But imagine if you had a
couple of hours to work on this.
| | 03:31 | Any valid Silverlight UI
can be put into that tooltip.
| | 03:33 | I need to talk briefly about the popup.
| | 03:35 | There is the popup. H
ow do you turn on a popup?
| | 03:38 | I have two button click procedures that do this.
| | 03:41 | Let's look at the C# code.
| | 03:44 | On one button click, I say propertyPopup,
which is the name of my popup, .IsOpen = True.
| | 03:50 | And on the other button, the one
that was on the popup itself, I say
| | 03:55 | propertyPopup.IsOpen = False,
and that's all you need to do.
| | 03:58 | Remember you can use any UI in there.
| | 04:00 | So, you could use it as a little
toolbox, whatever projects come to mind.
| | 04:03 | Before you get too carried away with
the popup control, check out another movie
| | 04:06 | in the course, which shows the child window.
| | 04:08 | It's a much more powerful version of the popup.
| | Collapse this transcript |
|
|
8. NavigationSwapping content with UserControls| 00:00 | In most of the movies in this
course, I have been using a single page
| | 00:03 | application, but in the real-
world that's not often the case.
| | 00:06 | What we need is a way to
dynamically swap out content at runtime.
| | 00:10 | I am going to show you two demos in this movie.
| | 00:12 | If you're following along with your
Exercise Files, you are going to want
| | 00:14 | to open the Navigation solution,
then open the SwappingContent and then
| | 00:19 | open MainPage.xaml.
| | 00:23 | The Silverlight application in this
project should look familiar to you.
| | 00:26 | It's PixelSmith, which we've been
building throughout this course.
| | 00:29 | I am going to run the application and
show you what we are going to do in this
| | 00:32 | part of the example.
| | 00:34 | What I want to have happen is when we
add an ellipse, I want an ellipse specific
| | 00:38 | toolbar to show up in this area.
| | 00:41 | And when I add a rectangle, I want a
rectangle specific toolbar to show up here.
| | 00:45 | I have already written the toolbars.
They are in the UserControl folder. One is
| | 00:51 | called EllipseUserControl and one is
called RectangleUserControl and they
| | 00:56 | consist of a few buttons
and a little bit of code.
| | 00:58 | Let me show you an example.
| | 01:00 | What my code does is when you create
an instance of the EllipseUserControl
| | 01:06 | I pass in a workEllipse and I store it
in a member variable and then when you
| | 01:11 | click on the gradientButton, I create a
new GradientBrush and assign it to the
| | 01:15 | Ellipse that was passed in.
| | 01:16 | Now let's switch back to MainPage.
| | 01:19 | In MainPage, I have added a
new border called borderToolBars.
| | 01:30 | This is the place where I am
going to put the two user controls.
| | 01:32 | I'll switch to my code behind page and
I am going to scroll down here. I have a
| | 01:41 | couple of methods down near the bottom
called rectangle_MouseLeftButtonUp and
| | 01:45 | the ellipse_MouseLeftButtonUp.
| | 01:49 | This code is going to fire when you
click on the ellipse in the work area or the
| | 01:53 | rectangle in the work area.
| | 01:55 | What I am going to do here is write one
line of code. borderToolBars.Child = new
| | 02:02 | RectangleUserControl.
| | 02:05 | This is my UserControl I am going to put into
that toolbar area and then I am going to pass in
| | 02:10 | this item here, which is the sender.
| | 02:12 | That will be the rectangle I
just clicked on in the work area.
| | 02:14 | So, I am going to say sender as
Rectangle. I am doing the as Rectangle because
| | 02:20 | my code in the UserControl is
expecting it to be of type rectangle.
| | 02:26 | I will copy this code and
I'll paste it down here. Paste.
| | 02:31 | And then I am going to change this
slightly, and I am going to say this is going
| | 02:34 | to be EllipseUserControl and
this is going to be as Ellipse.
| | 02:42 | I needed to add the code one other place.
| | 02:45 | Up here in this function called
AddShapeToWorkArea, I have got a little if
| | 02:49 | statement in here that says, if the
shape is an ellipse then you are going to
| | 02:52 | create an ellipse and make it
orange and wire up some event handling.
| | 02:56 | And right here I also need to do the
code I just wrote here and here and
| | 03:02 | this should be changed to Ellipse and
this should be changed to an Ellipse.
| | 03:08 | Now this should be shape as Ellipse.
| | 03:16 | Shape is the local
variable that contains my shape.
| | 03:19 | Now let's run the app.
| | 03:24 | I click on the Add Ellipse,
I get a new ellipse. I get the ellipse
| | 03:27 | specific toolbar up here.
| | 03:29 | I can drag this around. I can click on
the Gradient to make it a gradient color
| | 03:33 | and click on the Bigger
button to make it bigger.
| | 03:35 | I click on the Add Rectangle.
| | 03:36 | Keep your eye on the toolbar.
| | 03:39 | It changes to the Rectangle toolbar. I can
then make this wider or change its color.
| | 03:45 | So, what I have shown you in this part
of the demo is I can dynamically change
| | 03:48 | our part of the UI at runtime.
| | 03:53 | There is another problem I need to
solve occasionally, which is I want to
| | 03:57 | change out the entire user interface inside
the Silverlight area, instead of just a subset.
| | 04:01 | I have a demo of that up here in
this project called ChangingRootVisual.
| | 04:04 | I am going to right-click and make
this my Startup project, so when I run
| | 04:09 | this the next time, it will use this
project and I am going to go look on my App.xaml.
| | 04:16 | In most of the application we have
written so far in this course, what has
| | 04:19 | happened inside the Startup event is
that I have been assigning a Silverlight
| | 04:24 | UserControl to the RootVisual.
| | 04:27 | In Silverlight, once you have assigned
a UserControl to RootVisual you are not
| | 04:30 | allowed to change it at any future point.
| | 04:33 | There's a little trick you
can use that to get around this.
| | 04:36 | Instead of storing a UserControl for
the RootVisual, use any container control.
| | 04:41 | In this case I have got a border.
| | 04:42 | So, I have created a border, I set the
BorderThickness and then I assigned the
| | 04:46 | border to the RootVisual and then I
said go to the border and make its child
| | 04:50 | new MainPage, which is this
page right here, the MainPage.
| | 04:54 | So when I run the application it looks
like your normal Silverlight app, but now
| | 05:00 | I can click on this button and I should
be able to switch over to another page.
| | 05:04 | Swap out the entire UI with a new look.
I just need to write a couple lines of code.
| | 05:10 | The key to making this work is that I
wrote this little method down here called
| | 05:13 | ChangePage that I can pass in any
UserControl to this ChangePage and it will
| | 05:17 | automatically swap out the root.
| | 05:22 | On the second page, I am going to type
in App.ChangePage, new MainPage and then
| | 05:32 | I am going to go to MainPage and then
in its Button_Click procedure I am going
| | 05:37 | to say App.ChangePage(new
SecondPage(). All right, ready to go.
| | 05:53 | There is the main page.
| | 05:54 | I click Go to Other Page.
| | 05:56 | It swaps out the entire UI with the new
page. I click on go back to Main and it
| | 06:01 | goes back to the previous page.
| | 06:02 | These are just two techniques for
dynamically changing your content at runtime.
| | Collapse this transcript |
| Creating dialogs and child windows| 00:00 | Silverlight 3 added a couple new
project types and a few new class types too.
| | 00:04 | I would like to spend this movie
looking at the ChildWindow class, which
| | 00:07 | simulates a modal window
within your Silverlight application.
| | 00:10 | If you're following along with the
Exercise Files, you are going to want to open
| | 00:13 | the DialogsInChildWindow solution.
| | 00:15 | Then we're going to add
a brand new child window.
| | 00:18 | I'll do that by right clicking on
the DialogsInChildWindows project,
| | 00:23 | selecting Add > New Item and then
inside the Visual C# Templates choose
| | 00:30 | Silverlight Child Window.
| | 00:31 | I am going to name mine
Demo and then press Enter.
| | 00:37 | Here is my new child window.
| | 00:38 | If you look up at the root
element, you will see that it is
| | 00:40 | controls:ChildWindow. That's my class.
| | 00:44 | I want to show this and I have a
button that I am going to use to show this.
| | 00:47 | It's inside by EllipseUserControl
class. Open up the UserControls folder,
| | 00:53 | double-click on the EllipseUserControl.
xaml file and then scroll down until you
| | 00:57 | find the printButton.
| | 00:59 | I am going to type in click, press the
Tab key, select the New Event Handler and
| | 01:07 | then I am going to press F7
to switch over to my Code view.
| | 01:12 | There is my printButton event procedure.
| | 01:15 | What do you think I am going to do in here?
| | 01:17 | I am going to write a little bit of
code to launch that brand new child
| | 01:19 | window that I created.
| | 01:25 | Here I am creating a new variable.
I type Demo, storing it in this variable
| | 01:30 | called dialog and then I am
going to call dialog.Show.
| | 01:36 | Show is a method that shows the new window.
| | 01:39 | I think we are ready to go. Press F5.
| | 01:45 | You need to add an ellipse, so
that the Ellipse toolbar shows up.
| | 01:49 | Then click on the Print button and this is
what a child window looks like out of the box.
| | 01:54 | It has an OK and a Cancel button.
| | 01:56 | It has a nice little animation when
it shows up and disappears, watch the
| | 01:59 | animation when I click OK.
| | 02:02 | Watch the animation when it comes in.
| | 02:03 | You can also click on the X
button, to have it go away.
| | 02:08 | I need out some user interface on there
and rather than writing that during the movie,
| | 02:12 | I have already written
one called the PrintWindow class.
| | 02:15 | So, we'll close the browser.
| | 02:17 | You already have this PrintWindow, which
is a child window, so I'll just need to
| | 02:21 | modify my code slightly.
| | 02:23 | I'll move to my print event and type in
var dialog = new PrintWindow and then
| | 02:30 | I am going to show the window like before.
| | 02:31 | I am going to do one other thing
before I show the window though.
| | 02:34 | If I want to get the print results back
from the print window, I need to set up
| | 02:38 | an asynchronous call back.
| | 02:40 | In Silverlight when you call
Show it's run on another thread.
| | 02:44 | What I need to do now is moved to this
line and say dialog.Closed, which is an
| | 02:51 | event, +=, tab, tab.
| | 02:56 | What will happen now is the dialog
will show, Silverlight will go back to
| | 03:00 | showing the main UI. When I close the
dialog, it will fire an event that runs
| | 03:05 | this dialog_Closed method.
| | 03:07 | And what I will do in here is create
an instance of my dialog window var
| | 03:15 | dialog = the sender.
| | 03:18 | The sender is the PrintWindow, so I am
going to do a cast. PrintWindow and then
| | 03:25 | put sender over here.
| | 03:36 | I have declared a variable here
called result, which gets the result coming
| | 03:40 | back from the dialog.
| | 03:41 | That's whether the user pressed the OK or
the Cancel button, and then I will write
| | 03:44 | an If statement here, if, tab, tab. If you press
Tab twice it uses what's called a C# code snippet.
| | 03:52 | Then I will say if result==true, and
I just need to write one more line of code.
| | 04:01 | resultsTextBox.Text =
string.Format, Printer, Copies.
| | 04:22 | That will be one, and these are the
little tokens that get replaced at runtime.
| | 04:26 | After this double quote, I
say here is the data that goes where
| | 04:30 | where the token is.
| | 04:31 | So, that will be dialog.
PrinterName, and dialog.NumberOfCopies.
| | 04:42 | These are properties
that I created on my dialog.
| | 04:44 | If you go to my PrintWindow and look
at the code behind, I created a property
| | 04:52 | down here called NumberOfCopies
and a property called PrinterName.
| | 04:55 | I think we are ready to go. Press F5.
| | 05:01 | Add an ellipse.
| | 05:03 | Click on the Print button.
| | 05:05 | This is my custom window.
| | 05:07 | I choose this printer right
here and I want five copies.
| | 05:11 | When I click OK, I was able to return those
results back and put them in this text box.
| | 05:18 | If I click on the Cancel, it doesn't
affect it because it knows I didn't
| | 05:22 | click the OK button.
| | 05:23 | We run it one more time, we'll
change this to 13, and then OK.
| | 05:27 | Oh, I see I forgot to
select an item in the list box.
| | 05:30 | I am going to need to shut the
application down and restart.
| | 05:35 | I will show you what happened.
| | 05:38 | Click the Ellipse, click the Print
button. I didn't have anything selected in
| | 05:42 | this first list box.
| | 05:43 | That's why it errored out on me.
| | 05:46 | Here is the last step.
| | 05:46 | It brings a copy value in and the
printer that I selected in the list box.
| | 05:51 | Child windows make it even easier for
you to make an application that behaves
| | 05:55 | like a desktop application.
| | Collapse this transcript |
| Using the Navigation Framework| 00:00 | One of the problems with rich
application frameworks like Flash or Silverlight
| | 00:03 | is that even though they live in a
webpage, they are not HTML pages.
| | 00:07 | The downside of this fact is that if
you create a Silverlight application with
| | 00:11 | many pages, there isn't an easy way
to remember your location in the URL.
| | 00:15 | This makes it hard to link to
content within your application.
| | 00:18 | Silverlight 3 introduces a new navigation
framework which solves some of these issues.
| | 00:23 | Within Silverlight 3,
there is a navigation framework.
| | 00:25 | In order to add it to your
application you must add a reference to the
| | 00:28 | Windows.controls.navigation DLL.
| | 00:31 | There are two key parts of the
navigation framework, the Frame and the Page.
| | 00:35 | The Frame class is very similar to
a border or other content control.
| | 00:40 | The main difference is that it
understands the browser and supports forward and
| | 00:43 | backwards navigation.
| | 00:45 | It also allows you to use a
URI to load any page in your app.
| | 00:49 | To work with the frame,
there is a special class.
| | 00:51 | You can use the user control with the
frame but you're more likely to use a page
| | 00:55 | because it also has access to the
navigation system, and can request access to
| | 01:00 | the browser history.
| | 01:02 | Not only that but it can accept
parameters from the URI, which it can then
| | 01:05 | use within the page.
| | 01:07 | The navigation framework is large. There
are other interesting classes including a
| | 01:10 | Mapping class, which makes it easier
to map a simple link to a more complex
| | 01:15 | navigation, and the Journal, which is used
to access the forward and backwards history.
| | 01:20 | To demonstrate this, I am
going to switch to Visual Studio.
| | 01:23 | If you're following along with the
Exercise Files, you are going to want to open
| | 01:25 | the UsingNavigationFramework solution
and then choose 'Starting from Scratch'
| | 01:29 | and then double-click on MainPage.xaml.
| | 01:35 | This page contains a frame.
| | 01:37 | Remember what I said in the slides,
that the frame understands a navigation system.
| | 01:42 | This is going to be the
location for all of my content.
| | 01:45 | I've named this mainFrame.
| | 01:47 | I am going to press F5 to run the application.
| | 01:50 | You notice that I have an empty frame.
| | 01:51 | That's because I have not loaded
any content into this frame yet.
| | 01:54 | Let's return back to Visual Studio and
see how I am going to load the content.
| | 01:58 | I am going to double-click on MainPage.xaml.cs.
| | 02:04 | On line 24, I am using some standard
procedures I have used in other movies.
| | 02:08 | I am creating an instance of this
UserControl and I'm assigning it to the
| | 02:12 | content of the mainFrame.
| | 02:13 | This is not using the navigation portion of it.
| | 02:16 | I'm just making this a child of the frame.
| | 02:18 | If I want to use the navigation part
of the framework then I need to use the
| | 02:22 | Navigate method instead, like I am
doing in this button click down here.
| | 02:26 | So I say mainFrame.Navigate.
| | 02:28 | It's a little more complex
because I have to use a URI. I specify a
| | 02:32 | BlueControl.xaml, but let's look at the
difference when I use the Navigate method.
| | 02:38 | Press F5 again to run the app.
Note that the Back button and the Forward
| | 02:42 | button are not lit up.
| | 02:43 | I am going to click Blue (Loaded as Content).
| | 02:46 | That was the first code I showed you.
| | 02:49 | I have made this
user control a child of this frame.
| | 02:53 | Notice still that the backwards and the
forward buttons are not lit up, but if I
| | 02:57 | click on this button using the Navigate
method, the same user control is loaded.
| | 03:02 | It looks exactly the same except for
the timestamp, but now I have access to the
| | 03:08 | browser history and I can click on
StartingFromScratch, which will take me
| | 03:10 | back to the previous page.
| | 03:13 | In my Travel application, this
frame will host multiple elements.
| | 03:15 | To gain access to the navigation system,
I'll make these pages instead of user controls.
| | 03:20 | I'll show you how that's done.
| | 03:21 | I am going to close the browser,
and return back to Visual Studio.
| | 03:25 | The way that you add a page to your
application is you right-click in your
| | 03:28 | application, choose Add New Item
and then you choose Silverlight Page
| | 03:34 | instead of Silverlight User Control.
| | 03:35 | I already have several pages added.
| | 03:39 | The first thing I am going to do is I
am going to go to my main page, and I am
| | 03:42 | going to find my frame and then I'm
going to tell it load a default page.
| | 03:47 | I'll do that with the Source property.
| | 03:52 | Next I am going to go to the Bungelow page.
| | 03:55 | It has two buttons on it, so we
are going to double-click on the
| | 03:58 | Bungelows.xaml.cs file and I am going to
write code in these two button click procedures.
| | 04:03 | I am going to gain access to the
NavigationService, I am going to call the
| | 04:08 | Navigate method, I am going to create
what's called a new URI, and the name of
| | 04:16 | this URI is going to be Pages/Skiing.xaml.
| | 04:32 | It will have a relative path.
| | 04:34 | I am going to copy this line of code
down to the Home button, Ctrl+V, and then
| | 04:40 | I'll change this to say Home and
I think I am ready to test. Press F5.
| | 04:50 | It loads my Home Page.
| | 04:52 | The URI is different.
| | 04:54 | I can now drill in and then save
these URLs in my browser history or I can
| | 04:58 | save them as Favorites.
| | 05:00 | Note that at the end of the
line says #/Pages/Home.xaml.
| | 05:05 | That's passed into the navigation
framework and it knows that needs to bring
| | 05:08 | up the home.xaml page.
| | 05:10 | When I click on Beach Vacations, it
takes me to the Beach Bungelow Page.
| | 05:15 | The navigation history is working.
| | 05:18 | I can say I'd rather go Skiing,
which takes me to the Skiing page. Again
| | 05:22 | it has a smart URL up here.
It says skiing.xaml.
| | 05:26 | I can click on I'd rather go back to
the Beach or I'd rather go home.
| | 05:30 | So I am doing the navigation in my
application, with each navigation having a nice
| | 05:34 | unique URI, plus I'm getting the
history that the user expects in many
| | 05:39 | browser-based applications.
| | 05:42 | There are other things that you can do
with the navigation system, one of these
| | 05:45 | is called URI mapping.
| | 05:46 | Let me show you this.
| | 05:48 | On MainPage.xaml, you can add a mapping
somewhere in your application, like this.
| | 05:54 | What this says is the simpler URI,
/Home, really maps to Pages/Home.xaml.
| | 06:02 | Now when the user requests this
shorter URI, it will get mapped to this one.
| | 06:06 | This is a lot of details to remember.
| | 06:09 | Let me show you the really easy way to do this.
| | 06:12 | Right-click on Solution, choose Add >
New Project and pick the Silverlight
| | 06:18 | Navigation Application.
| | 06:26 | I'll just call this number 2.
| | 06:28 | It looks like I have already
created that one once before.
| | 06:34 | Then I'll right-click here and set
that as my Startup project and press F5.
| | 06:39 | You'll want to look through this in
more detail but what you are going to see
| | 06:42 | here is Microsoft has
already written the URI mapping.
| | 06:45 | It's already written the framework.
| | 06:46 | It's already written the frame and you
can click on these buttons up here to
| | 06:50 | navigate back and forth.
| | 06:52 | On the Expression Blend website they
include about 20 different templates to
| | 06:55 | make this navigation frame to look better.
| | 06:58 | All in all I'd say that the navigation
framework is well worth your time investigating.
| | Collapse this transcript |
|
|
9. Images and MediaAdding binary resource files to a Silverlight project| 00:00 | Most applications have files that are
affiliated with the program, but are not
| | 00:03 | part of the runtime.
| | 00:04 | These could be image files,
sample documents, or even PDF files.
| | 00:09 | The key is that these are binary files
that have to be shipped with your application.
| | 00:13 | In Silverlight, it's trivial to
embed these files in your assembly.
| | 00:17 | It's incredibly easy to extract these resources.
| | 00:20 | In fact, some controls like the image
control can extract the resource with just
| | 00:24 | a URI location, no code necessary.
| | 00:27 | For today's demo, I thought
I would use Visual Studio.
| | 00:29 | If you're following along with the
exercise files, you're going to want to open
| | 00:32 | the AddingBinaryResources solution.
| | 00:35 | I'm going to add an image to the Images folder.
| | 00:37 | To do that, I'm going to right-click on
the Images folder. Choose Add > Existing Item.
| | 00:43 | In your Exercise Files folder is an
Assets folder that contains some pictures.
| | 00:49 | I'm going to choose
pslogo.png and then click Add.
| | 00:53 | Now let's see how I can embed this in our DLL.
| | 00:56 | Choose the PNG file and
look at the Build Action.
| | 01:00 | It's already set at Resource,
which means it will be embedded.
| | 01:02 | There are a number of
choices available in this dropdown.
| | 01:04 | For instance, here is the Compile option.
| | 01:07 | This is used when you have source code.
| | 01:09 | Let's compile our application and then
I think I'll go and show you how that
| | 01:15 | file is embedded inside the assembly.
| | 01:17 | To do that, I'm going to use
a .NET utility called Reflector.
| | 01:20 | This is a free utility
that's available on the Internet.
| | 01:22 | I've already installed it on my machine,
so I'm going to go down to my Start menu,
| | 01:27 | type in reflector, and
then click on the exe file.
| | 01:31 | If you haven't run the installer you
will not have this on your computer.
| | 01:36 | Reflector is a disassembler.
| | 01:38 | You add a DLL, I've already added mine
here, but it's easy to add another one.
| | 01:43 | Choose File > Open, and then find
a .NET file, then I'll click Open.
| | 01:50 | I can then disassemble this DLL by
drilling down into the Resources folder.
| | 01:56 | Once I selected the Resources section,
I can press the Spacebar to disassemble.
| | 02:01 | The disassembler window appears on the
right edge of the screen and this shows
| | 02:05 | all of the files that are part of my assembly.
| | 02:08 | Here's the one we're
looking for, images/pslogo.png.
| | 02:12 | You can also see that our XAML files
are also embedded as binary resources.
| | 02:16 | I'll close Reflector and
return back to Visual Studio.
| | 02:21 | Now that I have this image there, at
runtime I might need to extract those bytes.
| | 02:26 | To do that, I'm going to go to my
MainPage.xaml.cs file, and I'm going to scroll
| | 02:32 | down to the
AddImageElementButton_Click event procedure.
| | 02:37 | I've already written some of the code.
| | 02:39 | Let's see what it's doing.
| | 02:40 | I'm going to the Silverlight
application and I'm saying, I know you have some
| | 02:45 | resources embedded in the DLL.
| | 02:47 | I would like to get one of those
resources and I would like to get it as a stream.
| | 02:52 | A stream in .NET is just byte information.
| | 02:54 | Here is the unique URI that
identifies the item that I want.
| | 02:58 | The important part for us is images/pslogo.png.
| | 03:03 | Once I get the resource stream, I'm
going to use a reader to extract the data
| | 03:09 | and then I'm going to put it into a byte array.
| | 03:11 | So, I'll create a byte array
named imageBytes, readBytes.
| | 03:22 | Then I need to tell on how many
bytes I want. We'll take 12, thank you.
| | 03:27 | I'm going to place a breakpoint on
this line of code by pressing F9, and then
| | 03:32 | I'm going to press F5 to run the application.
| | 03:35 | Then I need to click on this Images
section, click on the Image Element button,
| | 03:40 | and I hit my breakpoint.
| | 03:41 | I'm going to press F10 to run this one
line of code and then I'm going to hover
| | 03:46 | over the byte array and you can see
that it does have byte data inside of it.
| | 03:50 | Let's stop the application and
talk about a few more things.
| | 03:54 | There is another way
to include this image file.
| | 03:57 | Instead of embedding it in the DLL,
I can go to the file and choose Content.
| | 04:05 | Now what happens is it's put
inside the XAP file instead of the DLL.
| | 04:10 | That's the only difference.
| | 04:11 | The benefit for this is that your
administrators can swap out the resources in
| | 04:15 | the zip file without you having
to recompile your application.
| | 04:19 | Then you need to use this
syntax to extract the information.
| | 04:23 | In this demo, I used a byte array to
retrieve the information, which is a very
| | 04:26 | low-level way of doing business.
| | 04:28 | As I said before, some of the controls
make it even easier to extract the resource.
| | 04:32 | For example, just watch the Static Images
with Image Controls video also in this series.
| | Collapse this transcript |
| Showing static images with the Image Control| 00:00 | Showing an image in a
Silverlight application couldn't be easier.
| | 00:03 | That's because the Image
control does all the work.
| | 00:05 | The only tricky part is understanding
how the Image control sizes your content.
| | 00:08 | Oh, and there is one other limitation.
You can only use PNG or JPEG files.
| | 00:13 | That's right, no JIFFs.
| | 00:15 | For today's demo I'm using Expression Blend.
| | 00:18 | If you're following along with your
exercise files, you're going to want to open
| | 00:20 | the ShowingStaticImages.sln.
| | 00:22 | I need to add a couple of
pictures to this application.
| | 00:25 | So, I'm going to right-click on the
Images folder, choose Add Existing Item and
| | 00:31 | then I'm going to go to the Exercise
Files folder and then to the Assets folder
| | 00:35 | and choose the Camera and the pslogo.png file.
| | 00:39 | Then I'll click Open.
| | 00:41 | Then I need to open my MainPage.xaml.
| | 00:45 | I need to zoom out just a little bit.
| | 00:49 | Probably, the easiest way to add an
image is just to grab the image out of the
| | 00:52 | Project Explorer and
drag it into my application.
| | 00:55 | That creates an image application and
sets its source property to the picture
| | 00:59 | file that I just dragged.
| | 01:01 | If I want to have a little more control
over where the item goes, I can do that too.
| | 01:05 | Let's delete this camera.
| | 01:06 | I'm going to add another row to my grid.
| | 01:10 | In Expression Blend you can do that by
moving along the edge of the grid until
| | 01:14 | you get the orange triangle.
| | 01:16 | I'm going to click right
here to add another row.
| | 01:19 | Then I'm going to come over to my tool
panel and click the Assets button, come
| | 01:24 | up here and type in ima, which filters
down my list of elements to the Image and
| | 01:30 | the MultiScaleImage and I'll click on Image.
| | 01:33 | Then I'll choose Image in the tool
panel and draw my image in my new row.
| | 01:38 | Now that I have my image, I think
I'll set my margins to 5 pixels each and
| | 01:50 | lastly, I'll add my picture.
| | 01:52 | We'll go to the Source property
and choose pslogo.png. There you go.
| | 01:57 | I want to talk about size for a minute.
| | 02:01 | The image element has the Stretch
mode. The Stretch mode has four values.
| | 02:04 | It's used when the native image size and the
container size are mismatched. Here's a list.
| | 02:09 | There are four settings
for the stretch enumeration.
| | 02:11 | The first three shown in the slide leave
the image with its original aspect ratio.
| | 02:15 | So, that would be None,
Uniform, and UniformToFill.
| | 02:17 | Fill stretches your image to fill
the entire contents of the container.
| | 02:23 | None applies no sizing.
| | 02:25 | In Uniform, the image is enlarged to
fill the space, but does not extend
| | 02:29 | beyond the boundaries.
| | 02:30 | That means that it keeps its aspect ratio.
| | 02:32 | On the slide you can see the picture
was made wide enough to fit, but it wasn't
| | 02:35 | stretched vertically.
| | 02:37 | Then there is UniformToFill.
| | 02:38 | That enlarges the image until it fills the
entire container, but it keeps its aspect ratio.
| | 02:43 | So, in that case, it's cutting
off some segment of the picture.
| | 02:46 | In Blend, I can change these values by
choosing the Stretch enumeration. That's a Fill.
| | 02:53 | That's a None. The picture is
too big to see at this point.
| | 02:57 | There's UniformToFill and the one that
I had, which is best for me was Uniform.
| | 03:02 | I've added one more feature
to PixelSmith application.
| | 03:06 | I've now made the Image button work.
| | 03:07 | So, I should probably show you the code.
| | 03:09 | I'll go to the code behind page.
| | 03:11 | We're going to press F4 while I'm in
Expression Blend, which will remove my
| | 03:17 | tool panels, and then I'm
going to scroll down to the
| | 03:21 | AddImageElementButton_Click event procedure.
| | 03:25 | What am I doing here?
| | 03:26 | I'm declaring an image variable and a
border variable, setting a few values on
| | 03:31 | the border, including my picture, and
saying get a new bitmap image, here is the
| | 03:36 | URI define the image, assign it to the
source of the image control, much better
| | 03:41 | than working directly with the bytes,
setting my Uniform Stretch value and then
| | 03:46 | adding the picture to the border.
| | 03:48 | So what happens when you run the application?
| | 03:50 | Press F5 and let's see. It looks great.
| | 03:53 | I've got my logo down here, and if I
click on the Images and then Image Element,
| | 03:58 | you can see that I'm adding the
PixelSmith logo here in the work area.
| | 04:04 | That's about all I have to
say for the Image element.
| | 04:06 | It's pretty simple element to understand.
| | Collapse this transcript |
| Painting UI with the Image Brush| 00:00 | There are a number of
interesting brushes in Silverlight.
| | 00:02 | By now you should be comfortable with the
Solid Color Brush and the two Gradient Brushes.
| | 00:06 | There is another brush that I'd
like to examine in this movie.
| | 00:08 | It's called the Image Brush and it
allows you to paint an image onto any UI
| | 00:12 | element, not just the image control.
| | 00:14 | For this demo, I'm using Expression Blend.
| | 00:17 | If you're following along with the
exercise files, you're going to want to
| | 00:19 | open the PaintingUI.sln.
| | 00:21 | Then double-click on the MainWindow.xaml file.
| | 00:24 | I already have a TextBlock added to my
application and I have the Curls.png file
| | 00:30 | available as a resource in my application.
| | 00:32 | The easiest way to make an Image Brush is to
take a picture and drag it on to your artboard.
| | 00:38 | When you do that, Expression Blend
adds an image control and set its source
| | 00:42 | property to the image, in this case, Curls.png.
| | 00:45 | Next, I can go to the tools and
choose Make Brush Resource > Make
| | 00:50 | ImageBrush Resource.
| | 00:52 | Expression Blend asked me for
a name to identify my brush.
| | 00:55 | I'm going to call it CurlBrush and
I'm going to place that resource in the Window.
| | 01:02 | You'll learn more about
resources in another movie.
| | 01:04 | I no longer need the Image
element, so I will delete it.
| | 01:08 | Press the Delete key.
| | 01:10 | I told you that an Image
Brush can paint onto any element.
| | 01:13 | I will add an ellipse.
| | 01:14 | I'm going to go my tool panel
and I'm going to go to this area.
| | 01:18 | If you do not see the ellipse, you need
to click-and-hold and then choose Ellipse.
| | 01:24 | Now I can come over and drag
an ellipse in my artboard.
| | 01:28 | When you want to set the Fill value for
the ellipse, you go to the Brushes panel
| | 01:33 | and then you select from one of
these buttons. This is no brush.
| | 01:36 | This is Solid Color Brush.
| | 01:39 | This is a Gradient Brush, and so on.
| | 01:41 | If you click on this last button,
called Brush resources, you will see that
| | 01:46 | there is a CurlBrush.
| | 01:48 | I'll select that and now I'm
painting that ellipse with my CurlBrush.
| | 01:52 | I'll come over here and
choose my Selection arrow.
| | 01:55 | Then click on that TextBlock,
and again, I'll go to Brushes > Brush
| | 02:00 | resources > CurlBrush.
| | 02:02 | This time I painted the background.
Since that's not what I intended to do,
| | 02:06 | I'm going to click No brush, then
Foreground > Brush resources > CurlBrush.
| | 02:12 | That image brush is a special
kind of brush called a Tile Brush.
| | 02:17 | What that means is that I can take the
image and paint repeated versions of the
| | 02:21 | image over and over again on my element.
| | 02:23 | To modify my Tile Brush, I will click
on this button, Tile brush, and then I
| | 02:29 | need to pick a TileMode.
| | 02:31 | Currently, I'm in None.
| | 02:32 | What does that mean?
| | 02:33 | Watch what happens when I come
over here and click on my ellipse.
| | 02:36 | Then I go choose this
tool called Brush Transform.
| | 02:38 | If you do not see this, you need to go
to your tool panel and press-and-hold and
| | 02:43 | then choose Brush
Transform or just press the B key.
| | 02:47 | Now when I move over to the image,
I am modifying the tiling of this image.
| | 02:52 | I'll grab this lower corner and
slide it up and you see that the image
| | 02:56 | is getting smaller.
| | 02:58 | Next, I will go over to the
TileMode and choose FlipX.
| | 03:04 | You see that it's repeating
the pattern over and over again.
| | 03:07 | There are several settings in TileMode.
| | 03:10 | There is one called Fill, which just
repeats the image over and over again, and
| | 03:13 | then FlipX, FlipY, and FlipXY,
alternate the axes of the repeated image.
| | 03:19 | My favorite is FlipXY.
| | 03:21 | Again, I can come over here and move
this around, change the size, do things
| | 03:26 | like rotate the image.
| | 03:31 | I could make it really tiny, which
gives me a nice pattern on my element.
| | 03:37 | What more is there for me to say?
| | 03:38 | The Image Brush is a great way of
painting subsets of your UI with
| | 03:42 | whatever picture you want.
| | Collapse this transcript |
| Embedding video with the MediaElement| 00:00 | Many of the first Silverlight
applications were video players.
| | 00:03 | That's because in the first release of
Silverlight, video was the most powerful feature.
| | 00:08 | Silverlight continues to make it easy
to add video with the Media element.
| | 00:11 | Currently, Silverlight supports Windows
Media Video version 7 through 9 VC-1 and 8.264.
| | 00:18 | You can also embed audio files
including the ever popular MP3 format.
| | 00:23 | For today's demo I am
going to use Expression Blend.
| | 00:25 | If you're following along with the
Exercise Files you are going to want to open
| | 00:28 | the ViewingVideo solution and
then open the HelpWindow.xaml file.
| | 00:35 | You might want to zoom out so
you can see the entire window.
| | 00:39 | Next I need a help video. To do that,
I am going to right-click on my project and
| | 00:44 | choose Add Existing Item.
| | 00:46 | You should have an Assets folder inside
your Exercise Files. Find the help.wmv file,
| | 00:52 | click on it and then choose Open.
| | 00:55 | Next I'll show you how easy it is to
add the Media element. Take your movie file
| | 01:00 | and drag it over to your artboard,
position your video where you want, and then
| | 01:06 | come over to the Property window
and scroll down to the Media section.
| | 01:10 | Here are some settings for the video.
AutoPlay is currently enabled. You can
| | 01:14 | also control the Balance, Volume, the starting
position of the video, whether or not it's muted.
| | 01:19 | Let's see what it looks like. This is my
alter ego, the CEO of PixelSmith. Press F5.
| | 01:29 | To run the help file, you need
to click on the video help link.
| | 01:33 | (Male speaker: Hello! My name is Arturo Diega
and I'm the founder and CEO of PixelSmith Labs.)
| | 01:38 | (You can call me crazy, but I know that you hold in your hands
the most amazing graphics design tool written this century.)
| | 01:44 | (I'm talking about PixelSmith 7.)
| | 01:47 | (But don't take my word for it.)
| | 01:48 | (Try it yourself and if you're not completely happy,
I challenge you to write a better application.)
| | 01:55 | Let's show you how to control that video.
| | 01:56 | I am going to close the browser,
return back to Expression Blend, then I am
| | 02:01 | going to choose my Start button and
before I move over to my code, I should
| | 02:06 | probably unselect the
AutoPlay on the MediaElement.
| | 02:10 | The MediaElement has been auto named help_wmv.
| | 02:12 | I am going to call this media1 and press Enter.
| | 02:18 | Then I am going to click on the Start
button, open the Event pane by clicking here.
| | 02:22 | I already have some codes typed in so
all I need to do is put my cursor in his
| | 02:26 | text box and hit the Enter key and it'll
take me to where code is in Expression Blend.
| | 02:32 | Now all I need to do is compile the
application. Whenever you rename things in
| | 02:35 | Blend you always need to recompile.
I can do a Ctrl+Shift+B, and then I'll
| | 02:43 | call the Play method.
| | 02:44 | Rest of the code is pretty simple.
| | 02:48 | To do a stop, I'll choose media1.Stop
and I suspect you can guess what the
| | 02:57 | next line of code will be.
media1.Pause. You can set up an event procedure
| | 03:05 | called MediaFailed and then you can
instruct Media element to call this when it
| | 03:09 | can't find the media.
| | 03:11 | This is handy for showing your
user the message like the "server is
| | 03:14 | unavailable, try again later."
| | 03:16 | I haven't wired that up but this is
what the function would look like.
| | 03:19 | I have got two more things I need to
do make this a nice-looking application.
| | 03:23 | One is I need to ensure that the volume
control is wired up to the Media control
| | 03:28 | and at the bottom of the
screen I have a locator.
| | 03:31 | This is going to show where we are at the video.
| | 03:33 | Unfortunately Silverlight doesn't
provide any events to give us access to where
| | 03:36 | we are, so we are going to use some timer code.
| | 03:38 | Let me show you that.
| | 03:42 | I have a timer called the DispatcherTimer.
In Silverlight the DispatcherTimer is
| | 03:46 | the thread-safe way to
call code at timed intervals.
| | 03:53 | The first thing I am going to do is set
up the Interval value to a new TimeSpan.
| | 04:04 | And I am going to check where we are
in the video every 200 milliseconds.
| | 04:09 | Next, I am going to start the timer and
finally I have this callback, which is
| | 04:19 | getting called every 200 milliseconds,
so I need a wire that up. timer.Tick +=
| | 04:25 | and it says press Tab to insert.
| | 04:32 | It moves my cursor down into my Timer_
Tick event procedure and down here I am
| | 04:36 | going to say location TextBlock.Text=
media1.Position.ToString(), and close the
| | 04:47 | line of code with a semicolon.
| | 04:50 | Last thing I need to do
is get the volume working.
| | 04:51 | So, I'll return back Blend and
then I am going to do a data binding.
| | 04:55 | Click on MediaElement, move back to
your Property panel, find the Volume, and
| | 05:00 | click on the Property Peg, choose
Data Binding. Click on Element Property.
| | 05:07 | I am going to search for my numericUpDown
control, which is inside the StackPanel.
| | 05:12 | There it is and then I am going to set it
to its Value property and then click OK.
| | 05:18 | I am ready to run this again,
press F5, click on the video help link.
| | 05:25 | It no longer auto starts.
| | 05:27 | It waits till I press the Start button.
| | 05:29 | (Male speaker: Hello!
My name is Arturo Diega and I'm?)
| | 05:32 | I can click the Stop button.
| | 05:34 | (Male speaker: Hello! My name
is Arturo Diega and I'm the founder?)
| | 05:36 | Pause button.
| | 05:38 | (Male speaker: ..and CEO of PixelSmith Labs.)
| | 05:40 | (You can call me crazy, but I know that you hold in your
hands the most amazing graphics design tool written this?)
| | 05:47 | I can change the Volume. You can also
| | 05:49 | see that it shows my
current position within video.
| | 05:51 | I've got one more trick up in my sleeve.
| | 05:53 | You see three rectangles?
| | 05:54 | We are going to turn those into videos too.
| | 05:57 | Return back to Expression Blend, click
on the video and then go to Tools > Make
| | 06:05 | Brush Resource > Make VideoBrush.
| | 06:07 | I'll call this helpBrush, click on OK,
select the rectangle and I am going to
| | 06:15 | have to scroll up, click on this
button right here Brush Resources, and then
| | 06:19 | choose the helpBrush and do the same
thing for the other two rectangles.
| | 06:28 | Now I'm painting this video in three
other areas on the screen and I can do some
| | 06:32 | fun things like spin them around.
| | 06:38 | If you hold the Shift key down while
you're spinning, it constrains the angle.
| | 06:44 | Now I want this one to be at this angle.
| | 06:49 | And now let's see what this looks
like. Press F5 to run the application.
| | 06:57 | Start the video.
| | 06:58 | (Male speaker: Hello!
My name is Arturo Diega.)
| | 07:00 | And now you have got four copies
of Arturo telling you how great PixelSmith is.
| | 07:07 | Adding video is nearly as easy as
adding a static image. I'm sure you'll find
| | 07:10 | many uses for the Media element.
| | Collapse this transcript |
|
|
10. Energizing the UI with AnimationsUnderstanding Silverlight animations| 00:00 | If you programmed traditional animations
you've probably work with the timer and
| | 00:03 | wrote some event handling
code to move items on the screen.
| | 00:06 | I'm sure some of you may remember
the days when animation was stateless,
| | 00:09 | meaning your code had to remember where each
sprite was during each step of the animation.
| | 00:13 | In Silverlight this is no longer the case.
| | 00:15 | In Silverlight most animations will
be created in your Xaml or with a tool
| | 00:19 | like Expression Blend.
| | 00:20 | It's really not
necessary to write a lot of code.
| | 00:23 | Here is the key thing about
Silverlight animations. They modify a dependency
| | 00:26 | property to a new value over time interval.
They are time based not frame rate based.
| | 00:32 | What does that mean?
| | 00:33 | You specify the initial value and the
final value for their dependency property.
| | 00:38 | You also specify the animation length.
Silverlight calculates the frame rate
| | 00:42 | based on these values and other factors.
| | 00:44 | Since Silverlight applications are
modifying dependency properties, you will
| | 00:48 | know what the underlying
.Net type is for that property.
| | 00:51 | You need to select the correct animation type.
| | 00:53 | There are only four to choose from.
| | 00:55 | A Color animation changes from one color
to another, for example the TextBlock's
| | 00:59 | Background property.
| | 01:01 | The Double animation changes a numeric
value, FontSize for instance, and the
| | 01:06 | Point animation is used to change a
point value, an X and Y coordinate pair.
| | 01:11 | Finally there is an unusual animation
type called the Object animation class.
| | 01:16 | Here you animate from one
object to another object.
| | 01:19 | Think of this as a way to replace one
instance of one object with another at a
| | 01:23 | specific time interval,
here is an example of that.
| | 01:26 | I have the background of a button and
I want to apply a Solid Color Brush and
| | 01:31 | 10 seconds later I want to apply a Gradient Brush.
| | 01:35 | You can further break down Silverlight
animation into two categories, From/To
| | 01:39 | animations and KeyFrame animations.
| | 01:42 | A From/To Animation is the simplest to
create and the easiest to understand.
| | 01:46 | You pick your animation type,
say the Double animation.
| | 01:49 | You specify the beginning double
value and the ending double value.
| | 01:53 | You also specify the interval and you're done.
| | 01:55 | Silverlight will interpolate
between the beginning value and the ending
| | 01:58 | value over the time span.
| | 02:00 | Keyframe's are a little more complex.
Here you specify specific time intervals,
| | 02:05 | say 1 second, 1.5 seconds and 10 seconds.
| | 02:10 | These are the keyframes and for each
keyframe you'll also set a starting and
| | 02:14 | ending double value.
| | 02:16 | There are several types of keyframes.
The Discrete KeyFrame changes instantly
| | 02:19 | from one value to another. The
Linear KeyFrame is similar to the To/From
| | 02:23 | animation discussed earlier. The value
is interpolated between the two values
| | 02:27 | over the time interval.
| | 02:28 | The Spline KeyFrame is based on a Bezier curve.
| | 02:31 | This allows you to smoothly accelerate or
decelerate the animations based on the curve.
| | 02:36 | You rarely use an animation class by itself.
| | 02:39 | It is usually grouped into a storyboard.
| | 02:41 | The purpose of the storyboard is
to control your animation time line.
| | 02:44 | It might contain one or more animations,
for example you could have the Color
| | 02:48 | animation and a Double
animation in the same storyboard.
| | 02:51 | This is also where you control the animation.
| | 02:53 | There are a number of useful methods
available, like Begin, Stop, Pause and so on.
| | 03:00 | For this demo, I am going to use Visual Studio.
| | 03:02 | If you are following along with the
example files, you are going to want to open
| | 03:05 | the UnderstandingAnimation solution.
| | 03:08 | We're not going to look at of code in this
example. We are just going to run the application.
| | 03:11 | Press F5.
| | 03:14 | This application is using the
Navigation framework so you are going want to
| | 03:17 | click on this Four Animation Types
button, and here you can see the Double
| | 03:21 | Animation, which is going
to animate the font size.
| | 03:27 | You can see the Color Animation, which is
going to animate one of the bands of the gradient.
| | 03:33 | You can see the Point Animation, which
is going animate two points on this shape.
| | 03:40 | And lastly the Object Animation, which
is going to change from a Solid Color
| | 03:43 | Brush to a Radial Gradient
Brush to a Linear Gradient Brush.
| | 03:47 | If you're interested in learning more
about this example you can always look
| | 03:50 | through the Xaml in the application.
| | 03:52 | There is also two samples here.
| | 03:54 | This first one is an example
of a more interesting animation.
| | 04:01 | It's bringing in some blocks, rotating them,
changing the colors and putting some text.
| | 04:11 | And then lastly we have this example
which is applying a perspective transform
| | 04:16 | on a number of rectangles.
| | 04:17 | That's kind of fun to watch.
| | 04:19 | This is been an overview of animations.
The rest of this chapter teaches you how
| | 04:22 | to set up your own animations.
| | Collapse this transcript |
| Creating animations| 00:00 | In this movie, I am going to show
you how to create your own animations
| | 00:02 | in Expression Blend.
| | 00:05 | If you are following along with the
exercise files, you're going to want to
| | 00:06 | open the CreatingAnimation solution and
then you are going to want to double-click
| | 00:10 | on the MainPage.xaml.
| | 00:12 | I am going to hold down the Spacebar and
then use my mouse to move to the lower left.
| | 00:18 | Next, I'll use the mouse
wheel to zoom in a little bit.
| | 00:22 | I am going to choose the
Selection icon and then click on my image.
| | 00:29 | Here is what I want to have happen.
| | 00:31 | In the first two seconds of this
application's lifetime, I want to animate in this logo.
| | 00:36 | To do that I need a storyboard.
| | 00:38 | Storyboards are available in Expression
Blend on the Object and Timeline at the top.
| | 00:42 | You click on the Plus symbol
and then name your storyboard.
| | 00:46 | I will call my storyboard
LogoStoryboard. OK.
| | 00:52 | Did you see the change in the UI?
| | 00:54 | There were a couple of changes.
| | 00:56 | The first is there's this red
border around the artboard.
| | 00:59 | This is very important.
| | 01:00 | While that red border is visible, you are
recording every action in the artboard.
| | 01:06 | If you want to stop
recording you click the red button.
| | 01:09 | To re-enable a recording,
click on the gray button.
| | 01:12 | The other change in the UI
was over here in the storyboard.
| | 01:16 | There is now a yellow line on the timeline.
| | 01:19 | This timeline represents the
keyframes I am going to make.
| | 01:22 | So, far, I can only see 0, 1, and 2 seconds.
| | 01:25 | I can show more seconds by pressing F6,
which will change to another view.
| | 01:31 | Pressing F6 is the same as going
to Window > Workspaces > Animation.
| | 01:35 | The animation workspace has a longer timeline.
| | 01:38 | See I have 8 seconds to work with.
| | 01:41 | I will turn off recording, so I
can set up my logo the way I want.
| | 01:45 | I am going to take this little white
dot in the center of the image and I am
| | 01:49 | going to move it to the lower left-hand corner.
| | 01:52 | Anytime you rotate an object, it rotates
around this point, which is usually in the center.
| | 01:57 | I'll zoom out a little bit, and then I
am going to grab this corner of the image
| | 02:03 | and I am going to rotate the item
down below the edge of the UserControl.
| | 02:08 | Now I am ready to record.
| | 02:09 | Press the Record button, come over to the
timeline and click the Record Keyframe button.
| | 02:15 | Since my yellow marker was at that the
0 second mark, it created the keyframe
| | 02:19 | for the image at 0 seconds.
| | 02:22 | Now I am going to go to 1 second and click
and press the Record Keyframe button again.
| | 02:28 | Now I move the UI to where I want it
to be at the end of 1 second animation.
| | 02:32 | So, I will rotate this
back to where I had it before.
| | 02:37 | Then I'll press this Play button
here to see what it looks like.
| | 02:41 | Nice, but I think it's a little bit too fast.
| | 02:44 | To change the time I'll grab the white
dot and slide it over to 2 seconds and
| | 02:51 | run the animation a second time. That's nice.
| | 02:54 | I am ready to try it out.
| | 02:56 | I do need to write a little bit of event
procedure code though before I can do that.
| | 02:59 | I will press F6 to return the
workspace to the original workspace, I'll
| | 03:04 | double-click on my C# file and then
I am going to scroll down to the bottom
| | 03:09 | to show you the code that I am going to use.
| | 03:11 | This says the beginning time of the
storyboard is 2 seconds from the starting
| | 03:15 | of the application.
| | 03:16 | So, I am going to delay 2
seconds and then, I am going to say
| | 03:20 | LogoStoryboard.Begin. You ready?
| | 03:23 | Let's press F5 to see what happens.
| | 03:27 | Keep your eye in the lower left-hand corner,
and there comes our logo. What do you think?
| | 03:31 | Isn't that nice?
| | 03:33 | If you ever want to change that
animation, you go back into Expression Blend,
| | 03:36 | bring up your artboard, press F6 to
get to the timeline where you want it,
| | 03:42 | press the Record button and now I
can do something else like change the
| | 03:45 | size, change the color.
| | 03:47 | Maybe I'll make this a little
bit smaller. I made a mistake.
| | 03:51 | I was on the 2 second mark.
| | 03:53 | So, I am going to do a Ctrl+Z.
I'll rewind the storyboard, there we go.
| | 03:57 | Now, I should change the size here.
| | 03:59 | Grab this corner and
slide it a little bit smaller.
| | 04:02 | Now when I run the animation it
will change its size and also rotate.
| | 04:07 | Let's look at it in the storyboard.
| | 04:08 | I am going to make this a little bit
taller and we are going to look in the image.
| | 04:12 | If I expand this, you can see
there's a RenderTransform and in there is a
| | 04:17 | rotation for the angle.
| | 04:20 | This is the value that's being
animated, the Angle property.
| | 04:23 | I can right-click on this and say Edit
Repeat Count and say I would like to
| | 04:27 | repeat over and over again.
| | 04:29 | I can click on Set to forever,
which will make it run forever.
| | 04:32 | I can say, I would like
to run it one or two times.
| | 04:35 | There are also some storyboard
properties, if you come up and you click on the
| | 04:38 | storyboard itself up here,
and I dismiss this dialog first.
| | 04:43 | Click here. I can over and say
AutoReverse the storyboard and how many times to
| | 04:48 | repeat the entire storyboard,
not the individual animation.
| | 04:51 | Now that you know the basics of creating
animations and storyboards, the rest of
| | 04:55 | this chapter will show you
additional pieces of the animation's story.
| | Collapse this transcript |
| Controlling animations| 00:00 | Once you have an animation running,
you might need to exert some control over
| | 00:03 | the animation lifetime.
| | 00:05 | The Storyboard class exposes
useful methods like Pause and Stop.
| | 00:08 | I am going to start in Expression Blend.
| | 00:10 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:13 | the ControllingAnimation solution.
| | 00:14 | Then scroll down and
double-click on MainPage.xaml.
| | 00:18 | I am going to zoom out a little by
using my mouse wheel and then I am going to
| | 00:24 | use my hand to center the artboard.
| | 00:26 | I'd like the look at these animations.
| | 00:28 | To do that I am going to press F6.
| | 00:30 | F6 switches you to the Animation
workspace, which puts the animation timeline
| | 00:34 | along the bottom edge of the window.
| | 00:37 | I'll then go and open one
of my existing storyboards.
| | 00:40 | I have four storyboards in this UserControl.
| | 00:43 | The one I want to look at
first is MoveStoryboard.
| | 00:46 | Can you see this little red dot here?
| | 00:48 | That means that within this
border is an animation keyframe.
| | 00:51 | I'll pop-open the border by
clicking in the arrow, drill down to the
| | 00:55 | artboardCanvas and now
you can see the keyframes.
| | 00:58 | There's a keyframe for the blue
ellipse and a keyframe for the red ellipse.
| | 01:03 | Let me show you what the animation looks like.
| | 01:08 | Now I want to write some code to
control the start and stop and speed of
| | 01:11 | this animation.
| | 01:12 | To do that, I am going to
switch to Visual Studio.
| | 01:15 | I have the same project open in Visual Studio.
| | 01:16 | I am going to double-click
on the MainPage.xaml.cs file.
| | 01:20 | I am going to scroll down
to the bottom of my code.
| | 01:23 | It's very easy to start a story,
but we will see that in other movies.
| | 01:26 | You choose the Begin method on the Storyboard.
| | 01:29 | It's also very easy to pause the
storyboard and resume it after it's paused.
| | 01:35 | I thought I would add a little bit of
code to show you how you can change the
| | 01:37 | speed of the storyboard as its running.
| | 01:40 | Type in if. Press tab twice.
| | 01:42 | That lets Visual Studio stub in some code.
| | 01:44 | I'll say MoveStoryboard.SpeedRation==4.0.
| | 01:54 | I'll copy this piece and paste it in
here and then I'll assign a value of 1 to
| | 01:58 | the current speed. Semicolon in there.
| | 02:01 | Then come down here and
I'll write an else clause.
| | 02:08 | Paste in my code again and set that to 4.0.
| | 02:11 | So, basically, what I am saying here
is if the speed is 4.0, set it to 1.0.
| | 02:15 | I might need my semicolon here.
| | 02:18 | If it's any other speed, set it to 4.0.
| | 02:19 | It's time to see what this looks like.
Press F5, click the Start button,
| | 02:30 | the animation is running.
| | 02:31 | I've got it set to Autorepeat.
| | 02:33 | I can pause and I can resume it.
| | 02:37 | I can also make it go a lot faster.
| | 02:40 | Click on it a second time,
it will just a slow back down.
| | 02:43 | Another type of thing you can do with
animations as far as controlling them is
| | 02:47 | link animations together.
| | 02:48 | You have got one animation that runs
for 2 seconds and then you want to start
| | 02:51 | another animation at that point.
| | 02:53 | I am going to show you a
couple of techniques to do that.
| | 02:56 | Let's switch back to Expression Blend.
| | 02:58 | One technique is to have a single
storyboard like the one I have here.
| | 03:02 | I've got two animations running in parallel.
| | 03:04 | What I can do is rewind my animation.
| | 03:07 | Notice that the red border is on,
which means I am modifying my animation.
| | 03:10 | I am going to put a new keyframe
in for this red ellipse right here.
| | 03:16 | I am going to click the Record
Keyframe and then what I am going to do is I
| | 03:20 | am going to move this keyframe over to 6
seconds and this keyframe over to 4 seconds.
| | 03:27 | Rerunning the animation and you will see
that the first ellipse runs and then at
| | 03:31 | 4 seconds it's going to stop and then
the red ellipse will run for 2 seconds.
| | 03:34 | So, I have two animations
within the same storyboard.
| | 03:38 | So, if I call storyboard Begin,
storyboard Resume, storyboard Pause or
| | 03:42 | change the speed, it's going to
affect both of those double-animations
| | 03:44 | within the storyboard.
| | 03:46 | Another technique is to have two
storyboards, and one storyboard initiate
| | 03:50 | the second storyboard.
| | 03:52 | Let me show you an example.
| | 03:53 | I am going to open my
GreenStoryboard and run it.
| | 04:01 | It stops right when it gets
next to the purple ellipse.
| | 04:04 | I'll then open my PurpleStoryboard and
run it, and you see the animation looks
| | 04:10 | like it's dropped and it's
sliding down the screen.
| | 04:11 | What I'll do now is I'll go over to
Visual Studio and I will start the animation
| | 04:17 | in this TriggerAnother_Click procedure.
| | 04:19 | So I'll say GreenStoryboard.
Begin. That starts the storyboard.
| | 04:26 | Then I am going to register a call
back that says when the GreenStoryboard is done,
| | 04:29 | run this code.
| | 04:33 | Do a +=. I need a new EventHandler, so
I am going to press tab twice, once, twice.
| | 04:40 | Visual Studio stops the coding for me.
| | 04:42 | I'll remove this exception
down here and then I'll type in
| | 04:45 | PurpleStoryboard.Begin.
| | 04:49 | I am ready to run. We'll press F5.
| | 04:56 | I'll initiate the GreenStoryboard by clicking
on the Trigger Another button and there you go.
| | 05:03 | The completed event is the only
event that the storyboard exposes.
| | 05:06 | I wish there were more
events for the storyboard.
| | 05:08 | I miss the WPF current time and validated event.
| | 05:10 | That was a handy event for
reporting progress during the animation.
| | 05:13 | I shouldn't complain, however.
The storyboard is certainly better than
| | 05:16 | writing timer-based code.
| | Collapse this transcript |
| Simulating physics with animation easings| 00:00 | Easing is a term for modifying an animation
so that the rate of change is not uniform.
| | 00:05 | In other words, it's a way to introduce
acceleration or deceleration in your animation.
| | 00:10 | A simple easing might start out
slowly and accelerate to the end.
| | 00:13 | A more elaborate easing might simulate
the rate of the bouncing ball, fast then
| | 00:18 | slow to a stop, then speed up
again and repeat for a few seconds.
| | 00:22 | I'm using Expression Blend for today's demo.
| | 00:24 | If you're following along with the
Exercise Files, you are going to want to open
| | 00:27 | the AnimationEasings solution and then
double-click on the MainPage.xmal file.
| | 00:33 | On my artboard I am going to zoom out
by using my mouse wheel and then hold the
| | 00:37 | Spacebar down and my mouse to
move it to the center of the screen.
| | 00:40 | I am going to press F6 to switch to my
Animation workspace, and then I am going
| | 00:44 | to click on Objects and Timeline and
add a new storyboard. Click the Plus
| | 00:48 | symbol, call the new storyboard
EasingStoryboard and press OK.
| | 00:54 | I have got my red border. We're ready
to record. I am going to select all four
| | 01:00 | ellipses by Shift+Clicking on the ellipses.
| | 01:05 | Then I am going to move my timeline to
three seconds. You can adjust the time
| | 01:09 | with your mouse if you don't
get it quite at three seconds.
| | 01:12 | And then I am going to go to my Properties
panel and I am going to go to the bottom.
| | 01:17 | You might need to collapse a few of
your sections to see the bottom portion of
| | 01:20 | the screen, to the Transform section.
| | 01:22 | Select the Translate Transform and type
a number value of 300 in for the Y value.
| | 01:29 | Now run the animation. Click the
Play button and you can see it all four
| | 01:33 | ellipses are moving down the screen.
| | 01:34 | Now I like to play with easing.
| | 01:36 | Select the red ellipse, rewinding the
animation by clicking the Go to first
| | 01:41 | frame, and then click on the
keyframe for the red ellipse right here.
| | 01:46 | Over in the Property panel,
you now see a new section.
| | 01:50 | It says Easing at the top of it.
| | 01:51 | There are three sections over here.
| | 01:53 | KeySpline and EasingFunction are the
two that we are going to look at today.
| | 01:56 | Click on KeySpline, and then take
this yellow dot here in the bottom of the
| | 02:01 | KeySpline, and drag it up on the screen.
| | 02:05 | This allows me to dynamically
change the speed of the animation.
| | 02:10 | This means to start fast,
and then slow down at the end.
| | 02:13 | For the green ellipse, I am going to
select the green ellipse keyframe, and
| | 02:17 | I will do the same thing.
| | 02:18 | So, we have two slightly different
curves, then I will run the animation.
| | 02:25 | You see the difference? The red one
starts off fast and then slows down at the end,
| | 02:32 | the green one starts out slow
and then it is goes fast at the end.
| | 02:35 | And now for the purple ellipse,
I use new Easingfunctions.
| | 02:39 | Select the PurpleEllipse keyframe, choose
the Easingfunction, and then open this dropdown.
| | 02:45 | Easings are organized in three columns.
| | 02:48 | You have an In easing and Out
easing and a combination of the two.
| | 02:51 | So, let's look at the In easing for this
first one, and run the animation, maybe
| | 02:55 | scroll this down just a little
bit so you can see all the screen.
| | 02:57 | It goes backwards a little bit
and then down. See that curve.
| | 03:03 | It goes backwards and then up.
| | 03:06 | If I choose the Out easing and
run it, it goes the opposite.
| | 03:11 | It goes up and just a little beyond the
edge of the regular animation then back
| | 03:15 | and you can probably guess what
will happen if I choose this one.
| | 03:18 | Up, a little bit outside
the boundaries, and then back.
| | 03:24 | This is how you can bring
a much more natural feel.
| | 03:26 | You want to do bouncing ball?
Choose this one here called Bounce.
| | 03:35 | I love the new Easing functions in Silverlight.
| | 03:36 | They really bring a snap to your
animations and Expression Blend makes them easy
| | 03:41 | to add to your timeline.
| | Collapse this transcript |
| Create a custom easing| 00:00 | If none of the built-in easing suits
your needs, you can always create a
| | 00:03 | custom easing and it's surprisingly easy to do.
| | 00:05 | I am going to start this
project out in Expression Blend.
| | 00:08 | If you're following along with Exercise
Files you are going to want to open the
| | 00:11 | CustomEasing solution and then
double-click on the MainPage.xaml file.
| | 00:16 | I am going to zoom out a little bit
with my mouse wheel and then I am going to
| | 00:20 | open up the EasingStoryboard.
| | 00:22 | Remember to do that, you go to your
Object and Timeline, click on this dropdown
| | 00:25 | at the top of the Object and Timeline,
choose the EasingStoryboard and then the
| | 00:30 | storyboard shows up.
| | 00:32 | Let's run this storyboard
and see what it looks like.
| | 00:37 | I have different easings applied
to each one of these animations.
| | 00:40 | I am going to press F6 to make it
little bit easier to see my timeline.
| | 00:43 | I am going to click of on the BlueEllipse and
then I can see the keyframes in the bottom.
| | 00:48 | Let's look at the easings I have applied.
| | 00:50 | The BlueEllipse has no easing, the
RedEllipse has the Exponential In easing, the
| | 00:57 | GreenEllipse has the Quintic
InOut and this last one has None.
| | 01:01 | Run the animation again so you can
see the results at different speeds.
| | 01:05 | I am going to generate a
custom easing and apply it to the PurpleEllipse.
| | 01:10 | To do that I am going to
switch to Visual Studio.
| | 01:11 | I am in Visual Studio, I have the
same project open, I am going to click up
| | 01:16 | here to turn off the Show All Files.
| | 01:18 | That way it'll look more or like
what you have in your computer.
| | 01:20 | Then I am going to right-click on
CustomEasing and add a new class.
| | 01:25 | I am going to call this MathEasing.
| | 01:25 | I'll write a little bit of code.
| | 01:31 | So, I typed in EasingFunctionBase.
Actually I didn't type it. I pressed Tab and let
| | 01:38 | Visual Studio do the typing for me.
| | 01:39 | And if you note there is a little blue
rectangle underneath the letter E. If I
| | 01:44 | move my mouse over this, and click on
that little dropdown arrow, I can have
| | 01:47 | Visual Studio write the code for me.
| | 01:48 | Implement the abstract
class 'EasingFunctionBase'.
| | 01:51 | Now I just need to go in
here and write some code.
| | 01:54 | This is the timeline that's being passed
to me by Silverlight. I can modify this.
| | 01:59 | If I multiply it, I can speed up the
time. If I divide I could slowdown the time.
| | 02:03 | What I am going to do is return
Math.Pow, and do Ctrl+S to save.
| | 02:14 | Then I am going to switch back to
Expression Blend and now I see the
| | 02:17 | message that I was expecting, which is that
blend is picking up the changes in Visual Studio.
| | 02:20 | I'll click Yes. I'm going to add my
custom keyframe to the PurpleEllipse.
| | 02:24 | To do that I need to click on the
PurpleEllipse keyframe, bring up the
| | 02:29 | Properties pane, choose the Easing section,
open that and then scroll to the bottom.
| | 02:35 | It looks like I haven't compiled
here in the Expression Blend yet.
| | 02:38 | Let me try doing that. Project
> Build Project. There it is.
| | 02:46 | What is supposed to happen is
Expression Blend realizes there's a new class,
| | 02:50 | which is of type easing. It adds it to
the list of existing Easing functions.
| | 02:54 | Now it's just a simple matter of
selecting my custom easing and applying it.
| | 02:58 | What I really like, it's a great
implementation in Expression Blend, is they
| | 03:02 | have analyzed my custom easing and written
out on a graph showing what it'll look like.
| | 03:06 | I didn't have to do any of this.
Blend does this automatically.
| | 03:09 | So, I click the custom easing
and then, I run the application.
| | 03:16 | I said at the start of the movie it
would be easy to add a custom easing and it is.
| | Collapse this transcript |
|
|
11. Templates and stylesPlacing XAML resources within a FrameworkElement | 00:00 | If you are a programmer,
you know how to reuse items.
| | 00:03 | You probably create variables, big
code modules or place code in external DLLs.
| | 00:07 | My point is that you know how to do
this in your favorite programming language.
| | 00:11 | But what about reusing items in your XAML?
| | 00:13 | You are in luck, because
XAML has a way to do this too.
| | 00:16 | It's known as XAML resources.
| | 00:18 | The basic concept in XAML resources is
that every resource is stored is stored
| | 00:21 | in a ResourceDictionary.
| | 00:22 | The ResourceDictionary is .NET type
and every item that you put in the
| | 00:26 | ResourseDictionary must have a unique key.
| | 00:28 | All Silverlight types can be placed
in the ResourseDictionary and some .NET
| | 00:31 | types can be placed in there as well.
| | 00:33 | And a FrameworkElement in Silverlight is
things like the page, the UserControl,
| | 00:37 | the StackPanel, a button.
Those are all FrameworkElements.
| | 00:41 | Each FrameworkElement has a resources
property of type ResourceDictionary.
| | 00:45 | This gives a very convenient way of
adding any item to the ResourceDictionary.
| | 00:50 | I have switched to Visual Studio.
| | 00:51 | If you are following along with the
Exercise Files, you are going to want to
| | 00:54 | open the PlacingXamlResources Solution
and then open the Views folder and choose
| | 00:59 | PutResourcesInXAML. Double-click on that file.
| | 01:02 | Here is an example of adding some resources.
| | 01:05 | I am using a navigation type application here.
| | 01:07 | So, at the page level, I am using the
Resources property, which gives me access
| | 01:11 | to the ResourceDictionary.
| | 01:13 | I am instantiating a SolidColorBrush,
setting some properties on it and then
| | 01:17 | because it's in a
ResourceDictionary, I provide a key.
| | 01:21 | Without this key I'll get an error.
| | 01:22 | I am also placing a rectangle
in there named BurntRectangle.
| | 01:27 | That's at the page level.
| | 01:29 | At the Grid level, I am also
placing a resource called helloString.
| | 01:32 | This shows that you can use .NET types.
| | 01:34 | I have a string class, which comes from
the mscorlib assembly and I also have an
| | 01:40 | instances of two of my classes.
| | 01:42 | If you look over in my project, you'll
see that I CalenderDays.cs file and if
| | 01:48 | you open that up, I have a class
called CalenderDay, which has Dayname and
| | 01:53 | IsWeekend, and a class that
is a list of calendar days.
| | 01:56 | So, I am instantiating an instance of my
CalendarDay and assigning the day name
| | 02:01 | Tuesday and IsWeekend= 'False' and I am
instantiating my entire list of calendar days.
| | 02:05 | I can then use these in my XAML.
| | 02:07 | How do you use the resource in your XAML?
| | 02:10 | Use what's called the MarkupExtension.
| | 02:12 | The curly braces in this signify
that you are calling the MarkupExtension.
| | 02:15 | You use the word StaticResource.
| | 02:17 | That's the type of MarkupExtension
and then the key name of your resource.
| | 02:21 | Here is an example. The background
color of this button will come from a
| | 02:25 | StaticResource named RedBrush.
| | 02:28 | You might be wondering where these
ResourceDictionaries can be stored.
| | 02:31 | They can go in an element, they can go
in any of the parents of that element,
| | 02:34 | they can be at the user controlled
level or at the application level.
| | 02:37 | They can also be an external
files called Merged Dictionaries.
| | 02:41 | If you specify a resource with the key,
Silverlight attempts to find a matching
| | 02:45 | resource and it does that
by walking the object tree.
| | 02:48 | It starts at the element where you
declare your intention to use the resource
| | 02:52 | and walks the object
tree trying to find a match.
| | 02:54 | The first match that it finds as it
walks up the tree is the one that is used.
| | 02:58 | Here is an example. I have two
buttons in an application on separate pages.
| | 03:03 | In this orange button,
| | 03:04 | if I specify that I want to use the
default brush, it will look to see if there
| | 03:07 | is a default brush defined at this
Button level. If not, then it will look in
| | 03:10 | the grid, then the page, and
then the application and then in any
| | 03:15 | ResourceDictionaries.
| | 03:16 | This blue button will do the same
thing only it is walking a different tree.
| | 03:20 | If I specify a resource at the
application level, both buttons could use it.
| | 03:25 | Let's see how you can use
some of these resources.
| | 03:27 | I am going to switch back to Visual Studio.
| | 03:28 | I am going to open the UsingResource.xaml file.
| | 03:33 | This has the same resources I
showed you on the previous example.
| | 03:37 | So, the difference is how do you use them?
| | 03:40 | I have a TextBlock down here and the
foreground color of the TextBlock is going
| | 03:44 | to come from the Sun Brush.
| | 03:45 | This TextBlock's text property is
going to come from a resource called
| | 03:48 | helloString, which is defined here.
| | 03:51 | This ListBox is going to get it's
information from the Days business class.
| | 03:57 | I suspect you would like
to see what this looks like.
| | 03:59 | I'll press F5. Click on
the UsingResource button.
| | 04:05 | There is the TextBlock using the brush.
| | 04:08 | There is the TextBlock using the
helloString and here is the list box that has
| | 04:11 | been filled with the items
from the CalendarDays class.
| | 04:15 | When you click on the show contents of
ResourceDictionary, it walks through the
| | 04:18 | contents of the research dictionary and
shows you the key value, HelloString, and
| | 04:23 | the current value that's stored in
there, Hello, day, and the type is
| | 04:27 | CalendarDay and the Days type is CalendarDays.
| | 04:29 | A couple of things to keep
in mind when using resources.
| | 04:33 | You cannot put a UI element
in a resource and reuse it.
| | 04:37 | Sometimes developers think this
will be a good idea to put a button in
| | 04:39 | resources, but a UI element can
only be a child of a single parent,
| | 04:42 | which prevents reuse.
| | Collapse this transcript |
| Centralizing settings in styles| 00:00 | Web programmers figured out a long
time ago that it doesn't make sense to set
| | 00:03 | the same property values
repeatedly on an element.
| | 00:06 | That's why we have CSS
style sheets on most web pages today.
| | 00:09 | Silverlight, while not a web page
technology, suffers from the same issues.
| | 00:13 | Writing the same property settings is
not only tedious, but it makes for harder
| | 00:17 | work when it comes time
to change the properties.
| | 00:19 | For example, in this screenshot, I have
got two TextBoxes with exactly the same
| | 00:23 | properties set on each individual TextBox.
| | 00:26 | If I decide that Yellow is not the
correct value for the foreground I have
| | 00:30 | check out every TextBox in this
application, verify that it has a yellow
| | 00:33 | foreground and then decide if that's one of
the TextBoxes I want to change to the new color.
| | 00:38 | Silverlight provides
styles to elevate this problem.
| | 00:40 | A style is very simple.
| | 00:41 | It's a collection of property settings.
| | 00:43 | Any value that can be set in a
Property attribute can be set in a style.
| | 00:48 | Styles can contain property setters,
they can contain animations and storyboards.
| | 00:55 | They could also contain control templates.
| | 00:57 | Here is an example of a style.
| | 00:59 | At the top of the example,
I have a Resources section.
| | 01:02 | Within the Resources section, I am
creating a style and giving it a key so I
| | 01:06 | can reuse it later in my XAML.
| | 01:07 | I am also specifying some information
to Silverlight about the type that I
| | 01:11 | expect to use this on.
| | 01:12 | I am saying TargetType= "TextBox".
| | 01:15 | Then I do a series of setters.
| | 01:18 | The first setter is changing the
property background to a value of Yellow and
| | 01:23 | the second setter is
setting the property margin to 20.
| | 01:26 | Inside the main body of my
document, I have two TextBoxes.
| | 01:30 | The first TextBox is not using a
style so it will use the defaults.
| | 01:33 | The second TextBox has a
MarkupExtension applied to the style.
| | 01:37 | So, I say Style= StaticResource and
then I specify my style, DataEnteryTextBox.
| | 01:43 | I'll show you how easy it is to
create styles in Expression Blend.
| | 01:46 | If you are following along with the
Exercise Files, you are going to want to
| | 01:48 | open the UsingStyles solution and then
double-click on the MainPage.xaml file.
| | 01:55 | Size your artboard so that
you can see the entire window.
| | 01:58 | I thought I would create a style for a
button and apply it to all of the buttons
| | 02:03 | over here in this area.
| | 02:04 | To make it easier to see, I am going to create
a temporary button and just draw it in my artboard.
| | 02:11 | Select the button, and
then go to Object > Edit style.
| | 02:17 | There's two choices within this menu.
| | 02:19 | I can edit a copy of the existing style
or I can create a brand new empty style.
| | 02:24 | I will chose Edit a Copy.
| | 02:25 | I will give it a style Key.
| | 02:28 | It also says Name up here but
it's the key because it's going in
| | 02:30 | a ResourceDictionary.
| | 02:31 | I am going to call this one BigButton.
| | 02:35 | Then I define the scope, where to
put this resource in this lower half.
| | 02:38 | I can define it at the application
level, within this document only, and I can
| | 02:43 | even drill down into certain
elements within this document.
| | 02:47 | It's also possible for me
to put in an external file.
| | 02:50 | To do that I would need to click the New button,
create an external file, and then click OK.
| | 02:59 | I have just generated a new file.
| | 03:01 | You can see it over here in Project
explorer, OurStyles, and then I am going to
| | 03:04 | say put the BigButton in the ResourceDictionary.
| | 03:08 | We are now in the Style Editor.
| | 03:10 | The way you can tell we are in the Style
Editor is by looking at the top of your artboard.
| | 03:14 | There are two symbols up here.
| | 03:16 | The first symbol says Button and this allows
me to go back to the button in the artboard.
| | 03:21 | If I click on this icon, that's the style.
| | 03:23 | Now I am working on the style only.
| | 03:26 | Choose the item over here. Remember
that styles are just set in properties.
| | 03:29 | So, go up to your
Property panel and start editing.
| | 03:32 | I want a bigger font.
| | 03:35 | I want the margin to be larger.
| | 03:37 | So, I am going to go up and choose the
BorderBrush and I am going to set the
| | 03:42 | BorderThickness to be 3 pixels and
then I am going to scroll down to the
| | 03:49 | Transform section and I am going to
apply a Skew transform, clicking on the Skew
| | 03:56 | button and then we are going to take
this X value and skew it to about -5.
| | 04:01 | I think that's good enough.
| | 04:03 | I'll scope up to the Button. By the way
you can click here or you can also click
| | 04:07 | on this icon over in the Objects and Timeline.
| | 04:09 | There is my new button.
| | 04:11 | Now I want to apply the style that it just
generated to these three buttons over here.
| | 04:15 | So, I'll click the Add Ellipse button
and then I am going to go to my Property
| | 04:19 | panel and type in style.
| | 04:21 | That shows me the Miscellaneous
section. I am going to click on the little
| | 04:24 | property peg and choose
Local Resource > BigButton.
| | 04:29 | Now this is a bug in the Accordion control.
| | 04:35 | Occasionally the Accordion control
will collapse down inside Blend and you
| | 04:39 | cannot see the contents anymore.
| | 04:40 | You are suppose to be able to
click on the different headers.
| | 04:43 | I can solve this by adding a second
button quickly and then adding a style.
| | 04:50 | Local Resource > BigButton.
| | 04:52 | If I ever decided to change the style,
go back to the first button, choose
| | 04:56 | Edit Style > Edit Current.
| | 05:01 | Now you can see it
remembers what style I am editing.
| | 05:04 | Maybe I'll change this to be
slightly bigger in the font size, 24 points
| | 05:08 | makes more sense, and you see that
both buttons have changed because they
| | 05:13 | share the same style.
| | 05:14 | With style you will never have to
define your Property attributes one element
| | 05:17 | at a time ever again.
| | Collapse this transcript |
| Creating alternate control UI with ControlTemplates| 00:00 | There is one thing you can say about
UX designers is that they love to play
| | 00:04 | around with the boundaries of UI.
| | 00:05 | Just look at all the changes in the
simple button control over the last ten years.
| | 00:09 | There have been flat buttons, pressable
buttons, gel buttons and round buttons,
| | 00:14 | and even pastel buttons.
| | 00:16 | They are all buttons.
| | 00:17 | They are all clickable and they all
initiate an action, but they look different.
| | 00:22 | Silverlight adds something called the
control template, which formalizes this process.
| | 00:27 | In Silverlight, every control has a
default template, which is supplied by the
| | 00:31 | control author, but you are
not limited to this template.
| | 00:34 | You can design your own, then
instruct Silverlight to use your new template
| | 00:39 | whenever it renders the control.
| | 00:40 | This is much more powerful than
styles as a style can only supply new
| | 00:44 | property values, not new UI.
| | 00:47 | I am going to use
Expression Blend for this demo.
| | 00:49 | If you are following along with the
Exercise Files, you are going to want to
| | 00:52 | open the ExploringControlTemplates solution.
| | 00:56 | Then open the Views folder, then
double-click on CreatButtonTemplate.xaml.
| | 01:02 | In a minute or two, I am going to add a
control template to this button and then
| | 01:06 | apply that template to the
rest of the buttons on this page.
| | 01:09 | Before I do that however, let me show you
a couple of examples of control templates.
| | 01:13 | I will press F5.
| | 01:17 | This application is a navigation
application, so it has the buttons on the
| | 01:20 | upper right-hand corner.
| | 01:22 | I will click on the SampleButton.
| | 01:24 | This is a free template available
from the Expression Blend web site.
| | 01:29 | Nice looking button.
| | 01:30 | It also has a mouse-over effect.
| | 01:32 | When I move my mouse into the button,
it plays an animation and change the colors.
| | 01:37 | For a simpler take on the button,
click on the second sample button.
| | 01:42 | This is a nice two tone button. Top half is
a light gray, the bottom half is a dark gray.
| | 01:46 | When I mouse into it, I get a blue glow.
| | 01:49 | It's not just buttons that can have
templates. Any control can have a substitute UI.
| | 01:54 | Let me show you ProgressBars.
| | 01:56 | The top progress bar uses a default template.
| | 01:59 | The bottom progress bar uses a new
control template and then the last button,
| | 02:05 | brings up our page, the one
that we are going to modify.
| | 02:08 | We are going to close the browser
and we turn back to Expression Blend.
| | 02:11 | I am going to create a
control template for this button.
| | 02:15 | To do that, I can right-click on my
button and choose Edit Template, or I can
| | 02:21 | click on this button at the top of
this window, there is little dropdown here,
| | 02:26 | and I can choose Edit Template.
| | 02:28 | My choices are to Edit a Copy.
| | 02:30 | That will take the existing template
that already exist on the control, make a
| | 02:34 | duplicate copy of it and let me work with it.
| | 02:36 | I can also create a brand new empty template.
| | 02:39 | For today's demo, I will
choose this option, Create Empty.
| | 02:44 | I will provide an identifying
key, OrbButton. Pick my scope.
| | 02:49 | I am going to leave it at the
default and then click OK. What happened?
| | 02:56 | Well there have been some changes in the UI.
| | 02:58 | Look at the upper left
hand corner of my work area.
| | 03:00 | It says Button and then it says Grid.
| | 03:03 | The tooltips explains what's going on.
| | 03:05 | This is the page and
this is the Button template.
| | 03:09 | So, if I want to go back
to the page, I click here.
| | 03:11 | If I want to edit the template, I click here.
| | 03:14 | Since it's an empty template,
there is nothing to show yet.
| | 03:17 | I am going to change that by drawing an ellipse.
| | 03:19 | I am going to go to my tool panel, find this
area, press and hold and look for the Ellipse.
| | 03:25 | I also could have pressed the L key.
| | 03:26 | All right, I am going to come over and
draw up ellipse within the boundaries,
| | 03:34 | make sure that my margins are at 0,
and then I am going to go paint some UI
| | 03:43 | inside of this ellipse.
| | 03:45 | I am going to go to the Brushes section.
| | 03:46 | I am going to choose a Radial Gradient
Brush and we click on the Radial Brush
| | 03:51 | button and then on the Radial Button,
then I am going to choose a red color for
| | 03:56 | the first brush. We could have a light
red color and for the second brush, I am
| | 04:03 | going to choose a darker red.
| | 04:05 | I like that, although I would like
the first color to be a little bit
| | 04:09 | lighter. There, I like that.
| | 04:15 | Next, I will click on the Stroke, and
make my StrokeThickness 4 pixels and then
| | 04:22 | I will apply Gradient Brush to the border.
| | 04:24 | Click on the Gradient Brush. Choose
Linear Gradient Brush, which is the default.
| | 04:28 | I need three gradient stops.
| | 04:30 | So, I will slide the black
gradient stop to the center.
| | 04:34 | Then I will click over here
to add another gradient stop.
| | 04:37 | The center one is going to remain black.
| | 04:39 | The two outside gradients will be a light gray.
| | 04:41 | So, I will select this white one, dial
in a light gray, and then I will copy
| | 04:47 | the hexadecimal value, click on this other
gradient band, and paste in the new value.
| | 04:54 | Now let's zoom in and then pan over.
| | 05:01 | Not quite happy yet, so what I am
going to do is take this gray gradient and
| | 05:04 | move it closer to the center for both of these.
| | 05:07 | I want to have a more
concentrated black band across the center.
| | 05:10 | To fool our eye into thinking this is
glass, I am going to draw another ellipse
| | 05:14 | that's going to represent a
reflection off a curved surface.
| | 05:20 | I am going to draw two more ellipses.
| | 05:23 | This ellipse I am going to
make black, with no stroke.
| | 05:26 | So, I will click on Stroke,
and turn off the stroke.
| | 05:29 | Set the border thickness to 0, and then
I am going to fill this with a black color.
| | 05:34 | You will see why in a minute.
| | 05:37 | Click Solid Color Brush and then fill
with black and then the next ellipse
| | 05:41 | I am going to draw, I am going to draw
over the top of this one and then I am
| | 05:45 | going to bring the bottom of this new
ellipse just about to the center of the
| | 05:48 | button, right about there.
| | 05:50 | This ellipse is going to be transparent.
| | 05:51 | So I will choose Gradient
Brush, Radial Gradient Brush.
| | 05:57 | This gradient stop will be white and
this gradient stop will be transparent.
| | 06:02 | So, I will dial in the Alpha channel.
| | 06:05 | That's nice. I like that.
| | 06:06 | We will move this over a little bit,
and a little bit bigger, and then I can
| | 06:11 | move the location of the center dot
by clicking on that Gradient tool or
| | 06:15 | pressing G, and then I can move the
white center over here near the left edge.
| | 06:21 | The button is about the way I want
to look except rest of this ellipse is
| | 06:25 | sticking out beyond the boundaries of
the button, so I need to trim that off.
| | 06:29 | That's what this ellipse is for.
| | 06:30 | Go over and select my Selection tool,
and I am going to drag my ellipse over
| | 06:34 | here and what I want to do is fill the
center, the red area. I need to uncheck
| | 06:40 | Snap to Grid lines, Ctrl+Z and try this again.
| | 06:44 | Bring this over to center, drag the size down.
| | 06:49 | I still have Snaplines turned on too.
| | 06:51 | Okay, that makes it easier.
| | 07:03 | You see what I am doing?
| | 07:03 | I am filling the red
area with this black circle.
| | 07:07 | Just to review, on my machine, I had
snapping to Gridlines enabled and also had
| | 07:14 | snapping to snaplines, which was
preventing me from getting right where I
| | 07:17 | wanted the ellipse. So now I am ready.
| | 07:20 | I have my black circle selected.
| | 07:21 | I am going to go to Object >
Path > Make Clipping Path.
| | 07:28 | Blend then says, all right you have
two ellipses, which one do you want me to
| | 07:31 | apply the clipping path to?
| | 07:33 | It would be the last ellipse that I added.
| | 07:36 | And then I click OK.
| | 07:38 | And now that trims off the excess that
was outside the boundaries of the circle.
| | 07:42 | It's starting to look nice.
| | 07:43 | And here is the issue. Remember I said
earlier that the button is content control?
| | 07:46 | Do you remember that this
button has text on it? Let's look.
| | 07:52 | This button says Start Here, but
I am not seeing that in my button.
| | 07:56 | That's the job of an
element called ContentPresenter.
| | 07:59 | I will click on my Assets button, do a
search for ContentPresenter, select it,
| | 08:08 | and then I can add this to my designer surface.
| | 08:11 | Before I do that, I need
to go back to my template.
| | 08:15 | Now I am going to double-
click on the ContentPresenter.
| | 08:17 | Can you see what happened?
| | 08:19 | The content is now showing up.
| | 08:21 | I need to center it.
| | 08:22 | So, I will choose to set the
HorizontalAlignment equal to Center and the
| | 08:27 | VerticalAlignment equal to Center and
I see that I have some margins on here.
| | 08:31 | I am going to remove those.
| | 08:32 | I will change this margin to 0
and this margin to 0, and now that
| | 08:36 | ContentPresenter is centered.
| | 08:38 | It's important to note that
the ContentPresenter is not text.
| | 08:41 | It's just a placeholder.
| | 08:43 | The content can be an image.
It could be another shape.
| | 08:45 | It could a checkbox.
| | 08:47 | This is just a place that it goes.
| | 08:49 | One more thing that I want to show
you in this template is something
| | 08:51 | called template bindings.
| | 08:53 | The issue I am trying to solve here
is there might be properties on the
| | 08:56 | control itself that I would like to use
it in my template. Maybe the width and
| | 09:00 | the height of the button I would like to
apply to some of my elements in my template.
| | 09:04 | I am going to change to red
brush by applying a template binding.
| | 09:08 | To do that I am going to go up to the
Brushes section and I am going to select
| | 09:12 | my red ellipse first, then I am going
to go to the Property Peg click on the
| | 09:18 | Property Peg and choose Template Binding.
| | 09:21 | Expression Blend comes back and
says, I see that there are these
| | 09:24 | compatible properties on the
underlying control, which one would you like?
| | 09:27 | And I choose Background.
| | 09:29 | Now it's picking up the value
from the underlying control.
| | 09:31 | I will scope out by clicking on this
button, so I am no longer editing the
| | 09:35 | template and then I am going to come
down here and select one of these buttons
| | 09:39 | and apply my template to see if it works.
| | 09:41 | Do a search over here in the Property
pane for template, click on the Property
| | 09:45 | Peg, choose Local Resource and
there is our template, OrbButton.
| | 09:50 | Look at that. It worked.
| | 09:51 | Let's see if it picks up
the change in the brush.
| | 09:53 | We will close out the template. I'll
go to the background of this button and
| | 09:57 | dial in a new color. It is working.
| | 10:00 | I should be able to turn off the brush,
apply a Solid Color Brush, apply a
| | 10:04 | Gradient Brush, whatever.
| | 10:06 | I am going to attempt to apply
the template now to this button.
| | 10:09 | It has picture content.
| | 10:10 | So, I will click here, find my template,
apply the new template, remember that
| | 10:16 | it is called OrbButton, and it's also working.
| | 10:21 | The content is being
represented in the ContentPresenter.
| | 10:24 | If I had to name my favor Silverlight
feature, I would be hard pressed but I can
| | 10:27 | say this without reservation.
Control templates make my top five list.
| | Collapse this transcript |
| Dressing up your data with DataTemplates| 00:00 | It is common in Silverlight to have
controls bound to underlying data.
| | 00:04 | That data doesn't have to look boring though.
| | 00:06 | Silverlight data templates
can be applied to any data type.
| | 00:09 | This means that if you have an items
control bound to a list of invoice Items,
| | 00:13 | you can create a UI to wrap each instance of
the invoice class as it is added to the control.
| | 00:17 | I'm going to use Expression Blend for this demo.
| | 00:19 | If you're following along with the
Exercise Files you're going to want to open
| | 00:22 | the DataTemplates solution,
then double-click on MainPage.xaml.
| | 00:28 | I'm going to zoom out so I can see
my entire interface and center my UI.
| | 00:32 | My data source for this example is going
to be the CalendarDays class. Let's review.
| | 00:37 | Double-click on CalendarDays.
I have two classes in here.
| | 00:42 | I have the CalendarDay class, which has a
DayName and a Boolean property called IsWeekend.
| | 00:47 | I also have a class called
CalendarDays, which is list of CalendarDay.
| | 00:52 | When I bind my list box to the
CalendarDays class, each row in the list box will
| | 00:58 | be an instance of the CalendarDay class.
| | 01:01 | Therefore I will be applying a
data template to CalendarDay. Back to the main UI.
| | 01:07 | I need a data source.
Blend makes this easy.
| | 01:10 | I move to the Property panel, choose the
Data tab, and click on the Add live data
| | 01:15 | source then, I click on
Define New Object Data Source.
| | 01:20 | The class I'm looking for is called
CalendarDays so I'll choose that and
| | 01:23 | then click OK and as you can see,
a CalendarDays(Array) has been added to
| | 01:28 | the Data Source window.
| | 01:29 | Now I can pick up this array and
drag it to my work area and you can see
| | 01:33 | from the tooltip that it says it's
going to create a ListBox for me and bind
| | 01:36 | it ItemsSource property to my underlying
DataSource, which is precisely what I want.
| | 01:40 | I'll let go of the Mouse button and then zoom
in a little bit so you can see what happened.
| | 01:44 | It created a ListBox and since
Silverlight doesn't know what to do with my
| | 01:49 | data it just created a TextBlock for the word
Monday and a checkbox for the Boolean value.
| | 01:56 | That's nice, but I want a
template just to make it look nicer.
| | 01:59 | To do that I'm going to right-click on
the ListBox, move down to Templates and
| | 02:05 | I'm going to choose this one called
Edit Additional Templates and I'm going to
| | 02:09 | choose Edit Generated Items (ItemTemplate).
| | 02:12 | Each item in the ListBox is going to
get it's own data template. That's the idea.
| | 02:17 | I'll choose to Edit a Copy and
I'll give it a name. DaysDataTemplate.
| | 02:24 | I'm going to keep the
default scope and click OK.
| | 02:28 | Whenever you're editing a template in
Expression Blend you can see that you're
| | 02:31 | in the template by
looking at this part of the UI.
| | 02:33 | This is going back to the ListBox as is.
| | 02:36 | This is editing the ItemTemplate.
| | 02:38 | Notice what happens over here in the
Object and Timeline. ListBox shows it's in
| | 02:42 | the LayoutRoot and it's in the
UserControl, ItemTemplate says there's an
| | 02:46 | ItemTemplate and there's our
StackPanel and a TextBlock and a CheckBox.
| | 02:50 | I can edit this template just
like any other part of my UI.
| | 02:53 | First thing I'm going to do is
select the StackPanel, choose Properties,
| | 02:58 | Orientation and change that value to Horizontal.
| | 03:02 | Next I'm going to take the TextBlock
and give it a minimum width size.
| | 03:09 | I'm thinking about 120 would be good.
| | 03:12 | That's a little bit too
much, maybe more like 80.
| | 03:17 | I'll change the font to bold and then
lastly, I can click on this checkbox and
| | 03:25 | set it's Content property. Content.
| | 03:33 | It's looking pretty good.
| | 03:34 | Let me go out and scope out to the
ListBox. I'll make my ListBox a little bit
| | 03:38 | wider and then back to my template.
| | 03:42 | The last thing I'm going to do is
show you how you add any other UI.
| | 03:45 | I'm going to take this picture, this
Journal.png file, and now we are going to
| | 03:49 | drag it over and add it to my template
and then size it a little bit smaller.
| | 03:57 | One last thing I'll give it a margin, slide
it over just a little bit more and I'm done.
| | 04:03 | Scope out and I'll run the
application and you'll see that our data has a
| | 04:08 | brand-new template applied to each row.
| | 04:14 | As you can see, it's easy to make your
data look beautiful, if you understand
| | 04:17 | how data templates work.
| | Collapse this transcript |
| Explaining the VisualStateManager: A simple way to manage control state| 00:00 | A control can have multiple appearances
depending on what is happening in your UI.
| | 00:04 | For example, changing the
background color when a button is pressed or
| | 00:07 | increasing the button size when
the mouse hovers over the control.
| | 00:10 | These are good examples of this scenario.
| | 00:12 | In the Silverlight world, these
different looks are known as states and they are
| | 00:16 | supervised by the VisualStateManager.
| | 00:19 | Using the VisualStateManager, you
create one or more states for your control.
| | 00:23 | For each state you specify a new UI look,
and actually tell the VisualStateManager
| | 00:27 | when to enable each state
and Silverlight does the rest.
| | 00:30 | For this example, I'm going to
be using the Expression Blend.
| | 00:33 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:37 | the ExplainingVisualStateManager solution.
| | 00:40 | Then double-click on the
EditButtonVSM.xaml file.
| | 00:44 | In this UserControl, I have 3 buttons.
I though I would start by showing you one
| | 00:49 | of Microsoft's VisualStateManagers.
| | 00:51 | To do this I'm going to right-
click on the button and choose to Edit
| | 00:54 | the existing template.
| | 00:55 | It'll ask me for a style. I'm going to
accept the default value and then click OK
| | 01:01 | and then I'm going to click on States.
| | 01:03 | This is the VisualStateManager.
| | 01:06 | Microsoft has defined 6 states for the button.
| | 01:08 | Each state belongs in one and only one group.
| | 01:11 | So, there is the CommonStates group
and there is the FocusStates group.
| | 01:15 | A button can have a
FocusState set and a CommonState set.
| | 01:19 | So, I could have a normal button,
Unfocused and a normal button, Focused.
| | 01:25 | I can have pressed button,
Focused and a pressed button, Unfocused.
| | 01:29 | What does the Focus do?
| | 01:31 | Focus means that the user has moved to
that control and it usually shows some sort
| | 01:34 | of outline on the control to indicate that.
| | 01:37 | When I click on the FocusState,
Expression Blend enters recording mode.
| | 01:40 | Now any changes that I make to this
button will be saved in this state.
| | 01:43 | I'm going to drill down into the template,
find the FocusVisualElement, which is
| | 01:48 | a rectangle, and then I'm just
going to make it slightly smaller.
| | 01:51 | Then I'm going to run the application,
so you can see what it looks like.
| | 01:56 | You might need to go to App.xaml.
cs and ensure that you have the
| | 02:01 | EditButtonVSM as the RootVisual.
| | 02:06 | I'll press F5 and there is the
FocusState and you see this has a different
| | 02:13 | rectangle than the other 2 buttons.
| | 02:17 | Returning back to Expression Blend,
I'm now going to select the MouseOver state.
| | 02:23 | I am going to zoom in a little bit
closer to my button. Clicking on each one of
| | 02:29 | these states, I can see what
the button's going to look like.
| | 02:31 | I want to alter the Pressed
state and the MouseOver state.
| | 02:36 | I'm going to click MouseOver, I'm
going to drill down into the template again,
| | 02:40 | into Background, into Grid, into
something called the BackgroundAnimation.
| | 02:45 | It's really not an animation.
| | 02:47 | It's a border that has an
animation applied to it.
| | 02:50 | So I can change the border
value here, and fill on this.
| | 02:54 | I'm thinking of more of a yellow color
like so, and then for the Pressed state,
| | 03:01 | same place, only this time I'm
thinking maybe something green.
| | 03:07 | One more thing I wanted to do before I left.
| | 03:09 | I want to change the default
transition time to one second.
| | 03:14 | That's how long it takes to
transition between one state and another.
| | 03:18 | Press F5 to run the application. Mouse in.
| | 03:23 | It changes to yellow.
Press and hold my mouse button.
| | 03:26 | It changes to green. Let go.
| | 03:28 | It goes back to the MouseOver and then
when I move my mouse out, it goes back
| | 03:32 | to the normal state.
| | 03:34 | You can also use
VisualStateManager in your own controls.
| | 03:37 | For this example, I'm going to edit
my App.xaml.cs and return this to the
| | 03:42 | TrafficLightVSM as the RootVisual and
then I'm going to go to Projects and
| | 03:48 | choose TrafficLightVSM.
| | 03:51 | This is a UserControl that
mimics looking like a traffic light.
| | 03:54 | I'm going to add my own StateManager.
I will click on the States Tab, click here
| | 04:00 | to Add a state group, set my Default
transition time to one second and then I
| | 04:05 | click on this button, Add state.
| | 04:08 | I name each state. I'm going to call this
the RedLight state and I'll add 2 more.
| | 04:14 | This will be called the YellowLight state.
| | 04:22 | Can you guess what the last
one is going to be called?
| | 04:28 | The GreenLight state.
| | 04:30 | Again the recording is on for each state.
| | 04:32 | I'm going to click on RedLight then
choose my Ellipse and then I'm going to
| | 04:38 | dial in some colors.
| | 04:39 | I'm going to change these 2
red bands in the center to black.
| | 04:43 | I'll click on this red band in the
gradient and then grab the circle and slide
| | 04:47 | down to the black area.
| | 04:49 | Click here. I can also
click directly in this area.
| | 04:52 | I wasn't paying attention.
| | 04:53 | I need to do this on the yellow ellipse.
| | 04:55 | Then I'll select the green ellipse and change
these two values, and that's my RedLight state.
| | 05:09 | Then I click on
YellowLight and do the same thing.
| | 05:12 | Now I'm going to change the red one
and the green ellipse and finally for the
| | 05:26 | GreenLight.
| | 05:37 | Bit tedious there but we're done.
| | 05:39 | You can add easings to your
animations, have a one second transition.
| | 05:44 | I can click on the RedLight and choose
to go either RedLight to YellowLight or
| | 05:47 | RedLight to GreenLight.
| | 05:48 | I'm going to create an easing to
go from RedLight to GreenLight.
| | 05:52 | When I'm sending the YellowLight
easings, I can choose to go from the
| | 05:55 | YellowLight to the GreenLight or
the YellowLight to the RedLight.
| | 05:58 | I'm going to create an easing
transition to go from the YellowLight to the
| | 06:01 | RedLight and for the GreenLight, I'm
going to set up an easing transition to go
| | 06:05 | from the GreenLight to the YellowLight.
| | 06:06 | Then I can click on, let's choose
yellow, and then I can click here and add an
| | 06:12 | easing, so I'm going to choose
something crazy like the Bounce.
| | 06:15 | I have one more thing to do. I need
to tell the VisualStateManager when to
| | 06:19 | enable the state. To do that I need an event.
| | 06:22 | I'll click on the lightning bolt.
| | 06:24 | Choose the RedLight, I've
already got some code written here,
| | 06:29 | MouseLeftButtonUp, move my cursor here
and hit Enter and then I'm going to type
| | 06:33 | in the VisualStateManager.GoToState,
so when the Mouse is up on the red
| | 06:42 | ellipse, turn on my state.
| | 06:44 | The first parameter represents this
control, the second parameter is the name
| | 06:48 | of the state, RedLight, and the third
parameter is whether or not I want to use
| | 06:54 | the transitions, true.
| | 06:56 | To keep this shorter, I'm going to just
uncomment these other two procedures and
| | 07:02 | then we'll run the application.
| | 07:06 | Here's my Traffic Light control.
| | 07:08 | I'll click on the red
ellipse and the transition happens.
| | 07:10 | I'll click on the green ellipse and
its transition happens at one second.
| | 07:14 | Again on the yellow and you remember that I
had a yellow to red transition with an easing.
| | 07:20 | Let's see what happens when I
click on the red ellipse now. I'm going
| | 07:22 | from yellow to red.
| | 07:25 | If I go from green to red,
I don't see that transition.
| | 07:30 | As you can see, the VisualStateManager
does a great job of melding together the
| | 07:33 | states of the UI into a
central, easy to manage tool.
| | Collapse this transcript |
|
|
12. Application-Level ConceptsHandling errors in a Silverlight application| 00:00 | As a programmer you should write
proactive error handling code in all of your
| | 00:03 | procedures but in the real world
things don't always go as planned.
| | 00:07 | You might write some code that
fails to trap a specific exception.
| | 00:10 | In that case you should always write a
general unhandled exception framework.
| | 00:14 | Microsoft is good about including
hooks for these general handlers in .NET,
| | 00:18 | which makes our job easier.
| | 00:19 | For this demo I'm going to use Visual Studio
and I'm going to create a brand-new project.
| | 00:24 | To do that I'm going to go to File > New
> Project, I'm going to choose C# and
| | 00:31 | Silverlight Application. The name is not
important neither is the location, so just click OK.
| | 00:36 | I do not need a companion new website, so
I'll uncheck the checkbox and then click OK.
| | 00:43 | I need a little bit of UI so I'm going
to go to my MainPage.xaml, I'm going to
| | 00:47 | add a Button class that says Fire
Exception, and then I'll write a Click
| | 01:04 | procedure, press Tab twice to stub in my code.
| | 01:06 | And then and then I'll press
F7 to switch to the code window.
| | 01:12 | I'm not going to spend a lot of time
in this video talking about the way
| | 01:15 | .NET handles exceptions.
| | 01:17 | Each language in .NET has its own way.
In C# you can use the Try, Catch and
| | 01:21 | Finally blocks in your code to trap
exceptions and to throw exceptions, you can
| | 01:26 | use the Throw keyword.
| | 01:27 | So, I'm going to say throw new Exception.
| | 01:31 | If something has gone wrong in our
application, I'm throwing an exception.
| | 01:34 | I can pass extra met data to the exception
right here, Demo Exception, and I'm ready to test.
| | 01:42 | I'm going to start by pressing F5.
| | 01:44 | Now you recall that in F5 what
happens is the browser starts up and then we
| | 01:48 | attach a debugger to the
browser, so I can debug my code.
| | 01:51 | That's important, keep that in mind.
| | 01:53 | Press F5 and I'm going to click
on the button to see what happens.
| | 02:00 | When you are in attach to the debugger
we can switch the Visual Studio so we get
| | 02:04 | a chance to just figure out
what went wrong with our code.
| | 02:06 | When it switches to Visual Studio,
it shows a yellow line and this little
| | 02:10 | Exception tool window.
| | 02:11 | It lets us drill down and find out
more information about the error.
| | 02:14 | I can click on the View Detail and
then drill down into the Exception.
| | 02:19 | If it's a complex exception there might
be multiple layers of inner exceptions
| | 02:23 | available and I can drill down
into the clicking on that Plus sign.
| | 02:26 | I can also get call stack information and
plenty of other information from this exception.
| | 02:32 | I'd rather see what happens to the end
user, not a developer, so I'm going to
| | 02:36 | shut down the application and I'm
going to start it up again this time by
| | 02:40 | choosing Debug > Start Without Debugging.
| | 02:43 | That means I will not attach a debugger.
| | 02:47 | I'll click on the button again and it's
subtle but if you look in the lower left
| | 02:51 | hand corner you'll see there is the
error flag down there that IE shows.
| | 02:55 | This is because brand-new
Silverlight Applications, if you're using the
| | 02:58 | template that Visual Studio provides for you,
automatically has a general exception handler.
| | 03:03 | If there was no general exception handler,
what would happen is your Silverlight
| | 03:06 | application would cease to work and
it would show a blank area where the
| | 03:10 | Silverlight control is on the webpage.
| | 03:12 | Let's go look at the code.
| | 03:12 | I'm going to close the browser.
| | 03:14 | To find the exception handling code, I'm
going to go to the application level by
| | 03:18 | moving to App.xaml.cs and opening this file.
| | 03:24 | The first line that's
important to us is line 22.
| | 03:27 | At the application level, if there's
ever an UnhandledException raised then
| | 03:31 | call this code,
Application_UnhandledException.
| | 03:36 | When I scroll down to this area,
make my view a little bit larger, full screen.
| | 03:41 | The code here that Microsoft
wrote says, if there is not a debugger
| | 03:46 | attached, then say that we're
handling the error, that way it won't re-raise
| | 03:51 | the error, and then call BeginInvoke-
delegate, which means it calls some other
| | 03:56 | code, ReportErrorToDom.
| | 03:58 | That calls this code down here and
what this does is it goes out to the
| | 04:02 | underlying browser whether it's IE or
Firefox or whatever and it tells it to
| | 04:07 | call this EVAL, throw new Error.
| | 04:08 | That's why I get the little yellow
icon in IE and in Firefox, you get the
| | 04:13 | script error dialog.
| | 04:15 | In the real world, what you would do
here is you would also log your information.
| | 04:24 | You don't know why you had an error.
| | 04:26 | It's often good to log that to some
source. Then you can open the logs later and
| | 04:31 | read out the information.
| | 04:33 | Let me restate that. The Visual Studio
Silverlight project has a simple built-in
| | 04:37 | handler, which ignores the error.
| | 04:39 | You can write a better handler than that.
| | 04:41 | I suggest logging the error so your
development staff can learn more about
| | 04:44 | what went wrong.
| | Collapse this transcript |
| Setting up application events| 00:00 | In this movie I'm going to
look at the Application class.
| | 00:03 | The Application class has several useful
events like the Startup and Exit events,
| | 00:07 | and it also has some properties you
might find useful in your application.
| | 00:10 | We're going to create a brand-new project.
| | 00:12 | So, let's go to File > New > Project,
choose Visual C# and Silverlight Application.
| | 00:18 | The name or the location is not
important for this application. Click OK.
| | 00:24 | I do not need a companion website, so
I'll uncheck the checkmark and click OK.
| | 00:28 | App.xaml is where you'll find most of
your code dealing with the application.
| | 00:32 | I'll open up App.xaml then
double-click on App.xaml.cs.
| | 00:38 | In another movie in this series we've
talked about the exception handlers, so
| | 00:41 | I'm going to go ahead and delete
this code, plus this code down here.
| | 00:50 | And I'll compile the application to
make sure I haven't broken anything.
| | 00:54 | This cleans up the code window a little bit.
| | 00:57 | In the Application class you
can sign up for several events.
| | 00:59 | You type in this, dot, and
then the event you want like
| | 01:02 | CheckAndDownloadUpdateComplete and
then you use typical C# += syntax.
| | 01:08 | The two most common events that you work
with are the Startup event and the Exit event.
| | 01:12 | In the Startup event the main thing that
you do in here is set your root visual.
| | 01:17 | If you do not set your root
visual in here, you'll end up with a
| | 01:20 | blank Silverlight page.
| | 01:22 | The loading screen will run and it
will never get any farther than that.
| | 01:26 | The Application_Exit fires when
the application is shutting down.
| | 01:30 | Let's put a breakpoint here and see what I mean.
| | 01:32 | I'm going to press F9 while in
Visual Studio, then I'm going to run the
| | 01:35 | application by pressing F5.
I'm now going to go to another site.
| | 01:41 | I'm going to click on my Home button
here, which will take me to another site,
| | 01:44 | and the page that had the Silverlight
application on it unloaded and that
| | 01:47 | causes the Application_Exit to fire.
| | 01:50 | You can use this event for saving
application information and it's commonly used
| | 01:54 | to save user settings before
they leave the application.
| | 01:57 | I'll remove this breakpoint by clicking on
it with my mouse and press Stop Debugging.
| | 02:02 | In the Application_Startup'I thought I
would look at a few of the properties
| | 02:06 | on the Application class.
| | 02:08 | You can type in this.host. As it says
here, it gets various details about the
| | 02:12 | Silverlight application host, the host
control on the page. Through this you can
| | 02:17 | also gain information about your browser.
| | 02:20 | You can find out whether you
are running out of browser.
| | 02:24 | In Silverlight 3, you can pull this
Silverlight application out of browser and
| | 02:29 | run it on your desktop.
| | 02:30 | This property let's you know whether
the Silverlight application is running
| | 02:33 | out of the browser.
| | 02:34 | Show you how I can use the Application class.
| | 02:39 | I'm going to put a breakpoint right
here by pressing F9. I'm going to press F5
| | 02:42 | to run the application.
| | 02:45 | It hit my breakpoint and I'm going to use a
window in Visual Studio called the Watch window.
| | 02:49 | I can go down to the Watch window and I
can type in any code values I want and
| | 02:54 | it'll show me the results
inside the Watch window.
| | 02:56 | So, I'm going to type in
this.host and hit Enter.
| | 03:01 | And now I can drill down and find out
more information like the background color
| | 03:05 | is currently set in the host, the
content of that control, the source, I see
| | 03:11 | that this is coming from a file
called SilverlightApplication8.xap.
| | 03:16 | And that is just a brief tour of what
you can do with the Application class.
| | Collapse this transcript |
| Reporting incremental progress with a loading screen| 00:00 | The first thing that your user sees in a
Silverlight application is the loader screen.
| | 00:04 | If you are lucky and have crafted a
Silverlight application that has a small
| | 00:07 | payload, it'll be quick to download.
| | 00:10 | In that case, the user will hardly
even know the application is downloading.
| | 00:13 | If on the other hand you have a large
XAP file, your user will have to wait.
| | 00:18 | Silverlight automatically shows a
progress screen if your application takes more
| | 00:21 | than one half second to download.
| | 00:23 | In the Flash world, it's typical to
create custom loaders, and Silverlight
| | 00:26 | supports this capability too.
| | 00:28 | For this demo, I am going to use Visual Studio.
| | 00:30 | If you're following along with the
Exercise Files, you're going to want to open
| | 00:33 | the SplashScreen solution.
| | 00:34 | This Solution has two projects.
| | 00:36 | It has a companion website and it
has the Silverlight application.
| | 00:40 | When testing SplashScreens, it's
helpful to have a real website, instead of
| | 00:44 | using the auto-generated HTML
page in the Silverlight application.
| | 00:47 | The Silverlight application
itself is our PixelSmith application.
| | 00:51 | Let's see what the application looks like
when we run it the first time. Press F5.
| | 00:58 | You may see a SplashScreen.
| | 00:59 | In this case, we're seeing in about a
one second SplashScreen, then you see the
| | 01:02 | main UI of the application.
| | 01:04 | That default screen was provided by Silverlight.
| | 01:07 | When you're testing a Silverlight
SplashScreen, there are two techniques that
| | 01:10 | can help you see more
details on that SplashScreen.
| | 01:13 | Let me show you the first one.
| | 01:14 | Go to your App.xaml file and
double-click on the App.xaml.cs file.
| | 01:21 | Scroll down to the Application_Startup
and comment out the line of code that
| | 01:25 | says it's the RootVisual for this application.
| | 01:28 | Now when you run the application, the
SplashScreen will run, but it will never
| | 01:32 | load the main UI of the application.
| | 01:33 | This gives you a chance to
inspect the SplashScreen in more detail.
| | 01:40 | At this point, it should have loaded
the application, but as you can see,
| | 01:43 | it leaves the SplashScreen on the screen.
| | 01:45 | A more real world approach is
to make your application bigger.
| | 01:49 | So, let's go back in and uncomment this line.
| | 01:53 | And then go to the
SplashScreen and add a huge file.
| | 01:56 | By adding a huge file, we're going
to force the download to take longer.
| | 01:59 | Let's go and add that file.
| | 02:00 | Add > Existing Item, and then I am
going to go look at my desktop.
| | 02:05 | I have a file down here called BigMovie.avi.
| | 02:08 | This is a file on my computer.
| | 02:10 | It's not one that is
included in the exercise files.
| | 02:13 | You need to find a large file
on your computer to substitute.
| | 02:16 | Click Add and then next, I am going
to click on the AVI file and choose
| | 02:21 | Build Action > Content.
| | 02:25 | That puts it into the XAP file.
| | 02:27 | And then I am going to press F5 to run
the application and it's going to take a
| | 02:31 | while to do the compile
and then run the application.
| | 02:34 | So we're just going to skip to
the end of the compile process here.
| | 02:38 | And now you see the loader screen, and
it's taking about five seconds for the
| | 02:43 | loader screen to run.
| | 02:44 | And there is our PixelSmith application.
| | 02:46 | Subsequent runs of this will be faster,
because Visual Studio can cache some of
| | 02:50 | the files used during the compile process.
| | 02:52 | Up to this point, we've
seen the default behavior.
| | 02:54 | Now what we want to do is change
the SplashScreen to one of our own.
| | 02:58 | I'll close the browser and then
I am going to go to the website.
| | 03:01 | It's important that your
SplashScreen goes in the website, not in your
| | 03:05 | Silverlight application.
| | 03:07 | Your Silverlight application is going
to be downloading, so you cannot have any
| | 03:11 | files in it that you're going
to use as your SplashScreen.
| | 03:13 | So what you typically do is you create
a standalone XAML file in the website.
| | 03:18 | I have already got a couple of created here.
| | 03:19 | I have got one called
OrangeSplashScreen and the BetterSplashScreen.xaml.
| | 03:23 | We'll start with the OrangeSplashScreen.
| | 03:25 | I need to find my host page.
| | 03:27 | In this case, it's the SplashScreenTestPage.html.
Double-click on it to load it
| | 03:31 | into the editor, and scroll down to
the Silverlight control, right here.
| | 03:38 | I am going to add a parameter here.
| | 03:43 | The name of the parameter is lowercase
splashScreenSource, and the value will
| | 03:53 | be the name of my XAML file.
| | 03:55 | So, I'll copy the XAML file
name and paste it in here.
| | 04:01 | So, I'll type in = "" and
then close this tag. All right!
| | 04:08 | Let's run the application
now and see what happens.
| | 04:14 | There is our custom SplashScreen.
| | 04:17 | I suspect you're sitting there
going, "I thought it would be more
| | 04:20 | interesting than that!"
| | 04:21 | Well, don't fear. We'll make it look nicer.
| | 04:23 | In fact, we'll even have it
update with the progress report.
| | 04:26 | To do that, I am going to use this parameter.
| | 04:29 | I have already typed this parameter in.
| | 04:30 | This says, if there is a progress
report coming from the download, this is the
| | 04:36 | JavaScript code to run.
| | 04:38 | If I move up my editor, you see
that I have this function called
| | 04:40 | onSourceDownloadProgressChanged.
| | 04:43 | In the first three lines, I am
going to uncomment this by doing a
| | 04:47 | Ctrl+K, Ctrl+U. I am saying, go to the web
page, find something called progressTextBlock.
| | 04:54 | Set its text to the word 'Loading' and
then go to the eventArgs, which I get
| | 04:59 | from the downloading in progress,
find out what the numerical value is.
| | 05:03 | Multiply by 100 and then add the percent sign.
| | 05:05 | So I'll go over to my OrangeSplashScreen,
put in the progressTextBlock, and run
| | 05:16 | the application one more time. That's nice!
| | 05:21 | I now have an
OrangeSplashScreen with progress reports.
| | 05:24 | You're probably going to want to brand your UI
with your company logo though or some other UIs.
| | 05:28 | So, let's go look at our better source.
| | 05:30 | I have this one called BetterSplashScreen.
| | 05:32 | By the way, I didn't mention this yet.
| | 05:34 | You're not allowed to use the
user control as the root element for
| | 05:38 | your SplashScreens.
| | 05:39 | I pick StackPanel for this one and
for the OrangeSplashScreen I had Grid.
| | 05:44 | Here I am putting a StackPanel, a
TextBlock, another TextBlock with the same
| | 05:49 | name ProgressTextBlock, a Canvas and
then a Rectangle, a second Rectangle.
| | 05:57 | The name of this is ProgressBar, and
then down here I have a RenderTransform on
| | 06:02 | the Rectangle and the name of
that is ProgressBarTransform.
| | 06:06 | Now let's go look at my HTML page,
and uncomment this line of code.
| | 06:10 | This says to go find the
ProgressBarTransform and change its ScaleX property
| | 06:15 | based on the eventArgs process and 250
comes from the fact that I have made a
| | 06:20 | 250 pixel wide rectangle.
| | 06:22 | So, I am multiplying it by that factor.
| | 06:25 | I need to one more thing. I need
to go down here and change this to
| | 06:30 | say BetterSplashScreen.
| | 06:31 | Now I'll press F5 to run.
| | 06:37 | And as you can see, I am getting the
loading statistics at the TextBlock level.
| | 06:43 | The rectangle is resizing itself,
and there is our company logo.
| | 06:47 | So what you have seen is you can take
control of the download process and show
| | 06:50 | your own UI instead of the default.
| | Collapse this transcript |
| Storing data on the client| 00:00 | Do you need to store data for
your SilverLight application?
| | 00:03 | If so, you have to decide where to store it.
| | 00:05 | One common scenario when storing data
on the server is to use a web service to
| | 00:08 | shuttle to data back to the server.
| | 00:10 | If you are storing the data on the
client computer then, you have two options.
| | 00:14 | If you can get the user's explicit
permission, via the Open File dialog or that
| | 00:18 | Save File dialog, SilverLight can
write to local storage just like any other
| | 00:23 | desktop application.
| | 00:24 | At times however, applications write
information to the local drive without
| | 00:27 | interrupting the user with a file prompt.
| | 00:29 | A classic example of this is reading
and writing user configuration files.
| | 00:34 | The application developer wants to
write these files as an aid to making a
| | 00:37 | better user interface.
| | 00:39 | But granting Web applications
unfettered access to the file system is sure to
| | 00:42 | put your computer in jeopardy.
| | 00:44 | To solve this dilemma
SilverLight uses isolated storage.
| | 00:46 | So to summarize, you can store in the
local computer either directly to the
| | 00:51 | local hard drive, with the users'
permissions or you can store to the hard drive
| | 00:54 | without the users' permissions, but
you can only use isolated storage.
| | 00:57 | I am going to show you demos of both.
| | 00:59 | I am in Visual Studio.
| | 01:01 | If you're following along with the
Exercise Files, you're going to want to open
| | 01:04 | the StoringDataOnClient solution and
then you're going to want to double-click
| | 01:08 | on MainPage.xaml.cs.
| | 01:12 | I have three buttons I am
going to use in this demo.
| | 01:14 | I should probably show you what
the user interface looks like.
| | 01:16 | I'll press F5 and click on the
File section and there is the buttons.
| | 01:25 | I can save to isolated storage, I can
read from isolated storage. When I save to
| | 01:30 | local hard drive, I need the user's
explicit permission. You are going to see a
| | 01:33 | dialog pop-up and then they can choose
where to save the file. Click on Cancel
| | 01:38 | and I am going to close the browser.
| | 01:42 | On this button here, SaveButton_Click,
I am going to save to isolated storage.
| | 01:46 | The way to think about isolated
storage is it's a virtual file system.
| | 01:49 | It's managed by the .NET framework.
| | 01:52 | You ask the virtual file
system to give you your store.
| | 01:55 | It determines which store you get,
but you do not know where the store is.
| | 01:59 | The scope with the store is
based on the URI of your application.
| | 02:04 | So, that means that every Silverlight
application gets its own isolated store.
| | 02:08 | Once you have your isolated store,
here's the line of code to do that.
| | 02:12 | Declare a variable, call the static
method, call this static method on the
| | 02:16 | isolated storage file called
GetUserStoreForApplication.
| | 02:19 | This gets you your unique store,
without giving you a clue of where it really
| | 02:23 | is on the hard drive.
| | 02:23 | It's also deliberately obstructed, so
that other applications can't find it.
| | 02:28 | Then I can start using the virtual
file system that's part of the isolated store.
| | 02:31 | I can say something like
isoStore.DirectoryExists.
| | 02:33 | So, I can see if this folder exists.
| | 02:37 | I can check to see if a file exists.
| | 02:39 | Is there a file called ourfile?
| | 02:41 | If not I can create a file.
| | 02:43 | There are lots of methods
inside this isoStore class.
| | 02:46 | Let's look at a few of them.
| | 02:49 | DeleteFile, GetFileNames for a directory.
| | 02:53 | Here's one other issue with the isolated store.
| | 02:55 | By default, you only get a small
limited size for the isolated store.
| | 03:00 | If you are going to save a file and
you are going to go over that limit.
| | 03:03 | Silvelight can prompt the
user to increase the quota.
| | 03:06 | You ask for a new size, the usual,
you'll see a dialog and if they approve, then
| | 03:09 | you get more stories based for your application.
| | 03:11 | Remember isolated store never
interrupts the user to ask their permission in
| | 03:15 | the normal saving and reading of the files,
only when you need to increase your quota size.
| | 03:21 | One of my favorite features of the
isolated store is it's got built-in support
| | 03:24 | for application settings.
| | 03:25 | You can store a name, value of pairs
in the ApplicationSettings property.
| | 03:29 | You provide a name here and
then you provide the value.
| | 03:33 | So, what I am going to do is I am going
to go out to my artboard and determine
| | 03:36 | how many children, how many ellipses
and how many rectangles it has, get its
| | 03:41 | count and store that in isolated store.
| | 03:44 | When you click on the OpenButton
method, I am going to go in and read the
| | 03:47 | settings using the same key.
| | 03:49 | The shapeCount down here, it was
shapeCount up here, and we are going to go
| | 03:54 | in and cast it to a string and then store
it in a text box I have on my user interface.
| | 03:59 | This is very handy for storing
application data, user specific information.
| | 04:03 | If you also want to backup things
like form data before you send it to the
| | 04:06 | server, that will be a
great use for the CreateFile.
| | 04:10 | Here you could store more sophisticated
data than just a simple string/value pair.
| | 04:14 | Let's see what this looks like.
| | 04:16 | I will run the application.
| | 04:19 | I have a builder. What have I done wrong?
| | 04:20 | I am going to double-click
on this item to see -- Oh!
| | 04:23 | Yes, I was showing you earlier that you
could use ISO store, I was showing you
| | 04:26 | some of the methods. I never deleted that code.
| | 04:28 | So, I am going to go ahead and delete it,
and then I'll press F5 to start again.
| | 04:32 | I'll add a few ellipses, a couple of
rectangles, I'll go to the File section
| | 04:41 | and say Save to ISO and then I'll
click on the Open from ISO and this text
| | 04:46 | block down here shows that there are seven
children on the artboard. Six of those are shapes.
| | 04:51 | In the last demo, I'm going to save this
information here to the hard drive in a text file.
| | 04:57 | Let me show you what this looks like.
| | 04:59 | Save to local. Because I am saving outside of
isolated storage we have to prompt the user.
| | 05:05 | I've set up a filter. I'll
show you how to do this in a minute.
| | 05:07 | I am going to type in
shapeForDemo.ps and then click on Save.
| | 05:14 | I am going to save this on my desktop.
| | 05:18 | Now I am going to open up Notepad
and then choose to open that file.
| | 05:22 | File > Open, Desktop, change my filter to All
Files and there is my shapesFor Demo, click Open.
| | 05:33 | So you see what my code did is it
walks through the canvas, found all the
| | 05:38 | ellipses, and wrote out
their position on the canvas.
| | 05:44 | Let's go see the code.
| | 05:50 | Here's the saveToLocalButton.
| | 05:52 | I need to declare an instance of the
Save File dialog, then I set the filter to
| | 05:56 | show all files that end with .ps.
| | 05:58 | So, the way this filter reads is
everything on the right side of the pipe is
| | 06:03 | what sent to the file
system for filtering purposes.
| | 06:06 | Everything on the left-side of
the pipe is what the user sees.
| | 06:08 | So, they see the word PixelSmith Files.
| | 06:12 | Then I open the dialog
by calling the ShowDialog.
| | 06:14 | I checked to see that the user clicked
on the OK button by testing for true.
| | 06:19 | And then I used a normal .NET
procedures for working with files.
| | 06:22 | I call OpenFile. I store that in a stream.
| | 06:25 | I create a writer to make it easy for
me to write into the stream and I pass it
| | 06:29 | to the stream reference.
| | 06:31 | Once I have the writer, I walk through
all the children in the artboard, get to
| | 06:36 | each one in turn, check to see what its type is.
| | 06:39 | If it's an ellipse, then I write into
the file, Ellipse, the Canvas left position
| | 06:47 | and the Canvas top position of the Ellipse.
| | 06:50 | So, it will say Ellipse {20}, {30}.
| | 06:53 | Then if the type is
rectangle, I do the same thing.
| | 06:55 | The only difference is I say Rectangle here.
| | 06:57 | I am nearing the end of this movie.
| | 07:00 | I would like to point out there's also an
Open File dialog, which does the opposite.
| | 07:04 | It allows the user to choose a file to
open and then you can bring it into your
| | 07:07 | application or upload to the
server or whatever you need to do.
| | 07:10 | In summary I would like to repeat
something I said earlier in the movie.
| | 07:14 | You can store in the local file system
as long as you get your user's permission.
| | 07:18 | If you don't have this permission, you
can store only in isolated storage, which
| | 07:22 | offers a small but safe location for your data.
| | Collapse this transcript |
|
|
13. Managing Expression Blend AssetsExploring the Expression Blend asset pane| 00:00 | I find Expression Blend
useful for a lot of design tasks.
| | 00:03 | As you have seen in other movies in
this course, you can make short work of
| | 00:06 | editing animations, applying
brushes or manipulating control templates.
| | 00:11 | In this movie, I will show you another
useful tool available in Blend, the Assets panel.
| | 00:15 | The Assets panel has all of the controls,
styles, media, behaviors, and effects
| | 00:20 | that you could draw on the art board.
| | 00:22 | If you are following along in the
Exercise Files, you are going to want to open
| | 00:25 | the ExploringAssets solution.
| | 00:27 | This solution contains two projects,
ContainsAssets and ExploringAssets.
| | 00:31 | I am going to start with
ExploringAssets and double-click on MainPage.xaml.
| | 00:37 | Now that I have a designer open, I am
going to go to the Assets tab. There are a
| | 00:41 | number of sections in this tab.
| | 00:43 | We will start by looking in Project.
| | 00:45 | In Project, it lists all of the
available items that I can drag to my artboard.
| | 00:49 | Currently there is nothing useful in here.
| | 00:51 | In the second section, I've got all
of the controls that are available.
| | 00:55 | This is similar to going to the Assets
button on the tool panel, and adding a
| | 00:58 | single button, the difference is you can
see multiple controls inside the Asset panel.
| | 01:02 | This means you can explore.
| | 01:03 | Let us look at this one called BusyIndicator.
| | 01:05 | This is from the Silverlight
toolkit. We drag this over.
| | 01:09 | This is a great tool for letting your
user know that you are going to do some
| | 01:12 | work for a few seconds.
| | 01:13 | It has a property called IsBusy.
| | 01:15 | Watch what happens when I select the IsBusy.
| | 01:18 | You get a Please wait message.
| | 01:19 | And then when you are done doing your
task, you set IsBusy to false, and it is
| | 01:23 | hidden. The user will not see the
BusyIndicator when it is not active.
| | 01:27 | For another interesting one, how about Rating?
| | 01:32 | This gives you some stars.
| | 01:33 | You can set a value, say 0.6, and it fills
the number of stars based on that percentage.
| | 01:41 | Let me add a button.
| | 01:46 | If you go to the Effects section,
there are two built-in effects.
| | 01:48 | I have more details about
effects in other movies in the course.
| | 01:52 | But I want to show you how easy it
is to add items using the Assets pane.
| | 01:55 | I can take this BlurEffect and just drag it
over and drop it on an item in my artboard.
| | 02:00 | It instantly applies the pixel effect.
| | 02:02 | Moving on, I would like to move
back to the Projects and open the
| | 02:06 | ContainsAssets project.
| | 02:09 | And then I am going to
open the MainPage.xaml file.
| | 02:14 | See if you can note any difference
this time when I open the Assets pane.
| | 02:18 | You see the number 7 there in Project?
| | 02:21 | That means that inside my project, I
have a style, I have some UserControls, I
| | 02:28 | have some pictures, they are
available to my application.
| | 02:31 | When I move to the Assets pane,
Blend knows that it will show them to me.
| | 02:35 | Let us open Project and see what we have.
| | 02:38 | Well I have a picture called Curls.png,
which I can drag over to create an image.
| | 02:42 | Ctrl+Z to undo.
| | 02:44 | I have my own custom behavior.
| | 02:47 | I have a UserControl called WaterBackground.
| | 02:49 | Let me zoom out a little bit on my artboard.
| | 02:52 | I am going to double click on
WaterBackground to put in this UserControl.
| | 02:56 | It is easy to think of UserControls as
only input devices, but UserControls have
| | 03:01 | many other functions.
| | 03:02 | For instance, here I am using it
as the background for this window.
| | 03:05 | Then I have got my Octopod here, which is
another UserControl, which I can drag over.
| | 03:10 | This is a more whimsical user
interface than you typically see in a
| | 03:13 | business application.
| | 03:14 | But these are UserControls.
| | 03:16 | They have properties.
| | 03:17 | You can set the properties in the panel,
they can be animated, they can have
| | 03:21 | special effects applied to them.
| | 03:22 | Everything you have learnt about
other UserControls can be applied to
| | 03:25 | these Octopods too.
| | 03:27 | I am going to move this
Octopod behind the other one.
| | 03:31 | Here is another one of my
assets, the BringToFrontBehaviour.
| | 03:34 | I have another movie on behaviors.
| | 03:36 | Behaviors allow me to
add functionality to items.
| | 03:38 | I am going to drag the
BringToFrontBehaviour to the artboard.
| | 03:41 | Then if you look down in my
Objects and Timeline, you see it says
| | 03:44 | BringToFrontBehaviour is available.
| | 03:45 | When I run the application,
you will get to see what the
| | 03:48 | BringToFrontBehaviour accomplishes.
| | 03:50 | First though, I need to make sure I have
the right project set as the startup. I do.
| | 03:56 | And I believe my MainPage is the
startup. Press F5. Can you see that?
| | 04:06 | It is a bit subtle.
| | 04:08 | When I click on this Octopod, it moves
to the front. When I click on the second
| | 04:11 | Octopod, it moves to the front.
| | 04:12 | The key here is that the behavior is
applying this, not my Octopod classes.
| | 04:17 | They do not know how to do this on their own.
| | 04:21 | There is lots of more to learn about
the Assets pane. I cover that in other
| | 04:24 | movies in this chapter.
| | Collapse this transcript |
| Adding behaviors to elements with Blend Behaviors| 00:00 | Behaviors are a simple way to take any
existing item in the Expression Blend artboard
| | 00:04 | and modify it so it behaves in a new way.
| | 00:07 | For example, think about the rectangle class.
| | 00:09 | It is a shape, so it has properties
like width, but it does not have a lot of
| | 00:12 | behaviors built into it.
| | 00:14 | If you want to enable a mouse drag on
the rectangle, you would typically write
| | 00:18 | code to detect mouse events, then
change the position of the rectangle in code.
| | 00:22 | Writing this type of code is not
something that your average designer wants to do.
| | 00:26 | To mitigate this problem and make
the design team and the code team happy,
| | 00:30 | Microsoft created behaviors.
| | 00:32 | They permit a developer to create an
action that is decoupled from the object.
| | 00:37 | The developer envisions a generalized
action and codes it into a .NET class.
| | 00:42 | Then the Expression Blend makes it easy to
find the behaviors and add them to existing items.
| | 00:48 | For today's demo, I am
going to use Expression Blend.
| | 00:50 | If you are following along with the
Exercise Files, you are going to want to
| | 00:53 | open the AddingBehavior solution and
then double-click on MainPage.xaml.
| | 00:57 | I am going to mouse scroll
out and center my artboard.
| | 01:02 | I have several ellipses in my artboard
but I want to add MouseDragBehavior to them.
| | 01:07 | Currently they are not draggable on the screen.
| | 01:09 | To do this, I am going to go to the
Assets tab and then click on Behaviors.
| | 01:13 | Then I am going to find the
MouseDragElementBehavior and drag it to my ellipse.
| | 01:20 | As soon as I let go of the mouse button,
you will see inside the Objects and
| | 01:23 | Timeline, underneath the Ellipse,
the behavior has been added.
| | 01:27 | If there are any custom properties that
you can set on this behavior, they will
| | 01:30 | be listed up here in the Property panel.
| | 01:31 | Let me do the same thing for the
other two ellipses, one for the blue
| | 01:35 | ellipse, and one for the red ellipse, and then
I am going to press F5 to run the application.
| | 01:43 | Now I should be able to pick up the red
ellipse and move it to a new location.
| | 01:47 | I cannot drag these two rectangles
however because they do not have the behavior.
| | 01:51 | In previous movies, you might have
noticed that you can click on the Add Ellipse
| | 01:55 | or Add Rectangle, and then be able to
move these items around on the screen.
| | 02:00 | The reason this works is I programmatically
added the behaviors in the code behind page.
| | 02:05 | Let us see how that is done.
| | 02:06 | I am going to close the application,
return to Expression Blend, find my C# file,
| | 02:12 | MainPage.xaml.cs, and double click on it.
| | 02:15 | I will then scroll down to line 56.
Here I am declaring an instance of the
| | 02:21 | MouseDragBehavior, and storing it as
a variable, and then I am calling its
| | 02:25 | Attach method and saying apply this
Behavior to this shape, which is either a
| | 02:29 | Rectangle or an Ellipse.
| | 02:32 | You can write your own Custom
Behaviors, I will show you how to do that in
| | 02:35 | another movie in this chapter.
| | 02:36 | There are other developers out there
who have written custom behaviors. I am
| | 02:39 | going to show you a couple of their examples.
| | 02:41 | I am going to start by looking
at Pete Blois's Explode behavior.
| | 02:44 | Pete works on the Expression Blend team.
| | 02:47 | You can add his Explode behavior to any panel,
and then when you click on it, it explodes.
| | 02:52 | How cool is that?
| | 02:57 | You can also reset,
put it back where it belongs.
| | 03:01 | If you want to explore more of these
behaviors, you can find them on the
| | 03:04 | Microsoft Expression Community site.
| | 03:06 | I have navigated to that site.
| | 03:08 | If you click here on this link,
Behaviors, you will see there is about 50
| | 03:12 | different free behaviors for you
to try out in your own projects.
| | 03:16 | For my last demo, I am going to
use behaviors that are a lot of fun.
| | 03:18 | They are available here at this web
site, Physics Helper for Silverlight.
| | 03:22 | I have already installed them on my machine.
| | 03:24 | Let me switch back to MainPage.xaml,
and then click on the Assets pane, open
| | 03:30 | Behaviors and then click
on the Physics subsection.
| | 03:33 | The idea behind these behaviors is that
I can turn any canvas in my application
| | 03:37 | into a physical world.
| | 03:39 | To do that, select my canvas, find the
PhysicsControllerBehavior, and drag that
| | 03:43 | over and drop it on my canvas.
| | 03:46 | Now I can set some properties.
How much Gravity strength do I want?
| | 03:49 | I think today I am feeling like 10.
| | 03:52 | Do I want to be able to drag
the items around on the screen?
| | 03:55 | If so, I choose MousePickEnabled.
| | 03:58 | Once I have the physical canvas, I can
choose which elements within the canvas
| | 04:02 | respond to the physical world behavior.
| | 04:05 | This is done by using the PhysicsObjectBehavior.
| | 04:07 | I will drag the PhysicsObjectBehavior onto
the three rectangles, one, two, and three.
| | 04:15 | Select the Behavior in the Objects and
Timeline, then you can set things like
| | 04:19 | their Mass amount, and
Inertia, and other properties.
| | 04:23 | Be sure and choose this long rectangle,
and set its PhysicsObjectBehavior to Static.
| | 04:28 | That way it will not be affected by gravity.
| | 04:30 | Let us run the
application and see the difference.
| | 04:35 | Gravity is taking effect on the two rectangles.
| | 04:41 | They bounced off the static rectangle.
| | 04:43 | I can pick them up with my mouse.
| | 04:45 | I get a little rubberband item on it.
| | 04:46 | I can knock the other item around, see if I
can knock it off the screen. Hey, great job.
| | 04:51 | And then what should I do with this one?
| | 04:53 | Let us get rid of it.
| | 04:55 | Behaviors are really cool, and they
make it so simple for designers to add the
| | 04:59 | functionality that they
need in Expression Blend.
| | Collapse this transcript |
| Creating custom behaviors| 00:00 | We have seen in other movies how
you can download custom behaviors that
| | 00:03 | other people have built.
| | 00:04 | In this movie, I will show you how
to create your own custom behaviors.
| | 00:07 | If you are following along with the
Exercise Files, you are going to want
| | 00:09 | to open the CustomBehavior
solution and then double click on the
| | 00:13 | MainPage.xaml file.
| | 00:16 | In this example, I have several items
on my work area and I am going to add a
| | 00:21 | behavior called the ChangeZIndexBehavior.
| | 00:24 | I think it will be nice if I could
create a behavior, doing to make it very
| | 00:26 | simple for a designer to move an item to
the front without having to write any code.
| | 00:31 | To do that, you need to create a class.
| | 00:33 | I have created a class
called ChangeZIndexBehavior.cs.
| | 00:37 | Let's double click on that file.
| | 00:39 | And then in Expression Blend, you can
press F4 to move the tool panels away.
| | 00:42 | We start by creating the
class and deriving from Behavior.
| | 00:47 | This is a generic class and you specify
which elements you can apply this behavior to.
| | 00:52 | In my case, it will be any panel type.
| | 00:54 | When the behavior is attached to
an object, it will run this code,
| | 00:57 | the OnAttached Event.
| | 00:59 | What I am doing in there is I am
wiring up an event procedure saying
| | 01:02 | AssociatedObject.Loaded += new
RoutedEventHandler(AssociatedObject_Loaded).
| | 01:07 | I will show you that code in just a second.
| | 01:08 | I am also detaching that event
procedure in the OnDetaching method.
| | 01:12 | This is called when the behavior is
being detached from its AssociatedObject.
| | 01:15 | The AssociatedObject would be if I drag
the behavior onto our rectangle that is
| | 01:18 | the AssociatedObject.
| | 01:19 | From my example, I am
going to drag it onto a panel.
| | 01:23 | When my behavior loads, it is going
to walk through all the children in the
| | 01:27 | panel and wire up a MouseEvent procedure.
| | 01:30 | When you MouseLeftButtonUp, I am
going to have you call this code here.
| | 01:33 | I am going to check a custom
property that I wrote called BringToFront.
| | 01:41 | If BringToFront is true, then I am
going to call a method called MoveToFront.
| | 01:45 | MoveToFront gets to panel, calls a
method called GetHighestZIndex, which walks
| | 01:51 | through all the children and sees
which one has the highest ZIndex.
| | 01:53 | ZIndex indicates which
item is higher in the Z axis.
| | 01:56 | So, if I have two rectangles, and one
has a Z axis of ten, and one has a Z axis
| | 02:01 | of twenty, and they overlap, the one
with Z axis of twenty will be shown in
| | 02:05 | front of the one with Z axis of ten.
| | 02:07 | My code here goes through the items,
analyzes which one has the highest one,
| | 02:10 | and swaps their order.
| | 02:11 | I also have a method called
MoveToback that does the opposite.
| | 02:14 | All right, enough about this code.
| | 02:16 | Let's see how it works in action.
| | 02:17 | I am going to go over to my main page,
and I will compile my application, press
| | 02:24 | F4 to bring back my tool panels, go to
my Assets section, look in my project and
| | 02:29 | see if there is a
ChangeZIndexBehavior, and there is.
| | 02:30 | I will drag this over and drop it on
my Canvas panel, and now I get to choose
| | 02:37 | BringToFront as my custom property that I wrote.
| | 02:40 | Run the application to test, and now
I'll click on the Octopod, now I'll click on
| | 02:47 | the Image, and I'll click on these two
Octopods back and forth. Maybe on this book.
| | 02:52 | It brings it to the front.
| | 02:53 | Remember the key part of this is the
designer who is using Blend does not have
| | 02:58 | to know anything about code.
| | 03:00 | They just drag the behavior to the panel,
and set the property, and they are done.
| | 03:03 | Let me show you what happens
if I uncheck the BringToFront.
| | 03:08 | Run the same application, click on the object,
and now it gets sent to the back of the stack.
| | 03:16 | This behavior is pretty simple.
| | 03:18 | You can write as complex a behavior as
you want, and Expression Blend makes it
| | 03:21 | really easy for designers to add to the project.
| | Collapse this transcript |
| Using the built-in shader effects| 00:00 | Shader effects energized the PC gaming
industry by making it easy to apply high
| | 00:04 | speed transformative
effects to portions of the screen.
| | 00:08 | Traditional shaders are implemented in the
graphic processor unit or GPU on your computer.
| | 00:13 | Essentially a pixel shader is an
algorithm that modifies one pixel.
| | 00:18 | The GPU applies that algorithm to
thousands of pixels in parallel, which
| | 00:21 | makes it amazingly fast.
| | 00:23 | The types of effects you can apply are enormous.
| | 00:25 | Ripple effects, color corrections,
fractal generators or grayscale are just some
| | 00:31 | of the possibilities.
| | 00:32 | Both Silverlight and WPF have shaders.
| | 00:35 | The difference is that WPF exploits
the GPU whereas Silverlight renders
| | 00:39 | the shader in the CPU.
| | 00:41 | Even though Silverlight does not use
the GPU in their implementation, it is
| | 00:45 | still faster than other mechanisms available.
| | 00:47 | I am going to use
Expression Blend for this demo.
| | 00:49 | If you are following along, you are
going to want to open the Shaders solution
| | 00:54 | and then double click on the MainPage.xaml file.
| | 00:57 | I am going to use my mouse wheel to
move out, and then I am going to drag two
| | 01:00 | images to my work area.
| | 01:02 | Click on Assets, clicked on Project and
then I am going to drag Curls over here,
| | 01:08 | press V, and then resize the image,
and then Ctrl+C to copy it, and Ctrl+V to
| | 01:14 | paste it, and then drag the image down.
| | 01:16 | It's very easy to apply effects in Blend.
| | 01:20 | You go to the Assets pane, click on
the Effects section, and use one of the
| | 01:23 | two built in effects.
| | 01:25 | The BlurEffect, you drag it
over, and it blurs the pixels.
| | 01:29 | If you want to change the amount of
the blur, modify the Radius value.
| | 01:34 | The second effect is
called the DropShadowEffect.
| | 01:36 | I will drag that over and
drop it on this picture.
| | 01:39 | It has more properties.
| | 01:40 | I will make the ShadowDepth a little bit deeper.
| | 01:43 | You can change its opacity or color.
| | 01:45 | You can change the direction of the shadow,
and you can also change its BlurRadius.
| | 01:50 | It is also possible to add effects in code.
| | 01:55 | Let me delete these two items,
and I will show you how to do that.
| | 01:59 | Click on Projects, and open your
UserControl section, and then double click on
| | 02:05 | ImageUserControl.xaml.cs.
| | 02:10 | Scroll to the bottom of the window.
In the blurButton_Click procedure, I am
| | 02:16 | going to add an effect, var effect =
new Blur, set the Radius value equal to 5,
| | 02:32 | and then I am going to
apply the effect to the picture.
| | 02:45 | I tried to build the application.
| | 02:46 | It's telling me that it's missing a namespace.
| | 02:48 | I will scroll to the top
and add a using statement.
| | 02:53 | Using statements simplify the body of my code.
| | 02:55 | So, I'll say using System.Windows.
Media.Effects and then a semicolon.
| | 03:02 | I think I am ready to try running this.
| | 03:06 | Press F5, click on the Images section,
add a couple of pictures, select one of
| | 03:15 | the pictures, and then click Add Blur.
| | 03:16 | Let me add one more effect.
| | 03:20 | I will copy the code.
| | 03:21 | Place it in my other procedure.
| | 03:24 | This time I am going to say I want the
DropShadowEffect. Change the ShadowDepth.
| | 03:29 | Now run the application and
see what this one looks like.
| | 03:32 | Press F5, click on the Image section,
add an Image Element, there is the blur
| | 03:41 | that I added before, and now I
can add a drop shadow as well.
| | 03:44 | Once again, you see that Blend makes it
really easy to add shaders to your application.
| | 03:49 | If you are surprised that there
are only two shaders, don't worry.
| | 03:52 | You can create your own custom shaders,
and that is a topic for another movie.
| | Collapse this transcript |
| Creating custom shaders| 00:00 | In Silverlight, you can
create your own custom shaders.
| | 00:02 | In this demo, I am going to be using
several tools. I am going to be using
| | 00:06 | Visual Studio, I am going to be using
Expreession Blend, and I am going to be
| | 00:08 | using a shader utility called Shazzam.
| | 00:11 | The shader utility is available on
the internet at shazzam-tool.com.
| | 00:17 | I wrote this utility to make it easier
to generate the shader code that you need
| | 00:20 | in your Silverlight application.
| | 00:22 | All you need to do is go to this web
site, click on Installing Shazzam, then
| | 00:26 | click on this link, and
then click the Install button.
| | 00:29 | Once it is installed, you
can run it from your computer.
| | 00:32 | It's a click once application, so it
will check to see if there are any updates.
| | 00:38 | In order to make your own custom shader,
you need to create three separate files.
| | 00:42 | The first file you need to
create is called an HLSL file.
| | 00:45 | This is a text file that contains Direct X code.
| | 00:48 | Here is a sample file.
| | 00:49 | It looks sort of like C.
| | 00:51 | Next, you need to generate
a C# or a Visual Basic class.
| | 00:54 | That is one of the things
that Shazzam does for you.
| | 00:57 | Let me go load a more interesting shader.
I am going to choose Sample Shaders,
| | 01:02 | and before I make the shader,
let us make a couple of settings.
| | 01:04 | Go to your Settings button and type in
a namespace of your choosing and also
| | 01:08 | make sure you check the
Silverlight Target framework.
| | 01:11 | Then go to Shader Loader
and choose BandedSwirl.
| | 01:15 | This is what the shader effect looks like.
| | 01:17 | Let me turn off the shader for a second,
Remove Shader. Here is a picture.
| | 01:21 | There is different sample pictures
across the top here you can look at.
| | 01:24 | I will select this picture here and then I
will go over to tools, and apply the shader.
| | 01:29 | When I did that, Shazzam compiled this
HLSL code and turned it into this C# class.
| | 01:36 | For the demo, make sure you also include
CustomShaders in your namespace here at the top.
| | 01:40 | It generated the C# class for me,
which is a .NET class that derives from the
| | 01:44 | ShaderEffect class, and for every
input into this shader, it created a
| | 01:48 | Silverlight dependency property.
Input, Center, Band, Strength, and AspectRatio.
| | 01:53 | Those are all defined
over here on my HLSL code.
| | 01:56 | I can click over here on the Change Shader
Settings and manipulate those values live.
| | 02:01 | I can see what it will look like if
the center point was moved. I can change
| | 02:05 | the number of bands.
| | 02:07 | Notice how fast shaders are. Change
the strength of the shader, and so on.
| | 02:13 | I have also added Animation
capability so I can type in 5 seconds here and
| | 02:17 | then click the Animate button,
and watch the number of bands animate
| | 02:22 | smoothly in and out.
| | 02:27 | This comes with more than one shader, and
there is plenty of samples for you to look at here.
| | 02:30 | This is the Bloom shader, here is the
Embossed shader, here is the Gloom shader,
| | 02:37 | makes it look kind of
dark and gloomy. InvertColor.
| | 02:41 | Other fun ones, Magnify, Cartoon shader.
It comes with about twenty shaders.
| | 02:48 | But the one we are going to
work with is the BandedSwirl.
| | 02:52 | The next thing you need to do is
you need to compile this shader.
| | 02:57 | Compile the shader.
That generates a ps file.
| | 02:59 | This is a binary file.
| | 03:01 | So, what you need to do is add
a C# file and a ps file to your
| | 03:04 | Silverlight project. Let's go do that.
| | 03:06 | Up to tools.
| | 03:07 | Click on Explore Compiled Shaders.
| | 03:10 | You need to take this BandedSwirl.ps
file and copy it to your project.
| | 03:16 | Copy this and move over to Visual Studio.
| | 03:20 | If you are following along with the
Exercise Files, you are going to want
| | 03:22 | to open the CustomShaders solution, and
then I am going to paste that into my project.
| | 03:27 | Then I am going to return back to the
File Explorer, move into my C# folder,
| | 03:32 | find BandedSwirl effect here,
copy it, and bring it into my project.
| | 03:40 | Let's look at the C# code briefly.
| | 03:42 | There is one line I want you to see
down here. The pixelShader source is coming
| | 03:48 | from that ps file, BandedSwirl.ps.
| | 03:51 | That is why you have to have both files.
| | 03:52 | All right, we are ready to use this shader.
| | 03:55 | We will compile the application,
verify that it compiles correctly.
| | 04:01 | Then I am going to switch to Expression
Blend, where I have the same project loaded.
| | 04:05 | Blend detects I have made some
changes since I was last in here.
| | 04:08 | I am going to choose Yes.
| | 04:10 | I am going to double click on my
MainPage.xaml and add an image here.
| | 04:18 | Go to Assets > Curls.
| | 04:21 | I am going to drag the Curls over here.
| | 04:24 | It's too big so I am going to press V
and size it down a little bit smaller.
| | 04:30 | Next I am going to go over and grab
the BandedSwirl effect and drag it over
| | 04:33 | and drop it on my image.
| | 04:35 | As you can see, it's
picking up the BandedSwirls.
| | 04:38 | It's doing the right thing also by
adding properties to my Properties panel.
| | 04:42 | Here I can change the number
of bands or the center point.
| | 04:45 | I can also add this programmatically.
| | 04:48 | Let me show you how to do that. I am
going to click on Projects, scroll up to
| | 04:54 | the UsersControl folder, double click
on the ImageUserControl.xaml.cs file, and
| | 05:01 | then scroll down to the bottom
where I have this customButton.
| | 05:04 | I will copy a little bit of code from
up here to save me a little bit of time.
| | 05:15 | And then we are going to set a
property, effect... I did something wrong.
| | 05:20 | I need to change this to say BandedSwirl.
| | 05:24 | Now I should be able to see bands.
| | 05:27 | Set that equal to 5.
| | 05:28 | And then a semicolon,
and let's give this a test.
| | 05:31 | Press F5 to run the application, click
on Images section, add an image, drag it
| | 05:40 | up here where we can see it, and then
click the Add Custom Shader, and there you go.
| | 05:44 | These three tools, Visual Studio,
Expression Blend, and Shazzam, all make it
| | 05:48 | very easy to add custom
shaders to your application.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 |
Thanks for watching
Silverlight 3 Essential Training.
| | 00:03 | Now that you have learnt about the core
features of Silverlight, you are ready
| | 00:06 | to create your own fabulous applications.
| | 00:09 | Silverlight 3 is a big platform, and has
many topics not included in this series.
| | 00:13 | That gives you a great
opportunity to dig in and continue learning.
| | 00:17 | Don't forget these movies are
always available here at lynda.com.
| | 00:21 | So, if you need a quick refresher
session, you can come back to the site and
| | 00:24 | review the topic again.
| | 00:25 | Once again, I am Walt Ritscher.
| | 00:28 | I write about Silverlight and Windows
Presentation Foundation on my blog at
| | 00:32 | blog.wpfwonderland.com.
| | 00:36 | You can follow me at Twitter.com/
waltritscher or learn more about my Shazzam
| | 00:41 | pixel shader utility at shazzam-tool.com.
Shazzam is spelled with two Zs.
| | 00:47 | I always have something cooking when it
comes to Silverlight, so look me up at
| | 00:50 | the next convention or invite me
over to speak at your user group.
| | 00:53 | There is nothing like sharing some tech
talk about RIA applications with your friends.
| | 00:57 | Good luck, and have a great time
creating Silverlight applications.
| | Collapse this transcript |
|
|
