So with the new update of the Silverlight tookit for WP7 there came along  a few new controls for us developers to play around! I chose the DatePicker-Control for this blogpost, cause it`s not that easy to implement it correctly in some ways and to give some answers for beginners.

Step-by-Step:

  • First of all, download the toolkit from CodePlex and place it on your harddrive. 🙂
  • Don`t forget to add a reference to Microsoft.Phone.Controls.Toolkit for your WP7-Project.
  • Open up your XAML of the appropriate PhoneApplicationPage in VisualStudio, where you want to implement the DatePicker-Control
  • Add the Namespace to your Page…

  • Using the Control on the page…

  • Now start your project for a first test. After clicking of the control, you you should see the following…

  • You will be presented a page for picking the date, like in the calendar-app, BUT this is no PhoneApplicationPage one hast access to!! I marked the buttons in the ApplicationBar. To fix this issue, so you have a “check” and a “cancel”-icon, you have to add a folder to your project called Toolkit.Content!
  • Now you have to add from your icons the ApplicationBar.Cancel.png and the ApplicationBar.Check.png to the folder.
  • The DatePicker control searches for exact this Folder with these two files!
  • After this, you`re done and it should look like this…

Have fun 🙂

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/