Create Tile Image in Silverlight(or Siverlight for WP7)

Introduction

WPF의 경우 이미지나 드로잉객체를 바둑판형식으로 출력하기 위한 TileBrush를 제공하고있지만 Silverlight에서는 TileMode를 지원하고 있지 않아 Shader를 이용하거나 여러개의 객체를 생성하여 바둑판형식의 출력을 구현해 사용했습니다. 하지만 Windows Phone7과 같이 Shader등을 사용할 수 없는 제약 적인 환경에서는 다른 방법으로 구현해야 합니다.

여러개의 객체를 바둑판식으로 배열하는 방법에 대해 생각해 볼 수 있겠지만, 이는(동적으로 생성했다 할지라도) 렌더링에 필요한 모든 과정(레이아웃,렌더링 등)의 연산이 매번 필요하기 퍼포먼스나 관리 측면에서 효율적이라 하긴 어렵습니다. 이번시간에는 이와같은 환경에서 동적으로 Tile Image를 생성하여 바둑판식 출력을 구현하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게될 결과물이며 WindowsPhone7에서 동일한 코드로 사용이 가능합니다.

Create Tile Image Generator

먼저 Tile Image를 생성할때 필요한 요소들에 대해 정리해보면 아래와 같습니다.

1. Source Image : Tile Image를 생성할때 사용할 소스 이미지 입니다.
2. Tile Size(Width, Height) : Tile Image를 생성할때 Tile 하나의 크기 입니다.
3. Margin XY : Tile 간의 간격을 지정합니다.
4. Result Size : 최종적으로 생성될 Tile Image의 크기입니다.

위와 같은 내용을 파라미터로 받아 타일이미지를 생성하는 메서드를 구현하면 아래와 같이 구현할 수 있습니다.

public static BitmapSource CreateTileImage(this BitmapSource ImageSource, double TileWidth, double TileHeight, int MarginX, int MarginY, double Width, double Height) { // 이미지소스가 없거나 크기를 측정할 수 없을 경우 처리하지 않습니다. // 최종 출력 크기가 1보다 작은경우에도 처리하지 않습니다. if (ImageSource == null || ImageSource.PixelWidth == 0 || ImageSource.PixelHeight == 0 || Width < 1 || Height < 1) return null; // 소스 이미지를 처리 가능한 형태로 변환합니다. WriteableBitmap SourceImage = new WriteableBitmap(ImageSource); int SourceWidth = TileWidth.Equals(double.NaN) ? SourceImage.PixelWidth : (int)TileWidth; int SourceHeight = TileHeight.Equals(double.NaN) ? SourceImage.PixelHeight : (int)TileHeight; // 소스이미지와 타일에 사용할 크기가 다를경우 크기를 재조정합니다. if (SourceWidth != SourceImage.PixelWidth || SourceHeight != SourceImage.PixelHeight) { SourceImage = ResizeUsingNearestNeighbor(SourceImage, SourceWidth, SourceHeight); } // 출력될 타일 이미지를 생성하고 크기에 맞추어 반복해 똑같은 이미지를 Blit합니다. WriteableBitmap TileImage = new WriteableBitmap((int)Math.Ceiling(Width), (int)Math.Ceiling(Height)); int XCount = (TileImage.PixelWidth / SourceWidth) + 1; int YCount = (TileImage.PixelHeight / SourceHeight) + 1; for (int X = 0; X < XCount; X++) for (int Y = 0; Y < YCount; Y++) Blit(TileImage, SourceImage, X * SourceWidth + X * MarginX, Y * SourceHeight + Y * MarginY); return TileImage; }

Create Tile Panel

위에서 Tile Image를 생성했으면 이제 입력받은 데이터들을 이용해 UI에 출력할 수 있는 TIle Panel을 아래와 같이 구현할 수 있습니다. 각 Property들은 값이 변경되었을때 OnPropertyChanged를 호출하게 되며 이때 UpdateTile을 호출하여 TileImage를 생성하게 됩니다.

public class TilePanel : Panel { public double TileWidth { get; set; } // Dependency Property public double TileHeight { get; set; } // Dependency Property public BitmapSource ImageSource { get; set; } // Dependency Property public int MarginX { get; set; } // Dependency Property public int MarginY { get; set; } // Dependency Property public TilePanel() { this.SizeChanged += (s, e) => UpdateTile(); } protected static void OnPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { if (e.Property == ImageSourceProperty && e.NewValue is BitmapImage) { BitmapImage Image = e.NewValue as BitmapImage; Image.CreateOptions = BitmapCreateOptions.IgnoreImageCache; } if (sender is TilePanel) (sender as TilePanel).UpdateTile(); } protected virtual void UpdateTile() { this.Children.Clear(); if (ImageSource == null || ActualWidth == 0 || ActualHeight == 0) { return; } BitmapSource TileImage = ImageSource.CreateTileImage(TileWidth, TileHeight, MarginX, MarginY, ActualWidth, ActualHeight); Image TileImageControl = new Image() { Source = TileImage, Stretch = Stretch.None }; this.Children.Add(TileImageControl); } }
이상으로 이번시간 포스팅을 마치며 기타 궁금하신점이나 문의 사항은 메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래는 이번시간에 사용한 전체 소스코드입니다. 감사합니다.

WIT.Silverlight.Sample.TileImageSample.zip