silverlight - 这是silverlight错误还是我做错了什么？网格对齐

Question

我有一个有 14 列的网格。如果我在第一个网格的第一列中放置另一个 28 列的网格并将其跨越 14，它将每列分成两部分。但是，如果我创建 42 列（3x14）的网格，它不会将每一列拆分为三个 eaqul 部分。

这个有效：

这不起作用（不均分）：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
    <Grid x:Name="AllWhiteKeys" Margin="0,0,0,200">         
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle Name="WhiteKey1" Grid.RowSpan="3" Grid.Column="0" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey2" Grid.RowSpan="3" Grid.Column="1" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey3" Grid.RowSpan="3" Grid.Column="2" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey4" Grid.RowSpan="3" Grid.Column="3" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey5" Grid.RowSpan="3" Grid.Column="4" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey6" Grid.RowSpan="3" Grid.Column="5" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey7" Grid.RowSpan="3" Grid.Column="6" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey8" Grid.RowSpan="3" Grid.Column="7" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey9" Grid.RowSpan="3" Grid.Column="8" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey10" Grid.RowSpan="3" Grid.Column="9" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey11" Grid.RowSpan="3" Grid.Column="10" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey12" Grid.RowSpan="3" Grid.Column="11" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey13" Grid.RowSpan="3" Grid.Column="12" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>
        <Rectangle Name="WhiteKey14" Grid.RowSpan="3" Grid.Column="13" Fill="White" StrokeThickness="1" Stroke="Black" RadiusX="8" RadiusY="8"/>

        <Grid Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="14">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>

                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>

                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
        </Grid>
    </Grid>
    </Grid>

Answer 1

这只是一个舍入误差。

您的总宽度为 640，分为 42 列，每列 15.23 像素，但是当它们计数时，列会四舍五入到最近的像素，因此列会轻微地前后移动。

如果您将设计宽度更改为 42 的倍数（例如 630），它就会消失。请参见下面的示例 (630 * 480)：

正如@Joe White 提到的，您可以使用 关闭舍入UseLayoutRounding，但如果您希望它清晰明了，您需要开始考虑基于像素的尺寸（例如早期视频游戏开发的好日子）。

Answer 2

As @HiTechMagic said, this is most likely a rounding error. By default, Silverlight rounds all positions to the nearest integer.

If you want things to line up exactly, you can set UseLayoutRounding to False on your outer Grid.

If you do this, be aware that some things will be at fractional-pixel positions, so images will look blurry and backgrounds won't match up seamlessly (which is probably why layout rounding is on by default). If you're trying to make a piano keyboard, though, you'll probably be fine -- the only elements with backgrounds would be the black keys, and no two of those are ever adjacent.