圆形边缘边框被边框顶部的文本框剪裁

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>

如果文本没有聚焦，它会完美显示圆边边框。

如何使边框保持完整，即使在聚焦时也是如此？

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 的样式。您可以从 default template 作为指导开始。由于您的控件是只读的，因此您可以简单地删除 PointerOver 和 Focused VisualState Storyboard 的内容，或者至少删除 BorderElement 上的动画。

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

圆形边缘边框被边框顶部的文本框剪裁

Rounded edge border is clipped by textbox on top of the border

c#

xaml

uwp

uwp-xaml