Building an UserControl with (almost) no code

24. November 2010

As the title suggests, this blog post is all about bulding a UserControl for Silverlight, Windows Phone 7 or WPF development projects. I want to show this with a really simple example, inspiried by Silverlight in Action 4 by Pete Brown!

Open up Visual Studio and choose the class library project template for your target (e.g. SL or WP7)

In the solution explorer, rightclick on your project and add a new item –> <silverlight or WP7,…> user control! Now you see an almost empty xaml-file of your control. For this example we simple build a lockable textbox, so delete the the default grid and add a StackPanel and put a TextBox and a CheckBox in it.

Like in the picture, give your Text- and CheckBox a name. Cause we`re building a “lockable” Textbox, we want to set the IsReadOnly-Property of the TextBox to TRUE, if the user checks the CheckBox. This for example can be accomplished by DependencyProperties and binding in the code-behind or by writing  a simple converter-class, which we will be doing!

Now add a new class to your project and name it IsLockedConverter.cs or any other name you wish :). Cause it`s a converter we have to inherit from the IValueConverter interface, which provides us two methods, Convert() and ConvertBack(). We also have to inherit from the TextBox class, because we want to have access to the IsReadOnly-property of our TextBox.

In the Convert() method we have to return wether the given value is true or false. Just have a look at the implementation.

After this, we only have to add our new converter to our UserControl and using it! The first step is to add the appropriate xmlns in the header of the UserControl, in this case its something like this:

xmlns:converters=”clr-namespace:CustomControls.Converters”

Maybe your namespace is slighly different than mine. The second step is to add our converter to the UserControl.Resources specified by x:Key for “calling” it later on.

<UserControl.Resources>

<converters:IsLockedConverter x:Key=”IsLockedConverter” />

</UserControl.Resources>

You can name your converter whatever you like. So now the interesting part of using our converter. Go to your TextBox declaration in the xaml and add the IsReadOnly-Property and add the following binding:

…IsReadOnly=”{Binding ElementName=myCheckBox, Path=IsChecked, Converter={StaticResource IsLockedConverter}}”

With this line of code you bind the CheckBox to the IsReadOnly-Property of your TextBox. ElementName is the specified name of your Checkbox and the Path is the CheckBoxs property. After the Path you see the “Converter=” there you have to add our converter as a static resource. So whenever the user checks the checkbox this boolean value is passed to our converter and sets the IsReadOnly property of the textbox.

That`s easy isn`t it?! I hope that this is useful for the one or the other.

—UPDATE

You can grab the code here on GitHub…  https://github.com/cordellcp3/Various/tree/master/CustomControls/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: