WPF 文本块重叠椭圆

Question

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

(源代码)

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

<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>

- user1477388

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>

- Andy

---

很好，正是我想做的。 - user1477388

Answer 2

或者您可以使用Unicode字符：ⓘ

代码0x24D8

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

- H H

---

这是一个有趣的回答。这个会在所有机器上工作吗，还是说这是一种特定的字体或其他我应该担心的东西？ - user1477388

它是标准Unicode，应该可以在所有（可运行WPF的）机器上工作，但是当使用特殊字体时，您需要进行测试。 - H H

这与他所问的无关，他想学习WPF（我认为他试图弄清控件和布局），使用char将无助于他实现这一目标。 - SoManyGoblins

是的，我特意尝试重新构建它，以便学习WPF控件和布局；然而，这仍然是一个有趣、简洁且可能更好的解决方案！ - user1477388

一个单字符的TextBlock也是WPF... 这有一个很大的优点：不需要指定（和匹配）高度和宽度。你可以添加一个Margin，但FontSize作为SPOD。 - H H

Answer 3

所以，StackPanel 会将第一个项目放在顶部，第二个项目放在其下方，第三个项目放在第二个项目下方，以此类推。您可以使用 Canvas 或 Grid。与 StackPanel 一样，它们是“内容控件”，支持像 StackPanel 一样在其中放置多个对象。

因此，实现您想要的效果的一种快速方法是：

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

- Cramja

Answer 4

您可以使用边框和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>

- Eng. M.Hamdy

Answer 5

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

要设置透明背景，你必须将TextBlock的Background属性设置为Transparent，或者设置为空背景。

Background={x:Null}

- SoManyGoblins