WPF TextBlock Overlaps Ellipse

Question

I'm trying to create this in WPF (I understand that I can just use the image, but I'm trying to learn WPF):

http://www.iconarchive.com/show/ios7-icons-by-visualpharm/info-icon.html

This is what I have so far, but it does not give the desired result, in this text box seems to be a completely hidden ellipse, whereas it should just have a transparent background:

<StackPanel> <TextBlock HorizontalAlignment="Left" Margin="144,207,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/> <Ellipse HorizontalAlignment="Left" Height="52" Margin="142,189,0,0" Stroke="Black" VerticalAlignment="Top" Width="52"/> </StackPanel> 

Answer 1

You can put such things in the viewport to make it easier to scale, something like this. You will need to remove the stack panel in order to collect elements on top of each other, and not what you are here. In this case, I used a grid.

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

Answer 2

Or you can use the Unicode character: ⓘ

code 0x24D8

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

Answer 3

So, the first element will be placed on the stack at the top, the second - under it, the third below the second, etc. You can use Canvas or Grid. Like the stack panel, they are “content controls” and support the placement of several objects inside them, as was done with the stack panel.

So, a really quick way to do what you are trying to accomplish would be as follows:

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

Answer 4

Do not use the StackPanel for this, the goal is to drain things, and not show them overlapping, you are using the wrong tool for this. Use a grid, it is much more suitable for what you are trying to do.

To have a transparent background, you need to either set the TextBlock Background Properties to Transparent, or set the background to zero.

 Background={x:Null}