圆角边缘由边框顶部的文本框剪裁

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