UWP XAML边框：意外溢出_Xaml_Uwp_Uwp Xaml

UWP XAML边框：意外溢出

xaml uwp

UWP XAML边框：意外溢出,xaml,uwp,uwp-xaml,Xaml,Uwp,Uwp Xaml,在仔细思考的同时，我发现（对我来说）XAML中Border元素的一些意外行为。也就是说，当一侧的BorderThickness设置为0时，相邻一侧的边界似乎溢出为了演示，我制作了一个快速样品 <Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xa

在仔细思考的同时，我发现（对我来说）XAML中

Border

元素的一些意外行为。也就是说，当一侧的

BorderThickness

设置为0时，相邻一侧的边界似乎溢出

为了演示，我制作了一个快速样品

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

    <Canvas>
        <Rectangle Height="20" Width="300" Fill="Blue" Margin="50, 30, 0 ,0"  />
        <Border Height="20" Width="300" Background="Green" Margin="50, 50, 0 ,0" BorderBrush="Red" BorderThickness="0,0,0,4" />
    </Canvas>
</Page>

这将产生以下可视表示（放大以获得更好的可见性）

如您所见，红色边框与实际的

边框

元素重叠1px。蓝色的

矩形

用于验证它不是绿色背景，而是红色边框不合适

现在是有趣的部分。当我编辑代码以便

BorderThickness=“4,0,0,4”

时，左侧溢出消失，但顶部有一个溢出

现在回答我的问题：

这是

边框的预期行为吗


有没有办法避免使用多个矩形
，从而进一步增加复杂性
尝试Margin=“0,50,0,0”作为绿色背景，并检查发生了什么。@RahulJha那么Border
元素会按照您的预期向左移动，溢出不再可见，因为它超出了页面和窗口的边界。您的屏幕分辨率是多少？可能尝试在我报告的标准1920*1080设备上禁用画布上的UseLayoutRounding
？@JustinXL。但我能够在SP4上以200%的2736*1824以及在L950XL上以350%的1440*2560重现这种行为。已尝试禁用UseLayoutRounding
，但无效。为什么要将边框的厚度用作线条？一个borderthickness
有四个边，我认为这个溢出是为其他边考虑的。试着想象一下底部的边框厚度如何与左边的链接？我建议您使用link
元素，如下所示：`Try Margin=“0,50,0,0”作为绿色背景，并检查发生了什么。@RahulJha那么Border
元素会按照您的预期向左移动，溢出不再可见，因为它超出了页面和窗口的边界。您的屏幕分辨率是多少？可能尝试在我报告的标准1920*1080设备上禁用画布上的UseLayoutRounding
？@JustinXL。但我能够在SP4上以200%的2736*1824以及在L950XL上以350%的1440*2560重现这种行为。已尝试禁用UseLayoutRounding
，但无效。为什么要将边框的厚度用作线条？一个borderthickness
有四个边，我认为这个溢出是为其他边考虑的。试着想象一下底部的边框厚度如何与左边的链接？我建议您使用link
元素，如下所示：``