Here’s a quick function on how to convert a Hex string to a Color in Silverlight. Grab the code here.
Category Archives: Uncategorized
SketchFlow Control Explorer
In a previous post I showed a screenshot of all the controls available to you in SketchFlow. The below application takes it one step further by displaying the live controls. For the record, the SketchFlow styles are re-distributable.
Testing Silverlight from Windows Live Writer
Today SmartyP (did you get that Roger, I didn’t use your name) was letting me know what Grinds his Gears which is: Why do Silverlight bloggers not embed Silverlight applications into their posts. Admittedly, I don’t have a single post that has an embedded Silverlight app.
The root of the my problem is the lack of support for embedding Silverlight into Windows Live Writer (WLW). It’s possible, with Wordpress, to embed Silverlight through the web interface, but WLW’s features outweigh what the web dashboard can do (namely pasting in screen shots without having to save them to the file system and then upload).
After a little digging tonight, I came across this post by Erno de Weerd. It details how to embed Silverlight apps into Windows Live Writer. FWIW, this method uses Tim Heuer’s Silverlight Wordpress Plugin.
Without further ado…drum roll…here’s the test:
Finally, completely unSilverlight related, I always reference Grinds his Gears. It’s such a great line, you can complain without complaining.
First InsideRIA post!!
Today marks my first post on O’Reilly’s InsideRIA. It was about last weeks Silverlight 3 / Blend 3 launch. Fore more…here’s the link: http://www.insideria.com/2009/07/silverlight-3-launch.html
Overview of Sample Data in Blend 3
One of my favorite, if not my favorite, feature of Blend 3 is Sample data. At the beginning of a project I often create a simple XML file to represent the data I’m expecting. This enables me to focus on UI tasks while the backend services are being created. Designers generally don’t go as far as creating sample data themselves, they generally hard code all the data in their comps. When the design is handed off to developers the UI has to be recreated from scratch. Needless to say, this process is manual, flawed, and unharmonious.
[put in a diagram]
Sample data in Blend 3 enables designers and developers to quickly add data without much effort (no more creating XML by hand!!!!). This post gives an visual overview of what sample data is. In a later post I’ll show how to apply Sample data to a ListBox.
Creating Sample data
The below diagram illustrates the following steps:
- Open a project in Blend 3 and locate the Data panel (this is located on the right side of the screen in the same area as the Properties and Resources panel).
- Click the Add Sample Data button in the top right of the Data Panel.
- Select Define New Sample Data. The other option, Import Sample Data from XML, enables you to bring in data you’ve created by hand.
- After selecting Define New Sample Data the a dialog box opens asking for a name, the scope of the data, and if you want the data to be enabled during runtime. Once the settings are the way you like them, click OK
- Finally, the Sample data is created.
Add a Property
Properties are very powerful and rich. Blend enables you to define strings, numbers, booleans, and images. At first, the interface looks unassuming and you probably won’t trust it to create the type of data you want. Give it a spin to see how powerful. The below screen shots show the different types and options available for each.
String
Numbers
These are integers. The Length property sets many digits you want.
Booleans
When bound, boolean data types render as check boxes.
Images
Once again, an unassuming options menu, however this is probably my favorite property. Specify a directory and Blend grabs all the images to use as sample images.
Edit values
After creating your properties, you may want to change values of the sample data. To do this, click on the Edit sample values button in the Data panels tab. This brings up the Edit Sample Values dialog box. Here you can directly work with the data.
Delete a Property
To delete a property is fairly straight forward, with one catch, you aren’t able to use the delete key on the keyboard. Instead highlight the property you want to delete, right click, and selected Remove.
Using Sample data
Now that you’ve created the sample data, how do you use it? The easiest way is to create a drag and drop the data on a Items control. The below figure shows the sample data being dragged onto a ListBox.
This is the resulting ListBox:
SketchFlow Controls
Do you remember those laminated quick reference sheets that college bookstores sold. They were suppose to be quick reference guides or cheat sheets, and were perfect impulse buys. For the most part they ended up being worthless pieces of crap. Did you really want to be that guy who pulls out a large laminated quick reference sheet? (As a side note, rather a confession, I remember having one for Word and Excel. Talk about a misguided Christmas present).
On with my point, this post is intended to be a laminated quick reference for Sketchy styles in SketchFlow.
For more info check out:
Alan Lee’s SketchFlow Demo Video from Silverlight 3/Blend 3 Launch Event
Christian Schormann’s Expression Blend 3 with SketchFlow Available for Download & SketchFlow Concepts: An Overview ()
Editing a ToolTip Style in Blend 3
ToolTips are a great way to display mouse over information, while increasing your applications accessibility. UI designers are increasingly demanding the use of rich overlays in applications. Meaning, instead of a standard Tooltip, a designer might want to add polish by adding animation or having a rich UI to a overlay. Initially you may consider wiring up a MouseEnter and MouseLeave event, then handle an overlay through the code; however, I would encourage you to take a look (or second look) at the Tooltip.
Out of the box, styling a Tooltip in Blend is a manual process. The below screenshots/descriptions show how to do this.
- First, add a Tooltip; do this in the Xaml view to look like the below Xaml.
- Next, click, in Xaml, on the <ToolTip tag. This will change the breadcrumb at the top of the Artboard to show [ToolTip]. Click on the breadcrumb and select Edit Template > Edit a Copy.
- After creating the Template, there is a chance your Artboard will look like the below image. You’ll notice that you’re in the context of editing the ToolTip template without visuals. If you experience this, go to step 4 to see how you can edit the visuals.
- To edit the ToolTip, click the Resources tab, locate the ToolTip style, right click and select Edit. The Artboard will show the visuals for the ToolTip. You can now edit the ToolTip like any other control.
YouTube video in Silverlight 3
A while back I saw a post titled something like Displaying YouTube Videos in Silverlight. The implementation included a Windowless Silverlight application with a Flash video player on top. Video controls were implemented in Silverlight, and were wired up with JavaScript.
YouTube is moving toward the h.264 encoding for their videos. (My guess is to prepare for HTML 5. It’s crazy to think that YouTube could/might move away from Flash.) Silverlight 3 is a benefactor because it can support h.264. If anyone is looking for a great mashup, make a Silverlight video player that integrates with the YouTube API.
To be explicit, this post is not about using the YouTube API; it is a proof of concept. I used the YouTube HD Ultimate Greasemonkey script to get the url of an HD video from YouTube, then used it as the source for the MediaElement.
The below screen shot shows the Silverlight poc on the left (notice the Silverlight menu) and the actual YouTube video on the right.
The code & example
Code - http://85turns.com/silverlight/zips/YouTubeHDTest.zip
ToggleButton Command for Prism
Prism Commands enables you to handle user interactions in Xaml. Even though the plumbing is there, Prism lacks commanding support for everything but Buttons. Fortunately, it’s relatively easy to create new Commands for a range of controls. This post details how to create a Checked and UnChecked Command for the ToggleButton (which can be applied to a RadioButton and a CheckBox).
Recently I had a need to create a Checked Command for a ToggleButton. There are many sources on how to create a Command, the best one probably being Erik Mork’s video, but there wasn’t a place to grab the a Command from. The intention of this post is to share the Checked and UnChecked Prism Commands for you to use it in your project. (Moving forward, it might make sense to create a repository of these Commands.)
Finally, before diving in, if you just want the code and to see an example, follow these links:
Commands
Creating the Commands is straight forward. Derive from CommandBehaviorBase and specify the type. Then, in the constructor, register the event. Below are both the Checked and UnChecked commands.
Extensions for Xaml
After creating the Commands you need to create Static methods to reference in Xaml. The Static methods are named Checked and UnChecked. They include a definition for:
- SelectedCommandBehaviorProperty
- CommandProperty
- SetCommand
- GetCommand
- OnSetCommandCallback
- GetOrCreateBehavior
In an effort to be brief I have chosen to truncate the two static methods. To take a closer look at the code, click on the image or download the code.
Checked.cs 
UnChecked.cs
Hooking everything up
After the Commands are created, bind them to the ToggleButton in Xaml. In this sample application there are three main files:
- MainPage.xaml – the presentation. This contains the binding to the Commands.
- MainPage.xaml.cs – the primary function of the code-behind is to new up the MainPageModel and set the DataContext.
- MainPageModel.cs – this is the model for the MainPage. It defines the commands the Xaml binds to as well as a property for the TextBox to bind to.
Below are images of the classes mentioned above:
MainPage.xaml
Note in this Xaml, line 20 binds to the CheckedState property in the MainPageModel. The commands are bound on line 22 and 23. Take notice of the namespace command. Instead of referencing Microsoft.Practices.Composite.Presentation.Commands it references ProjectName.CustomCommands.
MainPage.xaml.cs
This is the code-behind for the above UserControl. On the Loaded, a new instance of MainPageModel is initialized and then set as the DataContext to the UserControl. The heavy lifting is done in the MainPageModel.
MainPageModel.cs
As noted above, the MainPageModel does the heavy lifting. The following describe what happens in this file:
- Two DelegateCommands are defined for Checked and UnChecked. (line 36 and 41)
- A Property called CheckedState is defined and fires the PropertyChanged event when updated. (lines 13 – 22)
- Two methods are defined to handle the actions on the Commands. (lines 47 – 59)
The final product
Versioning your Silverlight application
When writing an enterprise level application it’s critical to have a version number. Whether it’s located on the help screen or in debug mode, this will save you so much heartache during QA. The larger the project, the more dependent your team is on the version.
Now that I’m all done ranting to the converted, let’s talk about Silverlight. From my past experience there are two ways to handle versioning:
- Create an abstracted file that contains your version number, or
- Use the Assembly version.
Both have their pros and cons. Option 1 gives you greater control of the version number, however the manual process is tedious. Option 2 enables you to use the Assemblies version, however it provides less control over the version number. Lately I’ve been going with option 2 because it takes one more step out of my deployment process.
To get the version from the Assembly
Doing this is fairly easy once you have the correct block of code. The below block of code shows how to get the version from the Assembly in the MainPage_Loaded method. Do not forget to include the System.Reflection reference.
Given the above block of code, the next question is, where is this assembly version defined? In short, the AssemblyInfo.cs file, which is located in the Properties folder.
At the bottom of the AssemblyInfo.cs file, you’ll see the version info. The directions are in the comments on how to change this. I’ve customized my version to be 0.611.*.
