[TIP] Center 정렬시 주의점

오브젝트의 Center 정렬시 주의점

문제점
Grid, StackPanel등 HorizontalAlignment와 VerticalAlignment를 지원하는 패널의 경우 패널에 포함된 자식 오브젝트를 Center로 정렬할 때 해당 패널의 길이가 홀수일 경우 오브젝트가 부옇게 표시되는 현상

재현
다음의 XAML 코드를 실행해 보면 두번째 Rectangle의 위쪽과 아래쪽 변이 뿌옇게 보이게 됩니다.

    <StackPanel Width="400" Height="200" x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
        <Grid Width="120" Height="200" VerticalAlignment="Top">
            <Rectangle Width="100" Height="100" Stroke="#FF000000" VerticalAlignment="Center" />
        </Grid>
        <Grid Width="120" Height="199" VerticalAlignment="Top">
            <Rectangle Width="100" Height="100" Stroke="#FF000000" VerticalAlignment="Center" />
        </Grid>
    </StackPanel>

원인
이것은 좌표의 소수점 표현을 허용하는 벡터 그래픽의 특성상 표현되는 오브젝트가 소수점 단위에 걸쳐 있을 때 안티앨리어싱 알고리즘에 따라 가장자리가 뿌옇게 보입니다.
이것은 버그나 렌더러의 문제는 아니고 단지 눈에 보이는 결과에 대한 최적화가 고려되지 않았을 뿐입니다.

해결 방법
위에서 보인 두번째 Grid블럭을 카피하여 세번째 Grid 블럭을 만들고 세번째 Grid 블럭에 있는 Rectangle의 Top Margin을 1 더해주면 오브젝트가 제 위치로 정렬됩니다.
마찬가지로 Center정렬시 부모 패널의 길이가 홀수일 때 부옇게 되는 것을 막기 위해서는 자식 오브젝트의 Left(혹은 Top)Margin에 1을 더해주면 됩니다.

그러나 이 방법은 완전한 해결 방법은 아닙니다. 왜냐면 좌표가 +1되었기 때문에 오브젝트는 완벽하게 정가운데로 정렬되지 않고 정가운데 축에서 +1만큼 치우치게 됩니다. 이 방법은 폰트, 직선이 많은 도형 및 이미지 등과 같이 깔끔한 선으로 구성된 오브젝트에 대해서 적용하는 것이 좋고 일반적인 이미지나 그래픽의 경우에는 굳이 적용하지 않는 것이 좋습니다.

        <Grid Width="120" Height="199" VerticalAlignment="Top">
            <Rectangle Margin="0,1,0,0" Width="100" Height="100" Stroke="#FF000000"  VerticalAlignment="Center"/>
        </Grid>

[출처] 실버라이트 네이버 카페