How to create property binding in a Visual WebGui Silverlight control
In this “How to” we are going to learn how to create property binding in a Visual WebGui Silverlight Control.
This topic assumes that you have some basic knowledge of Visual WebGui and what is Visual WebGui over Silverlight. Its also recommended that you read the “How to create a Visual WebGui Custom Control”.
The Visual WebGui Silverlight presentation layer is heavily based on WPF concepts which are combined with a powerful server binding mechanism. The server binding mechanism provides a generic mechanism to interact between the server and the client, using the highly optimized communication methods of Visual WebGui.
The binding mechanism provides multiple events and over-ridable methods that make custom development of controls and capabilities real simple. It basically frees you completely of the need to expose services, consume services or manipulate data on the client. It makes it possible to implement the empty client approach that Visual WebGui brings with it and to enjoy the multiple benefits it entails.
In this “How to” we’ll create a Visual WebGui Silverlight control. This control will be a simple label that will show how to create binding to the Message property.
First thing we do is Create a new Visual WebGui Silverlight application that will host our new label control.
Next will add a Visual WebGui Control Library named BindingApp.Controls and create a new Custom control named MyLabel.
Our project should look like this at this point
Now will add a property named Message that will show our label message.
private string mstrMessage;
public string Message
{
get
{
return mstrMessage;
}
set
{
if (mstrMessage != value)
{
mstrMessage = value;
this.Update();
}
}
}
Next will add to the RenderAttributes method an attribute named Message so we could access the message in the XSLT.
protected override void RenderAttributes(IContext context, IAttributeWriter writer)
{
base.RenderAttributes(context, writer);
writer.WriteAttributeString("Message", this.Message);
}
At this point will stop developing our DHTML control because this is not part of this “How to” and will focus on the Visual WebGui Silverlight control.
So we’ll add a new Visual WebGui Silverlight Control Library project to our solution named BindingApp.Controls.Silverlight.
Next will add the default style to our control in the generic.xaml file. Our control is a very simple one only a TextBox that will bind the message to.
<Style TargetType="local:BindableMyLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BindableMyLabel">
<TextBox Foreground="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the DHTML control will set our control CustomStyle to BindableMyLabel in the contractor.
public MyLabel()
{
this.CustomStyle = "BindableMyLabel";
}
Now we’ll make our control inherit from BindableContentControl so We’ll have the abilities of a bindable control.
public class BindableMyLabel : BindableContentControl
Next will add a System.Windows.DependencyProperty and a static constructor to initialize it. The DependencyProperty in Silverlight allows us to bind a property without implementing event handling to the properties changes and allows us to bind the value to our template.
public static readonly DependencyProperty MessageProperty;
static BindableMyLabel()
{
MessageProperty = DependencyProperty.Register("Message",
typeof(string), typeof(BindableMyLabel), null);
}
We’ll add a string property that get’s and set’s the DependencyProperty
public string Message
{
get
{
return (string)this.GetValue(MessageProperty);
}
set
{
this.SetValue(MessageProperty, value);
}
}
Now will add a new class BindableMyLabelDelegate that inherits BindingDelegate. This will allow us to broaden the object state according to the properties that we added
public class BindableMyLabelDelegate : BindingDelegate
{
public string Message
{
get
{
return this.GetValue("Message", "");
}
}
protected override void OnAttributeChange(string strAttribute)
{
base.OnAttributeChange(strAttribute);
if (strAttribute == "Message")
{
OnPropertyChanged("Message");
}
}
}
Because our control inherits from BindableContentControl we’ll override the ApplyBindings method and set our control to the binding delegate we create in the Binding Manager.
protected override void ApplyBindings()
{
base.ApplyBindings();
BindingManager.SetDelegate(this, typeof(BindableMyLabelDelegate));
this.SetBinding(MessageProperty, new Binding("Delegate.Message"));
}
In the Generic.Xmal file will set the TextBox Text to the TempletBinding.
<TextBox Text="{TemplateBinding Message}" Foreground="Black"/>
Next register our control in the web.config so the Visual WebGui server can access the resources.
<Controls>
<Control Type="BindingApp.Controls.MyLabel, BindingApp.Controls"/> -->
</Controls>
Last but not least will add to the DHTML control a referance to our Silverlight control template to allow the control to register in Manifest file.
[SilverlightControl("Gizmox.WebGUI.Silverlight.Controls.BindableMyLabel, BindingApp.Silverlight.Controls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", "BindableMyLabel")]
Now we start using our new control. Lets go to our Visual WebGui application and open the main Form in design mode. From The ToolBox Drag a text box and a button to the form. Add our Control to the form. On the onClick event set the message property in our control to the text in the text box.
private void button1_Click(object sender, EventArgs e)
{
myLabel1.Message = textBox1.Text;
}
Next we’ll build the application to allow the VWG Silverlight packaging tool to build the application Silverlight packages.
Notice that the our BindingApp.Controls.Silverlight Dll was added to the primary pacage and will be downloaded to the client.
And this is our control in action
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com