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: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...
Developing Customizable and Reusable Tools in Silverlight
Dennis McDermott of Boulder County demonstrates building customizable user control tools in Silverlight.
- Recorded: Mar 28th, 2012
- Runtime: 24:17
- Views: 721
- Published: Apr 30th, 2012
- Night Mode (Off)Automatically dim the web site while the video is playing. A few seconds after you start watching the video and stop moving your mouse, your screen will dim. You can auto save this option if you login.
- HTML5 Video (Off) Play videos using HTML5 Video instead of flash. A modern web browser is required to view videos using HTML5.