WPF TextBlock sovrappone Ellisse

Question

Sto cercando di creare questa in WPF (mi rendo conto che ho potuto solo usare un'immagine, ma sto cercando di imparare WPF):

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

Questo è quello che ho finora ma non produce il risultato desiderato, in quanto, la casella di testo sembra nascondere completamente l'ellisse che occorre semplicemente avere uno sfondo trasparente:

<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

si può mettere le cose come questo in un viewBox per rendere più facile il ridimensionamento, qualcosa come questo. Dovrai rimuovere il pannello dello stack, impilerà gli elementi uno sopra l'altro che non è quello che stai cercando qui. Ho usato una griglia in questo caso.

<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

Non utilizzare uno StackPanel per questo, lo scopo di esso è di impilare le cose, non mostrare loro sovrapposti, si sta utilizzando lo strumento sbagliato per questo. Usa una griglia, è molto più adatto per quello che stai cercando di fare.

Per avere uno sfondo trasparente, è necessario impostare lo Background property di TextBlock su Transparent o impostare uno sfondo nullo.

Background={x:Null} 

Answer 3

Così uno stackpanel posizionerà il primo elemento in alto, il secondo proprio sotto di esso, il terzo sotto il secondo e così via. Quello che potresti fare è usare una tela o una griglia. Come lo stackpanel, sono "Controlli del contenuto" e supportano l'inserimento di più oggetti all'interno di essi, come si è fatto con lo stackpanel.

Quindi un modo molto veloce per fare quello che stai cercando di realizzare sarebbe:

<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

oppure è possibile utilizzare il carattere unicode: ⓘ

codice 0x24D8

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