An Introduction to Microsoft Silverlight 4 – Part 1
Tutorial Details
- Difficulty: Intermediate
- Program: Visual Studio with the Silverlight 4 Toolkit
- An Introduction to Microsoft Silverlight 4 – Part 1
- An Introduction to Microsoft Silverlight 4 – Part 2
ActiveDen aren’t the only ones broadening their horizons. Today sees the beginning of regular Microsoft Silverlight content being published on Activetuts+ and I’m thrilled to say we have Silverlight Evangelist Mike Taulty on board to help us meet demand!
This is the first of two screencasts (with the second coming tomorrow) demonstrating how to build a simple Silverlight 4 map application, using Visual Studio and the C# programming language. You’ll get a decent overview of the Silverlight workflow, and learn what advantages it has over …similar technologies.
Go on – check it out and let us know what you think!
Section 1: Setting Up Silverlight and Bing Maps
Scroll down to see a list of all the links in the text file that Mike writes in this tutorial.
Section 2: Calculating Walking Routes
By the end of this part, you’ll have created an app that lets users choose any two points on a map, and displays a route for them to walk between those places.
Resources: Useful Links
About Mike:
Mike Taulty Microsoft (UK): http://mtaulty.com: mtaulty@microsoft.com: twitter.com/mtaulty
Where to download Visual Studio and the other software required for Silverlight development:
- Visual Studio 2010 ( free ‘express’ version ): http://bit.ly/vsWebExpress
- Silverlight 4 tools for Visual Studio: http://bit.ly/silverlight4ToolsForVS
- Silverlight Toolkit: http://bit.ly/silverlightToolkit
Working with Bing Maps:
- Bing Maps Control for Silverlight: http://bit.ly/bingMapsSilverlightSDK
- Bing Maps Routing WebService: http://bit.ly/bingMapsRouteService
How to fix the Web Service issue, if it comes up:
- WebService Issue: http://bit.ly/silverlightProxyIssue
Where to download Expression Studio: (You won’t need this till the second part of the tutorial, but feel free to grab it in advance :) )
- Expression Studio ( Expression Blend ): http://bit.ly/expressionStudioTrial
Next, check out Part 2 to learn how to use Expression Blend to change the design of your app.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Mike Taulty
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Even though Flash owns Silverlight IMO, nice to see this post. Every interactive dev should broaden their horizons and at keep current with other technologies.
Looking forward to other Silverlight posts :)
Amazing! keep the good work
wow! great Silverlight work.
Flash is way better and more useful than this piece of donkey junk!!
Why do you say that, booer? I was very impressed by what I saw in the tutorial: binding, the Visual Studio IDE, Expression Blend’s automatic transitions between different states… in fact, there’s nothing in the actual development shown in the tutorial that I felt Flash handled better.
So I’m curious; what don’t you like about it?
actually silverlight is not needed in this world, it is just affectation, but i love silverlight, it pushing adobe to make flash better.. microsoft always making mistakes, they cant see future… and apple cant see the future also, they are the same as microsoft,
and a fact what shape future is open source, i love open source,
The audio and video were so far out of sync on my machine that it was not only hard to follow but pretty much non- understandable. It seemed to be out of sync from the very beginning and I couldn’t tell if it got wider as it went on.
The video also ended and went black before the sound did – I guess about nearly 45 seconds or so.
Don’t know what gives.
Dang, you’re right, it is out of sync. It wasn’t before :S
I’m really sorry about this; we’ll try to get it fixed as soon as possible. Thanks for letting us know!
Hmm…there seems to be a significant discrepancy in the video and audio sync once the files are converted to FLV.. Whilst we figure out what the problem is, feel free to download Mike’s original MPEG4 files linked under each section.
Hi,
Apologies that the video/audio have got out of sync. I’ve just tried the video myself and I notice the problem that people are seeing.
Originally, this video was a H.264 video and it looks like it’s got translated into FLV and maybe lost something as part of that translation ( that’s not a lame dig at FLV by the way – transcoding video always seems painful regardless of format ).
I’ll talk to the ActiveTuts guys and see if we can do something to sort this out.
Thanks,
Mike.
Well, the result of our little MP4 > FLV consumer test? Adobe Media Encoder = out of sync. Blip.tv encoding = out of sync. Vimeo.com encoding = no problemo!
And you’ll all want to know why, of course; in which case someone’s going to have to post and tell me too…
Enjoy the screencast :)
Kudos, despite some Silverlight bashers and the obligatory flash fan boy commments Silverlight now stands at sixty plus percent penetration ( the divide between it and Flash on win7 boxes is even slimmer) and has a MUCH better set of tools . Good to see.
Mike
Is there a chance in this world to somehow talk the guys from Microsoft over that the logo of Silverlight platform sucks and they should do something about it? Say, to make it an adequate match for their good finding for name ‘Silverlight’. And for that capable ware of theirs,as well. I can tell you, as it is now the logo features a cigarette smoke cocoon which is outright disgusting. And inspires neither silver nor light but something that chokes. It’s trivia, however it influences. And who’s designed that logo, anyhow?
Stefan,
No, I doubt there’s any way in the world that I can get the Silverlight logo changed but I definitely hear you on this one.
Mike.
I would love some tuts on streaming video.
I have not try to do one but every thing that is related to video, silverlight seems to do better than flash.
Mike I’d love to hear your thoughts about Silverlight vs HTML5 Media components and Canvas. My understanding is that a lot of the Silverlight benefits come from streaming content and I’m curious how those stack up (outside of the obvious benefits/pitfalls of a compiled object and plug-in mentality). I’m not trying to hate on Silverlight but I’m curious about the pros and cons + best case use scenarios and its really hard to find any of that information that isn’t just a stream of Flash vs Silverlight mud slinging.
Hi Bryce,
The first thing that I always think about is that Silverlight is not just a video player. Sure, it can do some great stuff with video and audio but it goes way beyond that and I know you “get” that already from your comment.
One of the “interesting” things about video content in Silverlight is that it’s not treated any differently from non-video content like 2D vectors or controls so they can all be composited easily rather than having to special case any particular kind of content.
With that said – if we think only about video/audio then I think there’s a lot of trade-offs between choosing something like Silverlight (or Flash for that matter) and the standards-based approach of HTML5. It’s also worth bearing in mind that Microsoft is doing a lot around HTML5 in IE9 so even in the Microsoft world this choice still exists with Silverlight and IE9.
The way I see it is that, firstly, Silverlight is a shipping, supported technology. We support it in IE, Firefox, Chrome on Windows and in Firefox, Chrome, Safari on OSX and we do the work around cross-browser, cross-platform compatibility. We clearly state what video formats are supported (e.g. H.264 and WMV VC-1). If it doesn’t work, a customer can phone Microsoft today.
HTML5 is different in that (AFAIK) it isn’t finished yet as a standard, it doesn’t clearly state which video formats are supported and a developer would have to test each combination of browser/platform/video format themselves and if a particular combination doesn’t work then they might have to phone some combination of Apple, Google, Mozilla, Microsoft to see if they can get an issue resolved.
Beyond that, I think it comes down to specific capabilities around playing of video – scenarios you outline like streaming, hardware accelerated 1080p video and, especially for some scenarios, DRM. Siverlight has those capabilities shipping today.
So – all in all, I think some of the simpler video scenarios will be done in HTML5 browsers but there’s a lot of additional functionality in something like Silverlight. I’d also expect Silverlight to continue to move forwards quickly (4 releases in 3 years) gaining new capabilities at perhaps a faster pace than the standards-compliant browsers (incluing IE) can.
Mike.
I was wondering if there are any other websites/tutorials that people would recommend to learn more about silverlight (4). I felt that this one did justice (for a beginner). I have a much better appreciation for all the hype talked about silverlight now. Thanks a bunch!
Funny you should ask..
Mike will be back very soon with a whole string of screencasts for the Silverlight beginner. We currently have five sitting in the queue and he’s only just getting going!
Stay tuned (or follow us on Twitter for updates on our latest tuts)..
You have made my day.
I got stuck on the keys portion. I created my own ID and tried to get a key. I didn’t know how to string the keys so i could not input it later in the ApplicationID portion (around 8:40 in Part1:2). Could someone help?
Hey Dan,
I’m confused — were you able to get a key from the site?
If so, check out (or create) Keys.cs in the MyMapApplication folder. It should look like this:
namespace MyMapApplication
{
public static class Keys
{
#error Insert Your Bing Maps Application Key Here and then remove this #error
public static string MyBingKey = "INSERT KEY HERE";
}
}
Replace
INSERT KEY HEREwith your actual key, and then delete the line starting #error. Does that work?That will help! But I was more confused about actually getting the key.
On http://www.bingmapsportal.com/account/details... etc etc
After you log in, you go to ‘Create or view keys’ correct?
On the ‘Create Key’ portion what do you input?
Application Name: Visual Studio/ Silverlight
Application URL: ??????
Application
That will help! But I was more confused about actually getting the key.
On http://www.bingmapsportal.com/account/details... etc etc
After you log in, you go to ‘Create or view keys’ correct?
On the ‘Create Key’ portion what do you input?
Application Name: Visual Studio/ Silverlight
Application URL: ??????
Application
Sorry.. I accidently pressed add comment!! I didn’t mean to spam!! Please delete the like 4 posts I just put in!!
I will rewrite my question:
That will help! But I was more confused about actually getting the key.
On http://www.bingmapsportal.com/account/details… etc etc
After you log in, you go to ‘Create or view keys’ correct?
On the ‘Create Key’ portion what do you input?
Application Name: Visual Studio/ Silverlight
Application URL: ?????? (What URL do I put?)
Application Type: Developer
Ah, I see. Yep, that’s all correct. The Application URL used for this demo is the url of the server on which the Silverlight XAP is hosted. If you’re not putting your app online, you can just use “http://localhost/” for your Application URL.
Hope that helps :)
I wanted to start with silverlight for sometime
its a series of Tutorial so I it will be easy to learn
thanks
I am a regular Nettuts reader and I am looking to start learning Silverlight. I found this introductory screencast here and it’s simply awesome to give a jump start :)
Thank you very much!
Great news Fawad :)
Expect plenty more Silverlight stuff from Mike (plus other contributors). Welcome to Activetuts+!
Sorry to drag up an old tutorial, but I am just getting started on Silverlight now.
Anyhow, how do I give the credentials to the map API so that the “missing credentials” map overlay is removed?
Hey Kris,
I’m not sure where this is explained in the tutorial, but if you check out the source download you’ll see a file called Keys.cs. In here, you must set the value of
MyBingKeyto whatever key you obtained from the Bing Maps site.