WPF 캔버스(WPF Canvas)
- 엘리먼트가 어디에 위치할지 좌표로 지정하는 전통적인 방법이다.
- WPF의 다른 부분과 마찬가지로 이 좌표계도 좌측 상단을 기준으로 1/96인치의 장치 독립적인 단위를 사용한다.
- 엘리먼트에는 X, Y, Left, Top과 같은 프로퍼티는 없으며 Canvas 패널을 사용할 때는 Canvas.SetLeft, Canvas.SetTop과 같은 정적메소드를 사용하여 자식엘리먼트의 위치를 지정한다. DockPanel의 SetDock 메소드처럼 SetLeft, SetTop은 Canvas 클래스에 정의되어 있는 첨부 프로퍼티와 연결되어 있다.
- Canvas의 우측하단을 기준으로 자식 엘리먼트의 오른쪽 또는 하단의 위치를 지정하려면 Canvas.SetRight, Canvas.SetBottom을 사용한다.
- 몇 가지 Shape 클래스(Line, Path, Polygon, PolyLine등)에는 이미 좌표 데이터가 저장되어 있는데 이런 엘리먼트를 Canvas 패널의 Children 컬렉션에 추가하고 좌표를 지정하지 않으면 엘리먼트에 있는 좌표 데이터를 이용하여 위치를 잡는다.
- 컨트롤과 같은 엘리먼트는 Canvas 위에서 적절하게 크기가 조절되지만 Rectangle, Ellipse 엘리먼트는 그렇지 않으므로 명시적으로 Width, Height를 대입하는 것이 좋고 Canvas 패널 자체의 Width, Height 프로퍼티에도 값을 지정하는 것이 일반적이다.
- Example Canvas XAML Code
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Canvas Test1" Height="300" Width="300">
<Canvas>
<Button Canvas.Left="40">Top left</Button>
<Button Canvas.Right="80">Top right</Button>
<Label Content="Label Text" Canvas.Bottom="110" Canvas.Left="110"/>
<Button Canvas.Left="20" Canvas.Bottom="10">Bottom left</Button>
<Button Canvas.Right="40" Canvas.Bottom="10">Bottom right</Button>
</Canvas>
</Window>
- 비주얼 스튜디오 -> WPF 응용프로그램 -> CanvasTest1
- MainWindow.xaml
<Window x:Class="CanvasTest1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CanvasTest1"
mc:Ignorable="d"
Title="Canvas Test1" Height="350" Width="525"
Loaded="WindowOnLoaded">
<Grid>
<Canvas HorizontalAlignment="Left" Height="319" Margin="0"
VerticalAlignment="Top" Width="517"
Name="canvas1"/>
</Grid>
</Window>
- MainWindow.xaml.cs
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
namespace CanvasTest1
{
class MyRectangle
{
public int Width { get; set; }
public int Height { get; set; }
public int Left { get; set; }
public int Top { get; set; }
public SolidColorBrush Color { get; set; }
}
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void WindowOnLoaded(object sender, RoutedEventArgs e)
{
// MyRectangle을 담기위한 ArrayList
List<MyRectangle> rects = new List<MyRectangle>();
// MyRectangle을 담는다.
rects.Add(new MyRectangle()
{
Width = 100,
Height = 100,
Left = 0,
Top = 0,
Color = Brushes.MediumSpringGreen
});
rects.Add(new MyRectangle()
{
Width = 50,
Height = 50,
Left = 100,
Top = 100,
Color = Brushes.YellowGreen
});
rects.Add(new MyRectangle()
{
Width = 25,
Height = 25,
Left = 150,
Top = 150,
Color = Brushes.PowderBlue
});
foreach (MyRectangle rect in rects)
{
// Rectangle 객체생성
Rectangle r = new Rectangle();
r.Width = rect.Width;
r.Height = rect.Height;
r.Fill = rect.Color;
// Canvas내 위치를 기본적인 MyRectangle의 위치로 설정
Canvas.SetLeft(r, rect.Left);
Canvas.SetTop(r, rect.Top);
// Canvas에 추가
canvas1.Children.Add(r);
}
}
}
}
- 실행결과
#WPF캔버스, #WPFCanvas, #WPF강좌, #WPF교육, #WPF강의, #WPF학원, #닷넷학원, #시샵교육, #닷넷교육, WPF캔버스, WPFCanvas, WPF강좌, WPF교육, WPF강의, WPF학원, 닷넷학원, 시샵교육, 닷넷교육,
