KeiStory

WPF DrawingBrush 사용하여 화면에 도형 그리기

 

DrawingBrush 로 정의된 DrawingGroup 을 그리게되는데 Viewport 로 화면에 표시되는 비율을 정의할 수 있으며

TileMode 를 이용해 어떻게 표시될지를 정의할 수있습니다.

 

아래 코드와 같이 사각형 안에 단순히 X 표시를 하는 Geometry 를 정의하여 도형을 체울 수 있습니다.

<Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
        <DrawingBrush >
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />
                        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

 

이를 Viewport 를 이용하여 비율을 조정할 수 있습니다.

(참고 : https://docs.microsoft.com/ko-kr/dotnet/api/system.windows.media.tilebrush.viewport?view=netcore-3.1)

<Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
        <DrawingBrush Viewport="0,0,0.5,0.5">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />
                        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

값을 보면 알겠지만 ViewPort 의 뒤 두자리 수가 가로,세로 비율이라고 보면 됩니다. 0.5 이므로 반으로 줄어들어 표시가 됩니다.

 

이제 여기서 TileMode 를 이용해 Tile 로 정의하면 타일형태로 체워지게됩니다.

(참고 : https://docs.microsoft.com/ko-kr/dotnet/api/system.windows.media.tilebrush.tilemode?view=netcore-3.1)

<Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
        <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />                                        
						<GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

  

아래는 위 설명한 내용을 바탕으로 만든 예시입니다.

<Window x:Class="DrawingBrushExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <StackPanel Margin="10">
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
                    <Rectangle.Fill>
                        <DrawingBrush >
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <DrawingGroup.Children>
                                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />
                                        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                                    </DrawingGroup.Children>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Rectangle.Fill>
                </Rectangle>
 
                <Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
                    <Rectangle.Fill>
                        <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <DrawingGroup.Children>
                                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />
                                        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                                    </DrawingGroup.Children>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Rectangle.Fill>
                </Rectangle>
 
                <Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1">
                    <Rectangle.Fill>
                        <DrawingBrush Viewport="0,0,0.1,0.1" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <DrawingGroup.Children>
                                        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z" Brush="Blue" />
                                        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z" Brush="Blue" />
                                    </DrawingGroup.Children>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Rectangle.Fill>
                </Rectangle>
 
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Window>

 

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band