0

Windows ストア アプリ用に XAML で UI を構築しています。隣接する列で 2 つの背景グラフィックを使用します。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) に設定しようとしましたが、問題は解決しません。

このギャップが現れないようにするにはどうすればよいですか?

4

4 に答える 4

0

Margin列間で0に設定してみてください。

于 2012-10-25T17:10:56.720 に答える
0

1 つ以上の画像に負の値を使用する必要があります。通常は推奨されませんが、これは十分な例外のようです。次のようなことをする必要があります

<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" />
于 2012-10-25T19:28:04.957 に答える
0

I also had this problem today, and overlapping the cells with negative margins was no option - the content of the cells had alpha values, and overlapping would have rendered strange results.

After hours of investigation I found the reason for the gaps and corrected them, but it's incredible that the solution has to be like this, that is what I would expect from the UI framework to handle.

Anyway, this is the solution I found:

The problem apparently is that the way device-independent pixels are treated is not always right when using Grids - certain combinations of row heights, column widths, grid x and y position values do result in rounding errors that lead to the gaps. Probably this won't occur when the grid's position and size are completely dynamic and set in XAML, but that's not possible in all cases.

So the solution is to ensure that all the above values are set to perfect device pixels instead of just any double value one might calculate. I used the following function to accomplish this for all relevant values, and all gaps are gone:

private double RoundToDevicePixels(double originalValue)
{
    double dpi = DisplayInformation.GetForCurrentView().LogicalDpi;
    double dpiFactor = (96.0 / dpi);
    int xDpi = (int)(originalValue * dpiFactor);
    return xDpi / dpiFactor;
}
于 2015-04-10T12:51:57.443 に答える