00:01This is Developing Customizable and ReusableTools in Silverlight.

00:05My name is Dennis McDermott. I am the GIS developer for Boulder County.

00:11In the county, I'm kind of unique. There isn't anybody else who does what I do, so one of the reasons I'm up here alone.

00:18We're located northwest of Denver. The University of Colorado is there and also the Frozen Dead Guy Festival.

00:28If you don't know what that is, about a dozen years ago, this guy had his body frozen...

00:33...and stored in a little mountain town up there that is kind of famous for its...it's kind of a hippie haven...

00:41...and so you can imagine the festival was sort of a natural outgrowth. We're a little bit of a strange place, but we like it.

00:49Our agenda today. I'm going to show you how to create a reusable and customizable opacity slider.

00:58And if I have enough time, I'm going to show you a...do a demo and insert a property finding tool...

01:08...that one's a little bit more complicated. I'll get into that in a minute.

01:12And that's as far as we go with the slides. This is a code and markup session.

01:22Okay, everybody can see that well? Okay, what I have here...well, actually, but I'm sorry...

01:28...before I do that, let me do a quick demonstration here.

01:33What I'm going to build is this little guy here. And all it does is, you take that and switch between our basemap and an aerial.

01:42Now this guy here has exact same thing. Notice that it looks a little different.

01:46It's got a different background color, the font is a little different, but it does the same thing.

01:53This is the same code. I'm not reworking this every time I create a project. I just bring it in.

02:02And the same thing here. Okay, people are real impressed with this, GIS guys not so much, but the public is.

02:14They seem to like it. Every time I've developed one, they always tell me that I have to include this map slider.

02:20So, how do we do this? Well, let's take a look first at our main page.

02:27And right now all I've got here is a map, and in the map, I've got two tiled services...

02:33...the base layer and the aerial layer.

02:36And the aerial layer, I set the opacity to zero, so when this first comes up, you're going to see the base layer.

02:42As a matter of fact, we'll run this real quick and you see just a map.

02:54Nothing interesting. That's all there is to it right at the moment.

02:58I've got a couple of layers that'll come in a little bit later.

03:02So how do we build this little map slider?

03:06Well, for one thing, I have a different project, and if you want something reusable...

03:11...create a project so that you can bring it in to your next project.

03:17And in this case, I've got this...is XML, and all it is, is two text blocks and a slider.

03:29And in here the text, you'll notice that I've got binding.

03:32So the text is binding to a property called Left Layer Name.

03:40The foreground is bounded to the Foreground Caption Color.

03:46And then I've got in this text block, the Right Layer Name and then also the Foreground Caption Color...

03:53...and one other binding that I'm using up here.

03:56I've got a border and I've got a binding, the background is bound to a background color...

04:02...and that's how I'm going to change that background color.

04:07Now, code right now is empty, so let's start putting things in it.

04:18First thing I’m going to do is, I'm going to put in a map property.

04:23This is a dependency property. If you're not familiar with dependency property...

04:27...very strongly suggest that you get used to it.

04:31All it is, is...this is a canned bit of code. As a matter of fact, one of the things you can do...

04:38...if you're going to create a new dependency property is, Microsoft does provide a snippet for you.

04:45Going to hit Tab, and you can see right there, you've got the same thing that I have down here...

04:52...you just have to fill in your own information.

05:00Dependency property, what you do is, you register it.

05:04So you'd have the standard...this static read-only, sorry, function...

05:12...and it is set equal to the dependency property register.

05:16It takes four parameters. The first one is the name of your property.

05:23That should be the same thing as how you named it up here.

05:29Then it takes a type. In this case, it's map. It's going to be whatever type it is that you're bringing in.

05:35I'll show you another example in a minute.

05:37The second is also a type. This is the type of the actual class that you're building.

05:44So I have map slider here. This type has to be map slider.

05:49Then finally, I'm setting up a delegate and this one is New Property Metadata.

05:57It takes, and then it has a delegate. Now, this right now shows an error because this function doesn't exist.

06:04It will in a little bit. Okay.

06:08Also, I have two private tiled layers here.

06:12The reason is, I cannot set up these tiled map service layers as a dependency property.

06:20They get sent over with the map and I'll show you how there's...

06:23...there's actually a few ways of getting this information.

06:26I'll show you how I do it in a little bit.

06:29Okay. I'm going to need a couple more things.

06:32In order to get those...I'm sorry, the tiled layers, I need the name.

06:40So I'm setting up two more dependency properties. This is the exact same thing I showed you before.

06:45The difference is, obviously, I give it a different name and the type, the second parameter, is a string now.

06:55'Cause I'm going to pass in...I'm going to pass in a string.

06:58Also notice that I've also set up my delegate over here.

07:05Okay, now in addition, I'm going to need to be able to set the captions.

07:12So I've got a couple more dependency properties.

07:14This time I've called it Left Caption Property and Right Caption Property.

07:18Very similar to what I just set up, it's also a type of string.

07:23The difference is, notice over here I set up Null.

07:27What's going to happen is with these guys up here, when this property is set, that delegate is going to be fired off.

07:35In this case, I don't really...I don't want anything to happen when this property is set, so I just set this to Null.

07:43There are other things that you can do. You can set this up to set up default values.

07:47I'm not going to bother to do that today.

07:51Okay. I also need to be able to change some of the...I want to be able to change the background and the caption foreground.

08:04This is how you make things customizable. So, in this case, I'm setting it up as border background property...

08:10...the type is brush, 'cause I'm going to send in a color.

08:13And the same thing with the caption foreground. It's a type of brush.

08:21Now having had that all set up, now I can set up a little bit of code to do this.

08:32The first piece of code is a static function. This is, and I called the prepared layers...

08:40...it's the same thing...that's what this is being sent.

08:45So what happens is, is that when this property, the map properties are being sent...

08:50...it's going down to this prepared layers function.

08:58The prepared layers, it's a static function, it takes two parameters...

09:03...the dependency object and the dependency property change of [unintelligible].

09:12And what I do is, I set up a variable and take that dependency object and cast it as a map slider.

09:21So I'm getting the object that I'm creating here and then all I have to do is to fire off my set layers.

09:31Now the set layers is what does the initialization.

09:34It checks first to make sure that all these three are set properties.

09:40If it's...one of them is missing, it's not going to run.

09:43So what's going to happen is, is that the map gets set, the right layer name gets set, the left layer name gets set...

09:52...it checks to see whether all three, when all three are set, then it goes ahead and it does the initialization.

10:01And then what I do is, remember, I had the left layer and right layer.

10:06These are tiled map services and I'm sure you're all familiar with how this works.

10:12I'm just setting those two layers. And then I set up a model view.

10:17So I've put the right caption into this, the left caption into that, the background color, and the caption color that I want.

10:25And then set it...set that model view as the data context.

10:31Finally, down at the bottom I've got an event.

10:35I didn't see...this is very, very simple. I didn't see any reason to put it in the model view, so I just set it up as code behind.

10:43And all it does is, first it checks to make sure that the layers are set, and then it checks to see what the new value is...

10:53...and then it sets the left layer to 1 minus the opacity, the right layer to whatever the opacity is.

10:58So just getting the value from the slider and setting the opacity accordingly.

11:04Now, one thing I need to do, two things I need to do before I'm ready to do this is...

11:11...I need to put...oh, sorry. Okay, I've set up the event handler so that that works.

11:32And I also, before I do this, I need to build this, otherwise it's not going to work right.

11:38Okay, let's go to our main page. And actually, to simplify things a little bit here...

11:44...let's see here. Okay, I'm just going to grab that from here and [unintelligible]. There we go.

12:03Okay. So now I have my references set up, so the map slider is here, I come down here...

12:16...I can set up my map slider, I've given it a name. I'll show you why in a minute.

12:21But all these properties that I set up, all the dependency properties that I set up just a little while ago...

12:27...the left layer name, I'm going to set it to Base Layer, which is the same name as the base layer of the tile layer service...

12:36...the right layer name is Aerial Layer, same thing right here. And then the captions, a little bit different.

12:43Right caption, left caption. And then I've got the border background. I set that to a gradient I've already set up.

12:50And we'll have, yeah, the [unintelligible] gradient, and we have...I set the cap [unintelligible] foreground to white.

12:58Did a little [unintelligible] positioning, and this should work. Oh nope, it won't work. I forgot.

13:11For some reason that I do not know why, the map will not go in dependency.

13:18So I'm just putting a little code here to put the map in. Now it should work.

13:28And there it is, now if the map will show up...there it is. And I'll zoom in a little bit...

13:38...because it looks a little bit more impressive when...yeah...a little bit slow today, isn't it?

13:55And back out...there...huh, that's interesting.

14:08Now I did go over this earlier this morning, so it...yeah, I think it's, I don't think it's the code. It's this...

14:28We've also had, we're going need to do some looking at the load on our servers...

14:34...'cause we've been having some problems with...there it is.

14:39So I can go ahead and switch back and forth, and that took me, oh, a little bit more than 15 minutes to do.

14:47Let's do...show you how customizable this is.

14:57That's alright. We'll pull out...what one? That one.

15:22Okay, instead of having the aerial layer, let's say that we want contours instead.

15:29Now let's change that, I want to rename this just to be correct, come down here and I change this to the renamed layer.

15:46[Inaudible audience comment]

15:48Did I rename it wrong? Oh, yes, I did. Thank you. Ah, let's see here.

15:57You do get nervous up here. Fortunately, I can just back out. Okay, there we go.

16:09Let's try this again. Now I sit in my cubicle all day and hardly talk to anybody...

16:20...so when I have to get up here and talk to people and do some code at the same time...

16:25...it's not the most natural thing in the world for me. Let's put it that way.

16:29Okay, that looks correct, I hope. So let's change this to Contour Layer.

16:35We'll change the right caption to Contour. We're going to change the background color.

16:52Get it named right. And for the foreground, oh, orange, just for the fun of it. And run that.

17:12And what we should see is that the back color got changed, the foreground color got changed...

17:20...the map is still running slow. There it comes.

17:44Boy, that is running slow. What happens if I do...? Now you can see that the contours are there.

17:58Why this is running so slow I don't know. I'm going to have to talk to our GIS coordinator.

18:07And anyway, the point is, is that you can very easily, by using dependency properties, set up a tool...

18:16...set up so it's customizable, and completely change it in a very short period of time.

18:22Okay. Now, we'll move on from there. Another thing I would like to show, since we've got time...

18:30...is a far more complicated tool. This is...so I'm going to demonstrate how powerful this technique can be.

18:39This is our parcel service, mapping service so that people can go in and take a look at their properties.

18:47This was not originally written by myself. This was written by an outfit called GCS Research, located up in Montana.

18:54But I have been asked to make quite a few changes to it.

18:56And one of the changes they asked me to do was to change the property search engine.

19:02The original was deemed a little bit too cumbersome, and they wanted something that worked a little bit better.

19:11So, what I came up with was this tool, which again, I broke out from the original project and put it in its own project.

19:22Now I can go in here and I can do things like find my boss's house.

19:30By the way, my boss is sitting right there. That's why he's laughing.

19:40Oh, they're having problems.

19:44[Inaudible audience comment]

19:46I'm sorry, I can't hear.

19:48[Inaudible audience comment]

19:51Oh, okay. So you think it's a network problem.

19:54[Inaudible audience comment]

20:00Yeah, this is really, really running slow. So let's move on. I could still show you how to add it.

20:12Now this particular bit, because of the tool that I'm using, I have to do this in code.

20:21This isn't...nah, I'm sorry. Nervousness again, slip stripes, and I hit the wrong thing. What did I call this? Oh, yeah.

20:40Actually, I've been surprised. The network has been really good here. Parcel...this is what I'm looking for.

20:48Okay, so I have a project down here, let me move this over, called Parcel Search.

20:57So I add that...I add that as a reference to my project, and then down here, I'm set up...a very small bit of code.

21:08Now this first one, obviously, is just a constructor. The second one sets up a mode.

21:13The search mode. There's a number of different modes.

21:15I was going to show you the different modes, but the network's not going to let me.

21:19There is a full mode and an address mode.

21:22In the full mode, you can search by the owner's name, the parcel number, the account number, subdivisions.

21:32There's all sorts of different things that you can search by, and this particular bit of code needs to be able to handle all of them.

21:42I want to just...I've set up for, a lot of projects, they just need to handle address.

21:47So I'm just going to restrict it to address, and hopefully the network will let me do it.

21:51This 2 bit of code just positions it basically 10 [unintelligible] pixels from the top, 300 from the left.

22:01And then I'm setting up my map and I'm setting up the parcel_lab, using the same technique that I did before...

22:07...where I'm sending in the name of the graphics layer, so we can get that.

22:13This just does some initialization, this shows it, and then I set up an event. Okay.

22:24What happens is when you set...when I design these pieces...

22:28...what I'm asking myself is, What question am I answering here?

22:33And in this particular case, what it's doing is, it's going out to the assessor's database and finding a property.

22:39And so what the question I'm asking is, What property do they want to look at?

22:44Once I get that answer, it returns the...it fires off the event, which is caught here.

22:50And then what happens is, down here, two things are happening.

22:55One is, is that I'm going to show the data, and that's actually this little piece here.

23:02The other thing I'm going to do is go out and get me the geography, symbolize it, and display it on the map. Okay.

23:09Let's run this and see if we get lucky. And the network is working. Okay. So there it is.

23:18Now let's see if it works because then, I hope it does. It'll be very disappointing if it doesn't.

23:29Well, we'll back my boss's house again and let's see what happens.

23:35And...and it'll...so...

23:43So it went out, it got the information, put it in the Information window, and then there's his property right there.

23:51And I can do this for any project now that needs to know where the property is.

23:58I don't have to redo it. All I have to do is to bring in my project, hook it up...

24:04...write a few lines of code, and bang, it's there. And then do a little fun...