Brandon Truong

What's the first thing you think of when you wake up in the morning?

2011-02-19T19:33:00.001+11:00

could I get back to sleep again? lol

Winamp Tool kills Silverlight application

2010-07-28T20:20:00.000+10:00

I have experienced something really strange. When I installed Winamp, a music player, my Silverlight application cant run in Debug mode any more.

Anyway, I am just posting about this, so if any one has their Silverlight app can’t run in Debug mode all of the sudden, you might check if you have installed Winamp tool or not?

Cheers,

Use Enum as ItemsSource

2010-04-08T23:14:00.004+10:00

Imagine we have an Enum type and we want to use that Enum type to be an ItemsSource of ListBox or ComboBox. Bolow is an example of an Enum type called AirFareBookingStatus

   1: public enum AirFareBookingStatus

   2: {

   3:     AlreadyPaid,

   4:     Cancelled,

   5:     Delayed,

   6:     Deleted,

   7:     InProcessing,

   8:     New

   9: }

What we want to achieve is to populate all the statuses from the Enum to a ListBox or ComboBox.

There is already a solution for this from the Silverlight forum. The idea is to go through all the Field and put them into a IEnumerable of KeyValuepair

   1: IEnumerable<KeyValuePair<string, AirFareBookingStatus>> results;

   2: var x = typeof(AirFareBookingStatus).GetFields().Where(info => info.FieldType.Equals(typeof(AirFareBookingStatus)));

   3: results = from field in x

   4:           select new KeyValuePair<string, AirFareBookingStatus>(field.Name, (AirFareBookingStatus) Enum.Parse(typeof(AirFareBookingStatus), field.Name, false));

Then all we have to do is assign the result to ListBox or ComboBox ItemsSource

   1: lstStatus.ItemsSource = results;

   2: cmbStatus.ItemsSource = results;

That would be good enough for it to work.

But we can even make it more generic by creating a helper function as below

   1: public static class Helper

   2: {

   3:     internal static IEnumerable<KeyValuePair<string, T>> GetEnumList<T>()

   4:     {

   5:         var x = typeof(T).GetFields().Where(info => info.FieldType.Equals(typeof(T)));

   6:         return from field in x

   7:                select new KeyValuePair<string, T>(field.Name, (T) Enum.Parse(typeof(T), field.Name, false));

   8:     }

   9: }

Then, we can call that function for every Enum type we have. For example

   1: lstStatus.ItemsSource = Helper.GetEnumList<AirFareBookingStatus>();

   2: cmbColors.ItemsSource = Helper.GetEnumList<ColorEnum>();

There is still one problem left we have. The item still displays the whole object, so make it display correctly, we need to create DataTemplate resource

   1: <DataTemplate x:Key="KeyValuePairDataTemplate">

   2:     <TextBlock Text="{Binding Key}" />

   3: </DataTemplate>

Then apply that DataTemplate to the ItemTemplate of ListBox or ComboBox as below

   1: <ListBox x:Name="lstStatus"

   2:     ItemTemplate="{StaticResource KeyValuePairDataTemplate}" />

3:

   4: <ComboBox x:Name="cmbColors"

   5:     ItemTemplate="{StaticResource KeyValuePairDataTemplate}" />

That’s it. Hope that helps.

Continue …

Now, I have run into another problem. Doing that way above is all good, except the name won’t be as flexible. So, I am going to Description attribute to display data instead of the normal name of the Enum. To do that, I’ve changed a bit of my Enum like below

   1: public enum AirFareBookingStatus   2: {   3:     [Description("Already Paid")]   4:     AlreadyPaid,   5:     [Description("i am cancelled")]   6:     Cancelled,   7:     [Description("I got delayed")]   8:     Delayed,   9:     [Description("oh man i am about to be deleted")]  10:     Deleted,  11:     [Description("who is processing me")]  12:     InProcessing,  13:     [Description("I am brand new babe")]  14:     New  15: }

Next, I changed a bit in my helper function as well. It’ll get the Description attribute and make it to be Key

       1: internal static IEnumerable<KeyValuePair<string, T>> GetEnumList<T>()   2:        {   3:            var x = typeof(T).GetFields().Where(info => info.FieldType.Equals(typeof(T)));   4:            return from field in x   5:                   select new KeyValuePair<string, T>(GetEnumDescription(field), (T)Enum.Parse(typeof(T), field.Name, false));    6:        }   7:     8: private static string GetEnumDescription(FieldInfo field)   9:        {  10:            DescriptionAttribute[] attributes = (DescriptionAttribute[])field.GetCustomAttributes(typeof(DescriptionAttribute), false);  11:            if (attributes.Length > 0)  12:            {  13:                return attributes[0].Description;  14:            }  15:            else  16:            {  17:                return field.Name;  18:            }  19:        }

Finally, we will have something like this

That’s it. Let me know if you have any comments.

Creating a Three-Column Silverlight ListBox

2010-02-03T11:44:00.001+11:00

via expression.microsoft.com

Posted via web from brandontruong's posterous

jQuery source viewer

2010-02-01T10:20:00.001+11:00

Check out this website I found at james.padolsey.com

This is extremely useful for jQuery developers

Posted via web from brandontruong's posterous

jQuery UI DatePicker: Disable Specified Days

2010-01-27T15:39:00.001+11:00

jQuery UI DatePicker: Disable Specified Days

Written by David Walsh on Tuesday, January 26, 2010

9 Comments 3 Digg Facebook Reddit StumbleUpon S&S http://davidwalsh.name/jquery-datepicker-disable-days">Twitter PDF

One project I’m currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI’s DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here’s the jQuery javascript I used to accomplish that.

View Demo

The jQuery Javascript
/* create an array of days which need to be disabled */  var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];    /* utility functions */  function nationalDays(date) {  	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();  	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);  	for (i = 0; i < disabledDays.length; i++) {  		if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {  			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);  			return [false];  		}  	}  	//console.log('good:  ' + (m+1) + '-' + d + '-' + y);  	return [true];  }  function noWeekendsOrHolidays(date) {  	var noWeekend = jQuery.datepicker.noWeekends(date);  	return noWeekend[0] ? nationalDays(date) : noWeekend;  }    /* taken from mootools */  function ArrayIndexOf(array,item,from){  	var len = array.length;  	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){  		if (array[i] === item) return i;  	}  	return -1;  }  /* taken from mootools */  function ArrayContains(array,item,from){  	return ArrayIndexOf(array,item,from) != -1;  }    /* create datepicker */  jQuery(document).ready(function() {  	jQuery('#date').datepicker({  		minDate: new Date(2010, 0, 1),  		maxDate: new Date(2010, 5, 31),  		dateFormat: 'DD, MM, d, yy',  		constrainInput: true,  		beforeShowDay: noWeekendsOrHolidays  	});  });  
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1/* create an array of days which need to be disabled */
2var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];
3
4/* utility functions */
5function nationalDays(date) {
6 var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
7 //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
8 for (i = 0; i < disabledDays.length; i++) {
9 if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
10 //console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
11 return [false];
12 }
13 }
14 //console.log('good: ' + (m+1) + '-' + d + '-' + y);
15 return [true];
16}
17function noWeekendsOrHolidays(date) {
18 var noWeekend = jQuery.datepicker.noWeekends(date);
19 return noWeekend[0] ? nationalDays(date) : noWeekend;
20}
21
22/* taken from mootools */
23function ArrayIndexOf(array,item,from){
24 var len = array.length;
25 for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
26 if (array[i] === item) return i;
27 }
28 return -1;
29}
30/* taken from mootools */
31function ArrayContains(array,item,from){
32 return ArrayIndexOf(array,item,from) != -1;
33}
34
35/* create datepicker */
36jQuery(document).ready(function() {
37 jQuery('#date').datepicker({
38 minDate: new Date(2010, 0, 1),
39 maxDate: new Date(2010, 5, 31),
40 dateFormat: 'DD, MM, d, yy',
41 constrainInput: true,
42 beforeShowDay: noWeekendsOrHolidays
43 });
44});

The base code is taken from this forum post. You’ll note that I created an array of dates in string format which also accommodates for comparing year.

View Demo

I’d like to see jQuery UI implement a standard way of disabling days. Their DatePicker is very nice though so I can’t complain too much!

Download PDF

Related Posts
Adding Days To Dates In MySQL
MooTools-Like Element Creation in jQuery
How to Sniff & Disable Firebug
PHP Function – Calculating Days In A Month
Logging Information to the Firebug Javascript Console

-->

Follow via RSS Epic Discussion

January 26 / #

Mark says:

I have to admit, I wish Mootools came with such a wide variaty of UI plugins…

All and all, I think you accomplished your goal very well! Good stuff.

Reply

January 26 / #

Salih Gedik says:

Nice. But I rarely need jQ. Mootools FTW isn’t it?

Reply

January 26 / #

Simeon says:

Nice post! Can be easily expanded by populating he “disabledDays” using PHP to find all weekends, holidays, etc. I wonder what the performance impact is though if you span across several years as a typical selection might allow?

Reply

January 26 / #

Savageman says:

@mark: you should try this Mootools DatePicker (also works for time): http://www.monkeyphysics.com/mootools/script/2/datepicker

Doesn’t have a beforeShowDay option though…

Reply

January 26 / #

Douglas Neiner says:

I would remove all the MooTools helpers :) and just use the jQuery native $.inArray function:

Change this line: ArrayContains(disabledDays,(m+1) + ‘-’ + d + ‘-’ + y) to this instead: $.inArray(disabledDays,(m+1) + ‘-’ + d + ‘-’ + y) != -1

Then you don’t need to two other functions from MooTools.

Reply

January 26 / #

Douglas Neiner says:

@Douglas Neiner: Sorry, flip the arguments. $.inArray( value, array )

Reply

January 26 / #

David Walsh says:

@Douglas Neiner: I’m a complete MooTools nerd — I didn’t even think to check the jQuery API. Will update.

Reply

January 26 / #

Josh Stauffer says:

Interesting dilema and solution. My problem with the jQuery Datepicker is figuring out how to store selected start and end dates in a cookie.

Reply

January 26 / #

Brad Zickafoose says:

Is it possible to have the DatePicker block out today’s date as well as past dates from being selected, only allowing tomorrow and future dates available for selection?

Reply

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

via davidwalsh.name

Posted via web from brandontruong's posterous

Silverlight Unit Testing Framework: Asynchronous Testing of Behaviors

2010-01-27T14:08:00.001+11:00

Last month, I bogged about Unit Testing ViewModels AND Views using the Silverlight Unit Testing Framework. I wanted to take that post a step further and talk about some more advanced testing scenarios that are possible.
The site itself provides a lot of information about how to get started and what is available with the framework. One thing to keep in mind that is a radical shift from other testing frameworks is that the Silverlight testing framework runs on the UI thread. This means it does not spawn multiple threads for multiple tests and in fact requires the tests to run "one at a time" so they can take advantage of the test surface that is supplied.
This is a bit different than other frameworks but in my opinion, makes a lot of sense when dealing with Silverlight. The framework provides incredible flexibility for configuring and categorizing your tests.
If you are searching for a very comprehensive example of the framework in use, look no further than the Silverlight Toolkit. This comes with all source code and in fact uses the testing framework for its tests. You will find not only advanced scenarios for testing, but thousands upon thousands of tests! (I also am guessing that a new standard for PC performance has been invented by mistake ... let's all compile the entire toolkit and compare how long it takes!)
Tagging Tests

One thing you'll find if you run the toolkit tests is that you can enter a tag to filter tests. For example, type in "Accordion" to only run the 800 or so unit tests for accordion-type controls.
To use tag functionality, simply "tag" your test like this:
view source print ?
1.[TestClass]
2.[Tag("MEF")]
3.public class PartModuleTest
4.{
5.}

I've tagged the test to be a MEF-related test. When I wire up the framework, I can filter the tag like this:
view source print ?
1.UnitTestSettings settings = UnitTestSystem.CreateDefaultSettings();
2.settings.TagExpression = "MEF";
3.this.RootVisual = UnitTestSystem.CreateTestPage(settings);

When I run the tests, only my tests tagged with MEF will run! The toolkit provides an example of a UI that allows you to select the tag, then run the test.
Asynchronous Tests

It is often necessary to test methods that are asynchronous or require event coordination. An example may be a service that must wait on return values, or a user control that must be loaded into the framework before you can test it. The Silverlight Unit Testing Framework provides the Asynchronous tag to facilitate this type of test. This tells the framework not to move onto the next test nor consider the current test method complete until an explicit call to TestComplete is made.
There are several "helper" methods supplied for asynchronous processing that we'll explore in a minute. To use these methods requires inheriting from one of the base test classes such as SilverlightTest which provides the methods as well as the test surface to add controls to.
In PRISM, MEF, and MVVM Part 1 of 3: Unity Glue I explored various options for binding the view model to the view. The 3rd and final method I reviewed was using an attached behavior. I would like to write some unit tests for that behavior (indeed, if I were a test-driven development or TDD purist, I would have written those tests first).
In order to test the behavior, I need to attach it to a FrameworkElement and then validate it has done what I expected it to do. But how do I go about doing that in our unit test environment?
Attached Behaviors

Similar to other controls in other frameworks, Silverlight controls have a distinct life cycle. It varies slightly depending on whether the control has been generated in XAML or through code. There is a great summary table of these events on Dave's Blog. What's important to note is that values and properties are set as soon as you, well, set them, but bindings don't take effect until they are inserted into the visual tree. In XAML, the XAML node becomes part of the tree and fires the Loaded event once it is fully integrated. In code, this happens after the element is added as the child of some other element that is in the tree. This allows Silverlight to parse the hierarchy and propagate dependency properties.
So what we essentially want to do is take our behavior, attach it to an element, and then wait for the Loaded event to fire so we can inspect the element and see that it has been modified accordingly (in this case, we expect that the DataContext property has been set to our view model).
Setting up the Project
The testing framework provides some handy templates for getting started. I add a new project and select the Silverlight Test Project template. I then add references to the projects I'll be testing and the supporting frameworks like PRISM and MEF.
Next, I'll want to build some helper classes to help me test my functionality.
Helper Classes
I like to create a folder called Helper and place my stubs, mocks, and other helper classes there. These may be utilities, like the Exception Expected utility I use, or classes that are used for the testing framework.
First, I'll create a test view model with a simple string and string collection property for testing:
view source print ?
01.public class TestViewModel
02.{
03.    public TestViewModel()
04.    {
05.        ListOfItems = new List<string>();
06.    }
07.
08.    public TestViewModel(List<string> items)
09.    {
10.        ListOfItems = items;
11.    }
12.
13.    public string Property { get; set; }
14.
15.    public List<string> ListOfItems { get; set; }
16.}

If my view models have common methods described in a base class or interface, I might use a mocking framework to mock the class instead.
The Test Class
The behavior I created has an affinity to the Unity inversion of control (IoC) container. It could be refactored otherwise, but it made sense for the sake of the demonstration. Therefore, I'll need to have a container for testing, as well as the view model. My test class starts out looking like this (notice I base it on SilverlightTest):
view source print ?
01.[TestClass]
02.public class ViewModelBehaviorTest : SilverlightTest
03.{
04.    const string TESTPROP = "Test Property";
05.
06.    IUnityContainer _container;
07.
08.    TestViewModel _viewModel;
09.
10.    [ClassInitialize]
11.    public void ClassInitialize()
12.    {
13.        _container = new UnityContainer();
14.
15.        _viewModel = new TestViewModel() { Property = TESTPROP };
16.        _container.RegisterInstance<TestViewModel>(_viewModel);
17.
18.        ViewModelBehavior.Container = _container;
19.    }
20.}

I create a reference to the entire test class for the container and the test view model. When the class is initialized (this is one-time setup, before all tests are run) I create a container, a view model, and tell the container that anytime someone asks for the view model, give them the specific instance I created. I also set the container on the type for the view model behavior class, so it knows what to use when resolving the view model.
The Code Behind Test
For my first test, I'll programmatically attach the behavior and test that it works. The view model behavior takes in a string that is the fully qualified type name for the view model, and then uses the unity container to resolve it. Therefore, my test looks like this:
view source print ?
01.[TestMethod]
02.[Asynchronous]
03.[Description("Test creating an element and attaching in code behind.")]
04.public void TestAttach()
05.{
06.    TextBlock textBlock = new TextBlock();
07.    textBlock.SetValue(ViewModelBehavior.ViewModelProperty, typeof(TestViewModel).AssemblyQualifiedName);
08.
09.    textBlock.Loaded += (o, e) =>
10.    {
11.        Assert.IsNotNull(textBlock.DataContext, "The data context was never bound.");
12.        Assert.AreSame(textBlock.DataContext, _viewModel, "The data context was not bound to the correct view model.");
13.
14.        EnqueueTestComplete();
15.    };
16.
17.    TestPanel.Children.Add(textBlock);
18.}

There's a few things going on here, so let's break them down!
The TestMethod attribute tags this method to be run by the framework. It is decorated with a description, which I can view on the output when the test is run and helps make the test more, ah, descriptive. The first thing I do is create a test block and attach the view model property. Here, I'm taking the test view model and getting the fully qualified name and using that to set the attached property. We want to make sure everything works fine and there are no errors during binding, so this is where the asynchronous pieces come into play.
The Asynchronous tag tells the framework that we're waiting on events, so don't consider this test complete until we explicitly tell the framework it's complete. When the text block fires the Loaded event, we confirm that the data context is not null and that it in fact contains the exact instance of the view model we created in the class initialization. Then we tell the framework the test is complete by calling EnqueueTestComplete, which is provided by the base class.
Finally, if you were to run this without the last line, the test would stall because the text block would never get loaded. We add it as a child of the test surface, and this injects it into the visual tree and fires the loaded event.
The XAML Test
I'm not completely confident with this test because the whole reason for creating a behavior was so I could attach the view model in XAML and not use code behind. Therefore, I should really test attaching this behavior through XAML. So, at the top of the test class we'll create the necessary XAML and wrap it in a UserControl:
view source print ?
01.const string TESTXAML =
02.    "<UserControl " +
03.        "xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " +
04.        "xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" " +
05.        "xmlns:vm=\"clr-namespace:PRISMMEF.Common.Behavior;assembly=PRISMMEF.Common\">" +
06.            "<Grid x:Name=\"LayoutRoot\" Background=\"White\" " +
07.                "vm:ViewModelBehavior.ViewModel=\"PRISMMEF.Tests.Helper.TestViewModel, PRISMMEF.Tests, Version=1.0.0.0\">" +
08.                "<ListBox x:Name=\"ListBox\" ItemsSource=\"{Binding ListOfItems}\"/>" +
09.    "</Grid></UserControl>";

If you think the constant is ugly, you can always add an actual XAML file, set it as an embedded resource, then read it in instead. That would give you the full functionality of the editor to tweak the test code. Here, we simply create a control with a grid and a list box. The list box uses the attached behavior and also binds the list.
I want to test the list binding as well, so I add a collection to my test class:
view source print ?
1..
2.private static readonly List<string> _testCollection = new List<string> { "test1", "test2" };
3..

In the class initialize method, I'll pass this into the view model's constructor so it is set on the ListOfItems property.
Now, we can create the control from XAML, load it, and test it:
view source print ?
01.[TestMethod]
02.[Asynchronous]
03.[Description("Test creating from XAML")]
04.public void TestFromXaml()
05.{
06.    UserControl control = XamlReader.Load(TESTXAML) as UserControl;
07.
08.    control.Loaded += (o, e) =>
09.    {
10.        ListBox listBox = control.FindName("ListBox") as ListBox;
11.
12.        Assert.IsNotNull(listBox, "ListBox was not found.");
13.        Assert.IsNotNull(listBox.DataContext, "The data context was never bound.");
14.        Assert.AreSame(listBox.DataContext, _viewModel, "The data context was not bound to the correct view model.");
15.
16.        IEnumerable<string> list = listBox.ItemsSource as IEnumerable<string>;
17.        List<string> targetList = new List<string>(list);
18.        CollectionAssert.AreEquivalent(targetList, _testCollection, "Collection not properly bound.");
19.
20.        EnqueueTestComplete();
21.    };
22.
23.    TestPanel.Children.Add(control);
24. }

Now we load the control from XAML and wire in the Loaded event to test for the data context and the instance. Then, I take the items from the list box itself and compare them with the original list using CollectionAssert. The AreEquivalent does a set comparison. Then we signal the test is complete.
There's no code for this example because it was very straightforward and I'll likely be posting a more comprehensive example in the future as the result of a talk I'll be giving. Be sure to tune into MSDN's geekSpeak on Wednesday, February 17th, 2010 when I will be the guest to cover exclusively the topic of the Silverlight Unit Testing Framework (the talks are all stored on the site in case you read this after the event).
Thanks!

via csharperimage.jeremylikness.com

Posted via web from brandontruong's posterous

Silverlight Unit Testing Framework: Asynchronous Testing of Behaviors

2010-01-27T13:33:00.001+11:00

Last month, I bogged about Unit Testing ViewModels AND Views using the Silverlight Unit Testing Framework. I wanted to take that post a step further and talk about some more advanced testing scenarios that are possible.
The site itself provides a lot of information about how to get started and what is available with the framework. One thing to keep in mind that is a radical shift from other testing frameworks is that the Silverlight testing framework runs on the UI thread. This means it does not spawn multiple threads for multiple tests and in fact requires the tests to run "one at a time" so they can take advantage of the test surface that is supplied.
This is a bit different than other frameworks but in my opinion, makes a lot of sense when dealing with Silverlight. The framework provides incredible flexibility for configuring and categorizing your tests.
If you are searching for a very comprehensive example of the framework in use, look no further than the Silverlight Toolkit. This comes with all source code and in fact uses the testing framework for its tests. You will find not only advanced scenarios for testing, but thousands upon thousands of tests! (I also am guessing that a new standard for PC performance has been invented by mistake ... let's all compile the entire toolkit and compare how long it takes!)
Tagging Tests

One thing you'll find if you run the toolkit tests is that you can enter a tag to filter tests. For example, type in "Accordion" to only run the 800 or so unit tests for accordion-type controls.
To use tag functionality, simply "tag" your test like this:
view source print ?
1.[TestClass]
2.[Tag("MEF")]
3.public class PartModuleTest
4.{
5.}

I've tagged the test to be a MEF-related test. When I wire up the framework, I can filter the tag like this:
view source print ?
1.UnitTestSettings settings = UnitTestSystem.CreateDefaultSettings();
2.settings.TagExpression = "MEF";
3.this.RootVisual = UnitTestSystem.CreateTestPage(settings);

When I run the tests, only my tests tagged with MEF will run! The toolkit provides an example of a UI that allows you to select the tag, then run the test.
Asynchronous Tests

It is often necessary to test methods that are asynchronous or require event coordination. An example may be a service that must wait on return values, or a user control that must be loaded into the framework before you can test it. The Silverlight Unit Testing Framework provides the Asynchronous tag to facilitate this type of test. This tells the framework not to move onto the next test nor consider the current test method complete until an explicit call to TestComplete is made.
There are several "helper" methods supplied for asynchronous processing that we'll explore in a minute. To use these methods requires inheriting from one of the base test classes such as SilverlightTest which provides the methods as well as the test surface to add controls to.
In PRISM, MEF, and MVVM Part 1 of 3: Unity Glue I explored various options for binding the view model to the view. The 3rd and final method I reviewed was using an attached behavior. I would like to write some unit tests for that behavior (indeed, if I were a test-driven development or TDD purist, I would have written those tests first).
In order to test the behavior, I need to attach it to a FrameworkElement and then validate it has done what I expected it to do. But how do I go about doing that in our unit test environment?
Attached Behaviors

Similar to other controls in other frameworks, Silverlight controls have a distinct life cycle. It varies slightly depending on whether the control has been generated in XAML or through code. There is a great summary table of these events on Dave's Blog. What's important to note is that values and properties are set as soon as you, well, set them, but bindings don't take effect until they are inserted into the visual tree. In XAML, the XAML node becomes part of the tree and fires the Loaded event once it is fully integrated. In code, this happens after the element is added as the child of some other element that is in the tree. This allows Silverlight to parse the hierarchy and propagate dependency properties.
So what we essentially want to do is take our behavior, attach it to an element, and then wait for the Loaded event to fire so we can inspect the element and see that it has been modified accordingly (in this case, we expect that the DataContext property has been set to our view model).
Setting up the Project
The testing framework provides some handy templates for getting started. I add a new project and select the Silverlight Test Project template. I then add references to the projects I'll be testing and the supporting frameworks like PRISM and MEF.
Next, I'll want to build some helper classes to help me test my functionality.
Helper Classes
I like to create a folder called Helper and place my stubs, mocks, and other helper classes there. These may be utilities, like the Exception Expected utility I use, or classes that are used for the testing framework.
First, I'll create a test view model with a simple string and string collection property for testing:
view source print ?
01.public class TestViewModel
02.{
03.    public TestViewModel()
04.    {
05.        ListOfItems = new List<string>();
06.    }
07.
08.    public TestViewModel(List<string> items)
09.    {
10.        ListOfItems = items;
11.    }
12.
13.    public string Property { get; set; }
14.
15.    public List<string> ListOfItems { get; set; }
16.}

If my view models have common methods described in a base class or interface, I might use a mocking framework to mock the class instead.
The Test Class
The behavior I created has an affinity to the Unity inversion of control (IoC) container. It could be refactored otherwise, but it made sense for the sake of the demonstration. Therefore, I'll need to have a container for testing, as well as the view model. My test class starts out looking like this (notice I base it on SilverlightTest):
view source print ?
01.[TestClass]
02.public class ViewModelBehaviorTest : SilverlightTest
03.{
04.    const string TESTPROP = "Test Property";
05.
06.    IUnityContainer _container;
07.
08.    TestViewModel _viewModel;
09.
10.    [ClassInitialize]
11.    public void ClassInitialize()
12.    {
13.        _container = new UnityContainer();
14.
15.        _viewModel = new TestViewModel() { Property = TESTPROP };
16.        _container.RegisterInstance<TestViewModel>(_viewModel);
17.
18.        ViewModelBehavior.Container = _container;
19.    }
20.}

I create a reference to the entire test class for the container and the test view model. When the class is initialized (this is one-time setup, before all tests are run) I create a container, a view model, and tell the container that anytime someone asks for the view model, give them the specific instance I created. I also set the container on the type for the view model behavior class, so it knows what to use when resolving the view model.
The Code Behind Test
For my first test, I'll programmatically attach the behavior and test that it works. The view model behavior takes in a string that is the fully qualified type name for the view model, and then uses the unity container to resolve it. Therefore, my test looks like this:
view source print ?
01.[TestMethod]
02.[Asynchronous]
03.[Description("Test creating an element and attaching in code behind.")]
04.public void TestAttach()
05.{
06.    TextBlock textBlock = new TextBlock();
07.    textBlock.SetValue(ViewModelBehavior.ViewModelProperty, typeof(TestViewModel).AssemblyQualifiedName);
08.
09.    textBlock.Loaded += (o, e) =>
10.    {
11.        Assert.IsNotNull(textBlock.DataContext, "The data context was never bound.");
12.        Assert.AreSame(textBlock.DataContext, _viewModel, "The data context was not bound to the correct view model.");
13.
14.        EnqueueTestComplete();
15.    };
16.
17.    TestPanel.Children.Add(textBlock);
18.}

There's a few things going on here, so let's break them down!
The TestMethod attribute tags this method to be run by the framework. It is decorated with a description, which I can view on the output when the test is run and helps make the test more, ah, descriptive. The first thing I do is create a test block and attach the view model property. Here, I'm taking the test view model and getting the fully qualified name and using that to set the attached property. We want to make sure everything works fine and there are no errors during binding, so this is where the asynchronous pieces come into play.
The Asynchronous tag tells the framework that we're waiting on events, so don't consider this test complete until we explicitly tell the framework it's complete. When the text block fires the Loaded event, we confirm that the data context is not null and that it in fact contains the exact instance of the view model we created in the class initialization. Then we tell the framework the test is complete by calling EnqueueTestComplete, which is provided by the base class.
Finally, if you were to run this without the last line, the test would stall because the text block would never get loaded. We add it as a child of the test surface, and this injects it into the visual tree and fires the loaded event.
The XAML Test
I'm not completely confident with this test because the whole reason for creating a behavior was so I could attach the view model in XAML and not use code behind. Therefore, I should really test attaching this behavior through XAML. So, at the top of the test class we'll create the necessary XAML and wrap it in a UserControl:
view source print ?
01.const string TESTXAML =
02.    "<UserControl " +
03.        "xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " +
04.        "xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" " +
05.        "xmlns:vm=\"clr-namespace:PRISMMEF.Common.Behavior;assembly=PRISMMEF.Common\">" +
06.            "<Grid x:Name=\"LayoutRoot\" Background=\"White\" " +
07.                "vm:ViewModelBehavior.ViewModel=\"PRISMMEF.Tests.Helper.TestViewModel, PRISMMEF.Tests, Version=1.0.0.0\">" +
08.                "<ListBox x:Name=\"ListBox\" ItemsSource=\"{Binding ListOfItems}\"/>" +
09.    "</Grid></UserControl>";

If you think the constant is ugly, you can always add an actual XAML file, set it as an embedded resource, then read it in instead. That would give you the full functionality of the editor to tweak the test code. Here, we simply create a control with a grid and a list box. The list box uses the attached behavior and also binds the list.
I want to test the list binding as well, so I add a collection to my test class:
view source print ?
1..
2.private static readonly List<string> _testCollection = new List<string> { "test1", "test2" };
3..

In the class initialize method, I'll pass this into the view model's constructor so it is set on the ListOfItems property.
Now, we can create the control from XAML, load it, and test it:
view source print ?
01.[TestMethod]
02.[Asynchronous]
03.[Description("Test creating from XAML")]
04.public void TestFromXaml()
05.{
06.    UserControl control = XamlReader.Load(TESTXAML) as UserControl;
07.
08.    control.Loaded += (o, e) =>
09.    {
10.        ListBox listBox = control.FindName("ListBox") as ListBox;
11.
12.        Assert.IsNotNull(listBox, "ListBox was not found.");
13.        Assert.IsNotNull(listBox.DataContext, "The data context was never bound.");
14.        Assert.AreSame(listBox.DataContext, _viewModel, "The data context was not bound to the correct view model.");
15.
16.        IEnumerable<string> list = listBox.ItemsSource as IEnumerable<string>;
17.        List<string> targetList = new List<string>(list);
18.        CollectionAssert.AreEquivalent(targetList, _testCollection, "Collection not properly bound.");
19.
20.        EnqueueTestComplete();
21.    };
22.
23.    TestPanel.Children.Add(control);
24. }

Now we load the control from XAML and wire in the Loaded event to test for the data context and the instance. Then, I take the items from the list box itself and compare them with the original list using CollectionAssert. The AreEquivalent does a set comparison. Then we signal the test is complete.
There's no code for this example because it was very straightforward and I'll likely be posting a more comprehensive example in the future as the result of a talk I'll be giving. Be sure to tune into MSDN's geekSpeak on Wednesday, February 17th, 2010 when I will be the guest to cover exclusively the topic of the Silverlight Unit Testing Framework (the talks are all stored on the site in case you read this after the event).
Thanks!

via csharperimage.jeremylikness.com

Posted via web from brandontruong's posterous

Unit Tests for ViewModels AND Views in Silverlight

2010-01-27T13:07:00.001+11:00

Over the past few posts I've been exploring models for modularized Silverlight applications that follow the MVVM pattern (using Prism/CAL). In this post, I'd like to cover unit testing, and writing appropriate tests not just for the view model, but the view itself.
Before we continue, I'm going to assume you've read:
Dynamic Module Loading with Silverlight Navigation using Prism
MVVM Composition in Silverlight
Simplifying Asynchronous Calls in Silverlight using Action

These articles form the core of what I'm about to discuss. I also want to make sure you're familiar with the Silverlight unit testing framework. You can download it and review some articles about how to use it over at the Unit Test Framework for Microsoft Silverlight page. I highly recommend pulling down the project and class templates as they will make your life easier!
The testing framework for Silverlight sets up a project that you run, and that project will then create a visual page that displays the results of tests. What's important is that the test framework will not only support class tests, but can also host controls and test the hosted controls as well. Do we even want to do this? I think so.
Set up your test project and make it the runnable one by adding a new project to your existing Silverlight solution, using the Silverlight project template, then right-clicking on the project and setting it as the start-up project.
Let's get started with a real example. I want to control the visibility of a control based on a boolean value in the view model, so I create a converter that takes in a boolean and returns visibility. I can bind the visibility like this:
view source print ?
1.<TextBlock Text="Conditional Text" Visibility="{Binding ConditionFlag,Converter={StaticResource BoolVisibilityConverter}}">

The code for the converter is simple:
view source print ?
1.public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
2.{
3.    return (bool)value ? Visibility.Visible : Visibility.Collapsed;
4.}

To test that we get what we want, simply add a new class in your test project (use the Silverlight Test Class template). With a little bit of typing you will end up with something like this:
view source print ?
01.[TestClass]
02.public class BoolVisibilityConverterTest
03.{
04.    BoolVisibilityConverter _target;
05.
06.    [TestInitialize]
07.    public void Initialize()
08.    {
09.        _target = new BoolVisibilityConverter();
10.    }
11.
12.    [TestMethod]
13.    public void TestTrue()
14.    {
15.        object result = _target.Convert(true, typeof(bool), null, CultureInfo.CurrentCulture);
16.        Assert.IsNotNull(result, "Converter returned null.");
17.        Assert.AreEqual(Visibility.Visible, result, "Converter returned invalid result.");
18.    }
19.
20.    [TestMethod]
21.    public void TestFalseNoParameter()
22.    {
23.        object result = _target.Convert(false, typeof(bool), null, CultureInfo.CurrentCulture);
24.        Assert.IsNotNull(result, "Converter returned null.");
25.        Assert.AreEqual(Visibility.Collapsed, result, "Converter returned invalid result.");
26.    }
27.}

Not rocket science there ... but it's nice to start out with a few green lights. When you run it, you'll see that your two tests passed and all is well (you can, of course, assert something invalid to see what a failure looks like).
Now let's test a view model. Our view model takes in a IService reference so that it can log a user in. It has bindings for username and password and a login command. The service looks like this:
view source print ?
1.public interface IService
2.{
3.   void Login(string username, string password, Action<bool> result);
4.}
So the view model looks like this:
view source print ?
001.public class ViewModel : INotifyPropertyChanged
002.{
003.   private IService _service;
004.
005.   public ViewModel(IService service)
006.    {
007.        _service = service;
008.
009.        LoginCommand = new DelegateCommand<object>( o=>CommandLogin );
010.    }
011.
012.    private bool _isDirty;
013.
014.    public bool IsDirty
015.    {
016.        get { return _isDirty; }
017.    }
018.
019.    private string _username, _password;
020.
021.    public string Username
022.    {
023.        get { return _username; }
024.        set
025.        {
026.            if (value != null && !value.Equals(_username))
027.            {
028.                _username = value;
029.                OnPropertyChanged("UserName");
030.            }
031.        }
032.    }
033.
034.    public string Password
035.    {
036.        get { return _password; }
037.        set
038.        {
039.            if (value != null && !value.Equals(_password))
040.            {
041.                _password = value;
042.                OnPropertyChanged("Password");
043.            }
044.        }
045.    }
046.
047.   public DelegateCommand<object> LoginCommand { get; set; }
048.
049.   public void CommandLogin()
050.    {
051.        if (string.IsNullOrEmpty(_username))
052.        {
053.            throw new ValidationException("Username is required.");
054.        }
055.
056.        if (string.IsNullOrEmpty(_password))
057.        {
058.            throw new ValidationException("Password is required.");
059.        }
060.
061.        _service.Login(_username, _password, (result) =>
062.        {
063.            if (result)
064.            {
065.                // logic to navigate to a new page
066.            }
067.            else
068.            {
069.                throw new ValidationException("The username/password combination is invalid.");
070.            }
071.        });
072.    }
073.
074.    protected void OnPropertyChanged(string property)
075.    {
076.        PropertyChangedEventHandler handler = PropertyChanged;
077.        if (handler != null)
078.        {
079.            handler(this, new PropertyChangedEventArgs(property));
080.        }
081.        if (!_isDirty)
082.        {
083.            _isDirty = true;
084.            if (handler != null)
085.            {
086.                handler(this, new PropertyChangedEventArgs("IsDirty"));
087.            }
088.        }
089.    }
090.
091.    public void ResetDirtyFlag()
092.    {
093.        if (_isDirty)
094.        {
095.            _isDirty = false;
096.            PropertyChangedEventHandler handler = PropertyChanged;
097.            if (handler != null)
098.            {
099.                handler(this, new PropertyChangedEventArgs("IsDirty"));
100.            }
101.        }
102.    }
103.}

Notice how properties being set should automatically set the "dirty" flag as well. I may want to bind my login button to the flag so it only becomes available when the user has changed something, for example. There is also a public method to reset the flag.
In order to satisfy my service, I'll create a "mock" object. Why a mock, and not a stub? A stub is a piece of code you put in place to allow something to happen. If I wanted to stub my service, I'd do this:
view source print ?
1.public class ServiceStub : IService
2.{
3.   public void Login(string username, string password, Action<bool> result)
4.   {
5.      result(true);
6.   }
7.}

This would always call back with a valid user and stubs out the functionality so I don't have to implement a real login. A mock object, on the other hand, changes. To make this a mock, I do this:
view source print ?
01.public class ServiceMock : IService
02.{
03.   public bool LoginCalled { get; set; }
04.
05.   public void Login(string username, string password, Action<bool> result)
06.   {
07.      LoginCalled = true;
08.      result(true);
09.   }
10.
11.}

The class is a mock because it changes based on how it is used, and then we can query that change to see if our code is doing what we want. So let's set up some tests with the view model:
view source print ?
01.[TestClass]
02.public class ViewModelTest
03.{
04.
05.    private ViewModel _target;
06.    private ServiceMock _service;
07.
08.    [TestInitialize]
09.    public void Initialize()
10.    {
11.        _service = new ServiceMock();
12.        _target = new ViewModel(_service);
13.
14.    }
15.
16.    [TestMethod]
17.    public void TestConstructor()
18.    {
19.       Assert.IsFalse(_target.IsDirty,"Dirty flag should not be set.");
20.       Assert.IsFalse(_service.LoginCalled,"Login should not have been called.");
21.       Assert.IsNotNull(_service.LoginCommand, "Login command was not set up.");
22.    }
23.}

You can test that the username hasn't been populated, for example. Now we can do a little more. In the example, we throw a ValidationException (a custom class) when the username is invalid. The Silverlight 3 validation framework can capture this based on data binding and show appropriate error messages to the client. We want to make sure if we try to login, we throw the exception, so we can do this:
view source print ?
1.[TestMethod]
2.[ExpectedException(typeof(ValidationException))]
3.public void TestLoginValidation()
4.{
5.   _target.CommandLogin();
6.}

Here we call the login command on the empty object and it should throw (and catch) the exception we're looking for.
Finally, to use our mock object, we can set a valid user name and password and call the login command, then verify that the mock object was called:
view source print ?
01.[TestMethod]
02.public void TestLogin()
03.{
04.   _target.Username = "Valid Username";
05.
06.   //bonus test: check that the dirty flag got set
07.   Assert.IsTrue(_target.IsDirty, "Dirty flag was not set on update.");
08.
09.   _target.Password = "Password";
10.   _target.CommandLogin();
11.
12.   Assert.IsTrue(_service.LoginCalled);
13.}

After testing your view model, you can then begin to work on testing the view itself. In the "required reading" I discussed having a generic view base that would interact with a navigation manager to swap views into and out of view. The views are all contained in an ItemsControl, and register to a view change event. If the view goes out of focus, it moves to a hidden state. If the view comes into focus, it moves to a visible state. While this allows more control over the way the states appear and how to transition between states, there is also the chance someone may add a view and forget wire in the visual state groups. The VisualStateManager won't complain, but it can look ugly. We need to test for things like this!
Fortunately, the testing framework allows for us to host actual views. It provides a testing surface that we add controls to, and those controls are rendered so you can then inspect the visual tree. In this case, we want to emulate a view navigating to a new view and test that it is moved to the correct state.
Create a new test class. This time, however, we will inherit from the base class SilverlightTest which provides our class with a test panel to host controls on. The set up is a bit more involved, because we need to fold the mock services into the view model, then create the view and glue it all together.
Before we do this, we'll create a helper class called QueryableVisualStateManager. This class is one I borrowed from Justin Angel's fantastic blog post about Custom Visual State Managers. In his post, he details how to create a custom visual state manager that holds a dictionary of the control states so they can be queried later on (in case you've been pulling your hair out in frustration, the framework does not provide direct access to query the current visual state of controls).
I created the class verbatim, but don't care to use it in production code. Instead, we'll inject it in our test class. Here's the setup:
view source print ?
01.[TestClass]
02.public class LoginTest : SilverlightTest
03.{
04.    private Login _login;
05.    private ViewModel _viewModel;
06.    private ServiceMock _service;
07.    private NavigationManager _navigationManager;
08.    private QueryableVisualStateManager _customStateManager;
09.
10.    [TestInitialize]
11.    public void TestInitialize()
12.    {
13.        _login = new Login();
14.
15.        FrameworkElement root = VisualTreeHelper.GetChild(_login, 0) as FrameworkElement;
16.        root.SetValue(VisualStateManager.CustomVisualStateManagerProperty, new QueryableVisualStateManager());
17.
18.        _service = new ServiceMock();
19.        _navigationManager = new NavigationManager();
20.        _viewModel = new ViewModel(_service);
21.        _viewModel.Navigation = _navigationManager;
22.        _login.DataContext = _viewModel;
23.        TestPanel.Children.Add(_login);
24.    }
25.}

What happened? Login is my user control ... it is the view I inject into the shell to show the login page. Here I create an instance of it. Then, I use my friend the VisualTreeHelper to parse the the first child, which is going to be the grid or stack panel or whatever "host" control you have inside your user control. Then, I simply set the attached property for the custom view manager to point to the queryable helper class. This will ensure any visual state transitions are recorded in the internal dictionary. Then I wire up my mocks, databind, and finally add the login control to the TestPanel. It now gets hosted on a real test surface and can initialize and display.
Let's assume that the navigation manager I injected is responsible for swapping the view state of the control. The control goes into a HideState when not visible and a ShowState when visible. What I want to test is a simulated login command. We already tested this in the view model, so we can be confident it is going to hit the service and do what it is supposed to do. There is a piece of code that then calls the navigation manager and changes the control's state to hidden. We want to test that this hook actually gets fired when the user clicks login, so the login view disappears. Here's how:
view source print ?
01.[TestMethod]
02.public void TestLogin()
03.{
04.    const string SHOWSTATE = "VisualStates.ShowState";
05.    const string HIDESTATE = "VisualStates.HideState";
06.
07.    // set up this view
08.    _navigationManager.NavigateToPage(NavigationManager.NavigationPage.Login);
09.
10.    string state = QueryableVisualStateManager.QueryState(_login);
11.    Assert.IsTrue(state.Contains(SHOWSTATE) && !state.Contains(HIDESTATE), "Invalid visual state.");
12.
13.    // trigger login
14.    _viewModel.Username = "user";
15.    _viewModel.Password = "password";
16.    _viewModel.CommandLogin();
17.
18.    state = QueryableVisualStateManager.QueryState(_login);
19.    Assert.IsTrue(state.Contains(HIDESTATE) && !state.Contains(SHOWSTATE), "Invalid visual state.");
20.}

We first test the pre-condition by navigating to the login page and confirming it has the ShowState and not the HideState. Then, we simulate a login action (this is why command binding and view models are so powerful) and query the state again, testing to make sure we went into a hidden state.
When you run this test, you might actually see the control flicker for a moment on the screen as it gets initialized on the test surface before it is manipulated and then discarded for other tests. With the right architecture, you are now able to test from the view down to the backend services that drive your application. Now that's powerful!

via csharperimage.jeremylikness.com

Posted via web from brandontruong's posterous

ondrejsv | How to: Create a new format for sample data in Blend/SketchFlow

2010-01-27T12:55:00.001+11:00

via blog.ondrejsv.com

Posted via web from brandontruong's posterous

Jeremy Likness' Blog : Simple Dialog Service in Silverlight

2010-01-27T12:31:00.001+11:00

Check out this website I found at wintellect.com

Posted via web from brandontruong's posterous

Dynamic tabs using jQuery - why and how to create it

2010-01-27T10:55:00.001+11:00

via jankoatwarpspeed.com

Posted via web from brandontruong's posterous

Avatar Now the Biggest Movie Ever Worldwide

2010-01-27T09:26:00.001+11:00

via feedproxy.google.com

Posted via web from brandontruong's posterous

Google Voice Arrives on iPhone With HTML5-Powered Web App

2010-01-27T07:24:00.001+11:00

via feedproxy.google.com

Posted via web from brandontruong's posterous

Designer Developed Social Sharing Tool Userscript Released - Flash Web Design and Design Photography | DesignOra - StumbleUpon

2010-01-26T22:45:00.001+11:00

Check out this website I found at stumbleupon.com

Posted via web from brandontruong's posterous

js-hotkeys - Project Hosting on Google Code

2010-01-26T22:41:00.001+11:00

Javascript jQuery Hotkeys Plugin
Cross Browser Module (Works with Safari, Opera, Firefox, Chrome and IE)
The latest Version is 0.7.8
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.
Example:
Binding 'Ctrl+c'
$(document).bind('keydown', 'ctrl+c', fn);
Unbinding 'Ctrl+c'
$(document).unbind('keydown', 'ctrl+c', fn);
Known Issues
KeyPress is not working well owe to the fact that keycodes varies between key[down|up] and key press (lower and upper case). see example at Test #6. This should be solved in the next version
More info
Public Git Repository at GitHub
Live Demo
Read More...

via code.google.com

Posted via web from brandontruong's posterous

15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine

2010-01-26T22:30:00.001+11:00

via tripwiremagazine.com

Posted via web from brandontruong's posterous

Behaviors, Triggers and Actions in Silverlight And WPF Made Simple – Part 2 – Triggers : Amazedsaint's .net journal

2010-01-26T17:52:00.003+11:00

via amazedsaint.blogspot.com

Posted via web from brandontruong's posterous

Behaviors, Triggers and Actions in Silverlight And WPF Made Simple – Part I - Behaviors : Amazedsaint's .net journal

2010-01-26T17:52:00.001+11:00

via amazedsaint.blogspot.com

Posted via web from brandontruong's posterous

ScrollSpy | David Walsh Blog

2010-01-26T17:22:00.001+11:00

ScrollSpy

ScrollSpy is a small but powerful MooTools plugin that allows you to listen to scrolling within any DOM element and execute functions based upon the element's scroll position.
MooTools Javascript Class
/*  ---  description:     ScrollSpy    authors:  - David Walsh (http://davidwalsh.name)    license:  - MIT-style license    requires:  core/1.2.1:   '*'    provides:  - ScrollSpy  ...  */  var ScrollSpy = new Class({    	/* implements */  	Implements: [Options,Events],    	/* options */  	options: {  		min: 0,  		mode: 'vertical',  		max: 0,  		container: window,  		onEnter: $empty,  		onLeave: $empty,  		onTick: $empty  	},    	/* initialization */  	initialize: function(options) {  		/* set options */  		this.setOptions(options);  		this.container = document.id(this.options.container);  		this.enters = this.leaves = 0;  		this.max = this.options.max;  	  		/* fix max */  		if(this.max == 0) {   			var ss = this.container.getScrollSize();  			this.max = this.options.mode == 'vertical' ? ss.y : ss.x;  		}  		/* make it happen */  		this.addListener();  	},    	/* a method that does whatever you want */  	addListener: function() {  		/* state trackers */  		this.inside = false;  		this.container.addEvent('scroll',function() {  			/* if it has reached the level */  			var position = this.container.getScroll();  			var xy = this.options.mode == 'vertical' ? position.y : position.x;  			/* if we reach the minimum and are still below the max... */  			if(xy >= this.options.min && xy <= this.max) {  					/* trigger Enter event if necessary */  					if(!this.inside) {  						/* record as inside */  						this.inside = true;  						this.enters++;  						/* fire enter event */  						this.fireEvent('enter',[position,this.enters]);  					}  					/* trigger the "tick", always */  					this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);  			}  			else {  				/* trigger leave */  				if(this.inside)  {  					this.inside = false;  					this.leaves++;  					this.fireEvent('leave',[position,this.leaves]);  				}  			}  		}.bind(this));  	}  });
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1/*
2---
3description: ScrollSpy
4
5authors:
6 - David Walsh (http://davidwalsh.name)
7
8license:
9 - MIT-style license
10
11requires:
12 core/1.2.1: '*'
13
14provides:
15 - ScrollSpy
16...
17*/
18var ScrollSpy = new Class({
19
20 /* implements */
21 Implements: [Options,Events],
22
23 /* options */
24 options: {
25 min: 0,
26 mode: 'vertical',
27 max: 0,
28 container: window,
29 onEnter: $empty,
30 onLeave: $empty,
31 onTick: $empty
32 },
33
34 /* initialization */
35 initialize: function(options) {
36 /* set options */
37 this.setOptions(options);
38 this.container = document.id(this.options.container);
39 this.enters = this.leaves = 0;
40 this.max = this.options.max;
41
42 /* fix max */
43 if(this.max == 0) {
44 var ss = this.container.getScrollSize();
45 this.max = this.options.mode == 'vertical' ? ss.y : ss.x;
46 }
47 /* make it happen */
48 this.addListener();
49 },
50
51 /* a method that does whatever you want */
52 addListener: function() {
53 /* state trackers */
54 this.inside = false;
55 this.container.addEvent('scroll',function() {
56 /* if it has reached the level */
57 var position = this.container.getScroll();
58 var xy = this.options.mode == 'vertical' ? position.y : position.x;
59 /* if we reach the minimum and are still below the max... */
60 if(xy >= this.options.min && xy <= this.max) {
61 /* trigger Enter event if necessary */
62 if(!this.inside) {
63 /* record as inside */
64 this.inside = true;
65 this.enters++;
66 /* fire enter event */
67 this.fireEvent('enter',[position,this.enters]);
68 }
69 /* trigger the "tick", always */
70 this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);
71 }
72 else {
73 /* trigger leave */
74 if(this.inside) {
75 this.inside = false;
76 this.leaves++;
77 this.fireEvent('leave',[position,this.leaves]);
78 }
79 }
80 }.bind(this));
81 }
82});

Class: ScrollSpy

Implements:

Options, Events

ScrollSpy Method: constructor

Notes:

ScrollSpy debuted Wednesday, May 27, 2009 on the David Walsh Blog: http://davidwalsh.name/scrollspy

ScrollSpy requires MooTools Core only -- no MooTools More dependencies.

Visit http://davidwalsh.name/scrollspy for example usages.

Syntax:
var myScrollSpy = new ScrollSpy(options);  
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1var myScrollSpy = new ScrollSpy(options);

Arguments:

options - (object, optional) Initial options for the class.

Options:

min - (integer, defaults to 0) The minimum value of the X or Y coordinate, depending on mode.

mode - (string, defaults to 'vertical') Defines whether to listen to X or Y scrolling.

max - (integer, defaults to 0) The maximum value of the X or Y coordinate, depending on mode.

container - (element, defaults to window) The element whose scrolling to listen to.

Returns:

(object) A new ScrollSpy instance.

Events:

enter

(function) Function to execute when the element's designated area is scrolled into.

Signature
onEnter(position, enters)  
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1onEnter(position, enters)

Arguments:

position - (object) The container's scroll position object.

enters - (integer) The number of times the scroll area has been entered.

leave

(function) Function to execute when the element's designated area is scrolled out of.

Signature
onLeave(position, enters)  
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1onLeave(position, enters)

Arguments:

position - (object) The container's scroll position object.

enters - (integer) The number of times the scroll area has been left.

tick

(function) Function to execute on each scroll event when the scroll position is between the enter and exit.

Signature
onTick(position, inside, enters, leave)  
Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code
1onTick(position, inside, enters, leave)

Arguments:

position - (object) The container's scroll position object.

inside - (boolean) Represents whether or not the scroll is within the designated min and max area.

enters - (integer) The number of enters.

leaves - (integer) The number of leaves.

-->

via davidwalsh.name

Posted via web from brandontruong's posterous

Microsoft releases an awesome Silverlight 4 Beta Client for Facebook for Windows and OS X | ithinkdifferent

2010-01-26T11:47:00.001+11:00

via ithinkdiff.com

Posted via web from brandontruong's posterous

The Typemock Insider Blog: How to run NUnit tests created with VS2010 and .NET 4

2010-01-26T11:13:00.001+11:00

Today when writing tests for a new project built using VS2010 I had an interesting problem:

NUnit would not run my unit tests because the assembly that contained my unit tests was compiled using a newer version of the .NET runtime.

There are several solutions to solve this issue from downgrading my project to use earlier version of .NET to migrate my unit tests to MSTest but luckily for me no such drastic move was needed.

The new NUnit (2.5.x) have support for running tests using .NET 4 it’s just hidden inside a pile of xml.

The solution

To run .NET 4.0 test assembly add the lines below to the relevant config file, so if you’re using NUnit.exe update nunit.exe.config or if you’re using nunit-console.exe use nunit-console.exe.config – you get the point.

Under <configuration> add:
<startup><requiredRuntime version="v4.0.21006" /></startup>

Under <runtime> add:
<loadFromRemoteSources enabled="true" />

I’m using the latest VS2010 RC2 If you have a different version of Visual Studio installed change the version value to the version of the .NET 4 installed on your machine – look at C:\Windows\Microsoft.NET\Framework to find out which version you have.

That’s it!

via blog.typemock.com

Posted via web from brandontruong's posterous

Google Chrome 4.0 For Windows Adds Extensions and Bookmark Sync

2010-01-26T10:11:00.001+11:00

via mashable.com

Posted via web from brandontruong's posterous

Silverlight and non-IIS hosted WCF-services

2010-01-25T22:18:00.001+11:00

Check out this website I found at chris.59north.com

Posted via web from brandontruong's posterous

An Excel file Viewer in Silverlight 4

2010-01-25T21:03:00.001+11:00

via silverlightshow.net

Posted via web from brandontruong's posterous

How Fast Do Friendfeed Results Appear in Google Web Search?

2010-01-25T20:55:00.001+11:00

Monday, January 25, 2010
How Fast Do Friendfeed Results Appear in Google Web Search?
I just got my phone’s stop watch ready and posted the following sentence into Friendfeed (one of Google’s special partners):

“This is a unique sentence with the number 321192301 that has never been written before according to Google.”

I made sure this sentence was not yet available in Google web search:

Refreshing web search twice in brief intervals, the sentence was already appearing, and I hadn’t even pasted my explanatory comment to Friendfeed yet. The watch showed 13 seconds had passed, but it might have been appearing earlier:

How Fast Do Friendfeed Re ... by Philipp Lenssen | Comments (4)

>> More posts

Advertisement

via blogoscoped.com

Posted via web from brandontruong's posterous

Silverlight Unit Testing Framework: Asynchronous Testing of Behaviors

2010-01-25T16:16:00.001+11:00

via csharperimage.jeremylikness.com

Great article about Silverlight testing

Posted via web from brandontruong's posterous

My First Posterous Post

2010-01-25T16:06:00.001+11:00

Hello world

Posted via email from brandontruong's posterous

Default Focus Behavior

2009-08-30T21:33:00.001+10:00

I would love to share with you guys about Default Focus Behavior which I just created an hour ago because I thought this behavior would be very handy.

With this behavior, we would be able to set focus to any controls when we trigger any control events.

For example, whenever we click the button, we want to textbox got focused, or when we select the Option 1 for the very first time, the textbox will get focused as below image

Click the icon below for the source code

Hopes this helpful :)Technorati Tags: Behaviors

TextWraping in Silverlight

2009-08-29T09:57:00.001+10:00

Just a little thing I came across when I am trying to set TextWraping property for a TextBox, but the text doesn't seem to be wrapped. Then I realized if the TextBox is setting with TextWraping greater than 1, the text won't be wrapped. Just a little thing to keep in mind :)

Datagrid Missing Binding Error

2009-08-20T23:20:00.000+10:00

I have run into this silly mistake, and it took me 2 hours to figure it out :(

I am writing it down here for my own reference, and if you ever ran into this problem, hope that this can help you fix your problem quickly.

The problem is I had a datagrid column with the Header but not the Binding, for example

This will cause the below error at runtime

To fix it, all I had to do is to put the Binding in it

Hope this helps

UpperCase Behavior

2009-08-17T21:22:00.000+10:00

I was asked to create a TextBox input which has only UpperCase letters. After a bit of research, I have found this article which has inspired me to come up with this solution. As we all know that Behavior is a cool stuff in Silverlight 3, so I decided to use the concept from that article and create a Behavior which detects all the key and uppercase it. Feel free to download the source code and have a play with it.

FocusManager

2009-06-17T11:14:00.003+10:00

I've read this article about FocusManager. I think it could come handy sometimes when you want to know what element has focus. FocusManager class which can be found in the System.Windows.Input namespace. Below is the sample of how to use it

The FocusManager class has only one static method:

<span class="kwrd">public</span> <span class="kwrd">static</span> Object GetFocusedElement();

Using the FocusManager is easy. Here’s a small example of a possible usage:

var focusedElement = FocusManager.GetFocusedElement() as Control;
if (focusedElement != null)
     Output.Text = focusedElement.Name;

One last note: The FocusManager class is also available in the “normal” .NET Framework 3.0 or later.

Binding for Converter Parameter

2009-06-09T15:10:00.001+10:00

I have come across the situation where I need to do some Binding for ConverterParameter. Something like

I have done lots of research, and I found out that its impossible to do binding for ConverterParameter.
So I came up with the Solution. I created the Converter but inherited from FrameworkElement

public class ShowDeleteServiceConverter : FrameworkElement, IValueConverter

In the converter class, I created a dependency property

Now, I can do the Binding as usual

And

It might not be the best solution, but it works for me so far. If you have any idea, feel free to drop me comments.

Cheers,

How to Change the Startup Class

2009-01-26T11:23:00.003+11:00

Another great tip from Mike Snow. Read the original article here

When a Silverlight application is launched the entry point is a class that inherits from System.Windows.Application. By default, when you create a new Silverlight application project, this would be your App class which gets defined in App.xaml.cs. You can, however, change which startup class you want to use. In fact, if you do not plan to use XAML at all you can reduce the size of your application by deleting the Page and App classes including the XAML and code behind files.

To accomplish this follow these steps:

Step 1. Create a new Silverlight application project adding a new ASP.net web project to host the Silverlight app.

Step 2. Delete App.xaml and Page.xaml (the CS files will be deleted also).

Step 3. Create a new class and call it StartupTest.cs

Step 4. Modify your new class to inherit from Application as seen here:

public class StartupTest : Application
{
    public StartupTest()
    {
    }
}

Step 5. Right click on your Silverlight application project in the Solution Explorer of VS. From the context menu choose Properties. This will bring up the Properties dialog. Click on the Silverlight tab at the top-left and change the Startup object to be your class as seen circled here:

Step 6. Go back to your StartupTest class. Add an event to monitor for when the application has started. You don’t want to do anything until after this event has started.

public class StartupTest : Application
{
    public StartupTest()
    {
        this.Startup += new StartupEventHandler(StartupTest_Startup);
    }
 
 
    void StartupTest_Startup(object sender, StartupEventArgs e)
    {
    }
}

Step 7. The Application.RootVisual is root pointer to the main application UI. You will need to create this object to point an object such as a Grid or Canvas control. Once created, you can add additional controls to the children as you see fit. In the example below, I have created a Canvas as the root and configured its background color to be black, its width to be 800 and height to be 600. Also, I have added a Textbox to the Canvas control.

void StartupTest_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new Canvas();
 
    ((Canvas)this.RootVisual).Width = 800;
    ((Canvas)this.RootVisual).Height = 600;
    ((Canvas)this.RootVisual).Background = new SolidColorBrush(Colors.Black);
 
    TextBlock tb = new TextBlock();
    tb.Foreground = new SolidColorBrush(Colors.White);
    tb.FontSize = 20;
    tb.Text = "NO XAML NEEDED!!!";
 
    ((Canvas)this.RootVisual).Children.Add(tb);
}

Step 8. Run the application and you will see the following image rendered in your browser: Technorati Tags: Silverlight

How to Create A Badge Of Your Facebook

2009-01-01T17:16:00.001+11:00

Create a Badge From a Template

Log into your facebook account
Click on the "My Profile" link to view your current profile after you have logged in.
Select the "Create a Profile Badge" link that can be found on your profile.
Choose a template to help create your badge. A photo badge showcases your most recent photo uploads. The Signature Badge has your contact information and is ideal for email and forum signatures. The blog badge is a great addition to your external Web site or blog.
Set the preferences for your template. While they may vary slightly, you must select a layout (Horizontal or Vertical) and a format (Image or JavaScript) for each template.
Finish making changes to your badge and click "Save" to get directions for posting your badge. You will need to copy and paste the provided code into the Web site where you want the badge to appear.

Create a Custom Badge

Show your individuality by choosing to "Create a Badge" from the "Create a Profile Badge" page.
Set the basic layout and format.
Add any items from the drop-down menu that you want to include in your badge. Click the "Add Item" button to add it to your badge. You may add more than one item. With no template, you can add anything you want to your badge. It will preview as you make additions.
Hit the "Save" button to complete your badge and get the necessary code to post it.

Technorati Tags: Badge, facebook

Selecting a Block of text

2008-12-04T16:51:00.000+11:00

20 Excellent Free Rich-Text Editors

Jacob Gube, a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

He has given us a list of 20 excellent Free Rich-text Editors. Thanks for his work.

Click here for the original post

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.

1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

TinyMCE | Demo | Download

2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

FCKeditor | Demo | Download

3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

NicEdit | Demo | Download

4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 - and with a devout following - you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

BXE | Demo | Download

5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

markItUp! | Demo | Download

6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

widgEditor | Demo | Download

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.

EditArea | Demo | Download

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

Cross-Browser Rich Text Editor (RTE) | Demo

9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

Yahoo! UI Library: Rich Text Editor | Demo | Download

10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

FreeTextBox | Demo | Download

11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

Damn Small Rich Text Editor | Download

12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

Silverlight rich text editor | Demo | Download

13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

Free Rich Text Editor | Demo | Download

14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

Dijit.Editor

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

WYMeditor | Demo | Download

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

Whizzywig | Demo

17. openWYSIWYG

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

openWYSIWYG | Demo | Download

18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

XStandard | Download

19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

Xinha | Demo | Download

20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

Kupu | Demo | Download

Technorati Tags: Html Text Editors, Rich Text Editors, WYSIWYG

Selecting a Block of text

2008-12-04T11:39:00.000+11:00

If you are COPY & PASTE, the blog here is showing you a very cool trick to give you more power in term of COPY & PASTE

Below is a brief content from the original post.

By default normal text selection is line by line. For example it’s not possible to select just the items to the right of the equals sign.

However, Visual Studio does offer this ability using block selection. Block selection is sued to select text in a block as opposed to line by line. Essentially allowing you to select text regardless of what line you are on. For example, select the <ALT> key while selecting text to do the following.

Block selection can be used with both the keyboard and mouse. When using the keyboard hold down the <ALT> + <SHIFT> and use the arrow keys to perform the block selection.
Technorati Tags: Tricks

Silverlight Toolkit: Label

2008-12-03T13:31:00.001+11:00

Hi, I have found the awesome article from Justin-Josef
Angel about LABEL the new silverlight control.
I guess that I
could post it into my blog for my own reference and might as well any
one who has been reading my blogs by any chance.

Click here to see the
original post from Justin-Josef Angel.
Thanks Justin
for an awesome article :)
Setup

1. Create a new project.

2, Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.

3. Look under "Custom Controls" In the Blend Asset Library.

4. Add a Label to the Page.

And here's the XAML we got:

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SilverlightControlsNovember2008.Page"

Width="640" Height="480"

xmlns:slctls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls">

<Grid x:Name="LayoutRoot" Background="White">

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Label"/>

</Grid>

</UserControl>

Setting the content for Label

One way of editing a Label's content is double clicking on it.

And here's the XAML we just got:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Hello World!"/>

Another way is editing the Content property directly through the Blend Data pane:

Changing the Label’s Border

We can set the BorderBrush & BorderThinckness properties for Label in order to change it’s border.

Let’s start by changing the BorderBrush to a SoliderColorBrush with a light grey color. Click on BorderBrush and select SolidColorBrush.

-->

Than we’ll select a light gray color.

Next, we’ll change the BorderThickness to 1 on all sides.

And we can see our Label has a nice subtle light grey border around itself:

Here’s the XAML we just generated:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1"/>

Changing Label’s Background and Foreground

Let’s do what the title says!

In
case you’re wondering TextBlock does not have a Background. So
it’s a bit different than what we would have normally done with
TextBlock.

We’ll select Background and set it to SolidColorBrush with the color Black.

-->

Next we’ll select the Foreground property and set it to SolidColorBrush with the color white.

-->

here’s our Label:

And the xaml we generated:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1" Background="#FF000000" Foreground="#FFF5F3F3"/>

Changing the Label’s Template

Let’s
say we're unhappy with the default border for out Text inside the
Label. Through the power of templating we can change it.
So let’s create a RadialLabelTemplate.

We’ll start of by adding a new label to form.

Than Right Click on it, select “Edit Control Parts(Template) –> Create Empty…”.

We’ll change the Resource name to RadialPanelTemplate.

And here’s the drawing area of the new template:

Let’s add the Ellipse for the radial background.

Now
we want to add a TextBlock to display the content of the Label. Before
we can do that, we’ll need to add a container that will contain
both our Ellipse and our TextBlock. We’ll Group our Ellipse into
a Canvas.

Finally we can add our TextBlock that has the Label Content.

We’ll
use TemplateBinding to connect this TextBlock.Text to the Label.Content
property. Click the “Advanced Options” next to the Text
property.

Select “Custom Expression”.

And put in the correct TemplateBinding.

To preview our form we can go back to our form.

And here it is:

Now we can we add 3 more label to our page and just apply this new template to them.

We’ll
select each of our new Labels, Right click, select “Edit Control
Parts (Template) –> Apply Resource –> Radial Label
Template”.

-

And here’s our new form:

Here’s the XAML we just generated for the RadialLabelTemplate:

<UserControl.Resources>

<ControlTemplate x:Key="RadialLabelTemplate" TargetType="slctls:Label">

<Canvas Height="Auto" Width="Auto">

<Ellipse Height="35" Width="125" Fill="#FFFFFFFF" Stroke="#FF000000"/>

<TextBlock Height="20" Width="82.667" Canvas.Left="22.667" Canvas.Top="7.333" Text="{TemplateBinding Content}" TextWrapping="Wrap"/>

</Canvas>

</ControlTemplate>

</UserControl.Resources>

And the Xaml for our labels:

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Content="Radial Label!" Width="124" Height="34"/>

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="19.333" Content="Radial == good" FontSize="10"/>

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="29.333" Width="144" Content="I R Radial" />

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="28.667" Width="130.334" Content="U R Radial"/>

Editing a Label’s ContentTemplate

Templates
are used with TemplateBindings that emanate for general Control
properties. But we might do bind our Label to CLR property from any
Data Source. like, Cows.

We’ll create (in Visual studio) our Cow class that has Age and Name.

public class Cow

{

public Cow(string Name, int Age)

{

Name = Name;

Age = Age;

}

public string Name { get; set; }

public int Age { get; set; }

}

A very basic CLR class that has 2 properties: a numeric age and a string that represents the age of the cow.

Now let’s use this class and create a cow we’ll DataBind our label to.

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

myLabel.DataContext = new Cow("Betsy", 3);

}

}

Eventually I’d like for us to see a Label that looks like this:

We’d like to change the thickness of the head line based on Cow.Age and change the text based on Cow.Name.

Let’s start by adding a new Label to the page and changing it’s name to myLabel.

We’d like to edit the ContentTemplate
of this label, so we’ll Right Click on the label select
“Edit Other Templates –> Edit Generated Content
(ContentTemplate) –> Create Empty…”

We’ll call our new ContentTemplate – CowContentTemplate.

As always we start off with an empty ContentTemplate.

I’ll spare you my third grade drawing skills and we’ll magiclly add some lines that are our cow.

Truly a masterpiece.

If you squint really hard, they look alike

Next we’d like to add the appropriate bindings.

We’ll select the TextBlock in the middle of the cow.

Click “Advanced Options –> Custom Expression”.

And add a Binding to the Cow Name.

Next, we’ll select the Cow’s head.

And set a StrokeThickness to a Custom expression that’s bound to the Cow’s age.

One last thing we have to do before we can run the sample is set the Cow’s Content to it’s DataContext.

We’ll ad a Custom expression to the Content property of the label.

Finally we can run the sample.

Let’s add a few more Labels with that ContentTemplate and with more Cows.

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

myLabel.DataContext = new Cow("Betsy", 3);

myCowLabel1.DataContext = new Cow("Martha", 1);

myCowLabel2.DataContext = new Cow("Flossy", 5);

myCowLabel3.DataContext = new Cow("Hoss", 2);

}

}

We’ll make sure to add those label to our page and re-run this sample.

And our Cow Herd is now complete.

Here’s our DataTemplate XML.

<UserControl.Resources>

<DataTemplate x:Key="CowContentTemplate">

<Grid>

<TextBlock Margin="21.75,9.833,27.25,9.167" TextWrapping="Wrap" FontSize="8" Text="{Binding Path=Name}"/>

<Ellipse HorizontalAlignment="Right" Margin="0,2.167,4.583,13.833" Width="15.084" Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="{Binding Path=Age}"/>

<Rectangle Margin="18.75,8,25.25,8" Fill="#FFFFFFFF" Stroke="#FF000000" RadiusX="1" RadiusY="1"/>

<Path Height="2.334" HorizontalAlignment="Right" Margin="0,12.25,19.417,0" VerticalAlignment="Top" Width="6.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M65.166664,9.833333 L59.5,11.166667"/>

<Path Height="6" HorizontalAlignment="Right" Margin="0,0,23.75,2.667" VerticalAlignment="Bottom" Width="3.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M58.833332,19.666666 L61.5,24.666666" d:LayoutOverrides="Width"/>

<Path Height="4.5" HorizontalAlignment="Left" Margin="27.585,0,0,3.833" VerticalAlignment="Bottom" Width="2.166" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M35.333332,19.666666 L34.166668,23.166666"/>

<Path Height="4.834" HorizontalAlignment="Right" Margin="0,0,33.751,4.333" VerticalAlignment="Bottom" Width="1.833" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M51.833332,22.666666 L51,18.833334" d:LayoutOverrides="Width"/>

<Path Height="5" HorizontalAlignment="Left" Margin="18.917,0,0,4.333" VerticalAlignment="Bottom" Width="4" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M27.333334,19.35417 L24.833334,23.187502"/>

</Grid>

</DataTemplate>

</UserControl.Resources>

And our Cow labels:

<slctls:Label Height="32.5" Margin="311.5,56.75,235.5,0" VerticalAlignment="Top" x:Name="myLabel" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311,129.5,236,0" VerticalAlignment="Top" x:Name="myCowLabel1" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311,198.75,236,0" VerticalAlignment="Top" x:Name="myCowLabel2" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311.5,0,235.5,184.5" x:Name="myCowLabel3" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />