WPF TextBlock重叠椭圆

Question

我正在尝试在WPF中创建它（我意识到我可以使用图像，但我正在尝试学习WPF）：

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

这是我到目前为止所得到的，但它没有产生预期的结果，因为文本框似乎完全隐藏了椭圆，而它应该只是一个透明的背景：

<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

您可以将这样的内容放在视图框中，以便更轻松地进行缩放，就像这样。你需要删除堆栈面板，它会将项目叠加在另一个上面而不是你在这里之后。在这种情况下我使用了网格。

<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

或者你可以使用unicode字符：ⓘ

代码0x24D8

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

Answer 3

因此，堆叠面板将第一个项目放在顶部，第二个放置在它下面，第三个放在第二个项目之下，依此类推。你可以做的是使用Canvas或Grid。与stackpanel一样，它们是“内容控件”，并且支持在堆栈面板中放置多个对象。

所以，一个非常快速的方法来做你想要完成的事情：

<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

不要使用StackPanel，它的目的是堆叠东西，而不是显示它们重叠，你使用错误的工具。使用网格，它更适合你想要做的事情。

要拥有透明背景，您必须将TextBlock的Background property设置为透明，或设置空背景。

Background={x:Null}

Answer 5

您可以使用边框和TextBlock来实现。如果将其CornerRadius等于其宽度（或高度）的一半，则正方形边框将变为圆形：

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