How to use custom style in a Visual WebGui Control
In this “How to” we are going to learn how to use “Custom Style” in a Visual WebGui Control.
This topic assumes that you have some basic knowledge of Visual WebGui and How to create a Visual WebGui Custom control.
Custom style allows you to inherit from a control and give it a new look and behaviors while keeping the option to use the original control look and feel. We are going to create Watermark text box from a plain TextBox using the Custom Style. Watermark text box is a text box that until the user enters a text there is a message that appears like like this
Let’s Open VS 2008 and create new Visual WebGui project.
Add a new folder named “Controls” and add a new Custom control named WatermarkTextBox.
Now we will add to our control a new string property Message
private string mstrMessage = "Write text here...";
public string Message
{
get
{
return mstrMessage;
}
set
{
if (mstrMessage != value)
{
mstrMessage = value;
this.Update();
}
}
}
Next we will add to the RenderAttributes the rendering of the Message property.
protected override void RenderAttributes(IContext context, IAttributeWriter writer)
{
base.RenderAttributes(context, writer);
writer.WriteAttributeString("Message", this.Message);
}
Let’s add two JS functions .WatermarkTextBox_Focus will be raised when the control gets focus and will clear the watermark. WatermarkTextBox_Blur will be raised when the control loses the focus and if TextBox is empty the Watermark will appear again.
function WatermarkTextBox_Focus(strGuid,objInput,objWindow)
{
if(Web_IsAttribute(objInput,"vwgiswatermark","1",true))
{
objInput.value = "";
objInput.setAttribute("vwgiswatermark","0");
}
TextBox_Focus(strGuid,objInput,objWindow);
}
function WatermarkTextBox_Blur(strGuid,objInput,objWindow)
{
if(objInput.value=="")
{
objInput.value = Data_GetAttribute(strGuid,"Message","");
objInput.setAttribute("vwgiswatermark","1");
TextBox_Change(strGuid,"",objWindow);
}
else
{
TextBox_Change(strGuid,objInput.value,objWindow);
}
}
Next, we will create the control XSLT that will be used when in Watermark style mode.
<xsl:template match="WC:Tags.TextBox[@Attr.CustomStyle='Watermark']" mode="modContent">
<xsl:attribute name="Class">TextBox-Control</xsl:attribute>
<INPUT type="text"
onkeydown="mobjApp.TextBox_KeyDown('{@Id}','{@ValidatorMask}',window,this,event)"
onblur="mobjApp.WatermarkTextBox_Blur('{@Id}',this,window)"
onfocus="mobjApp.WatermarkTextBox_Focus('{@Id}',this,window)"
dir="{$dir}" tabindex="{@Attr.TabIndex}" class="TextBox-Input Common-FontData" id="TRG_{@Id}" maxlength="{@MaxLength}" value="{@Attr.Value}" vwgiswatermark="0" vwgeditable="1" vwgfocus="1">
<xsl:if test="not(@Value)">
<xsl:attribute name="value">
<xsl:value-of select="@Message"/>
</xsl:attribute>
<xsl:attribute name="vwgiswatermark">1</xsl:attribute>
</xsl:if>
<xsl:call-template name="tplSetDisabled" />
<xsl:call-template name="tplTextBoxStyle" />
<xsl:if test="@Attr.ReadOnly='1'">
<xsl:attribute name="readonly">true</xsl:attribute>
</xsl:if>
<xsl:call-template name="tplAttachTextBoxEvents" />
</INPUT>
</xsl:template>
This line match="WC:Tags.TextBox[@Attr.CustomStyle='Watermark']" checks if the control is in Watermark mode if true the control will be rendered with this template and if not as a regular TextBox will be rendered.
On the Input element we will register to the onblure an onfocus events with the JS methods that we created before that will show and hide the Watermark.
In WatermarkTextBox.cs file the remove this line so the control will use the original TextBox template if no custom style is set.
[MetadataTag("WaterMarkTextBox.Controls.WatermarkTextBox")]
Open Form1 and drag the Watermark control to it, and set the Custom style property to “Watermark”.
To allow the VWG access to the control resources we need to register the control. Open the project property page and select the registration section. In the controls click the ‘add control’ button and select the WatermarkTextBox. 
Next right click on Form1 and select “Set as start form” this will set the start page in the web section of the project property page.
Let’s run our application and see the DHTML control.
Let’s start the Silverlight part of the control. Let’s add a new project a Visual WebGui Silverlight control library named “WaterMarkTextBox.Controls.Silverlight”.
Add a new class named WaterMarkTextBox and set it to inherit from BindableTextBox.
public class WaterMarkTextBox : BindableTextBox
We will add two members bool mblnIsFocused that states if the control is focused or not, and TextBlock mobjMask that will display the Watermark text (I’m not using the TextBox itself because I don’t want to be bothered with the events the will be raised by it).
#region Members
private bool mblnIsFocused = false;
private TextBlock mobjMask = null;
#endregion Members
In the constructor we are going to register to TextChanged, GotFocus and LostFocus events and use them to show or hide the Watermark.
public WaterMarkTextBox()
{
this.TextChanged += new TextChangedEventHandler(OnTextChanged);
this.GotFocus += new RoutedEventHandler(OnGotFocus);
this.LostFocus += new RoutedEventHandler(OnLostFocus);
}
Now we will create a method that will show and hide the mobjMask TextBlock according to the user action and control status. When the user set focus to the control the Watermark disappears and when the user set’s the focus outside of the control and no text was entered the Watermark reappears.
private void UpdateMask()
{
if (mobjMask != null)
{
if (this.Text == string.Empty && !mblnIsFocused)
{
mobjMask.Visibility = Visibility.Visible;
mobjMask.Text = BindingManager.GetAttribute(this, "Message", "Write text here...");
}
else
{
mobjMask.Visibility = Visibility.Collapsed;
}
}
}
Next in the OnApplyTemplate method we will set the mobjMask to the MaskElement that the TextBox template uses for the password and we will use it to display the Watermark text.
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
mobjMask = this.GetTemplateChild("MaskElement") as TextBlock;
if (mobjMask != null)
{
mobjMask.Opacity = 0.6;
UpdateMask();
}
}
Now we will implement the events that we registered to in the constructor. We will set the mblnIsFocused according to the event.
private void OnGotFocus(object sender, RoutedEventArgs e)
{
mblnIsFocused = true;
UpdateMask();
}
private void OnLostFocus(object sender, RoutedEventArgs e)
{
mblnIsFocused = false;
UpdateMask();
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
UpdateMask();
}
Last but not least we will connect the DHTML control to the silverlight control by adding an attribute to the DHMTL control.
[SilverlightControl("WaterMarkTextBox.Controls.Silverlight.WaterMarkTextBox, WaterMarkTextBox.Controls.Silverlight, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", "Watermark")]
public partial class WatermarkTextBox : TextBox
{
Ok let’s run our application but this time as a Silverlight application. Open the project property page and select the deployment section. Enable Silverlight by checking the checkbox.
Add a reference to the VWG Silverlight server.
Run the application and change the extension to swgx to see the Silverlight version.
To summarize:
We have seen how to use Visual WebGui Custom style template. This will enable you to broaden your control library and customize your controls and application.
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com
To view original article go to here