Display Watermarks in Bound C1ComboBox for Silverlight

Watermark is a popular feature for displaying customized strings when input values are missing in editable controls. If we start looking at the available properties for C1ComboBox we will find a 'Watermark' property is already available and functioning. Simply setting this property to a string will display the watermark when no value is selected in the ComboBox.

This 'Watermark' property works only when C1ComboBox operates in unbound mode. Once you bind C1ComboBox to a data source this property no longer works.

This blog plays around with a few of the control events used to display a watermark in bound C1ComboBox for Silverlight. The implementation checks if the focus is inside the editable part of C1ComboBox or not. When the focus is lost from C1ComboBox and the 'Text' property of C1ComboBox holds an empty string, watermark is displayed by adding a 'TextBlock.' When the editor receives the focus added TextBlock is removed.

VisualTree of C1ComboBox holds a C1DropDown control which further includes a Header and a DropDownList. 'Header' object is a Grid which holds a Border and C1TextEditableContentControl. When the focus is removed from C1ComboBox, 'TextBlock' is added to the Border object for the Header with the desired watermark string. When the focus is received, 'TextBlock' is removed from the Border.

Here is the suggested code implementation:

void c1ComboBox1_LayoutUpdated(object sender, EventArgs e)
{
    C1.Silverlight.C1DropDown dn = ((C1.Silverlight.C1DropDown)(((System.Windows.Controls.Grid)(VisualTreeHelper.GetChild(c1ComboBox1, 0))).Children[1]));
    ((dn.Header as Grid).Children[1] as C1.Silverlight.C1TextEditableContentControl).EditTextBox.GotFocus += new RoutedEventHandler(EditTextBox_GotFocus);
 }

void c1ComboBox1_LostFocus(object sender, RoutedEventArgs e)
{
    C1.Silverlight.C1DropDown dn = ((C1.Silverlight.C1DropDown)(((System.Windows.Controls.Grid)(VisualTreeHelper.GetChild(c1ComboBox1, 0))).Children[1]));

    if (c1ComboBox1.Text == "")
    {
        ((dn.Header as Grid).Children[0] as Border).Child = new TextBlock() { Text = "Select Item...", VerticalAlignment= System.Windows.VerticalAlignment.Center};
    }
    else
    {
        ((dn.Header as Grid).Children[0] as Border).Child = null;
    }
}

void EditTextBox_GotFocus(object sender, RoutedEventArgs e)
{
    C1.Silverlight.C1DropDown dn = ((C1.Silverlight.C1DropDown)(((System.Windows.Controls.Grid)(VisualTreeHelper.GetChild(c1ComboBox1, 0))).Children[1]));
    if (c1ComboBox1.Text == "")
        ((dn.Header as Grid).Children[0] as Border).Child = null;
}

For complete implementation, please refer to the attached sample.

Download Sample