Question

I’m working on a feature that will allow a user to click onto a blank area (e.g. a Canvas) and add a span of text where they click. After they click, they can immediately edit the text, change the foreground, font size, etc. Kind of like adding a span of text to a PowerPoint slide.

I’m wondering what the best approach for such a control would be. My initial thought would be a custom control (inherit from Control) that has two internal TemplateParts: a TextBlock and a TextBox. I will have two visual states: Viewing and Editing. I’ll have a string dependency property on the custom control called Text that the two template parts are bound to on their own Text properties. When the user clicks on the control, it goes into Editing mode, the TextBlock is collapsed and the TextBox is visible. When the TextBox loses focus, the control goes into Viewing mode and the TextBlock becomes visible. When the user edits the text in Editing mode, the Text property is updated and all the bindings reflect the new Text value.

My concern with this approach is the number of bindable properties I’m going to have to wrap. For example, Control has Foreground, FontSize, and FontFamily properties. I want these properties to be carried into my two template part controls because they should reflect what the user wants to see at all times – both in Viewing and Editing mode. For example, setting Foreground=Red on the custom control means the internal TextBox and TextBlock should also have a Red foreground. Thus, I have to wire up the bindings in OnApplyTemplate for every property for both template parts:

public override void OnApplyTemplate(){ 

    // ... stuff ...

    var foregroundBinding = new Binding
    {
        Source = this,
        Path = new PropertyPath("Foreground")
    };

    myTextBox.SetBinding(TextBox.ForegroundProperty, foregroundBinding);
    myTextBlock.SetBinding(TextBlock.ForegroundProperty, foregroundBinding);

    // repeat for every other property, such as font size,
    // font family, width, maxwidth, height, maxheight,
    // horizontal alignment, yadda yadda yadda...
}

Given that there are possibly dozens of properties I’d want to transfer from my custom control to these internal template parts, this seems like a tedious approach that will be difficult to maintain – especially if I change my strategy for the template parts later on.

Is there a better approach, or am I on the right track here?

Answer 1

why do you need both, a TextBlock and a TextBox? From what you say, the TextBox alone would be enough. You would apply a style that has some triggers that change the looks depending on IsKeyboardFocused.