文本框顶部截断了圆角边框

Question

我的圆角边框被位于边框上方的文本框裁剪了。

<Grid Background="AliceBlue">
    <Border Margin="50,0,50,0" VerticalAlignment="Center" BorderThickness="2" BorderBrush="Blue" CornerRadius="10">
        <TextBox Text="2345678" IsReadOnly="True" BorderThickness="0" Background="Transparent"/>
    </Border>
</Grid>

如果文本没有焦点，它会完美显示圆角边框。 当获得焦点时，如何保持边框完整？

- kurakura88

---

将TextBox的Margin设置好，或者将Border放在TextBox上方。 - Clemens

将文本框设置边距会使文本变小。如何将边框放在文本框的顶部？ - kurakura88

实际上，我甚至无法重现你的问题。考虑到它是只读的，当文本框处于“聚焦”状态时，这到底意味着什么？我们正在谈论哪个平台，WPF 还是 UWP？ - Clemens

它应该可在WPF或UWP中再现，我使用的是UWP。TextBlock不允许您选择文本，而TextBox允许。这是因为我想让用户复制文本，同时我又不想修改原始文本。因此，“焦点”表示您单击文本。虽然我知道有解决方法：在Border上放置Padding或将Margin设置为TextBox，但我还有哪些选项可以保持Border不被裁剪？ - kurakura88

我无法在WPF中重现它。没有尝试UWP。在WPF中，所选矩形位于边框后面，尽管没有被剪切。 - Clemens

明白了，谢谢！那我会加上UWP标签，请告诉我如果你有解决方案。 - kurakura88

Answer 1

最简单的解决方法是调整边距，这不会使文本变小（但您可能会有这样的印象，因为文本与边框稍微有些远离）。下面是没有和有边距的屏幕截图。

<Border Margin="50,0,50,0" VerticalAlignment="Center" BorderThickness="2"
        BorderBrush="Blue" CornerRadius="10">
    <TextBox Text="2345678" IsReadOnly="True" BorderThickness="0"
             Background="Transparent" Margin="4,1"/>
</Border>

更高级的场景（但仍然相当简单）是通过编辑模板来更改TextBox的样式。您可以从默认模板作为指导开始。由于您的控件是只读的，因此可以简单地删除PointerOver和Focused VisualState Storyboard的内容，或者至少是BorderElement上的动画。

<VisualState x:Name="PointerOver" />
<VisualState x:Name="Focused" />

- Bart

---

听起来还不错。让我试着移除PointerOver和Focused VisualState。 - kurakura88