TextBox inside an Ellipse WPF

Question

I am trying to add filtering to my WPF app, so I figured that I want to have an ellipse, and inside it will be a TextBox whose Text will be bound to a FilterText property in my ViewModel .

What I have tried:

<TextBox
      Width="30"
      Height="30">
      <TextBox.Template>
            <ControlTemplate>
                  <Grid>
                        <Ellipse Stroke="Black" StrokeThickness="1" />
                        <ContentPresenter
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Content="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              TextElement.Foreground="Black" />
                  </Grid>
            </ControlTemplate>
      </TextBox.Template>
</TextBox>

I took this from the same example, but with Label.

This displays the ellipse, but no TextBox inside it.

How can I create an ellipse WITH a TextBox?

Answer 1

Try this

<Grid>
    <Ellipse Stroke="Black" StrokeThickness="1"/>
    <TextBox Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"
             VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

Answer 2

Fixed it by wrapping the TextBox inside a Border and setting the Border 's CornerRadius :

<Border
       Width="30"
       Height="30"
       BorderBrush="Black"
       BorderThickness="1"
       CornerRadius="30">
       <TextBox
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              HorizontalContentAlignment="Center"
              VerticalContentAlignment="Center"
              Background="Transparent" //important to lose the TextBox look
              BorderBrush="Transparent" //important to lose the TextBox look
              BorderThickness="0" //important to lose the TextBox look
              Text="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Border>