[C#/WPF] Path 엘리먼트 : Data 속성에서 패스 미니 언어 사용하기

■ Path 엘리먼트의 Data 속성에서 패스 미니 언어를 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="CodeTextBlockStyleKey" TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Left"        />
            <Setter Property="Padding"             Value="10"          />
            <Setter Property="Background"          Value="#33cccccc"   />
            <Setter Property="FontFamily"          Value="Courier New" />
            <Setter Property="TextWrapping"        Value="Wrap"        />
        </Style>
        <DrawingBrush x:Key="GridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile"
            options:Freeze="True">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>
    <ScrollViewer>
        <StackPanel Margin="10">
            <TextBlock
                FontWeight="Bold">
                Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 L 200 70</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="100"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 L 200 70" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Horizontal Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 H 200</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="100"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 H 200" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Vertical Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 V 200</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="210"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 V 200" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Cubic Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 C 100 0 200 200 300 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 C 100 0 200 200 300 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Quadratic Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 Q 200 200 300 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 Q 200 200 300 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Smooth Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 C 35 0 135 0 160 100 S 285 200 310 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="320"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 C 35 0 135 0 160 100 S 285 200 310 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Elliptical Arc
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 A 100 50 45 1 0 200 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="300"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 A 100 50 45 1 0 200 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Close Path Command
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 L 100 100 100 50 Z</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 L 100 100 100 50 Z" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Multiple Subpaths
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    Stroke="Black"
                    StrokeThickness="3"
                    Data="M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z" />
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

<DrawingBrush x:Key="GridDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile"

options:Freeze="True">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Window.Resources>

<TextBlock

FontWeight="Bold">

Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="100"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 L 200 70" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Horizontal Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="100"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 H 200" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Vertical Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="210"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 V 200" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Cubic Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 C 100 0 200 200 300 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Quadratic Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 Q 200 200 300 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Smooth Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="320"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 C 35 0 135 0 160 100 S 285 200 310 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Elliptical Arc

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="300"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 A 100 50 45 1 0 200 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Close Path Command

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 L 100 100 100 50 Z" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Multiple Subpaths

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

Stroke="Black"

StrokeThickness="3"

Data="M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z" />

</Border>

</StackPanel>

</ScrollViewer>

</Window>

TestProject.zip