2. Creating a Sample App with Visual StudioCreating a simple app| 00:00 | Okay, let's take what we've learned so
far and get started writing our first
| | 00:05 | Windows Phone application.
| | 00:07 | So I'm going to go over here to the Start menu.
| | 00:09 | I'm going to fire up my development environment.
| | 00:12 | And once you've installed it, you'll
see it's called Microsoft Visual Studio
| | 00:15 | 2010 Express for Windows Phone.
| | 00:19 | This is the IDE right here.
| | 00:21 | So when the IDE first pops up, you'll
get this nice, little Start Page, which
| | 00:24 | introduces you to the development environment.
| | 00:27 | Now if you've never used Visual Studio
Express before it, let me just give you a
| | 00:31 | quick overview of what it
is that we're looking at.
| | 00:33 | Over here on the right side
this is the Solution Explorer.
| | 00:36 | The Solution Explorer contains
information about the project that you're
| | 00:40 | currently working on.
| | 00:41 | This is where the pages will be stored.
| | 00:43 | This is where all the resources you
include and your application will be, and
| | 00:47 | it's where you set various properties
for how the application actually runs.
| | 00:50 | Over here on the left side, this is the Toolbox.
| | 00:54 | Now there is nothing in the toolbox
right now because we don't have a project
| | 00:58 | opened, but you can think of this as
the place where all of those controls I
| | 01:02 | talked about are stored
during the authoring process.
| | 01:05 | So when you want to add elements to a page,
this is where you will come to do that.
| | 01:11 | And you can choose to keep this open
by setting that little pin there, and
| | 01:14 | that pins it to the open state, or
you can unpin it, and then it will only
| | 01:18 | open when you mouse over it.
| | 01:19 | This little Start Page right here is
the Welcome page for the application.
| | 01:24 | And it allows to do a couple of things.
| | 01:26 | Over here you can open an
existing project or create a new one.
| | 01:30 | And if you've been working on any recent
projects, those would be listed down here.
| | 01:34 | Over in the main content area,
this is the Getting Started area.
| | 01:38 | And it shows you some welcome information.
| | 01:40 | There's a couple of quick courses on
Creating Window Phone 7 Applications and
| | 01:45 | how to submit one to the marketplace, as
well as a news feed where you can go and
| | 01:50 | read the latest MSDN information, or
whatever RSS Feed you like to subscribe to
| | 01:55 | about phone-related development.
| | 01:58 | So to get started, we're going to
click on the New Project link over there.
| | 02:02 | And that will present us
with the New Project dialog.
| | 02:07 | So in the New Project dialog,
we have a couple of choices.
| | 02:10 | We have Silverlight for Windows Phone, or
we have XNA Game Studio for Windows Phone.
| | 02:16 | We're just going to go ahead
and stick with Silverlight.
| | 02:19 | And to make things simple, we're going
to choose the Windows Phone Application.
| | 02:24 | There's a couple of other options here.
The Windows Phone List Application is
| | 02:27 | designed specifically for phone
applications that are list-based.
| | 02:30 | We're not going to do that right now.
| | 02:33 | We're just going to build a simple application.
| | 02:35 | And there is also a Class Library, and
these are basically reusable libraries
| | 02:39 | that you can use in other applications.
| | 02:41 | So if you find yourself developing
the same code over and over again, you
| | 02:45 | might want to just toss it in a class
library and then include that in your other apps.
| | 02:50 | So let's go back up to the Windows
Phone Application, and you can see that it's
| | 02:55 | already prefilled in some name
and location information for us.
| | 03:00 | Since this is just going to be a
throwaway app to show you how the IDE works, we
| | 03:04 | can just go ahead and leave those as they are.
| | 03:06 | So I'm going to go ahead and click OK,
and Visual Studio for Windows Phone will
| | 03:12 | now create my application.
| | 03:14 | And you can see the Solution
Explorer is now being filled in with all the
| | 03:17 | default contents for a new project, and
up comes the Design Surface. Over here in
| | 03:22 | the right we have the XML-based XAML language.
| | 03:27 | This is the XML code that determines
the structure of the UI of the app.
| | 03:33 | Over here on the left side we have
the Design Surface, and you can see the
| | 03:38 | Design Surface has already been
prefilled in with some stuff for us.
| | 03:41 | And I'm going to go ahead and scale it
down a little bit so we can see more of it.
| | 03:45 | And let's move this over.
| | 03:47 | And then here is our Toolbox, and you
can see the Toolbox has now been filled in.
| | 03:51 | So now we have all the Silverlight
control goodness that we can use to build
| | 03:55 | our application with.
| | 03:57 | So let's go ahead and just start
setting some application properties.
| | 04:02 | What I'm going to do is
click on the Control Surface.
| | 04:06 | And you can see that as I select
things on the Control Surface, they become
| | 04:09 | selected, and they also become
highlighted over here in the Code View.
| | 04:12 | So there is a little Text
Block named MY APPLICATION.
| | 04:15 | That's this guy right here.
Here is the page title.
| | 04:17 | That's this guy right here.
| | 04:19 | Let's go ahead and just change that to
MY APP DEMO, and then we'll change the
| | 04:26 | other guy from page title to My First Page.
| | 04:31 | And you can see that the Design
Surface is updating while I do that.
| | 04:35 | That's basically all you need to do to
create a new Windows Phone 7 application.
| | 04:41 | So now that we've done, that let's
take a look at what's involved in adding
| | 04:44 | controls to an application page.
| | Collapse this transcript |
| Adding controls to the app| 00:00 | So now that we have got our basic
project opened in our Visual Studio IDE, let's
| | 00:08 | start off by adding some
basic controls to the page.
| | 00:12 | And before we do that, let's just take
a quick look through the source code to
| | 00:16 | see what it is that we have got here.
| | 00:18 | So right at the top, you can see that
there is a PhoneApplicationPage Control,
| | 00:23 | and I talked about that a little bit earlier.
| | 00:25 | And the PhoneApplicationPage Control
is what contains all the content of the
| | 00:31 | page that you are laying out for the
phone, and your application can contain as
| | 00:35 | many of these pages as it needs.
| | 00:37 | In this case, we are looking at
the MainPage.xaml one right here.
| | 00:42 | So as we scroll down through the
content, you can see that in the XAML code
| | 00:46 | for the layout, we have a series of
controls that have been created for us by default.
| | 00:52 | There is the main Layout Grid, which is
what contains all of the content for the page.
| | 00:56 | You can see that when I
select it, it gets highlighted.
| | 00:59 | And then within that grid,
there are two other grids:
| | 01:02 | There is one called the TitleGrid that
contains the text blocks for our titles,
| | 01:08 | and then there is the other one, which
is the ContentGrid, and that contains
| | 01:11 | all the page content.
| | 01:13 | Now, I just want to quickly note, you
don't really need to keep the TitleGrid if
| | 01:17 | you don't want it, or the other
ContentGrid. It's really up to you what goes in
| | 01:21 | the LayoutRoot Grid.
| | 01:23 | That's the one that contains everything.
| | 01:25 | So if I really wanted to, I could just
go ahead and just delete these guys, just
| | 01:28 | cut them out, and you can see that they
disappear from the layout, and I can put
| | 01:31 | whatever I want in there.
| | 01:33 | But for the purposes of this example,
let's go ahead and leave them in.
| | 01:38 | So while we are at it, let's
change the names of the text blocks.
| | 01:42 | We are going to call this Basic Controls
Demo, and then we will also name the page,
| | 01:48 | instead of My First Page,
let's just call it Basic Controls.
| | 01:55 | So you can see that after I have typed
in the changes in the XAML, the layout
| | 01:59 | surface over here, has updated.
| | 02:01 | So go ahead and save that.
| | 02:03 | Now what we are going to
do is open up our Toolbox.
| | 02:07 | So the Toolbox you can see is now
populated with all the controls that are
| | 02:11 | available to us as a Windows
Phone Silverlight application.
| | 02:14 | So I am going to go ahead and pin this
Window Open, so I can keep it open and
| | 02:19 | just drag things out of it, and I will
just move this over a little bit to make
| | 02:23 | it a little easier to read.
| | 02:24 | So let's go ahead and start
putting some controls on the page.
| | 02:27 | What we are going to do in this
example is put some controls on the page and
| | 02:31 | then wire them up to Event Handlers
and have the Event Handler show some UI
| | 02:36 | feedback to show us that
something interesting is going on.
| | 02:40 | So the first thing I am going to do is
pull out one of the most basic of all the
| | 02:44 | control types, and that of course is a Button.
| | 02:46 | Just click on that and drag him right out.
| | 02:48 | You can see that when I drop the Button on
the design surface, a couple of things happen.
| | 02:52 | First, there are some layout adornments
that have been added around the Button,
| | 02:57 | and its been dropped with
a default size and content.
| | 03:01 | So as I click on this Button and move
it around, you can see that as I am doing
| | 03:05 | that, the layout surface is giving
me some hints as to where to put it.
| | 03:10 | So it's snapping my control to various
snap points, which are predefined in the
| | 03:16 | Windows Phone User Interface Guidelines.
| | 03:19 | So I am going to go ahead and
drop that Button there. Okay.
| | 03:22 | Let's go ahead and drag some
other ones out while we are at it.
| | 03:24 | Let's get ourselves a CheckBox.
| | 03:28 | CheckBox, and we will
make sure these guys lineup.
| | 03:31 | What else should we use?
| | 03:32 | How about a HyperlinkButton? Drag the
HyperlinkButton out. Line that up. Get
| | 03:38 | ourselves a ListBox.
| | 03:41 | Now, ListBoxes, when they are added,
they don't, by default, contain any content.
| | 03:45 | So we are going to have to
put some content in there.
| | 03:47 | And I am just going to drop it here
on the design surface, size it so it
| | 03:51 | snaps to the right size.
| | 03:53 | So this is an opportunity for me to now go and
use the Properties Window to add some content.
| | 03:58 | So make sure that ListBox
is selected, which it is.
| | 04:02 | So over here in the Properties Window,
I am going to click on the Properties,
| | 04:07 | and I am going to scroll down a little bit.
| | 04:09 | You can see that there is an item
here called Items, and this is where the
| | 04:13 | ListBox items get entered,
and it's a Collection.
| | 04:15 | So I am going to click on that little
Ellipsis button, and I am going to go
| | 04:18 | ahead and add some ListBoxItems.
| | 04:21 | So add, let's just say, four,
and we will give each one a name:
| | 04:26 | ListBox Item 1, and this guy will be
ListBox Item 2, and this one, ListBox Item
| | 04:36 | 3, and this one we will call ListBox Item 4.
| | 04:43 | So now I have added some
ListBoxItems, let's continue on.
| | 04:47 | How about we drag out some RadioButtons?
| | 04:49 | Here is a RadioButton right here.
| | 04:51 | In fact, let's drag out two
RadioButtons, because they are kind of useless
| | 04:55 | unless there is more than one.
| | 04:57 | So for RadioButtons, they need to be in
the same grouping in order to have the
| | 05:01 | correct toggling behavior work.
| | 05:03 | So what I am going to do is select this
RadioButton, and then in the Properties
| | 05:07 | Window, I am going to scroll down
to the IsChecked and make it checked.
| | 05:11 | And then over here in the GroupName
field, I am going to give it a group.
| | 05:15 | I will just call it grp1, and I will do
the same thing with the other RadioButton.
| | 05:20 | This is very similar to how Web pages work, too.
| | 05:23 | So now that they are both in the same group,
they will know to toggle each other on and off.
| | 05:27 | All right. What else should we use?
| | 05:27 | How about a slider?
| | 05:28 | We have a slider control out here.
| | 05:32 | And let's see, what else should we use?
| | 05:34 | How about a ToggleControlSwitch right there?
| | 05:39 | And then finally, we need to have a
piece of UI that's going to show us
| | 05:41 | that things are actually happening
when we operate these controls, so how
| | 05:44 | about a ProgressBar?
| | 05:46 | So we will bring the ProgressBar out, and we
will line him up right over here. All right.
| | 05:50 | Looks good. Okay.
| | 05:52 | So now that I have got all the controls
on the design surface, what I need to do
| | 05:56 | now is create the Event Handlers.
| | 05:59 | So I will do that by selecting the
Button or the control I want to create
| | 06:04 | the Event Handler for.
| | 06:06 | And then back over here in the
Properties Window, in addition to the Properties
| | 06:09 | tab, there is also an Events tab.
| | 06:11 | So when I click on the Events tab, you
will see that all the events that are
| | 06:15 | relevant to that control are listed
here, and the one highlighted in blue is
| | 06:20 | the event that is most likely the
one that you are interested in for that
| | 06:25 | particular control.
| | 06:26 | Visual Studio is guessing that Buttons
get clicked a lot, and therefore it's
| | 06:30 | going to highlight the Click Event.
| | 06:32 | And in this case it's right, so I am
going to go ahead and type onClick. Okay.
| | 06:39 | So now that we have our controls laid
out on the design surface, we are going to
| | 06:45 | wire up some events to them.
| | 06:47 | So what I am going to do is select the
item that I want to add an event for, in
| | 06:52 | this case the Button, and then over
in the Properties Window, you see that
| | 06:56 | there is a list of all the Properties
that are relevant to the control, but
| | 07:00 | there is also an Events tab.
| | 07:01 | And when I click the Events tab, you
will see that there is a list of relevant
| | 07:07 | events for that control.
| | 07:10 | The one that's highlighted is the one
that Visual Studio has guessed is the most
| | 07:16 | relevant for the control type you
have selected, in this case the Button.
| | 07:20 | Visual Studio assumes that Buttons
tend to get clicked and so therefore it
| | 07:23 | highlights the Click Event.
| | 07:25 | So I am going to go ahead
and type in onClick here.
| | 07:28 | And when I do that, it's going to add
the onClick Event to the Button, and it's
| | 07:32 | going to switch me over to
the Code View for this page.
| | 07:37 | So here in the Solution Explorer, you
can see that there is the XAML page, and
| | 07:43 | then there is the associated C#
code page that goes with this layout.
| | 07:47 | So it's added an onClick Event for me.
| | 07:51 | Now, for the onClick Event, we want to
update the UI, so that we can see that
| | 07:54 | things are happening.
| | 07:55 | And what we are going to do is just
change the value of that ProgressBar to
| | 07:59 | slowly increment over time.
| | 08:01 | So we are going to do that by writing
our own method called private void, and we
| | 08:05 | will call it UpdateProgress.
| | 08:10 | And UpdateProgress will do a couple of things.
| | 08:12 | So first of all, ProgressBars have a
number which represents the percentage of
| | 08:16 | their current progress, and
that is stored as a double.
| | 08:19 | So we will name our variable double
progValue, and we will set that to the
| | 08:25 | value of ProgressBar.
| | 08:27 | You can see that as I am typing,
Visual Studio's IntelliSense is helping me
| | 08:31 | choose which control I am talking about,
so there is progressBar1 right there.
| | 08:36 | So I will select that, progressBar1.value.
| | 08:41 | And what we are going to do is
increment the value of progValue by 10%.
| | 08:47 | Now, we don't want this to overflow and
just keep going on forever, so what we
| | 08:51 | are going to do is check to see
if progValue is greater than 100.
| | 08:56 | Then we are going to set prgoValue back to 0.
| | 09:02 | The ProgressBar will basically just
keep going over and over and over again.
| | 09:06 | Then finally, we are going to set the
progressBar1's Value property equal to the updated value.
| | 09:15 | Okay. So now that we have written our
ProgressBar updating function, we can go back to
| | 09:20 | the onClick handler and just simply call
UpdateProgress, and we will save. Okay.
| | 09:27 | So now we have wired up the Button to
this onClick Event Handler, which will
| | 09:32 | call the UpdateProgress function,
which will take whatever the value of the
| | 09:36 | ProgressBar is, add 10 to it, see if
it's over 100, and if it is, reset it, and
| | 09:41 | then put that value back into the ProgressBar.
| | 09:42 | So let's go back to the layout.
| | 09:45 | Now what we need to do is wire up the
events for the rest of the controls.
| | 09:50 | And just to make things easy, I am going to
have each control responds to the onClick Event.
| | 09:56 | So for the CheckBox, when I select it,
we will just go over to the Properties
| | 09:59 | and choose onClick, and I
don't have to write it again.
| | 10:03 | It's already written for me.
| | 10:05 | Let's just take a quick look at
the XAML code to see what's going on.
| | 10:08 | You can see that when I set that onClick
handler what happened was a Click Event
| | 10:14 | got inserted with the name of my function.
| | 10:17 | Let's go to the
HyperlinkButton and do the same thing.
| | 10:20 | For Click, we will set that to onClick,
and for the RadioButtons, we will do the
| | 10:25 | same thing. set that one to
onClick, as well as this one.
| | 10:31 | For the ToggleControl, we
will do that same thing.
| | 10:35 | So the ListBox and the
slider are different cases.
| | 10:38 | What we will do for the ListBox is we
will select the ListBox control, which I
| | 10:43 | will just click it in the XAML right there.
| | 10:45 | ListBox control will just fire the
event whenever the selection changes.
| | 10:49 | I will select the SelectionChanged Event
here, and just type in onSelChange, and
| | 10:57 | once again, that puts me in the Code View.
| | 11:00 | And just to make things simple, I will
just call UpdateProgress again, so I will
| | 11:04 | Copy that and Paste it.
| | 11:07 | Then back to the slider, the slider
control, same idea, slider controls over
| | 11:12 | here in the Properties, you can see
they have a ValueChanged Event, and I will
| | 11:16 | just call this one onValChange.
| | 11:20 | And same idea, I will just call UpdateProgress.
| | 11:25 | So quick recap: We have now wired up
all of our controls to the various Event
| | 11:31 | Handlers for them, and the Event Handlers
basically just update the value of our ProgressBar.
| | 11:36 | So if we go back to the layout, we
will see all of our controls are wired up,
| | 11:40 | and all we need to do now is test it.
| | 11:43 | And that's the subject of our next lesson.
| | Collapse this transcript |
| Running and debugging the app| 00:01 | Now that we have gotten the UI and
the EventHandlers all wired up, let's go
| | 00:06 | ahead and test our application.
| | 00:08 | Now there is a couple of ways
you can test the application.
| | 00:10 | You can deploy the application to the
Windows Phone Emulator that comes built-in
| | 00:16 | with the Developer tools when you
install them, or you can deploy to an actual
| | 00:20 | Windows Phone Device.
| | 00:22 | Now I don't have a Windows Phone Device
right here; what I have is the Emulator.
| | 00:26 | The way you choose though is up here
in the toolbar, there is this little
| | 00:29 | dropdown that says Windows Phone 7
Emulator or Windows Phone 7 Device.
| | 00:34 | And since I don't have a device, I
will just leave it on the emulator.
| | 00:38 | And to start the debugging process, I
can do that one of a number of ways.
| | 00:42 | I can either click this little green
Play button right here, which means start
| | 00:47 | debugging, or under the Debug menu,
I can just choose Start Debugging.
| | 00:52 | So I am going to make sure the Emulator is
chosen, and I want to click the green arrow.
| | 00:55 | Let's bring the Emulator
back up so you can see it.
| | 00:58 | This is the Windows Phone 7 Emulator,
and when you install the Developer tools
| | 01:02 | it gets installed along with the
Visual Studio IDE, and it really is a full
| | 01:09 | Windows Phone emulation.
| | 01:11 | As far as the code in your application is
concerned, it's running on a real phone.
| | 01:15 | This is a virtual machine that contains
the full Windows Phone operating system
| | 01:19 | and Silverlight and all that good stuff.
| | 01:22 | So as far as your code is
concerned, this is running on a phone.
| | 01:25 | Let's take a quick look at
some of the Emulator controls.
| | 01:29 | So down here are the Back, Start,
and Search buttons that come with every
| | 01:33 | Windows Phone, and we will see how
to deal with those a little bit later.
| | 01:37 | Over here in this Toolbar, there is
the Close, which closes the Emulator, and
| | 01:41 | there is Minimize, and those are
pretty standard Windows controls.
| | 01:44 | There is also these two controls
which control how the Emulator is rotated.
| | 01:49 | So to simulate Landscape mode, you can
just click on one of those buttons, and
| | 01:53 | it will put it in Landscape mode.
| | 01:56 | This button right here zooms the
Emulator, but I am going to leave it at its
| | 01:59 | current size so you can see it, and
then this one here controls the settings.
| | 02:04 | So to test the application, we can go
ahead and just start playing with the U.
| | 02:09 | And if everything is wired up
correctly, then every time we click or
| | 02:13 | otherwise interact with the controls,
the value of this progress bar down
| | 02:17 | here should update.
| | 02:19 | So let's go ahead and click on the
button, and you can see that yeah, the
| | 02:22 | progress bar in fact, did update.
| | 02:25 | Let's try the others. There are the CheckBox,
HyperlinkButton, RadioButtons are responding and the ToggleSwitch.
| | 02:33 | Let's try making a selection of ListBox.
| | 02:36 | You can see that that worked.
| | 02:37 | I will just scroll up a little bit.
| | 02:39 | So you can see that's working.
| | 02:41 | If I change the value on the slider,
you can see that that's working, too.
| | 02:45 | And you can also see that the
ProgressBar is correctly looping around, starting
| | 02:50 | at zero each time it overflows.
| | 02:54 | So we know our code is working, and
that's great, but if our code wasn't working,
| | 02:58 | we would need to debug it.
| | 03:00 | So let's see how that works.
| | 03:01 | We are going to switch
back over to the IDE here.
| | 03:05 | So here in the IDE, you can see that
while we are debugging, these little lock
| | 03:08 | icons have shown up in the title tabs,
and what that basically means is I can't
| | 03:13 | change the code because the code is
currently running, and if I wanted to stop
| | 03:17 | the code from running, I would just have to
choose Stop Debugging up here in the menu.
| | 03:21 | I am not going to do that, however,
because we should just take a look at
| | 03:25 | how debugging is done.
| | 03:26 | Let's switch over to the Source
Code, and scroll on down to our code.
| | 03:32 | So to debug, all I need to do is put a
breakpoint at the part of the code that I
| | 03:38 | am interested in debugging.
| | 03:40 | So, for example, if I wanted to stop
right here before UpdateProgress is
| | 03:44 | called, I will just put a breakpoint
on that line. And similarly I can put a
| | 03:48 | breakpoint in here as well in my
UpdateProgress routine. And now I can go back
| | 03:53 | to the Emulator and interact with the UI,
and these breakpoints should trigger
| | 03:57 | when I do the right thing. Okay.
| | 04:00 | So let's try clicking on the button.
| | 04:03 | So you can see that when I click on the
button, what happened was my breakpoint
| | 04:06 | got triggered, and it's now holding
right here on the UpdateProgress call.
| | 04:11 | So what I am going to do now is step
through the code to make sure everything is
| | 04:15 | working correctly, but before I do that,
let's take a quick look at the debugging UI.
| | 04:19 | Over here in the Call Stack, this shows
all of the function calls that were made
| | 04:26 | to get to the point where I am right now.
| | 04:28 | So I clicked on a button, see right
there the button onClick, and then some of
| | 04:31 | the functions, and then some of the
function got called, and then my EventHandler
| | 04:34 | got triggered right here.
| | 04:36 | Over here in the Locals window, this
displays the value of all of the local
| | 04:41 | variables that are currently within the
scope of the function I am looking at.
| | 04:45 | And I can also switch over to the Watch window.
| | 04:48 | The Watch window just lets me type
in any expression that I am interested
| | 04:51 | in keeping an eye on.
| | 04:52 | I don't have any right now,
but that's what it does.
| | 04:54 | So let's switch back to the Locals,
and let's step into the onClick function.
| | 04:59 | So for example, when I Step Over
UpdateProgress, well there is a breakpoint in
| | 05:05 | there, so it's not going to let me step over it.
| | 05:07 | So now we step in here, and I can
now investigate the code to make sure
| | 05:11 | everything is working fine.
| | 05:13 | So here we have our progValue, and you
can see it's currently set to zero and
| | 05:17 | when I Step Over it, so I can either
Step Over using F10, or I can Step In to
| | 05:22 | functions or Step Out of them, but
instead, I am just going to use Step Over and
| | 05:25 | that steps over that statement, and you
can see now that progValue has now been
| | 05:29 | set to what the ProgressBar
is, and it will add 10 to it.
| | 05:34 | So now you can see it's 30, and when a
variable change in the Locals window, its
| | 05:39 | color gets highlighted to red
so you can see what changed.
| | 05:42 | Now we are going to test to see if it's
more than 100, and it's not, which is correct.
| | 05:47 | So we are going to go ahead and set the
progress bar equal to the progValue and
| | 05:51 | to keep on running, I can just
go back up here and hit Continue.
| | 05:55 | I will just click this little Play
button, and the code keeps on running.
| | 05:59 | So that's pretty much how you use the
Emulator and Debugger in Windows Phone 7.
| | Collapse this transcript |
|
|
3. Creating a Sample App with Expression BlendCreating a simple app| 00:01 | In this section, we are going to see
how to build a Windows Phone 7 application
| | 00:05 | using Microsoft Expression Blend.
| | 00:09 | So I am going to go to my
Start menu and launch Blend.
| | 00:12 | Now Expression Blend is part of the
Microsoft Expression family of products and
| | 00:19 | Expression Blend is essentially
focused on the designer more than the
| | 00:23 | developer. Whereas Visual Studio tends to be
used more by developers and people writing code,
| | 00:30 | Expression tends to focus more
on the designer aspect of things.
| | 00:35 | So before we get started building a
project - let me just go ahead and close this -
| | 00:39 | let me give you a quick
overview of Microsoft Expression Blend.
| | 00:44 | It looks a little bit like Visual
Studio in the way that it's laid out.
| | 00:47 | There is a Properties panel over here.
| | 00:50 | In fact, there is a collection
of panels not just Properties.
| | 00:52 | There is Resources and Data.
| | 00:54 | Over here there is a Project panel,
and there is a panel for Assets.
| | 00:58 | But there are also panels for things
that you would expect to see in more of a
| | 01:02 | designer-focused program such as an
Object and Timeline View, a panel for
| | 01:07 | managing States and Triggers and so on.
| | 01:09 | These are all things that make up
interactive design, which is what Blend focuses on.
| | 01:14 | Okay, so let's take a quick look at
how we would go about creating a new
| | 01:20 | application in Blend, and once we
have done that, we will see how to add
| | 01:24 | some basic controls.
| | 01:26 | So I am going to go up here into the File
menu, and I am going to choose New Project.
| | 01:31 | And if you have installed the Blend
SDK for Windows Phone in addition to the
| | 01:38 | Silverlight and WPF options that Blend
comes with, you will see an option for
| | 01:43 | building a Windows Phone application.
| | 01:47 | And Windows Phone will give you two options.
| | 01:49 | There is one for just a plain app, and
then there is one for what's known as a
| | 01:53 | data-driven application using something
called the model-View-Viewmodel pattern.
| | 01:59 | We are not going to get
deep into that in this course.
| | 02:02 | We are just going to stick
with the basic application.
| | 02:04 | So once I click OK, Blend will set up
the essential parts of the project for me.
| | 02:12 | So you can see here that the Design
View now contains the same layout as we saw
| | 02:20 | earlier in the course in Visual Studio.
| | 02:23 | So here is the Layout piece with the text
blocks for the application name and the page name.
| | 02:29 | Let me zoom this down a little
bit so you can see everything.
| | 02:33 | So just like in Visual Studio, Blend
gives me a Layout View and a Source Code View.
| | 02:39 | So here I am looking at
the file in the Design View.
| | 02:43 | But I can also go up here to the View
menu, and choose under the Active Document
| | 02:48 | View to see things in either a Split
View, which shows me the layout as well as
| | 02:52 | the XAML code, or I can just go ahead
and choose to see the XAML View by itself.
| | 02:58 | So here you can see the XAML code, and this
is the same XAML code that we have seen before.
| | 03:03 | So let's go back to the Design View.
| | 03:06 | So when I am in Design View, and I
make selections, you will see that the
| | 03:10 | Properties grid updates with the
properties for the selected element, and over
| | 03:15 | here now that I have created a project,
you can see that the Assets panel has
| | 03:20 | been populated with the various types
of controls I can use in my project.
| | 03:25 | So for example, if I want to just use a
button, I will just drag a button out,
| | 03:29 | and the properties change appropriately.
| | 03:32 | So that's a quick overview of Expression Blend.
| | 03:36 | What we are going to do now is use
Blend to build a quick Windows Phone
| | 03:41 | application that shows how to lay out
controls and wire up some event handlers.
| | Collapse this transcript |
| Adding basic controls| 00:00 | So let's use Expression Blend to build
a sample Windows Phone 7 Application.
| | 00:07 | So what I'm going to do is, up in my
File menu, I'm going to open a project and
| | 00:12 | if you have access to the Exercise
Files, you'll see in the folder named
| | 00:18 | 03_blend, there is two folders:
| | 00:21 | one named BasicControls_Start
and one named BasicControls_Final.
| | 00:26 | So I'm going to open up the Start
version and build the solution from scratch.
| | 00:31 | And if you'd like, you can follow along
with me, or you can just open the Final
| | 00:35 | version and see how
everything works yourself. Okay.
| | 00:37 | So I'm going to open up the
solution file here and click Open.
| | 00:42 | And Blend will open the project for me, and
let me scale this down so that it's visible.
| | 00:48 | So here is the layout page
for the Basic Controls Demo.
| | 00:54 | So what we're going to do is add a whole
bunch of basic controls to the page and
| | 01:00 | then wire up some event handlers and
have the event handlers do something to the
| | 01:04 | UI so that we can that they're working.
| | 01:06 | What I'm going to do is, over in my
Assets panel, I'm going to select the Button,
| | 01:11 | and I'm going to draw a button
on the surface. It's about right.
| | 01:15 | And then I am going to position the
button, and you can see as I'm dragging the
| | 01:19 | button around, there's some, nice,
little snap lines appearing that help me
| | 01:23 | position the button properly.
| | 01:24 | So I'm going to go ahead and just position
the button there, and I'm going to get Checkbox.
| | 01:29 | Do the same thing with the check box,
move that into place, make sure they're
| | 01:36 | lined up, and let's see what else.
| | 01:38 | I can use a HyperlinkButton, but let's
see, there is no HyperlinkButton in the
| | 01:42 | Basic Controls list.
| | 01:44 | I know it's in here somewhere.
| | 01:45 | So what I'll do is I'll just type in
the Search box "hyper," and you can see that
| | 01:49 | right there there's a HyperlinkButton.
| | 01:52 | So I'll just drag that one out as well,
and I'll position the HyperlinkButton to
| | 01:57 | be lined up with the Checkbox. Okay what else?
| | 02:00 | How about a Listbox?
| | 02:02 | So I'll clear the Search, go back to
the - I will just get myself a Listbox, drag
| | 02:08 | and drop the Listbox and resize it and
for Listbox I'm going to need to add some
| | 02:14 | items to the Listbox.
| | 02:15 | So I'll scroll down to where the Common
Properties are, and you can see here in
| | 02:20 | the Common Properties,
there's an Items property.
| | 02:23 | So I'll click that little ellipsis, and
I'll add some items to the Listbox, and
| | 02:27 | I'll add few Listbox items.
| | 02:29 | There's one, two, and three,
and I'll give them an appearance.
| | 02:35 | So this one I'll name Listbox Item 1,
and this one will be Listbox Item 2, and
| | 02:45 | then this one will be...
| | 02:48 | So I've got my Listbox Items in there now.
| | 02:51 | What else can I use?
| | 02:51 | How about some Radio buttons?
| | 02:53 | So I'll scroll down here, and we'll
put some RadioButtons on the canvas.
| | 02:57 | We'll put two RadioButtons out here,
and we'll position the RadioButtons.
| | 03:03 | Now RadioButtons, in order to work
properly, have to be grouped, and the way you
| | 03:08 | group them is you give them the same group name.
| | 03:10 | So I'm going to select this RadioButton
and start that one off as Ischecked, and
| | 03:14 | I'll give it the GroupName grp1, and
I'll name this RadioButton grp1 as well.
| | 03:20 | This is pretty much the
same thing you do in Web pages.
| | 03:23 | When you name Radio buttons the same
name that way, they all know to toggle each
| | 03:26 | other on and off right way. So let's see.
| | 03:28 | Radio Button, what else can we use?
| | 03:30 | How about a slider control?
| | 03:33 | Bring the slider control out here and
make that the right size as well. Line
| | 03:40 | that up with the edges. There we go.
| | 03:43 | And how about a ProgressBar?
| | 03:45 | ProgressBar down here, and we'll resize
the ProgressBar and make it the right size.
| | 03:52 | There we go.
| | 03:54 | And we'll give it a name.
| | 03:56 | We'll call it progressBar1 and how
about the ToggleControlSwitch, too?
| | 04:01 | Well that's also not in
the base control category.
| | 04:05 | So I'll just search for it,
and there it is right there the
| | 04:09 | ToggleControlSwitch and that.
| | 04:15 | So now we have a whole bunch of Basic
controls laid out here on the design surface.
| | 04:21 | What we need to do now is wire
up the event handlers for each.
| | 04:26 | And so what we'll do
we'll create event handlers.
| | 04:29 | When the event handler fires, we'll
update the ProgressBar to show some progress
| | 04:34 | so that that way we can see that
our event handlers are working.
| | 04:37 | So to do that, I'm going to select
each control, starting with the Button, and
| | 04:42 | you can see that when I select the
control, the Properties panel updates with
| | 04:46 | all of the properties for that item.
| | 04:48 | There's also, however, an Events view.
| | 04:51 | So I'll switch over to the Events view,
and I'll assign event handlers to each
| | 04:56 | control just by giving each one a name.
| | 04:58 | So for the Button, I'll handle the
onClick event by typing "onClick" and when I
| | 05:03 | hit Return, you'll see that Blend
now switches me over to the Code view.
| | 05:08 | So now I can write my Click handler.
| | 05:12 | So I'll just write a function
named UpdateProgress. Okay.
| | 05:16 | So UpdateProgress is going to increment
the value of the ProgressBar, and I need
| | 05:21 | to write that function because
there is no such thing by default.
| | 05:25 | So I'll write private void UpdateProgress
and UpdateProgress is going to do two things.
| | 05:34 | First, it's going to retrieve the
current value of the ProgressBar and the
| | 05:39 | ProgressBar has a value that's a double format.
| | 05:43 | So I'll name it var my
variable double progValue = this.
| | 05:49 | You can see that as I type, Blend is
helping me with some intellisense to locate
| | 05:54 | the control they need to access and
there is right there progressBar1.
| | 05:57 | I type dot and then you that
highlights Value for me. Okay.
| | 06:03 | So we get the Value.
| | 06:05 | Now we need to increment the Value.
| | 06:07 | So let's say that
progValue gets incremented by 10%.
| | 06:14 | Now if we don't do anything else, then
the ProgressBar will fill up and keep on
| | 06:18 | going, so we need to handle the case
where if progValue is, let's say, greater
| | 06:23 | than 100, then we set progValue back to zero.
| | 06:29 | That way the ProgressBar will just
keep looping over and over again.
| | 06:33 | And then once we've done that, we set the
Value of the ProgressBar equal to the progValue.
| | 06:45 | Okay. So now we've written out UpdateProgress
function, and we've wired it up to the
| | 06:49 | onClick handler for the button.
| | 06:51 | So let's go back and do the same
thing with the rest of the controls.
| | 06:54 | So I'll click the Checkbox, and the
Checkbox had and event named onClick also,
| | 06:59 | so I'll write onClick.
| | 07:01 | And you can see that I don't have
write it again because it's already been
| | 07:04 | written once so I could leave it as it is,
and we'll do the same thing with the Hyperlink.
| | 07:09 | Just write onClick, and
what else handles onClick?
| | 07:17 | RadioButtons do onClick.
| | 07:19 | So we'll do onClick here, and we'll
do onClick for this one, and we'll do
| | 07:28 | onClick for the ToggleControlSwitch. Okay.
| | 07:34 | So that now we've wired up the click
events for the controls that get clicked,
| | 07:39 | what I'm going to do is select the Listbox and
for the Listbox, we're not going to do click.
| | 07:43 | We'll do something else.
| | 07:45 | Let's say that when the user changes the
Listbox selection, we want to handle the event.
| | 07:50 | So we'll write an event called
onSelChange, and I think you can guess what
| | 07:55 | this ones going to do.
| | 07:56 | It's basically just
going to call UpdateProgress.
| | 07:59 | Okay, and then back to the Code,
back to the Layout and the slider.
| | 08:03 | So now the slider control will do ,
whenever the user moves the slider control,
| | 08:09 | that's the onValueChanged event.
| | 08:11 | So we'll call this one onValChange
and same thing call UpdateProgress.
| | 08:17 | So now we've wired up all of our
controls to an event handler that will change
| | 08:22 | the value of this ProgressBar when
any one of these guys gets interacted with.
| | 08:26 | So to test this out, we need to run
the project, and we'll see how to do
| | 08:31 | that next.
| | Collapse this transcript |
| Running the app in the Emulator| 00:01 | Once you've created your application
using Blend and you've gotten everything
| | 00:04 | laid out and all your events wired up,
the next logical thing to do is to have
| | 00:09 | to try the application out.
| | 00:10 | And we can do that with the toolset that
we downloaded by running the project in
| | 00:16 | the Windows Phone 7 Emulator.
| | 00:19 | And the way that we do that is up
here on the Project menu there is an
| | 00:24 | option called Run Project.
| | 00:26 | And you can see that when I choose to
run the project I get a dialog giving me
| | 00:31 | an option of what to do.
| | 00:32 | I can either run the project in the
Emulator or on an actual Windows Phone 7
| | 00:39 | Device that I have attached to my computer.
| | 00:41 | Now I don't have a Windows Phone 7 with
me, so I'll just run it in the Emulator.
| | 00:46 | And I'll leave that
selection highlighted and click OK.
| | 00:50 | And you can see that the
Emulator is going to launch.
| | 00:54 | So let me switch over to the Emulator.
| | 00:56 | So this is the Windows Phone 7 Emulator,
and for all intents and purposes it
| | 01:02 | is a Windows Phone.
| | 01:05 | It's a virtual machine running the
actual operating system with Silverlight and
| | 01:09 | all that stuff in it.
| | 01:10 | So as far as your code is
concerned, it's running on an actual phone.
| | 01:14 | And the controls along the side here in
this little bar right here, the top two
| | 01:19 | are Close and Minimize.
| | 01:20 | Then the next two are
controls for orientation changes.
| | 01:24 | You can change the orientation of the
phone, putting it into Landscape mode or
| | 01:29 | Portrait mode by clicking those two buttons.
| | 01:31 | This button over here means to zoom, and
this button down here means to Minimize.
| | 01:36 | So we are going to leave those
alone, so you can see everything.
| | 01:40 | So now that the application is
actually running in the Emulator, we can try it
| | 01:44 | out to make sure it's working.
| | 01:46 | So remember, we wired up at event
handlers to all these controls so that when the
| | 01:50 | user interacts with them
this Progress Bar should update.
| | 01:54 | So I am going to try that out.
| | 01:55 | I am going to click the button.
| | 01:56 | And you can see that when I click the
button, the Progress Bar did, in fact,
| | 02:01 | update right down here by 10 points.
| | 02:03 | So let's try some of the other controls.
| | 02:06 | CheckBox, yeah seems to be working
and the HyperlinkButton, yeah, and the
| | 02:10 | ListBox, yeah, that seems to be working, too.
| | 02:13 | RadioButton seem to be working.
Toggle Switch seems to be working. Slider
| | 02:18 | seems to be working.
| | 02:19 | And you can see that the Progress Bar
is looping around each time because of
| | 02:24 | that logic we put in to check to
see if its value was exceeding 100.
| | 02:28 | And it seems to be working great. All right.
| | 02:32 | That's pretty much all there is to
creating, laying out and wiring up an
| | 02:38 | application using Expression Blend 4.
| | Collapse this transcript |
|
|
4. Exploring Advanced FeaturesHandling page orientation changes| 00:00 | Windows Phone Applications are
capable of handling different page
| | 00:04 | orientations in their layout.
| | 00:07 | This is going to happen because Windows
phone users can rotate their phones to
| | 00:12 | display information in
landscape mode or portrait mode.
| | 00:18 | Now, your application can respond to
these changes, and you can also specify
| | 00:23 | what type of orientation
your application can handle.
| | 00:25 | In fact, you can do this on an
application page-by-page basis.
| | 00:31 | Each page can tell the host
application whether it can do portrait mode, or
| | 00:37 | landscape, or both modes.
| | 00:40 | If an application tries to navigate to a
page that only supports one type of orientation,
| | 00:45 | what will happen is the phone will
adjust to show the page in that orientation,
| | 00:50 | regardless of how the user is holding a device.
| | 00:53 | So, for example if your application
contains a page that can only be displayed
| | 00:58 | in portrait mode, then when the used
rotate the device, nothing will happen.
| | 01:03 | Or similarly, if they are viewing
application, and they are holding it in portrait
| | 01:07 | mode, and they are navigate to a page
that only knows how to do Landscape, then
| | 01:11 | the phone will switch into Landscape
mode while that page is being displayed.
| | 01:15 | So, let's write some code and see
if we can figure out how to do this.
| | 01:19 | So, I am going to go ahead and
open up my Orientation example.
| | 01:24 | So, I am going to choose Open Project.
| | 01:26 | Now, if you have the ExerciseFiles,
you'll notice that there is a folder called
| | 01:30 | 04_advanced, and inside there
there is a folder called Orientation.
| | 01:34 | Now, I am going to be operating on the
Orientation_Start version, and you can
| | 01:37 | either do that as well and follow along
with me, or you can just open the Final
| | 01:41 | version and see how everything has done.
| | 01:44 | So, I'll open the Orientation solution.
| | 01:47 | So, here is my project, and you can see
that I've already laid a few things out.
| | 01:50 | So, on my homepage, there are three buttons:
| | 01:53 | one for going to a Portrait, a
Landscape and a Neutral page.
| | 01:58 | So, here is the button for
going to the Portrait Page.
| | 02:02 | If we look at these XAML code, you'll
see that this is the button right here.
| | 02:05 | I'll scroll over, and you can see I've already
added an EventHandler for going to a portrait page.
| | 02:14 | So, we can write the EventHandler for that.
| | 02:18 | If we go to the code for this file, we'll
see here is the EventHandler right here.
| | 02:23 | So, what we need to do is write the
EventHandler that's going to navigate to the Portrait Page.
| | 02:28 | So, let's add a Portrait Page to our project.
| | 02:32 | I am going to right-click on
Orientation and click Add > New Item.
| | 02:38 | Now, I have to choose what
kind of page I am going to add.
| | 02:41 | The funny thing is it doesn't
actually matter what kind of page I choose,
| | 02:44 | because I can actually change it later on.
| | 02:46 | But for the moment, I'll
choose Windows Phone Portrait Page.
| | 02:50 | So, I've added a new page to my
project, and I am going to rename this.
| | 02:55 | I'll Rename it Portrait Page. Get rid of the 1.
| | 03:02 | In the XAML code for this page, you can
see that there is a property right here
| | 03:05 | at the top called Supported
Orientations, and that is set to be Portrait.
| | 03:10 | You can also set this property in code, as well.
| | 03:13 | So, if I go to the code and here
in the constructor if I were to type
| | 03:17 | this.SupportedOrientations =
SupportedOrientation., and then I can choose
| | 03:25 | Landscape, Portrait or PortraitOrLandscape.
| | 03:30 | If I set this in code, it will
override what's specified in the XAML code.
| | 03:36 | But it's up to you.
| | 03:37 | You can do it in XAML.
You can do in code.
| | 03:39 | It doesn't really matter how you do it.
| | 03:41 | So, I'll just do it in both ways here.
| | 03:44 | So, I'll set it to Portrait, so
back in the Design View, okay.
| | 03:51 | So, now we've created a page that
can only be displayed in Portrait mode.
| | 03:56 | So, let's set some properties here.
| | 03:58 | We'll change the name of it to be ORIENTATION
DEMO, and we'll call this the Portrait Page.
| | 04:13 | Now, we've created a page that can
only be displayed in Portrait mode.
| | 04:16 | Let's go back to the MainPage and for
the EventHandler, we need to write the
| | 04:22 | EventHandler that
actually navigates to this page.
| | 04:25 | So, to do that we are going to use
what's called the NavigationService.
| | 04:29 | The NavigationService is how the phone
application navigates among the page, and
| | 04:34 | this is a global object.
| | 04:36 | So, we are going to write the code
to navigate to the Portrait Page.
| | 04:40 | So, I will write NavigationService.
NavigationService is a global object.
| | 04:48 | You'll see that when I type the period,
I'd get a whole bunch of methods, and
| | 04:52 | the one we want is Navigate.
| | 04:54 | That's that guy right there.
| | 04:56 | So, we are going to navigate to a page,
and the way that you navigate to pages
| | 05:02 | in Windows Phone 7 and Silverlight is
the same way pretty much using the same
| | 05:08 | syntax that you do with Web pages.
| | 05:10 | So, we are going to navigate
to a Uri, so we'll type "new Uri."
| | 05:19 | The Uri that we are navigating to
is going to be the Portrait Page.
| | 05:25 | So, write it as a string.
| | 05:27 | We'll write PortraitPage.XAML,
and this is a Urikind of Relative
| | 05:41 | because it's inside of our project here.
| | 05:44 | Okay, so once I have done that,
| | 05:46 | now when I click that button, we
will navigate to the PortraitPage.
| | 05:53 | So, let's go ahead and try that.
| | 05:54 | We'll save, and then we well run this
in the Emulator, and we are deploying.
| | 06:01 | Welcome to application.
| | 06:03 | We are in Debug mode now.
| | 06:05 | Let's switch over to the Emulator.
| | 06:08 | So, when I click on Go To Portrait Page,
| | 06:10 | you can see that we go to the Portrait Page.
| | 06:12 | So, I'll click Back.
| | 06:13 | What I'll do now is put the phone into
Landscape mode, and I'll click on Go To Portrait Page.
| | 06:18 | You can see that the page is staying in
Portrait mode, even though the phone is in Landscape.
| | 06:23 | Let's go back to Portrait mode and go
back. Now let's write a Landscape page.
| | 06:32 | So we'll go back to the code,
and we'll stop debugging.
| | 06:36 | So, now we need to add a
page that only does Landscape.
| | 06:41 | So, same story as before.
| | 06:44 | We'll Add > New Item, and this time
we'll add a Landscape page, and we'll Rename
| | 06:49 | this LandscapePage.XAML.
| | 07:00 | We'll change this to say ORIENTATION
DEMO, and we'll call this Landscape Page.
| | 07:14 | What we are going to do is just leave this
as Landscape mode right here in the XAML.
| | 07:20 | Let me go back to the MainPage, and
now we need to hook up the EventHandler
| | 07:26 | to the Landscape Page.
| | 07:29 | So, for this button, we'll make a new event
called onLandscapePage, and similar to this one
| | 07:39 | I'll just copy that and paste it,
and this time we are going to
| | 07:45 | LandscapePage.XAML, okay.
| | 07:54 | So, now let's test that one out.
| | 07:57 | Go back to the MainPage, and
we'll launch the application.
| | 08:04 | Now, I'll click Go To Landscape
Page, and you can see that we went to
| | 08:07 | the Landscape Page.
| | 08:08 | It's only a Landscape mode, even
though the phone is in Portrait.
| | 08:13 | The last thing to do is to make a page
that can handle both layouts, and that's
| | 08:17 | called a Neutral Page.
| | 08:18 | So, let's make one of those.
| | 08:20 | Let's stop debugging.
| | 08:24 | Now what we are going to do is Add >
New Item, and we'll add a, we'll call it a
| | 08:31 | Portrait Page, but that's not what it is.
| | 08:34 | We'll just Rename it to NeutralPage.
| | 08:45 | In the code for the NeutralPage, we
will say that this.SupportedOrientations =
| | 08:55 | SupportedPageOrientation.PortraitOrLandscape.
| | 09:00 | So, we'll save that and go back to the
layout, and we'll name this Neutral Page.
| | 09:13 | Let's create a page element that
responds to the layout change in a way that
| | 09:20 | relays out the element to look
good in both Portrait and Landscape.
| | 09:27 | So, I'll take a TextBlock, and I'll
bring it on the design surface here, and
| | 09:33 | I'll make it this big or so.
| | 09:36 | What I am going to do is change some of
the properties so we can see it better.
| | 09:40 | So, let's make the Color White, okay.
| | 09:48 | We'll make the FontSize nice readable like 24.
| | 09:53 | Then we'll make the Text
content of something nice and long.
| | 10:00 | See, how about we make it,
let's see, "This is a textblock."?
| | 10:09 | It should reposition itself to lay out
in both Landscape and Portrait modes, and
| | 10:24 | we'll wrap the text. All right.
| | 10:29 | So what I am going to do is I am going
to lay this out right here, and I am put
| | 10:34 | these little arrows on all three sides.
| | 10:37 | What that basically means is this arrow
anchors this edge of the control to this
| | 10:44 | side of the screen right here.
| | 10:45 | Same thing over here:
| | 10:46 | This arrow anchors this edge,
and this arrow anchors this edge.
| | 10:50 | So, when this layout changes, this TextBlock
will be stretched in all the ways that
| | 10:55 | it's anchored so that it relays out.
| | 10:58 | So, let's go back to the
MainPage, and now I need to add -
| | 11:03 | I am going to change this
guy to be anchored as well -
| | 11:06 | So, now we need to add an
EventHandler for going to the NeutralPage.
| | 11:13 | So, I'll click, and we'll call it
onNeutralPage and this time, I'll copy
| | 11:22 | and paste this guy.
| | 11:23 | Copy and Paste, and this is
the NeutralPage, so we save.
| | 11:31 | We go back to the MainPage.
| | 11:36 | Now, all I need to do is run it and test it.
| | 11:42 | Switch to the Emulator, so
now we have our Neutral Page.
| | 11:45 | This is the Neutral Page.
| | 11:45 | You can see that text block is laid out.
| | 11:47 | Now, when I rotate it, do you
see how the text got stretched out?
| | 11:50 | So, now both ends are anchored over here.
| | 11:53 | So, once again, we're in Landscape mode.
The text have been relayed out to look
| | 11:57 | good in Landscape mode.
| | 11:59 | Go back to Portrait mode.
| | 12:02 | You can see that it's been
squished in; now it's on three lines.
| | 12:06 | So, there is Landscape on two
lines, Portrait on three lines.
| | 12:10 | The last thing that I want to show you
is that you can actually respond to the
| | 12:16 | orientation change event.
| | 12:19 | So let's go back to the code,
and we'll Stop Debugging.
| | 12:25 | So, on the MainPage here in the XAML code,
I am going to select the Page Control.
| | 12:33 | Down here in the Events list, way
down here at the bottom, you'll see that
| | 12:37 | there is two events:
| | 12:38 | There is
OrientationChanged and OrientationChanging.
| | 12:44 | So, OrientationChanged gets called
when the orientation has already changed.
| | 12:49 | OrientationChanging gets called when
the orientation is about to change,
| | 12:54 | but hasn't done so yet.
| | 12:57 | So, let's write an EventHandler for
OrientationChanged, and we'll call this
| | 13:03 | onOrientationChanged.
| | 13:09 | I'll just do something really simple,
like show a MessageBox, and this is like an
| | 13:13 | alert in the Web page.
| | 13:16 | So, MessageBox.Show, and the title
will be, You changed the orientation!
| | 13:27 | So, we'll save that and go back to
the MainPage, and now we'll run it.
| | 13:32 | Let's go to the Emulator. So
now when I change the orientation,
| | 13:41 | you can see that I am getting
a MessageBox that says, hey!
| | 13:44 | You changed the orientation.
| | 13:45 | When I change back, there it is again.
| | 13:49 | That's all there is to it.
| | 13:49 | That's how you handle
orientation changes in Windows Phone 7.
| | Collapse this transcript |
| Adding an Application bar| 00:00 | In this example we're going to learn
how to add an Application Bar to our
| | 00:05 | Windows Phone application.
| | 00:07 | The Application Bar, and you can see it
highlighted here in this example down at
| | 00:11 | the bottom of the phone screen there,
is a set of icons and menu items that
| | 00:15 | appear at the bottom of the phone screen.
And it's optional; you don't have to
| | 00:19 | have this in your application.
| | 00:21 | But it provides a way for users to get
quick access to some of the features and
| | 00:25 | functionality of your application.
| | 00:28 | There are four steps to
adding an Application Bar.
| | 00:34 | The first: You have to add a reference
to the Microsoft.Phone.Shell assembly.
| | 00:40 | And you can think of an assembly as
just a collection of code that contains some
| | 00:46 | useful features that is reusable, kind
of like a library, and so you need to add
| | 00:51 | a reference to that to your project.
| | 00:52 | Once you have done that, you can
add the button images to the project.
| | 00:57 | And these are images that are standard PNG
files like you're probably used to using.
| | 01:04 | And you add them in, and those
become the icons on the Application Bar.
| | 01:07 | Once you've done that, you can create
the Application Bar, and there are two
| | 01:11 | ways that you can go about doing this.
| | 01:12 | You can either doing it in
XAML markup code, or you can do it
| | 01:17 | programmatically in C# code.
| | 01:19 | It doesn't really matter which way you do it.
| | 01:20 | They both work just fine, but it's up to you.
| | 01:22 | And then once you have done that, you
can add Button and menu items to the
| | 01:27 | Application Bar and implement the
event handlers for each one of the items.
| | 01:31 | Now you should note there are only
four buttons on the App Bar maximum.
| | 01:38 | Even if you turn the phone to Landscape mode,
they only provide support for four buttons.
| | 01:42 | The reason for that is because the
purpose of the Application Bar is to provide
| | 01:47 | quick access to the most
common features of your application.
| | 01:51 | So rather than overloading the bar with
lots of different icons and menu items,
| | 01:56 | they limit you to four buttons.
| | 01:59 | Let's go ahead and see how to add
an Application Bar to our project.
| | 02:03 | Let's switch over to the code.
| | 02:05 | And okay, here I am in Visual Studio.
| | 02:07 | So I'm going to open up my project,
and in the example folder for the AppBar,
| | 02:13 | you'll notice that there are two folders:
| | 02:14 | There is one for Start and one for Final.
| | 02:16 | I'll be working on the Start version,
and you can follow along with me, or if
| | 02:20 | you'd like, you can just open up the
Final version and see how everything works.
| | 02:25 | So, I'm going to open up
my Application Bar solution.
| | 02:29 | So let's go to the Layout.
| | 02:32 | So, here is the layout for the
Application Bar demonstration, and to make some
| | 02:38 | more room I'm going to unpin the Toolbox
for a moment, and slide this over so we
| | 02:43 | can see more of the code.
| | 02:44 | So remember the first thing we
need to do is add a Reference to the
| | 02:49 | Phone.Shell assembly.
| | 02:51 | So the way we do that is, over here in
the Solution Explorer for the project,
| | 02:56 | you'll notice that there
is a whole bunch of folders.
| | 02:58 | There is Properties, References. Here is
all the resources that make them application.
| | 03:03 | So in the References folder you'll see
that there is a whole bunch of assemblies
| | 03:07 | that got added by default when
Visual Studio created the project.
| | 03:11 | There are some Microsoft.Phone assemblies.
| | 03:14 | There is a couple of System assemblies,
and these contain a whole bunch of the
| | 03:17 | common code that we use
when building our applications.
| | 03:21 | Now the Phone.Shell assembly isn't
there, by default, so I'm going to fix that.
| | 03:25 | I'm going to right-click
and then choose Add Reference.
| | 03:29 | And I am presented with a whole bunch of
assemblies I can choose to add to my project.
| | 03:35 | So, I'm just going to scroll down
to Shell, right there, and click OK.
| | 03:40 | And then you can see that the
Phone.Shell assembly got added into my project.
| | 03:47 | So that's how we add the Reference.
| | 03:49 | Now, we need to make it so that we can
use the objects and types that are inside
| | 03:55 | that assembly from within our XAML code.
| | 03:58 | Now the way that we do that is by typing
a line of XAML right here at the top of
| | 04:02 | the XML file, and I want you to bear
with me for a second because this looks
| | 04:06 | kind of complicated, but
it's really not. I'll explain.
| | 04:09 | What we need to do is add an XML
namespace, and we're going to call our
| | 04:13 | namespace the shell and what this
allows us to do is reference, in XML, the
| | 04:20 | objects that are inside that Code Library.
| | 04:23 | So we're going to say that this namespace is
equal to, and then we need to type out a string.
| | 04:27 | So we need to tell the XAML designer
where to get the types from, both inside
| | 04:33 | the C# code's namespace and
which assembly to get it from.
| | 04:37 | So, we need to say that the clr-namespace -
| | 04:41 | and if you are not familiar
with this, don't worry about it;
| | 04:43 | it's not something you need to
know too much about right now -
| | 04:46 | But the clr-namespace, we're
getting these types from is the
| | 04:49 | Microsoft.Phone.Shell namespace,
and that is inside the assembly of
| | 04:57 | Microsoft.Phone.Shell.
| | 05:01 | That's all there is to that.
| | 05:03 | So now that we have added that line of
code, we can work with the Application
| | 05:06 | Bar objects right from within XAML.
| | 05:09 | So now I'm going to scroll all the
way down to the bottom here, and the
| | 05:13 | Application Bar is a
property of the ApplicationPage.
| | 05:16 | So, I don't want to put it inside
this grid or anywhere in the layout.
| | 05:19 | I want to have it be its own control.
| | 05:21 | So I'm going to put it out
here, and I'm going to say
| | 05:25 | <phoneNavigation.
PhoneApplicationPage.ApplicationBar>.
| | 05:30 | So now I've added these two tags, and
they will serve as the container for
| | 05:37 | the Application Bar.
| | 05:38 | So I'm going to start off by adding an
Application Bar with some menu items.
| | 05:44 | So, now I need to use the shell
namespace, the one that we just created.
| | 05:46 | So, I'll say shell, and you can see
the ApplicationBar is right there.
| | 05:51 | And I'll create the Application Bar container.
| | 05:54 | Now, I'm going to start
by adding some menu items.
| | 05:57 | And the way that I do that is by
typing <shell.ApplicationBar.menuItems>.
| | 06:07 | Inside this container I am going to put
each one of the menu items. I'll write
| | 06:13 | shell, and you can see that there is a type here
called ApplicationBarmenuItem. I'll choose that.
| | 06:20 | And now the ApplicationBarmenuItem has a
Text property, so I'll write Text = menu Item 1.
| | 06:29 | And I can also add an Event Handler.
| | 06:31 | So for example, the Click right here.
| | 06:35 | And I can choose to create a New Event Handler.
| | 06:37 | So I'll just double-click that, and
you can see that it added a Click Handler
| | 06:41 | for the menu Item named
ApplicationBarmenuItem_Click.
| | 06:45 | And now what I want to do is close the tag,
and that one is done. And you know what?
| | 06:50 | I'll add two of these.
| | 06:51 | So I'll copy this one and paste it,
and I'll name this one menu Item 2.
| | 06:58 | And I'll leave the Event Handler the same.
| | 07:01 | So the same Event Handler
will handle both menu items.
| | 07:04 | And you can choose to do this in your applications.
| | 07:05 | You may choose to have separate
event handlers. That's up to you.
| | 07:09 | The last thing I want to do before I
try this out is set a couple of properties
| | 07:14 | on the Application Bar.
| | 07:15 | So I'm going to write IsVisible="True"
because we want to be able to see it,
| | 07:20 | and IsmenuEnabled also equals to
"True," so that we can see the menu.
| | 07:26 | So that's pretty much all I
need to do to add the menu items.
| | 07:29 | So we're at a point now
where we can try the code out.
| | 07:32 | So let's click Go. We'll start Debugging.
Up comes the Emulator, so we're debugging
| | 07:40 | now. Switch over to the Emulator.
| | 07:45 | Okay, so here is my sample
application, and sure enough, you can see the
| | 07:48 | little white ellipsis down here with
this little semidark area, and that is
| | 07:53 | the Application Bar.
| | 07:55 | So when I click the little ellipsis
over here, you can see that the Menu bar
| | 07:58 | slides up, and there is my menu items.
| | 08:01 | So that's great, in and of itself, but
they don't really do anything because I
| | 08:05 | have to write the Event Handler.
| | 08:06 | So let's stop debugging, and go back to
the code and write the event handlers.
| | 08:10 | So I'll stop Debugging.
| | 08:15 | So remember we added these
event handlers right here.
| | 08:20 | So if you look in the code you'll see
that, as a convenience, Visual Studio added
| | 08:25 | the Event Handler for us.
| | 08:27 | So, just to keep things simple, I'll just
an Alert, or in the case of .NET, it's a
| | 08:31 | MessageBox, and I'll just say Show("You
chose a Menu Item!", and then I'll say
| | 08:41 | the title is menu Item, and we'll just
have an OK button, MessageBoxButton.OK.
| | 08:55 | So now we have our Event Handler actually
doing something, so now let's run this again.
| | 09:02 | There is the Emulator. Switch over.
| | 09:05 | So, now we'll bring it up, and we'll
choose menu item 1, and you can see
| | 09:09 | that the MessageBox is, sure enough,
being shown, and sure enough, for menu
| | 09:14 | item 2, there it is.
| | 09:15 | It seems to be working just fine.
| | 09:17 | So, that's adding menu items.
| | 09:18 | Now, let's go back and add some
icons for our Application Bar.
| | 09:23 | Okay, switch back to the code,
and we'll Stop Debugging.
| | 09:30 | Back in the XAML code, what we're going
to do now is first add the images that
| | 09:35 | will form the icons for the ApplicationBar.
| | 09:39 | So the way that you do that is over
here in the Solution Explorer you'll notice
| | 09:43 | that there is a button
here labeled Show All Files.
| | 09:47 | So I'm going to click that, and
you'll see that in addition to the folders
| | 09:51 | that are already in the projects,
there are several folders in my Project
| | 09:55 | folder that are not included.
| | 09:57 | Well, this one here, Images, contains
all the images I want to use as my icons.
| | 10:01 | So, I'm just going to right-click and
choose Include In Project, and then for
| | 10:06 | each one of these icons, you see
that they are just regular PNG files.
| | 10:11 | What I need to do is select all four of them,
and in the Build Action I need to choose Content.
| | 10:18 | So these will be Content that are
included in the output, and I also wanted to
| | 10:24 | make sure I choose Copy always.
| | 10:28 | So those two settings will bundle these
images with my project, and that I can
| | 10:33 | refer to them using URIs, which will
extract them from the application, and I can
| | 10:38 | use them in the user interface.
| | 10:40 | So now I have added the images. There they are.
| | 10:42 | All right.
| | 10:43 | so now back here in the XAML code, I need
to add the container for the icon buttons.
| | 10:49 | So, just like we did with the
menu items, we're going to say
| | 10:52 | <shell:ApplicationBar.Buttons>.
| | 11:00 | So now I have got the code
that's going to contain my button items.
| | 11:03 | And now I need to add each icon button.
| | 11:06 | So I say shell, and you can see
there is a class right here for
| | 11:10 | ApplicationBarIconButton, so I'll choose that.
| | 11:14 | Now, I need to point the IconUri property
at the name for each one of these icons.
| | 11:22 | And I do that using a URL-like path so
they are in the Images folder, so I'll
| | 11:29 | /Images, and then I'll just
write the name of the file, which is
| | 11:36 | appbar.delete.rest.png.
| | 11:43 | And I can also add a Click Handler, and
you can see that, again, I have the option
| | 11:48 | of adding a Event Handler here, which
I'll just double-click, and I've added an
| | 11:53 | Event Handler called
ApplicationBarIconButton_Click.
| | 11:59 | So now I have added my button. All I
need to do now is copy this four times, so
| | 12:05 | I'll copy it and paste, paste, paste.
| | 12:09 | And I'll just change the
name of each one of these guys.
| | 12:11 | That one is download, that one is edit, and
that one is feature.settings. So, I'll save.
| | 12:25 | So now I have added my icon buttons.
| | 12:28 | I have pointed them to the images, and
I've added Click Handlers. All I need
| | 12:30 | to do now is go back to the code, and
you can see here is the Event Handler
| | 12:37 | that got added, and just to keep things
simple, I'll show a MessageBox for this one too.
| | 12:43 | Only this time I'll say "You chose an
Icon Item!", and we'll change that one to
| | 12:50 | Icon as well, and we'll save.
| | 12:53 | Go back to the MainPage.
| | 12:54 | So now we're ready to try this out again.
| | 12:56 | So, let's click Run. Okay. And Emulator
is running. And there you can see there
| | 13:05 | are the icons for each one of my buttons.
| | 13:09 | You can see there are my menu items.
| | 13:11 | It's in the menu Bar.
| | 13:13 | So now when I click on an Icon item,
you can see that I'm getting a different
| | 13:17 | message than I was for the Menu bar.
| | 13:21 | I will click on that.
| | 13:24 | That's pretty much all there is to it
for adding Menu items and Icon Bar buttons.
| | 13:30 | One last thing I want to show in this
example, we're going to go back to the code.
| | 13:33 | I'm going to Stop Debugging.
| | 13:37 | The last thing I want to show is how
you can dynamically change the visibility
| | 13:41 | of the different pieces of the Application Bar.
| | 13:45 | So this means going back into the layout now.
| | 13:46 | We're going to bring back up our Toolbox.
| | 13:49 | So I'm going to add a couple of switches that
control how the Application Bar is displayed.
| | 13:56 | So let me bring out a little Text
Block here, and size it, and that one will
| | 14:05 | say, Application Bar Visible, and
we'll bring out another one, and this one
| | 14:17 | will say, Menu Enabled.
| | 14:25 | I'm going to bring out a couple
of ToggleSwitches. They're kind of big.
| | 14:29 | We're going to go right there
and make them the right size.
| | 14:38 | Okay, there is one, and here's the other one.
| | 14:47 | And I'll set them both to be checked,
because we want our stuff to be visible.
| | 14:53 | So we'll set the IsChecked property.
| | 15:01 | So these two controls will control
whether or not the Application Bar is visible,
| | 15:08 | and whether or not the menu is enabled.
| | 15:10 | So what we're going to do now is
add a couple of Event Handlers.
| | 15:13 | So for the Application Bar one, we're
going to switch over to the Events tab,
| | 15:18 | and what we're going to do is
for the Checked, we're going to add
| | 15:22 | onAppBarVisible event.
| | 15:30 | So in the OnAppBarVisible event
what we need to check is first, if
| | 15:36 | (this.ApplicationBar is != null)
because we don't want to call any methods on
| | 15:47 | the Application Bar if it's
not there or hasn't been created,
| | 15:51 | so if we have an Application Bar,
then we're going to change this to
| | 15:55 | this.ApplicationBar.IsVisible is equal
to the value of the ToggleControlSwitch.
| | 16:05 | Now, the sender argument will be equal
to the control that sent the message.
| | 16:10 | In that case, that's the
ToggleControlSwitch, but we need to cast it to a
| | 16:13 | ToggleControlSwitch.
| | 16:15 | So we're going to say that that's a
ToggleControlSwitch sender.IsChecked.
| | 16:31 | We actually have to cast
that to a Boolean value.
| | 16:36 | So when the user turns the AppBar
Control on or off, this will make it
| | 16:40 | visible and invisible.
| | 16:42 | Actually, we need to do this for both
when it's checked and when it's unchecked.
| | 16:50 | So we'll set Unchecked and
Checked to onAppBarVisible.
| | 16:55 | We'll do the same thing for
the Menu Bar being enabled.
| | 16:58 | So once again, we'll add an event here
called onmenuBarEnabled, same kind of thing.
| | 17:08 | In fact, I'll just copy
this, and paste it in here,
| | 17:14 | only in this case it's
not going to be IsVisible;
| | 17:16 | it's going to be .IsmenuEnabled.
| | 17:22 | In that case, yup, same thing;
| | 17:23 | the sender will be the right
ToggleControlSwitch, and we need to make sure that
| | 17:28 | that's being called on
both Checked and on Unchecked.
| | 17:36 | So now, we can try this out.
| | 17:38 | Let's go back to Emulator,
and we'll make it visible.
| | 17:44 | So now you can see that when I turn the
Application Bar visible on and off, you
| | 17:47 | see how the Application Bar is showing
up and going away and similarly, when I
| | 17:52 | change the Menu Enabled, that
little ellipsis there is going away.
| | 17:55 | So now it's off. Now it's on. Now it's off.
| | 17:58 | Now, I can't bring the menu up, but now I
can, and now I can't do anything at all.
| | 18:06 | That's pretty much it.
| | 18:07 | That's how you include an
Application Bar in your application.
| | Collapse this transcript |
| Specifying an input scope for a text box | 00:00 | In this lesson we'll see how to ease
the typing of characters for certain kinds
| | 00:05 | of situations when you
are using a Windows Phone.
| | 00:09 | Windows Phone Applications have an
onscreen virtual keyboard called the Software
| | 00:15 | Input Panel or the SIP, and
applications can tailor the way that this keyboard
| | 00:22 | is laid out so that based on the type
of information that's being typed in, the
| | 00:28 | process can be made a lot simpler.
And this table describes some of the
| | 00:33 | different ways that the SIP can be laid out.
| | 00:37 | So for example, at the top of the
table you see the Default value.
| | 00:41 | This provides the standard
QWERTY-style keyboard for typing.
| | 00:46 | However, if you know that the user is
going to be typing in say a URL for a
| | 00:51 | Web address, you can set the input style for
a text box to be tailored to typing in a URL;
| | 00:58 | for example, the keyboard will be re-laid
out with a little .com button and so on.
| | 01:03 | And each one of these different types of
layouts - there is about 10 or so and in
| | 01:10 | fact there is probably more than
just 10; these are the ten most common -
| | 01:13 | when you are using these different kinds
of layouts, it can really make entering
| | 01:16 | text a lot easier for the
users of your application.
| | 01:20 | A great example is when someone
is typing in, say, a Phone number.
| | 01:23 | If you know that they are going to be
typing a phone number in, then you can set
| | 01:26 | the Input Scope of a text box to be,
for example, a telephone number and rather
| | 01:31 | than getting some giant keyboard, most
of which they can't use, they will get a
| | 01:35 | telephone number pad.
| | 01:36 | Let's see how this actually works in
practice by looking at a real example.
| | 01:40 | I am going to open the project in my
Visual Studio IDE, which is Open Project.
| | 01:48 | And in the example file folder for this,
you will see that there is a Start and
| | 01:52 | a Final version. And the Final is the
finished version. You can go ahead, jump
| | 01:56 | ahead and look at that one if you want
to, or you can follow along with me as I
| | 02:00 | work on the Start version here.
| | 02:02 | So I am going to open up
the SIPInputScope project.
| | 02:05 | So what we are going to do is create a
layout that has a text field in it, and
| | 02:14 | then we are going to set some
properties on that text field that enable the
| | 02:19 | easy entry of text.
| | 02:21 | So let's start by getting some
control onto our surface here.
| | 02:24 | So I will bring out TextBlock
Select that and make it a little bit bigger,
| | 02:29 | and I will set the text for that to be
surprisingly enough, enter some text. Hit Return.
| | 02:40 | So below that I am going to put a TextBox.
| | 02:43 | Here is my TextBox, and I'll make
it a little bit, size it properly.
| | 02:55 | So now I have a text box
that I can type some text in.
| | 02:57 | So now you have some controls that
control how the textbox keyboard shows up.
| | 03:05 | So I'll pull another TextBlocks out,
and for this one, I will label it display
| | 03:16 | the SIP for, and again, remember
SIP means Software Input panel.
| | 03:24 | So I am not going to do all of
the options that I show before.
| | 03:28 | I'll just choose a bunch that I
think really illustrate the advantages.
| | 03:33 | So we'll pull out some RadioButtons, and
we'll get a whole bunch of these guys out here.
| | 03:39 | Choose four:
one, two, three and four.
| | 03:46 | So each one of these guys need to put
into a RadioButton group, remember, so
| | 03:51 | that they all know how to toggle
correctly, and we'll just call that grp1, and
| | 03:56 | we'll do this for all of these guys,
grp1 and last but not least, grp1.
| | 04:08 | Now we'll set the text
for each one of these guys.
| | 04:09 | So the first one will be the Default
setting, and then this one would be for
| | 04:19 | Email, and then this one will be for a
Web URL Address, and then the last one
| | 04:30 | will be for a Phone Number.
| | 04:34 | So now I have got four radio buttons,
each one of them choosing a different kind
| | 04:40 | of SIP, and I will have this
one, the default one, checked.
| | 04:45 | So now I have set up my UI, and what I
need to do now is wire up some events so
| | 04:51 | that when each one of these radio buttons is
chosen, the right kind of SIP gets displayed.
| | 04:56 | So what I will basically do is assign
an event to the checked handler for each
| | 05:02 | radio button, and inside the event
handler, we'll see how the SIP gets set.
| | 05:07 | So let's go ahead and assign some events.
| | 05:11 | So I'll just select the guy and then
over in the Events panel, under Checked,
| | 05:17 | this one will be setDefaultSIP, and
that's good, and then this one here will
| | 05:26 | be setEmailSIP, all right, and then
this one here will be setURLSIP, and then
| | 05:43 | finally, this guy here will be
setPhoneSIP, so we save and save this one, as well.
| | 05:53 | So now I have all the event handlers wired up.
| | 05:56 | So now let's go into the code and write the
event handlers for each one of these guys.
| | 06:01 | Since I am going to be setting the SIP
each time, what I am going to do is write
| | 06:06 | a utility function that just sets the
SIP type. And I will just define that
| | 06:10 | function private void setSIPType, and
that will take an argument, and the type
| | 06:20 | of argument that we want to put in
here is called an InputScopeNameValue, and
| | 06:30 | that will be the
InputScopeNameValueSIP (isnvSIP).
| | 06:36 | Now we need to write the body of this function.
| | 06:38 | So basically, what we need to do is
first, we need to check to see if the
| | 06:42 | text box is not equal to null,
textBox1 is not equal to null.
| | 06:52 | If the text box is null, it means that
the page has not finished loading yet,
| | 06:55 | and we don't want to operate on it.
| | 06:57 | So check to see if it's not null.
| | 06:59 | So if it's not null, there is a
couple of things we need to do.
| | 07:01 | We need to create a new InputScope,
and then once we've created the new
| | 07:05 | InputScope, we need to create an
InputScope name to go with it and then set the
| | 07:11 | scope type on that scope, and then
assign that InputScope to the text box.
| | 07:16 | So here is how that looks in code.
| | 07:18 | We write InputScope, declare a variable
equals new InputScope
| | 07:27 | Now we have that.
| | 07:31 | We write InputScopeName, and
that's the InputScopeName =
| | 07:40 | new InputScopeName.
| | 07:44 | I really like IntelliSense.
| | 07:46 | Now that we have got that, we have to
set the InputScope's Name name value
| | 07:51 | field to the argument that we
were passed into this function.
| | 07:58 | So we are going to set that to isnvSIP.
| | 08:04 | So we have created a new InputScope,
and we set its value to whatever this
| | 08:09 | function was passed.
| | 08:11 | Then we tell the InputScope that we
created to add to its names array the
| | 08:22 | InputScopeName we just created.
That's this guy right here, and that's the guy
| | 08:27 | who has had his type set.
| | 08:29 | So now this TextBox will have the
InputScope named whatever the user chose
| | 08:36 | among the RadioButtons.
| | 08:37 | And then the last step is to say
this.textBox1.InputScope = inps;,
| | 08:51 | which is this right here.
| | 08:53 | So we create a new InputScope, created
new InputScopeName to go along with it,
| | 08:57 | set the name value property to the
property that we were passed in up here as
| | 09:01 | an argument, add that into the
InputScope's name's list and then set the
| | 09:07 | InputScope onto the TextBox.
| | 09:09 | That's the hardest that this is going
to get, because now what we are going to
| | 09:13 | do is fill in the event handlers.
| | 09:14 | All we are going to do is say
setSIPType to InputScopeNameValue.Default.
| | 09:26 | In the default case, we just set
it back to whatever the default is.
| | 09:30 | For Email, we'll say setSIPType
InputScopeNameValue.EmailNameOrAddress.
| | 09:45 | For the URL, we'll call
setSIPType InputScopeNameValue.,
| | 09:55 | and I believe if I am not mistaken there is
a URL in here, yup, there it is right there.
| | 10:01 | In the last but not least one is the
Phone Number, so we'll call setSIPType
| | 10:11 | InputScopeNameValue.TelephoneNumber.
Just so you can see, I mean look at how
| | 10:21 | many there are, I hit dot and
look at it how long this list is.
| | 10:25 | There are a lot of InputScopes
that you can use in your applications.
| | 10:31 | So that should be all there is to it.
| | 10:33 | Let's fire up the
emulator and see if this works.
| | 10:37 | So we'll save it, go back to the
MainPage, start debugging. Up comes the
| | 10:42 | emulator, and we'll switch over to it.
| | 10:47 | Here is my UI, and now what I am
going to do is I am going to click in the
| | 10:49 | TextBox, and you can see here is
the default keyboard that came up.
| | 10:53 | So I have its regular QWERTY style
keyboard, all the letters, I can choose
| | 10:57 | numbers, go back to the keyboard,
but that's for the default case.
| | 11:02 | So now if I choose Email and I click
in the TextBox, notice how the keyboard
| | 11:07 | has changed slightly.
| | 11:09 | I still get letters and numbers, but
now I have an @ symbol and a .com symbol.
| | 11:13 | So if I was typing someone's Email
address, I don't have to switch to another
| | 11:17 | keyboard to get to the @ symbol.
| | 11:19 | It's right there for me,
as well as the .com suffix.
| | 11:23 | And if I click and hold on the .com
suffix, you will see I get a whole bunch of
| | 11:27 | options here org, com, edu and net.
| | 11:30 | Such for the Email case.
| | 11:32 | Let's try the Web URL case, and I
think the Web URL case is actually not that
| | 11:37 | much different than the Email case. You
can see that the @ symbol is gone, but
| | 11:40 | the .com is still there, and there is
also a period over here on this side for
| | 11:45 | typing periods in Web addresses.
| | 11:48 | And then last but not least,
let's look at the Phone Number case.
| | 11:50 | I am going to select Phone Number and I
click in the TextBox, you'll see I get
| | 11:54 | a Phone Number pad.
| | 11:55 | So this is a really great way for
making it easy for people to type information
| | 12:00 | into your applications based upon
the type of information that it is.
| | 12:04 | So using SIP InputScopes, you can
customize the way that text fields show their
| | 12:09 | keyboards to the user.
| | Collapse this transcript |
| Consuming web content with the WebBrowser control| 00:00 | Windows Phone 7 also provides an
embeddable Web browser control that you can use
| | 00:06 | in your applications to consume and
display rich content from the Internet, and
| | 00:13 | that's what we're going to do in this lesson.
| | 00:15 | We're going to build an application
that uses the embedded Web browser.
| | 00:18 | And it's basically the same
version of IE that is on the Phone.
| | 00:24 | All we're going to be doing is wrapping
it in an application and then using it
| | 00:27 | to go to some sites on the Web.
| | 00:30 | And this is a really neat feature
because you can imagine that if you're
| | 00:33 | building an application that uses HTML
content that you've already developed
| | 00:37 | for other purposes,
| | 00:38 | let's say you have a Web site that has a
whole bunch of content that you want to
| | 00:42 | reuse in your mobile app,
| | 00:43 | it's really easy to do so
using the embedded Web browser.
| | 00:47 | The embedded Web browser also provides a
way to listen in on events, such as when
| | 00:52 | a document has completed loading or
when it's about to navigate somewhere, and
| | 00:57 | we will take a look at that in this example.
| | 00:59 | So let's get started.
| | 01:00 | I am here in the Visual Studio IDE.
| | 01:04 | I'm going to open up my Webbrowser Project.
| | 01:08 | This is in the Exercise Files folder.
| | 01:11 | You see there is two versions:
| | 01:12 | There's the Start version and the Final version,
and I'm going to be working on the Start version.
| | 01:16 | So can follow along with me if you'd
like, or you can go ahead and jump to the
| | 01:19 | finished version to see how everything works.
| | 01:21 | So I'm going to open up my Start
folder and open the Webbrowser.sln.
| | 01:27 | So here we are in the IDE, and we're
going to start by putting on some basic UI
| | 01:32 | we're going to need to
tell the browser to navigate.
| | 01:35 | So, let me make this area a
little bit bigger, so it's easy to read.
| | 01:38 | So first, I'm going to bring out a
text box, and the text box is going to be
| | 01:43 | where we type our URL that
tells the browser where to go.
| | 01:47 | I'm just going to resize this appropriately.
| | 01:52 | Then I'm going to add a Button to the canvas.
| | 01:56 | And we'll just call this the Go button.
| | 01:59 | Make it a little bit larger.
| | 02:02 | Come down to the Properties and
change the Content to just say Go.
| | 02:08 | Resize it a little bit, so it fits. There we go.
| | 02:16 | So now we have our UI on
the canvas for navigating.
| | 02:19 | Now let's bring out the actual
Webbrowser itself, and that's down here in the
| | 02:22 | Toolbox at the way bottom.
| | 02:23 | You see it is right there.
It is called the Webbrowser.
| | 02:25 | I'm just going to drag and
drop that onto the canvas.
| | 02:28 | And you can see that this is the box
that the Webbrowser will show up in, and at
| | 02:32 | design time you just get like a
little logo, but at run time this will be
| | 02:36 | replaced with actual Web content.
| | 02:38 | So let's just size this up so that
it matches the rest of the controls.
| | 02:45 | That's pretty much all there
is to do in laying out the UI.
| | 02:49 | If we take a look at the XAML code that
was produced, you can see down here in
| | 02:54 | the grid, there's our TextBox, our Go
button, and here is our Web browser control
| | 03:00 | right here, so, pretty straightforward.
| | 03:04 | So what we need to do now is give
the Webbrowser a default place to go to
| | 03:09 | when the page loads.
| | 03:11 | So the way that we're going to do that
is by selecting it and then scrolling
| | 03:16 | downion the Properties window
until we get to the Source Property.
| | 03:18 | We're going to have the Webbrowser
start off at one of my favorite Web sites,
| | 03:23 | which happens to be http://www.lynda.com.
| | 03:31 | Let's take a look back in the
XAML code to see what happened.
| | 03:33 | I will scroll over, and you can see that
I've set the initial Source Property to
| | 03:39 | be the address of this Web site.
| | 03:42 | And just to make sure that everything is in
sync, we'll do the same thing with the TextBox.
| | 03:48 | So I'll click on the TextBox and
set the text to be the same thing:
| | 03:54 | http://www.lynda.com.
| | 04:02 | So now we've put the initial
Source Property in the Webbrowser.
| | 04:05 | Now we need to wire things up so that when
the user enters a URL and clicks the Go button,
| | 04:12 | we properly go to the right Web site.
| | 04:15 | So let's click on the Go button and
then over here in the Properties, we're
| | 04:19 | going to click the Events tab and for
the Click Event, we're going to create an
| | 04:25 | EventHandler named onClickGo.
| | 04:30 | So that will put us into the
Source code for the main page.
| | 04:35 | So now we need to write the EventHandler.
| | 04:36 | So what we're going to do is we're
going to have a string variable, and
| | 04:38 | we'll call that site.
| | 04:40 | And that will be the string that's in the
TextBox for the Web site we are about to go to.
| | 04:45 | We'll write site = textBox1.Text.
| | 04:56 | So we get the text out of the TextBox, and now
all we need to do is navigate the Webbrowser.
| | 05:01 | So the Webbrowser, which if I'm not
mistaken, we'll start typing Web. There it is
| | 05:06 | right there, Webbrowser1.
| | 05:08 | The Webbrowser has, surprisingly enough, a
method on it called Navigate, and we'll
| | 05:14 | just scroll down until we
see it, and that's right there.
| | 05:17 | So the Navigate function tells
the Webbrowser to go to a URI.
| | 05:23 | So we're going to write new Uri, and
that's going to be the site, the string we
| | 05:30 | just created and the kind
of Uri, UriKind is Absolute.
| | 05:43 | So we're going to make the user type in http.
| | 05:46 | Obviously, this is kind of a barebones example.
| | 05:49 | Well I am not writing any code here
that checks to see if the user properly
| | 05:53 | typed http:// at the start of the string.
| | 05:57 | You know I could do a whole
bunch of error checking here.
| | 05:59 | I'm not doing that.
This is just an example.
| | 06:00 | But in a real browser, you'd have to do
all these kinds of error-checking things.
| | 06:05 | So that's pretty much all we
need to do navigate the Web browser.
| | 06:08 | So let's save and save the MainPage as well.
| | 06:13 | And let's run this in the
Emulator and see what happens.
| | 06:16 | I'm going to go ahead and start debugging.
| | 06:17 | I'm going to scale the Emulator
down so that we can see it all.
| | 06:25 | Okay, so we see that our application has
launched, and the Webbrowser is navigating.
| | 06:34 | It is going to take a minute.
| | 06:35 | Okay, see there it is, right there. All right.
| | 06:37 | so you can see that the Webbrowser
navigated to the Web site, and it's kind of
| | 06:41 | zoomed out to give the
full view of the Web site.
| | 06:43 | But the Web browser control has
interactivity that knows how to zoom in.
| | 06:49 | So all I'm going to do for example
is double-click on this element right
| | 06:52 | here, and you can see I can zoom in,
and I can pan around the page, and I can
| | 06:56 | zoom back out again.
| | 06:59 | Now let's make sure that our
EventHandler is working correctly.
| | 07:03 | So I'm going to write a different address.
| | 07:05 | I'm going to type in,
| | 07:07 | let's see, http://www.xbox.com,
another one of my favorite sites.
| | 07:13 | Click Go and after a few seconds
we should see that there it is.
| | 07:17 | So you can see that we've basically
built a barebones embedded Web browser using
| | 07:22 | the Webbrowser control.
| | 07:24 | But we can do a little bit better.
| | 07:26 | Let's make it so that
it's easier to type in URLs.
| | 07:29 | And let's explore using some of the
events that the Web browser fires off.
| | 07:34 | So let's stop the Debugger.
| | 07:36 | Go back to the code.
| | 07:38 | And let's Stop Debugging.
| | 07:41 | First thing we're going to do, and if
you haven't watched the chapter on using
| | 07:44 | input scopes you might want to
watch that before do this example,
| | 07:47 | but what I'm going to do is you've
probably learned in the input scope lesson to
| | 07:52 | fix the TextBox so that
it's easier to type URLs in.
| | 07:55 | What I'm going to do is make it
easier to type in URLs in tothe TextBox.
| | 08:01 | So the way that I'm going to do
that is go back to the Design View -
| | 08:04 | this is the MainPage - and I'm going
to select the PhoneApplicationPage.
| | 08:12 | You can see that here in the Events
Property panel there is a Loaded Event.
| | 08:17 | What I'm going to do is create an
EventHandler named onPageLoaded.
| | 08:24 | So when the page loads, we're going to
create an input scope, and an input scope
| | 08:29 | is a way of customizing the little
virtual keyboard that pops up to be optimized
| | 08:36 | for entering certain kinds of
information, in this case a URL.
| | 08:39 | So we're going to customize the
keyboard by writing InputScope, input -- my
| | 08:45 | variables are going to be inputScope;
| | 08:46 | inputScope = new InputScope.
| | 08:51 | If you watched the previous lesson on
Input Scopes, you'll know what I'm doing here.
| | 08:57 | So InputScopeName, and we'll call this
one inputScopeName = new InputScopeName.
| | 09:11 | Now we need to make the InputScope a URL type.
| | 09:14 | So we'll write inputScopeName.NameValue
= InputScopeNameValue, you can see the
| | 09:25 | IntelliSense is helping
me out here .NameValue.Url.
| | 09:32 | Now that we've created the URLInput Scope;
we just need to add it to the TextBox.
| | 09:37 | So we'll say inputScope.Names.Add, and
we'll add the InputScope name that we've
| | 09:44 | just created, inputScopeName.
That's that guy right there.
| | 09:49 | Then finally we'll assign it to the
TextBox, textBox1.InputScope = inputScope,
| | 10:00 | the variable we've just created.
| | 10:02 | So this will make it easier to
enter URLs on the virtual keyboard.
| | 10:05 | The second thing we're going to do is
go back to the MainPage, and let's take a
| | 10:09 | look at some of the Events that
we can listen in on the Webbrowser.
| | 10:14 | So I'll select the Webbrowser in the
Design View, and we'll go over to the
| | 10:17 | Events panel here, and we'll scroll
down. Now a lot of the Events you see
| | 10:21 | are just basic control events that are
supported by pretty much every control
| | 10:25 | in Windows Phone 7,
| | 10:26 | but there are couples that are
specific to the Web browser, for example, this
| | 10:30 | one right here LoadCompleted.
| | 10:32 | This Event fires when the Content in
the Webbrowser has finished loading.
| | 10:37 | There're also a couple of others.
| | 10:38 | There is this one here, Navigated, which
means that the Webbrowser control has
| | 10:46 | finished navigating to the site.
| | 10:48 | But this fires before the
LoadCompleted Event fires.
| | 10:50 | So in other words, you type an URL.
The Webbrowser goes there, gets the Content,
| | 10:54 | fires Navigated off and then loads
the Content into the Webbrowser and then
| | 10:58 | fires off the LoadCompleted event.
| | 11:00 | There is also a companion event for
Navigated called Navigating, and this event
| | 11:05 | is fired right before the
Webbrowser is about to navigate somewhere.
| | 11:10 | When you listen in on this event, you
can control whether the browser actually
| | 11:14 | goes there, or you can make any changes to
the URL that you want to that kind of stuff.
| | 11:19 | So let's just do a simple example.
| | 11:20 | Let's just listen in on the LoadCompleted Event.
| | 11:25 | That's this one right here.
| | 11:26 | So I'm going to write an event called
onLoadComplete, and now that will put me
| | 11:33 | back in the Source Code.
| | 11:34 | And just to make things simple, we're
just going to have a MessageBox show up
| | 11:39 | that shows us that this
did indeed fire correctly.
| | 11:42 | So we'll write MessageBox.Show, and
we'll write something like Webbrowser has
| | 11:52 | loaded the content, and we'll give it
a title like Content Loaded, and we'll
| | 12:03 | show a MessageBoxButton.OK.
| | 12:09 | So that's all we need to do now to listen in
on the LoadCompleted event. So let's save.
| | 12:14 | And let's go back to the MainPage and save.
| | 12:16 | Let's rerun the
application and see what happens.
| | 12:23 | Emulator is running.
| | 12:24 | You can see that we're
navigating off to the lynda.com site.
| | 12:31 | You can see that as the content is
beginning to appear in the Design View, the
| | 12:35 | LoadComplete Event has fired, and
it says the Webbrowser has loaded the
| | 12:39 | content, which is great.
| | 12:40 | So let's take a look at our InputScope.
| | 12:43 | So when I click in here, you can see
that the virtual keyboard has now been
| | 12:46 | customized to show the little .com
button here and the period over here.
| | 12:51 | So if I was using the actual device
and typing in an address on the keyboard
| | 12:57 | rather than using my Emulator here, it
would be a lot easier for me type things in.
| | 13:01 | So for example I can just write xbox and
then just type .com, and we'll click Go.
| | 13:09 | And once again, we should see the
LoadCompleted Event fire. There it is.
| | 13:15 | That's a quick lesson on how to build an
embedded Web browser in your application.
| | 13:19 | So now you know how to use rich Web
content in your Windows Phone 7 Apps.
| | Collapse this transcript |
|
|
