OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


A Total Design Change Of Your Application With No Code

I recently did a blog post where I created a quick application that uses View Model. It looks like this:

image

I read a blog post by Phil Middlemiss called A Chrome and Glass Theme - Part 4 where he showed some really cool buttons. Well my example application could use a quick facelift, so I downloaded his code and opened up his project.

image

His project is Silverlight 3 and I am using Silverlight 4, but that doesn’t matter. I quickly saw the file I wanted, ChromeGlass.xaml.

image

I opened my SimpleRxExample project in Expression Blend and selected Add Existing Item… and I navigated to the location of the file in his project.

image

The file shows up in my project.

image

When I open the App.xaml file in my project I see that Blend has added the ChromeGlass.xaml file to the project as a Resource.

image

Now, I can right-click on an element such as the TextBox and select Edit Template –> Apply Resource –> TextBoxGlassyStyle, and give it a nice style.

image

When I run the project, it looks much nicer.

Let’s Do More

The new look of the Search button looks nice, but, I decide to download the buttons from Alan Beasley’s 10 Cool Buttons for Download in Expression Blend & Silverlight.

 image

I can just open his project, and copy one of his buttons…

image

And paste it into my project.

image

I can drag the InvokeCommandAction behavior that is on the current Search button…

image

And drag it to the new button (and then delete the original Search button).

Still More To Do…

image

So now the application looks better, but I would like to make a Design change this time rather than simply a Style change. This is where the power of MVVM really shines. With MVVM, you can change the Design of an application without changing any code.

In the existing application, you search for a website, then select it from the dropdown. A hyperlink appears and you click on the Hyperlink to navigate to the website.

A Total Re-Design

I am now ready to re-design the application. I remove the existing combo box and the Hyperlink.

image

I decide to create some sample data to make the design experience easier in Blend.

(Note: See this article on how to create sample design-time data)

image

I then create an Ellipse around the button.

image

I right-click on it in the Objects and Timeline window to convert it to a Layout Path.

image

This creates a [PathListBox] bound to the Ellipse.

image

I can click on the [PathListBox] to bind it to the data.

image

I bind it to the existing colWebsites collection.

(Note: To learn more about Path Layout see: http://electricbeach.org/?p=529)

image

I edit the template for the [PathListBox]

image

… and change the layout to a Grid and place a Hyperlink in the Grid.

image

I then bind the Content of the Hyperlink to the name of the website and the NavigateUri to the website address.

image

I make a few adjustments to the settings for the [PathListBox] and the color of the Hyperlink, until it looks the way I want.

image

The final result reflects a total design change.

Now you type a search in the TextBox, click the Search button, and the sites appear around the Search button. You click on a site name to navigate to the site.

You can see a live example here:
http://silverlight.adefwebserver.com/simplerxexampleredesigned/

You can download the code here:
http://silverlight.adefwebserver.com/simplerxexampleredesigned/SimpleRxExample_Redesigned.zip





Comments are closed.
Showing 1 Comment
Avatar  Alan Beasley 7 years ago

Very cool Michael, & another good example of zero code designing. Just get rid of that silly green button! ha ha<br><br>Cheers for also putting up a working example for people to play with, it's well worth it!!!<br><br>Keep up the good work.<br><br>Alan