×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

This is part 6 in a series on getting started with Silverlight.  To view the index to the series click here. You can download the completed project files for this sample application in C# or Visual Basic.

We now have a functioning application but could use some more polish.  Let’s make the data template for the search results look a little better.  We’re going to modify a few things in the data template in Search.xaml for the ItemsControl. 

These modifications can be done in Blend just like we have been doing with the editing template features.  This is how it was accomplished above.  With these styles now applied the new UI looks like this:

Styled results

Notice how more polished that looks and we didn’t affect any code, just the template style.  Since there was a few changes here since the last step it would be a lot of code to write out but let me point out where the styles are in the final project.

The styles and templates are applied just like the binding syntax with data and the templates.  If we look at the ScrollViewer it now states:

   1: <ScrollViewer Style="{StaticResource scrollViewerStyle}" ...
   2: ...

Notice the familiar syntax?  instead of {Binding} it uses {StaticResource} to refer to a resource that either exists in the document or the App.xaml.  In this case the style is in the App.xaml (look for the scrollViewerStyle and scrollBarStyle nodes at the bottom of the file).

We also just made some subtle changes to the colors of the included style from the template.  With styling and templating in Blend, you don’t have to worry about modifying your .NET code most of the time.  We are able to change the visual layout and theme of controls without changing the code.

More resources on using Expression Blend:

Having a designer friend at this stage of polishing the UI is extremely helpful.  In fact, you’d likely have this UI defined MUCH earlier in the project than our exercise here.  The two tools, Expression Blend and Visual Studio, share the same project structure file so you can easily open the project in either tool instead of passing around loose files.

Take a look around the Assets/Styles.xaml file in the completed project to understand how styles and templates can be used.

Next step: finishing off our application by making it available out-of-browser in part 7.


This work is licensed under a Creative Commons Attribution By license.


11/17/2009 10:20 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Not sure how I did this, but my search page appears in the middle of the screen, centered vertically and horizontally, with the list control completely collapsed until I enter a search term. Any suggestions on what to do about positioning? I don't see any absolute positioning in any of the code snippets.

Thanks,
-MrB
6/15/2010 5:25 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Very helpful - good tutorial for beginners like myself. Ready to explore more on Sliverlight.
Thanks!
Gravatar
7/15/2010 2:56 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
This blog series gets a definite ten out of ten - until you get to this post. I've read it now a few times, and still have no idea how to make my app look like yours. Up until now, you showed us what to do, so we could learn and do it ourselves. Now you say "take a look in the styles" which doesn't help when you're learning and don;t really know what you're looking at.

I have blend open here, and am trying to work out how to do any of what I see in your pictures, but haven't a clue where to start.

Shame, I was so impressed with this series, but you ruined it right here. I don't want to cut and paste code, I want to learn how to do it myself.
8/11/2010 6:25 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
for anyone else having trouble finding the scrollViewerStyle and scrollBarStyle nodes in the sample files, they are not in the App.xaml file as indicated, but in the Assets/Styles.xaml
8/15/2010 2:48 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
The tutorial was pretty good so far, but this part (6) is almost useless - of course somebody can take the ready-made styles from the finished source code, but the really useful part would be a tutorial on how this can be done in Blend (or manually).
Also for a beginner, it would be usefull an explanation on why it's better to separate the template and styles from the actual control - reusability of styles, skinning etc..
8/17/2010 12:29 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
The easiest way to change the style/control template of the scrollviewer's scrollbar is to copy and paste the default style/control templates of the scrollbar and scrollviewer controls to styles.xaml and manually edit them to your liking. You would then add the style as a static resource to your scrollviewer control in search.xaml (e.g., <ScrollViewer Style="{StaticResource scrollViewerStyle}" ... > Make sure the names match up for the style here and in styles.xaml or you will get an error). You can find the default styles on the MSDN site "here":msdn.microsoft.com/.../cc278075%28v=VS.95%29.aspx If you're using Silverlight 4 (the latest version), you will have to delete the "vsm:" part of the namespaces or you will get errors.

In Tim's example, the scrollbar's VerticalThumb, VerticalSmallIncrease, and VerticalSmallDecrease change colors on mouse over and when active. You have to play with the VisualState for each part of the scrollbar to get it how you want. It's too much to explain in detail, but it's pretty easy to figure out once you look at the default template, which is large by the way.

Hope this helps.

9/22/2010 9:18 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Streamlining the graphic style will also make the UI seem more professional..
Regards,
buy gold bars
9/23/2010 12:26 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Thanks a lot, very helpful stuff. Its great how simple it was to add a little polish, just by adjusting template styles. Fast and easy!
dehydration
9/23/2010 6:48 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Working with silverlight is defintely way better than flash, it has much more capabilities. buy gold bars
12/4/2010 7:38 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
The tutorial was pretty good so far, but this part (6) is almost useless - of course somebody can take the ready-made styles from the finished source code, but the really useful part would be a tutorial on how this can be done in Blend (or manually).
Also for a beginner, it would be usefull an explanation on why it's better to separate the template and styles from the actual control - reusability of styles, skinning etc..
____________________________________________________________
Weather Station | Weather Stations | Wireless Weather Stations


12/26/2010 7:19 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I have to agree with Mary and Farad, right up to part 6 I was loving this tutorial. This part has let me scratching my head.
Learning to do this manually would be my preference,I'm more of a coder than a graphics person, plus I like to know what's going on and why.
Can you point me in the direction of a good tutorial on this stuff?
I have the trial version of blend, but when this runs out I'm stuffed, (I'm a student who can not afford the almost NZ$1000 (US$599) to buy Blend)
1/7/2011 4:50 AM | # agree with you
With Silverlight 5 looking like a reality sometime next year and Microsoft seeming to reaffirm its commitment to the whole Silverlight project now is a good time to find out what it offers. While others are singing the praises of HTML5 and comparatively weak web development environments, you can discover that Silverlight really does bring desktop development to the Web, not to mention Windows Phone 7...
The whole idea of Silverlight is to bring .NET development to the Web and for the most part you really can work in Silverlight using C# or VB without having to learn anything new but getting started with any new technology is never as simple.
david bill
Associate professor, Cambridge University
website 70-236|70-270
1/7/2011 4:34 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I think it's time for me to install Visual Basic on my PC. I'm really intrigued about this new application. Ohio Websites Directory
1/13/2011 3:28 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I'm still of the opinion that you don't need to get a third-party control library early in a new WPF project in the same way we all feel when doing WinForms project. I'm not too sure of your background with WPF, you might have hit an impasse and need a specific control, but generally the things you can do with XAML, styles and control templates are amazing.

For those out there that typically buy a third-party library just because the out-of-the-box controls look too bland then persevere with XAML as you will get all the customisation you'll ever need and you will eventually learn how to create amazing UI's that you would never get if you just drag and drop readymade controls to the UI surface.

For the controls that have very specific behaviour, DataGrid, Calendar Controls and charting, I've found all I've needed on CodePlex.

As mentioned in earlier posts I also recommend the following for those who don't want to splash-out on third party control libraries.
Associate professor
646-364 dumps|PMI-001 dumps|EX0-101 dumps|70-432 dumps
1/18/2011 2:59 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
It seems to be OK, I hope it's going to be fine in the future, too.
Gotowanie
2/14/2011 12:59 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Interesting tips. I will try to apply them to my website.
Gravatar
2/22/2011 7:11 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
thanks for sharing the very informative article .its very interesting keep posting informative material
saltwater aquarium
2/24/2011 10:22 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Thanks for such a great post and the review, I am totally impressed! Keep stuff like this coming…
cheap travel deals | Go Seeq Search Engines
Gravatar
3/10/2011 7:31 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I like to say that This blog again looking too interesting I got a nice and great read on this blog. this time I want to thank along with my whole team. We also like to thank to blogger for his best thinking.
צילום אירועים
Birthday sms
Gravatar
3/15/2011 7:10 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I like to say that This blog again looking too interesting I got a nice and great read on this blog. this time I want to thank along with my whole team. We also like to thank to blogger for his best thinking.
Happy Birthday Quotes
Birthday saying
Birth day sms
Birth day poems
free urdu sms
urdu sms
3/31/2011 2:18 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
This blog again looking too interesting I got a nice and great read on this blog. this time longjack 100
4/6/2011 11:14 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Thanks for the link to Visual Basic download.San Francisco movers
4/11/2011 5:03 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
I enjoy reading post secrets and i think that your analysis was a good one. I feel that it is healthy for people to be reading some of the informative and new things that can be found on post secret. you shared your point of view in easy way. toefl exam Go Seeq Search Engine

5/12/2011 4:46 AM | # RepsaLap
A lot of things that need to be studied in making a photograph, timing, location, lighting, models, etc., need to be prepared with ripe for creating an amazing photograph interesting. Employment Lawyers Los Angeles
Gravatar
6/9/2011 10:15 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
for a making a good photo many things are keep in mind like location , timing etc
Sony XNV-770BT
6/26/2011 7:26 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Interesting tips. I will try to apply them to my website. is pneumonia contagious
9/29/2011 6:48 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
What else can I say expect the enthusiastic love for your site, you are really great as you share so much information here on the website.wood pellet
9/30/2011 11:12 PM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Better coordination is must in every organization..Thanks for sharing this site with us..

Banquetes
10/26/2011 12:22 AM | # re: Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates
Thanks for sharing, I truly like studying informative worthwhile articles, That's why I hope to read more posts soon.

 
Please add 1 and 8 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.