WPF TextBlock Overlaps Ellipse

Question

I am trying to create this in WPF (I realize I could just use an image, but I am trying to learn WPF):

(source)

This is what I have so far but it is

Answer 1

Don't use a StackPanel for this, the purpose of it is to stack things, not show them overlapped, you're using the wrong tool for that. Use a Grid, it's far more suited for what you're trying to do.

To have a transparent background, you have to either set the TextBlock's Background property to Transparent, or set a null background.

Background={x:Null}

Answer 2

So a stackpanel will place the first item at the top, the second just below it, third below the second, and so forth. What you could do is use a Canvas or a Grid. Like the stackpanel, they are "Content Controls" and support placing multiple objects inside of them like you have done with the stackpanel.

So a really quick way to do what you're trying to accomplish would be:

<Grid >
        <Ellipse HorizontalAlignment="Left" Height="52"  Stroke="Black" VerticalAlignment="Top" Width="52"/>
        <TextBlock  Text="i" FontSize="52" Margin="18,-13,-6,13" />
</Grid>

Answer 3

Or you can use the unicode character: ⓘ

code 0x24D8

 <TextBlock Text="ⓘ" FontSize="52" />

Answer 4

You can do it using a border and a TextBlock. A square border will become a circle if you make its CornerRadius equals half its Width (or Height):

        <Border Width="100" Height="100"  CornerRadius="50" BorderBrush="Black" BorderThickness="2">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                 FontSize="50"   Foreground="Blue"  >i</TextBlock>
        </Border>

Answer 5

You can put things like this in a viewbox to make scaling easier, something like this. You'll need to remove the stack panel, it's going to stack items one on top of the other which isn't what you're after here. I used a grid in this case.

<Viewbox Width="100" Height="100">
    <Grid Width="20" Height="20">
        <Ellipse Stroke="Black"/>
        <TextBlock HorizontalAlignment="Center" Text="i" TextAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Viewbox>