.net - 如何消除 XAML 中网格列之间的间隙（Windows 应用商店应用程序）

Question

我正在为 Windows 应用商店应用程序在 XAML 中构建 UI；它在相邻列中使用两个背景图形。XAML 如下：

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="11" />
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/stop-title-background-strip.png" Stretch="Fill" />
            <Image Grid.Column="1" Source="/Assets/routes-chevron.png" Stretch="Fill" />
            <TextBlock Text="Available Routes" />
        </Grid>

然而，当它被渲染时，列之间有一个明显的微小间隙：

在此处输入图像描述

我尝试将 Grid 和 Image 元素的 UseLayoutRounding 属性设置为“true”（和 false），但这并不能解决问题。

我怎样才能阻止这个差距出现？

score 0 · Accepted Answer

0

尝试将Margin列之间的值设置为 0。

于 2012-10-25T17:10:56.720 回答

score 0 · Accepted Answer

您需要对一张或多张图像使用负值。通常不建议这样做，但这似乎是一个足够好的例外。你需要做类似的事情

<Image
    Source="/Assets/stop-title-background-strip.png"
    Stretch="Fill" />
<Image
    Grid.Column="1"
    Source="/Assets/routes-chevron.png"
    Stretch="Fill"
    Margin="-20,0,0,0" />

或者

<Image
    Source="/Assets/stop-title-background-strip.png"
    Stretch="Fill"
    Margin="0,0,-20,0" />
<Image
    Grid.Column="1"
    Source="/Assets/routes-chevron.png"
    Stretch="Fill" />

score 0 · Accepted Answer

我今天也遇到了这个问题，用负边距重叠单元格是没有选择的——单元格的内容有 alpha 值，重叠会产生奇怪的结果。

经过数小时的调查，我找到了差距的原因并纠正了它们，但令人难以置信的是，解决方案必须是这样的，这是我期望 UI 框架能够处理的。

无论如何，这是我找到的解决方案：

问题显然是在使用时处理与设备无关的像素的方式并不总是正确Grids的——行高、列宽、网格 x 和 y 位置值的某些组合确实会导致舍入误差，从而导致间隙。当网格的位置和大小是完全动态的并在 XAML 中设置时，可能不会发生这种情况，但这并非在所有情况下都是可能的。

因此解决方案是确保将所有上述值设置为完美的设备像素，而不是任何可能计算的双精度值。我使用以下函数为所有相关值完成此操作，并且所有差距都消失了：

private double RoundToDevicePixels(double originalValue)
{
    double dpi = DisplayInformation.GetForCurrentView().LogicalDpi;
    double dpiFactor = (96.0 / dpi);
    int xDpi = (int)(originalValue * dpiFactor);
    return xDpi / dpiFactor;
}

score 0 · Accepted Answer

我的回答有点晚了，但我仍然希望它能有所帮助。

在网格中设置UseLayoutRounding为 false。

UseLayoutRounding设置为假：

UseLayoutRounding未设置（默认为真）：

.net - 如何消除 XAML 中网格列之间的间隙（Windows 应用商店应用程序）

4 回答 4

Related

Reference