How to put an outlined textBlock (or any other control) in a TextBox

Question

I am using this outlined textBlock that with the solution proposed by Javier G. works like a charm. I put it in a library so now it's HelperLib:OutlinedTextBlock.
Now I would like to put it in a TextBox.

So what I tried is:

• Put the OutlinedTextBox as a child of a TextBlock but that didn't work since it's not accepting it as a child.
• Use a RichTextBox and the put it inside a FlowDocument but something went wrong since a got a Runtime error
  • Use a template but again Runtime error.

If the fact of putting the outlinedTextBox makes it too peculiar I think that this can be rethought as putting anyother control inside a textbox.

I think the solution is close but somehow it still escapes me... --EDIT-- There is an additiona problem which I have never encountered: I have named my control otbQuery but it doesn't show up in the code!!! Why???

<TextBox Name="tbxQuery" VerticalAlignment="Center" Grid.Column="3" Width="200" Background="Transparent" CaretBrush="White" HorizontalAlignment="Center" Foreground="White" TextChanged="TextBox_TextChanged" BorderBrush="Gainsboro" BorderThickness="3">
    <TextBox.Template>
       <ControlTemplate>
          <Border BorderBrush="Gainsboro" BorderThickness="3">
             <Grid>
         -----> <HelperLib:OutlinedTextBlock Name="otbQuery" Margin="1" Fill ="White" Stroke="Red" Text="{Binding Path=Content, ElementName=cp, Mode=OneWay}" VerticalAlignment="Center"/>
                <ContentPresenter x:Name="cp" Content="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" TextBlock.Foreground="Transparent"/>
              </Grid>
          </Border>
       </ControlTemplate>
    </TextBox.Template>             
</TextBox>

you can see the error here and no valid quick fix is proposed

Answer 1

You will need to override the ControlTemplate of the TextBox control in order to make that happen. Below is a simple example of how to do that, and still have the TextBox.Text property bound to the Text property of the TexBlock.

        <TextBox>
            <TextBox.Template>
                <ControlTemplate>
                    <Border BorderBrush="Black"
                        BorderThickness="1">
                        <Grid>
                            <TextBlock Margin="1" 
                                        Foreground="Red"
                                        Text="{Binding Path=Content, ElementName=cp, Mode=OneWay}"/>
                            <ContentPresenter x:Name="cp"
                                            Content="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}"
                                                                TextBlock.Foreground="Transparent"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </TextBox.Template>
        </TextBox>

Where I have put a standard TextBlock inside the ControlTemplate, you would put your custom TextBlock control.

EDIT

The above solution works, but it's a serious kludge. Basically, it puts a transparent ContentPresenter on top of the TextBlock . The TextBlock display the text in the manner you want and the ContentPresenter allows you to type in the TextBox.

One problem that still exists is that the cursor bar does not show up when clicking on, or typing in the TextBox. I suspect that problem could be overcome with some more styling done to the template of the TextBox.