Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF TextBlock Overlaps Ellipse

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

enter image description here

(source)

This is what I have so far but it isn't producing the desired result, in that, the textbox seems completely hide the ellipse whereas it should simply 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>
like image 607
user1477388 Avatar asked Jul 31 '13 12:07

user1477388


2 Answers

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>

enter image description here

like image 139
Andy Avatar answered Oct 04 '22 05:10

Andy


Or you can use the unicode character:

code 0x24D8

 <TextBlock Text="ⓘ" FontSize="52" />
like image 37
Henk Holterman Avatar answered Oct 04 '22 06:10

Henk Holterman