Shape 배치
1 2 3 4 5 6 7 | <Viewbox Stretch="Fill"> <Canvas Width="200" Height="200"> <Ellipse Fill="Yellow" Stroke="Black" Canvas.Left="10" Canvas.Top="10" Width="10" Height="10"/> <TextBlock>화면에 따라서 줄어들거임</TextBlock> </Canvas> </Viewbox> | cs |
Canvas 는 Canvas.Left, Canvas.Top 등으로 좌표를 조절 가능함.
Visual Studio 에서 WPF Window 미리보기에서 드래그로도 가능함.
ViewBox 는 Content 를 그래픽화해서 자신의 크기에 따라 내부의 그래픽의 크기도 바뀜.
ViewBox 는 Stretch 속성을 갖는데 Shape 의 Stretch 와 같은 의미를 가짐.
Shape
공통 속성
Stretch
uniform(모양 유지해서 늘리기), stretch(모양 무시하고 늘리기), UniformToFill(큰 방향을 기준으로 모양유지해서 늘리기).
Fill
채우기, 그라데이션Stroke
도형 외곽 라인 색
StrokeThickness
외곽 라인 두께
StrokeStartLineCap / StrokeEndLineCap
line 등에 해당되는 속성.
왼쪽부터 Flat, Round, Rectangle, Triangle.
Flat 과 Rectangle 의 차이는 반지름만큼 공간을 먹는 것이 Rectangle, 선 그대로의 길이인 것이 Flat.
StrokeLineJoin
왼쪽부터 Miter, Bevel, Round 순서.
StrokeMiterLimit
다음처럼 StrokeThickness 가 클 때, 접점의 각도가 작을 수록 접히는게 커짐.
이때 StrokeMiterLimit 이 사용됨.
StrokeMiterLimit * (StrokeThickness / 2) 의 픽셀만큼만 허용됨.
StrokeDashArray
1 2 3 | <Polyline Stroke="Black" StrokeThickness="2" Points="10,30 60,0 90,40 120,10 300,80" StrokeDashArray="1 0.2 3 2"/> | cs |
StrokeDashArray 는 "찍고 안찍고 찍고 안찍고" 순으로 지정됨.
단위는 StrokeThickness 임.
위의 예에선 2px 그려지고 0.4px 안그려지고 6px 그려지고 4px 안그려지는 패턴으로 선이 그려짐.
StrokeDashOffset
StrokeDashArray 는 배열임.
처음 어떤 것부터 시작할지 index를 여기에 기입함.
위는 위 예시에 StrokeDashOffset 을 3으로 한 예.
StrokeDashCap
위의 StrokeLineCap 과 같음.
GeometryTransform / LayoutTransform
GeometryTransform 은 컨트롤이 위치잡은 후 그래픽의 변형을 함.
LayoutTransform 은 컨트롤이 위치잡기 전 그래픽의 변형을 함.
그래서 후자의 경우 회전 등을 하면 레이아웃이 바뀜.
아래 예시는 위 두가지 버전 모두 가능함.
1 2 3 | <Rectangle.RenderTransform> <RotateTransform Angle="30" CenterX="50" CenterY="5"/> </Rectangle.RenderTransform> | cs |
CenterX/Y 는 부모기준의 픽셀단위 회전축.
1 2 3 4 5 6 | <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="-1"/> <TranslateTransform X="0" Y="50"/> </TransformGroup> </Rectangle.RenderTransform> | cs |
TransformGroup 으로 여러개 적용가능.
1 2 3 4 5 6 | <Rectangle Width="100" Height="10" Stroke="Blue" Fill="Yellow" HorizontalAlignment="Left" RenderTransformOrigin="0.5, 0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="30"/> </Rectangle.RenderTransform> </Rectangle> | cs |
CenterX/Y 이나 Translate 는 RenderTransformOrigin 으로 대체가능
공통 속성
Ellipse
Width, Height 으로 만드는 타원
Rectangle
Rectangle 은 RadiusX, RadiusY 로 모서리가 둥근 사각형을 만들 수 있음.
Line
1 2 | <Line Stroke="Black" X1="0" Y1="0" X2="10" Y2="50" StrokeThickness="10" Canvas.Left="50" Canvas.Top="50"/> | cs |
말 그대로 선. X1, Y1, X2, Y2 는 시작좌표와 끝좌표를 말함.
PolyLine
1 2 | <Polyline Stroke="Blue" Points="50, 50 100, 100 100, 100 0, 30" StrokeThickness="10" /> | cs |
X1, Y1 X2, Y2, X3, Y3 ... 이런식으로 Points 를 넣으면 됨.
Polygon
1 2 | <Polygon Stroke="Blue" Points="50, 50 100, 100 100, 100 0, 60" StrokeThickness="10" Fill="Yellow" /> </Ca | cs |
Path
Geomtry
1 2 3 4 5 | <Path Fill="Yellow" Stroke="Blue" Margin="10"> <Path.Data> <EllipseGeometry RadiusX="50" RadiusY="25" Center="50, 25"/> </Path.Data> </Path> | cs |
위처럼 Path.Data 에 넣던가
1 2 3 4 5 6 7 8 9 10 | <Window.Resources> <GeometryGroup x:Key="geo01" FillRule="EvenOdd"> <RectangleGeometry Rect="0, 0 100,100"/> <EllipseGeometry RadiusX="35" RadiusY="20" Center="200,50"/> </GeometryGroup> </Window.Resources> ... <Path Fill="Yellow" Stroke="Blue" Data="{StaticResource geo01}"/> | cs |
위처럼 Resource 로 빼서 Binding 가능.
이 경우 Fill, Stroke 만 다르고 모양은 같은 여러 버전을 생산할 수 있음.
EvenOdd 면 겹친 횟수에 따라 칠하냐 안칠하냐가 결정됨.
구멍 만들 때 유용함.
다른 컨트롤의 Clip 속성에 쓰면 Mask 역할도 할 수 있음.
CombindedGeometry
1 2 3 4 5 6 7 8 9 10 | <Path.Data> <CombinedGeometry GeometryCombineMode="Exclude"> <CombinedGeometry.Geometry1> <RectangleGeometry Rect="0,0 100,100"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="85,50" RadiusX="60" RadiusY="30"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> | cs |
CombindedGeometry 는 두 Geometry 의 집합 관계로 표현하는 것임.
GeometryCombineMode 는 집합연선이 지정되어 있음.
이때 Geomtry1, 2 는 CombindedGeometry 를 재귀적으로 적용가능함.
PathGeomtry
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <Path Stroke="Black" StrokeThickness="4"> <Path.Data> <PathGeometry> <PathFigure StartPoint="10,100" IsClosed="True"> <LineSegment Point="100,100"/> <LineSegment Point="100, 50"/> </PathFigure> <PathFigure StartPoint="0, 100"> <ArcSegment Point="200, 100" Size="200, 200" SweepDirection="Clockwise" IsLargeArc="True"/> </PathFigure> <PathFigure StartPoint="10, 110"> <ArcSegment Point="210, 110" Size="200, 200" SweepDirection="Counterclockwise" IsLargeArc="False"/ </PathFigure> <PathFigure StartPoint="300, 100"> <BezierSegment Point1="350, 100" Point2="350, 200" Point3="400, 200"/> </PathFigure> <PathFigure StartPoint="300, 100"> <LineSegment Point="400, 200"/> </PathFigure> </PathGeometry> </Path.Data> </Path> | cs |
LineSegment 는 그냥 직선임.
ArcSegment 는 Size 를 반지름으로 갖는 원의 StartPoint, Point 를 지나는 부분임.
BezierSegment 는 StartPoint 와 Point3 을 지나는 직선이 Point1, 2 로 잡아당겨지는 것.
양이 많아질수록 태그의 양에 비해 정보가 작아져, 이를 대체하기위해 만든 언어.
Path Mini Language
1 2 | <Path Stroke="DarkBlue" Data="M 10,10 L 110,10 L 110,90 Z M 200,200 L 150, 200 Z"/> <Path Stroke="Black" Data="M 30,30 A 50,50 10 0 0 130,30 Z M 10,10 C 230,20 40,140 150,150 S 200,40 350,150"/> | cs |
양이 많아질수록 태그의 양에 비해 정보가 작아져, 이를 대체하기위해 만든 언어.
M 은 시작 Z 는 종료.
예를들어 StartPoint = 30, 30 -> LineSegment 110, 10 ... 이런 것임.
다양한 요소는 찾아봐야함.
댓글 없음:
댓글 쓰기