In this “How to” Visual WebGui tutorial we are going to create WatermarkTextBox control for a Visual WebGui Silverlight application.
This topic assumes that you have some basic knowledge of Visual WebGui and Its also recommended that you read the “How to create a Visual WebGui Application” artical.
The WatermarkTextBox is a plain TextBox control, with one added feature of showing a default text when no content was entered or when the content was deleted.
The first thing we’ll need to do is open visual studio and create a new Visual WebGui Silverlight Application.
Next we’ll add a new Visual WebGui Silverlight control Library project to our solution named Watermark.Silverlight.Controls.
Add a new class BindableWatermarkTextBox
We’ll make sure that our BindableWatermarkTextBox class inherits from Gizmox.WebGUI.Silverlight.Controls.BindableTextBox.
using Gizmox.WebGUI.Silverlight.Controls;
namespace Watermark.Controls
{
public class BindableWatermarkTextBox : BindableTextBox
{
}
}
Now we’ll add a TextBlock. This TextBlock will show the default text until the user start’s entering his own text.
We’ll also add a boolean member named _IsFocused that represents the current control status
private TextBlock mobjMask = null;
private bool _IsFocused = false;
Next we’ll add a constructor to our class. In the constructor we’ll sign-up to 3 events which are exposed by the default Winfroms-like TextBox and used by the BindableWatermarkTextBox .
1. GotFocus event
2. TextChanged event
3. LostFocus event
public BindableWatermarkTextBox()
{
this.TextChanged += new TextChangedEventHandler(OnTextChanged);
this.GotFocus += new RoutedEventHandler(OnGotFocus);
this.LostFocus += new RoutedEventHandler(OnLostFocus);
}
To our OnGotFocus and OnLostFocus methods we’ll add code to change the _IsFocused boolean field.
private void OnLostFocus(object sender, RoutedEventArgs e)
{
_IsFocused = false;
}
private void OnGotFocus(object sender, RoutedEventArgs e)
{
_IsFocused = true;
}
Next we’ll create a new method named UpdateMaskthat will update the TextBlock text according to the _IsFocued boolean field.
private void UpdateMask()
{
if (mobjMask != null)
{
// If the control is not focused and the text is empty set the
// default text to the TextBlock.
if (this.Text == string.Empty && !_IsFocused)
{
mobjMask.Visibility = Visibility.Visible;
mobjMask.Text = BindingManager.GetAttribute(this, "Message", "Write text here...");
}
// Else hide the TextBlock and show the textbox so the
// User could add his text.
else
{
mobjMask.Visibility = Visibility.Collapsed;
}
}
}
After creating the UpdateText method we’ll invoke it in all 3 events handlers that we created.
private void OnLostFocus(object sender, RoutedEventArgs e)
{
_IsFocused = false;
UpdateMask();
}
private void OnGotFocus(object sender, RoutedEventArgs e)
{
_IsFocused = true;
UpdateMask();
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
UpdateMask();
}
Now we’ll add a new Method that will override OnApplyTemplate Method. This will allow us to show the TextBlock with the default text above the TextBox.
public override void OnApplyTemplate()
{
// Call the base TextBox OnApplyTemplate Method.
base.OnApplyTemplate();
// Get the TextBlock object
mobjMask = this.GetTemplateChild("MaskElement") as TextBlock;
if (mobjMask != null)
{
// Set the TextBlock as the text area when visuble.
mobjMask.Opacity = 0.6;
mobjMask.Foreground = new SolidColorBrush(Colors.White);
// Update the TextBlock acording to the _IsFocued boolean field.
UpdateMask();
}
}
At this point we have a Silverlight Visual WebGui control that we can use in our application but to do so we will have to add an implementation to a WatermarkTextBox DHTML so we can use this control in design time.
Pay attention that we are not going to implement the DHTML control completely because we are not going to display the DHTML control at this tutorial, a different tutorial will cover “How to” create a DHTML WatermarkTextBox .
Now we’ll add a Visual WebGui Library Control project named “Watermark.Controls”.
Next we’ll add a Visual WebGui Custom Control named WatermarkTextBox.
We’ll we’ll make sure that our WatermarkTextBox class inherits from Gizmox.WebGUI.Forms.TextBox.
public partial class WatermarkTextBox : TextBox
{
public WatermarkTextBox()
{
InitializeComponent();
}
Next we’ll add an attribute to the class SilverlightControl to allow the control to register in Manifest file.
[SilverlightControl("Watermark.Controls.Silverlight.BindableWatermarkTextBox, Watermark.Controls.Silverlight, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", "Watermark")]
To add design-time support for this control we’ll want the developer to input the WaterMark text.
In order to do that we’ll expose a public property named Message that will be our default WaterMark text.
private string mstrMessage;
public string Message
{
get
{
return mstrMessage;
}
set
{
if (mstrMessage != value)
{
mstrMessage = value;
this.Update();
}
}
}
In the Constructor we’ll set the CustomStyle to “Watermark”. This property sets the style that the control by will be used to drawn by.
public WatermarkTextBox()
{
this.CustomStyle = "Watermark";
}
Now we’ll add to the control an attribute that will hold the Message property this will allow us to access this value in runtime.
protected override void RenderAttributes(IContext context, IAttributeWriter writer)
{
base.RenderAttributes(context, writer);
writer.WriteAttributeString("Message", this.Message);
}
Now we can start using the Watermark control in our application. We’ll add a reference to the DHTML control.
We’ll open our form in designer mode and add our Watermark control to it.
Now we’ll register our control in the Web.Config so that the Visual WebGui server can expose there resources.
<Controls>
<Control Type="Gizmox.WebGUI.Forms.WatermarkTextBox, Gizmox.WebGUI.Forms.Extended" />
</Controls>
Set the size of the control and add your default Watermark text in the Message property.
Ok now we are ready to run our application as a Visual WebGui Silverlight application set your start page to your main form with Swgx extension
Next we’ll build the application to allow the VWG Silverlight packaging tool to build the application Silverlight packages.
Notice that the our Watermark.Controls.Silverlight Dll was added to the primary pacage and will be downloaded to the client.
<SilverlightPackages primary="Watermark">
<SilverlightPackage name="Watermark">
<Assembly name="Gizmox.WebGUI.Silverlight.Common, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="Gizmox.WebGUI.Silverlight.Controls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="Gizmox.WebGUI.Silverlight, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="System.Windows.Controls.Data, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<Assembly name="System.Windows.Controls.Extended, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<Assembly name="Watermark.Controls.Silverlight, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="Gizmox.WebGUI.Silverlight.Themes.Default, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="Gizmox.WebGUI.Silverlight.Themes.XP, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Assembly name="Gizmox.WebGUI.Silverlight.Themes.Blend, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
</SilverlightPackage>
Now we’ll run the application and here is our Watermark TextBox control.
In this “How to” we’ve seen how to create our own Visual WebGui Silverlight custom control by inheriting for a Visual WebGui control and adding it a feature. we’ve also seen how to use this control in a Visual WebGui Silverlight application and how to create the base to a DHTML control.
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com