[WPF] Drawing Grid Lines on Canvas (캔버스에 격자 눈금선 그리기)

Canvas 의 사용 용도에 따라 눈금선이 필요한 경우가 있다. (Grid, Panel 등도 방법은 동일하다)

주로 그림판이나 이미지 관련 기능을 구현할 때 필요로 할텐데, 이를 구현해보자.

파워포인트의 눈금선 기능을 참고하자.

방법은 격자 무늬의 VisualBrush (혹은 DrawingBrush) 를 생성하고, 이를 컨트롤의 Background 로 지정하는 것이다.

상하, 좌우 각각 50pixel 간격의 격자를 생성하는 코드는 다음과 같다.

<Canvas>

        <Canvas.Background>

            <VisualBrush TileMode="Tile"

                Viewport="0,0,50,50" ViewportUnits="Absolute" 

                Viewbox="0,0,50,50" ViewboxUnits="Absolute">

                <VisualBrush.Visual>

                    <Rectangle Height="50" Width="50" 

                               Stroke="Darkgray" StrokeThickness="1" StrokeDashArray="5 3"/>

                </VisualBrush.Visual>

            </VisualBrush>

        </Canvas.Background>

</Canvas>

물론 위의 Brush 를 Resource 에 선언하고, Key 값을 통해 필요한 부분에서 사용하거나, xaml 측이 아닌 c# 측에서 선언하여 사용하는 방법도 가능하다.

위의 코드의 출력물은 다음과 같다.