안녕하세요. 이번 시간에는 지난 시간에 살펴보았었던 XAML Import와 Export와 관련된 내용이 약간 부족한 듯싶어서 활용 예제로 저장 및 불러오기 기능을 갖춘 간단한 그림 낙서장에 대한 구현 해보도록 하겠습니다.
그림을 보시면 아시겠지만 Clear, Save, Load라는 아주 간단한 구조로 되어있습니다. 자 이제 그럼 10줄 정도의 코딩만으로 위와 같은 기능을 하는 간단한 그림 메모장을 구현해보도록 하겠습니다. 먼저 기본적인 Application Layout을 구성하도록 하겠습니다. 그림을 그리는 부분에는 InkCanvas를 사용했으며 레이아웃 구성을 위해 StackPanel과 DockPanel을 사용했습니다.
|
<DockPanel LastChildFill="True"> <StackPanel Orientation="Horizontal" Height="30" DockPanel.Dock="Bottom" HorizontalAlignment="Right"> <Button Width="100" Content="Clear Ink" x:Name="BtnClear" Click="BtnClear_Click"/> <Button Width="100" Content="Save Ink" x:Name="BtnSave" Click="BtnSave_Click"/> <Button Width="100" Content="Load Ink" x:Name="BtnLoad" Click="BtnLoad_Click"/> </StackPanel> <InkCanvas x:Name="Canvas" /> </DockPanel> |
DockPanel을 사용하여 InkCanvas와 Button을 포함하는 StackPanel을 배치 시켰고, StackPanel의 Orientation Property를 Horizontal로 설정하여 버튼들이 가로로 배치되도록 했습니다. 그리고 각각의 버튼의 Click Event를 생성해 주었습니다. 계속해서 각 버튼의 Event에 대한 내용의 코드를 살펴보겠습니다.
|
private void BtnSave_Click(object sender, RoutedEventArgs e) { File.WriteAllText("Ink.xaml", XamlWriter.Save(Canvas.Strokes)); } private void BtnLoad_Click(object sender, RoutedEventArgs e) { Canvas.Strokes = (StrokeCollection)XamlReader.Load(File.OpenRead("Ink.xaml")); } private void BtnClear_Click(object sender, RoutedEventArgs e) { Canvas.Strokes.Clear(); } |
함수 정의 부분을 빼곤 전부 한 줄 짜리 매우 간단한 코드입니다. 먼저 Save 버튼의 이벤트를 살펴보면, XamlWriter를 사용해 InkCanvas에 저장된 Stroke들을 문자열로 변환하고, System.IO Namespace에서 제공하는 File Class의 WriteAllText를 사용하여 StrokeCollection을 간단하게 Ink.xaml이란 파일에 기록했습니다. 그리고 Load 버튼의 이벤트는 File Class의 OpenRead메서드를 사용하여 File의 Stream을 가져오고 XamlReader를 사용해 StrokeCollection을 불러왔습니다. Clear 버튼을 눌렀을때에는 Strokes의 모든 내용을 지웠습니다.
비록 짧은 코드이고, 예외처리 하나도 없는 엉성한 코드이지만, 이 예제를 통하여 XAML Import 및 Export와 관련하여 쉽게 이해 하셨으면 하는 마음으로 준비해 봤습니다. 이와 관련된 질문은 메일이나 댓글 달아주세요~
