RadMasked with Floating Label same as a RadWatermarkTextBox?

[Evangelista]

Hi,

Would it be possible to have an editable RadMasked Part to mimic the RadWatermarkTextBox with floating Label?

[Stenly]

Hello Evangelista,

Currently, the RadMaskedInput control does not provide out-of-the-box support for this requirement. However, you could still achieve the desired result, by writing some custom code. 

For example, you could subscribe to the Loaded event of the control, and using the ChildrenOfType extension method, retrieve the PreviewInputTextBox elements with x:Name="DisplayText" and x:Name="EditorSite". After that, you could include, for example, a TextBlock control inside the ScrollContentPresenter element (an instance of it is present inside each of the mentioned PreviewInputTextBox elements).

The following code snippet shows a sample implementation of this suggestion (in this case, I used a RadMaskedDateTimeInput):

private void RadMaskedDateTimeInput_Loaded(object sender, RoutedEventArgs e)
{
    var maskedInput = (RadMaskedDateTimeInput)sender;

    var displayTextPreviewTextBox = maskedInput.ChildrenOfType<PreviewInputTextBox>().FirstOrDefault(x => x.Name == "DisplayText");
    var editorSitePreviewTextBox = maskedInput.ChildrenOfType<PreviewInputTextBox>().FirstOrDefault(x => x.Name == "EditorSite");

    if (displayTextPreviewTextBox != null && editorSitePreviewTextBox != null)
    {
        this.SetTextBlock(displayTextPreviewTextBox);
        this.SetTextBlock(editorSitePreviewTextBox);
    }
}

public void SetTextBlock(PreviewInputTextBox previewInputTextBox)
{
    var contentHostScrollViewer = previewInputTextBox.ChildrenOfType<ScrollViewer>().FirstOrDefault(x => x.Name == "PART_ContentHost");

    if (contentHostScrollViewer != null)
    {
        var gridLayout = contentHostScrollViewer.ChildrenOfType<Grid>().FirstOrDefault();
        var textblock = new TextBlock() { Text = "Hi", FontSize = 10, Padding = new Thickness(5, 5, 5, 2) };
        Grid.SetRow(textblock, 0);

        for (int i = 0; i < gridLayout.Children.Count; i++)
        {
            var currentChild = gridLayout.Children[i];

            Grid.SetRow(currentChild, i + 1);
        }

        gridLayout.Children.Add(textblock);
    }
}

The produced result is as follows:

Alternatively, you can extract the default control template of the used RadMaskedInput control and introduce additional elements, in order to produce a result similar to the one in the RadWatermarkTextBox control.

I hope this information will be of help to you.

Regards,
Stenly
Progress Telerik

[Evangelista]

Very good. Thanks