Wet Ink Design

Silverlight DataGrid Template

Here is a simple datagrid template that I put together one afternoon. For a developer the datagrid is nothing to write home about as its fairly simple and really just there to provide an idea of what the template can be used for.

The template itself is made up a grid with a number of rows for content. The first gives you a place to put your company/project logo that is left-aligned. On the right I have a log-off link or whatever you want to make it.

The second row has a couple of designed buttons with rollovers that are left-aligned. They have their own style and that style can be applied to other buttons in the project. Pretty simple. On the right you have a couple of other buttons with a different style applied and you can add more of these if you wish as well.

The next row in the project grid gives you the main content area. Put in here whatever you want. I chose a data grid and played with the sytle a little bit. The default datagrid that comes with silverlight like most default controls, is hard to play with the styles. You have to dig through countless layers to find the gradient colors that you see when you rollover or click on objects of the datagrid. Like I said, you can put anything in the content area.

The next row I allocated space to put in some copyright info and a project version. You can use this for whatever or just delete it. Its up to you.

The final row is for the footer and I included four hyperlink button controls in case you wanted these to link to pages on the internet. You will need to set the URLs in the code or in the GUI in Blend in the properties panel.

Nothing in the template is really hooked up to anything. You will have to do that yourself but this gives you a nice presetation layer to start from for your project. Enjoy.

View this template here.

Purchase the source code here. ($3)

Most of the silverlight templates on this site are free. The small fee for some templates helps us to keep developing free designs for all to use.

Animated Siverlight Website Template

Here is another website template I created while trying to put together some 3D effects in the content transition. I took a little bit of trial and error but I think it turned out well. Basically this template includes 4 pages of content including a contact page with the form already in place for you to hook up.

The 4 main content pages are each made up of a border element. Contact, Main, Bio, Works. You'll notice that each of these elements has the opacity turned down to 0 when you open up the solution file. Bring that up to 100 to view and edit the content inside each one. The backround for the content page is controlled in the border element. Inside the border element for each content page you will find either a stackpanel, canvas or a grid depending on which one you open. I used whichever was best to design arrange the content of each page.

The scrollviewers throughout the template are customized for their look and feel and you can edit this how you want by digging down into the template styles created for each by selecting on one and then at the top of the artboard, selecting the scrollviewer tab and then "edit template" then "edit current". You should be able to figure that out from there.

You will also notice in the project a canvas called "squares". This is where the animated squares are kept that is the transition you see between each page. You will notice there is a storyboard for each content page and these square are animated within a timeline associated with each page. Each page has its own timeline. I used a behavior for each button to launch the transition. You will see the behaviors as children of each of the page buttons.

Hopefully that will give you an idea on how to edit this template if you decide to use it. Enjoy!

View this template here.

Purchase the source code here. ($3)

Most of the silverlight templates on this site are free. The small fee for some templates helps us to keep developing free designs for all to use.

Animating Siverlight Button Text

When I create a button in Blend, I never use the boring default button included in silverlight. Its boring, there are too many layers and it's way way too hard to customize. The best/easiest/fastest way to build a button in Silverlight is to just start from scratch.

You may ask, how do I do that? Easy! Simply draw out your button with a rectangle or any other shape, right click on it and choose "Make Control" then choose "Button". Anyone else who uses the default silverlight button is an amature and making life harder than it really needs to be. Additionally, its ten times easier to give the button an amazing life of animations and special effects and as a designer, that is what you should be shooting for.

You will notice that when your button is created, you have your initial rectangle or whatever shape object you started with and a content presenter. I recently had an epiphony. The content presenter that is generated by Blend is holding you back from being the great designer you want to be. You will notice as I did that you cannot animate the color of the content presenter. AGH! So if you want to make a rollover effect in the "States Manager", you won't be able to animate the foreground/color of the text!

So we are going to fix this problem with a pretty simple remedy. Immediately after you create your button, and before you do anything else, switch over to your XAML view because we are going to change a little bit of code.

You will see in the XAML the code that begins with "ContentPresenter" change "Presenter" to "Control". BINGO BANGO, you now have a foreground property in blend that allows you to animate the color of the text. You still need to use a TemplateBinding to bind the Content property. To do this, you need to click on the little square next to the content box inside the properties of the content presenter..er I mean control, and select "Template Binding" and then choose "Content".

Now you can duplicate your button style all you want and simply adjust the content on button root giving each button a different text lable as well as animate the color of your text inside the button. I hope this makes sense.

If not, you can download my sourcecode for free to the example in this blog post or check out this link as well.

Overall, this is a much better way to make a button and ten times easier than ever having to think about creating what you want starting with the monstrosity that Blend gives you with its default button. It's not very complicated but the overall point is you need to change your content presenter to a content control if you want the ability to animate the color of your button content text.

Download the source code here. (free)

Most of the silverlight templates on this site are free. The small fee for some templates helps us to keep developing free designs for all to use.

Silverlight Data Template

This is an example of a Data Template that was created about a month ago. The developer gave it to me as he had no need for it. I decided to dress it up with with some additional graphics and add some color.

The project is made up of a number of grids and a stack panel to hold the data information. Each set of infomation can be edited from the right hand side. It's a pretty simple tool really but I thought some of you might be able to use it for a project you may be working on. That's why I'm adding it to my site.

At the very least it might be worth downloading the source and taking a look at the functionality and how it was put together as well as how I edited the colors in each of the controls.

View this template here.

Purchase the source code here. ($3)

Most of the silverlight templates on this site are free. The small fee for some templates helps us to keep developing free designs for all to use.

Silverlight Website Template

About a month ago I posted a simple but incomplete website template on the Microsoft Expression Gallery and it got an amazing response. Within just two weeks of posting, it was one of the most downloaded Silverlight samples on the gallery. Did I mention that it was incomplete? Obviously people didn't care and I saw that there was some hunger for this sort of thing...especially from designers learning Blend.

So with some spare time I went to work on new web template created all within Blend 3 and without using one line of C# code. So much of the pushback from Flash designers wanting to wade into the Silverlight waters is that they now have to learn two new languages in XAML and C#. Its pretty easy to pick up XAML as long as you have some HTML background and some common sense. The C# is more of a challenge but I think closely resembles ActionScript 2.0.

First off, download the template and launch it in Blend 3 by pressing F5. Click on the Home Page link and you will notice some links on the left side of the template. These links were helpful in putting together the template and anyone wanting to build their own animated site might find them useful.

Flash designers will notice right away that I have used some animated masks and this is really the bread and butter of most flash animation artists. While the clipping path animations in Blend don't have all the abilities that a mask in flash has, you can still come up with some of what you want for animation. I have my fingers crossed for an actual full mask feature in Blend 4. In fact, I think if the Silverlight team doesn't get on the ball in this regard, they are going to frustrate some dabbling Blend designers beyond repair. Animated masks are used too heavily on the web for them not to put some priority in this area.

So take a look at my layout in the "Objects" panel and I'll explain how I set this up.

First you see a behavior in the Layout Root called [ControlStoryboardAction]. This directly controls the animation when the page first loads on the screen. Normally you would have to set this up in C# but thanks to this behavior you don't have to. You need to become very familiar with this behavior. You will learn to love it and its pretty easy to use!

After that you will notice all my canvas's. 'LowerBacks' is simply my animated backgrounds with each page that gets animated into view. The rest are the individual page sections themselves with all the elements on each page. The canvas lables should be obvious when figuring out what page it belongs to in the site navigation.

The site navigation itself is located in the bottom canvas labeled 'OpenAnimationAssets'. Each nav button has 5 behavior controls that launch the appropriate storyboard and close any others that might be open.

So each page then has its own 'open storyboard' as well as its own 'close storyboard' that can be called via the [ControlStoryboardAction] behavior that is associated with each navigational page button. Simple huh? Really its not that hard.

All of the editable web content is located in the canvas's located under the Layout Root. I have the Opacity set to 0% so you need to first select the canvas you want to work in and then turn its Opacity to 100% so you can see what you are doing. Make your edits and when you are finished, turn it back to 0% otherwise you will see it when you launch the page and that is not what you want.

Also, the template can work with any colored background. Simply select the layout root and edit its color properties.

I hope this will excite some designers out there to create their own site layouts and show them off to the rest of the Blend community. Obviously there is a lot more you can do when working with a competent developer but you don't need a lot of C# knowledge to put together a silverlight website. If there is any interest, I can create some more and put them out for you to download as well.

View this template here.

Download the source code here. (free)