WPF 윤곽선 텍스트(Outlined Text)

wpf의 텍스트에 word art처럼 윤곽선 효과를 넣어야 하는데 아무리 찾아보고 찾아봐도 간단한 방법은 없었다.

msdn에 예제가 있기는 하지만 상세한 코드들이 다 나와 있지는 않았었고, (링크)

stackoverflow에는 아예 사용자 지정 컨트롤을 만들어 주어서 따로 추가한 뒤

local 컨트롤을 통해 텍스트를 설정해 주어야 했다. (링크)

하지만 내가 원하는건 껐다 켰다 할 수 있는 윤곽선을 원했기에 최대한 다른 방법을 찾아 보았다.

msdn에 예제가 있는 것을 발견했다. (링크)

하지만 이 예제에 있는 방법으로는 껐다 켰다 가 되기는 했지만 위의 사용자 지정 컨트롤과 다를 바 가 별로 없어 보였다.

그리고 글이 무조건 left, top 정렬이 되어서 center 정렬이 되지 않았었다.

포기하려던 찰나 Label 에서 내용은 Content로 관리 되며, 이는 다른 컨트롤들을 넣을 수 있는 것을 생각해서, Canvas를 넣고 해보니 적용이 되었다. 하지만 정렬이 문제였는데, FormattedText의 Height가 아닌 Extent가 텍스트의 높이를 알려주는 것을 알았고, 이를 통해 직접 Canvas의 Top과 Left를 설정해서 시작 위치를 지정해 주었다. 이렇게 하니 Label에 원래 있던 텍스트와 윤곽선을 넣은 Canvas의 텍스트의 위치와 모양이 차이가 없었고, 이를 통해 윤곽선을 넣고 빼는 함수를 만들었다.

Label은 Content 속성을 통해 할 수 있었지만, TextBlock이나 TextBox는 Content 속성이 없기에 내부에 설정이 불가능 했다. 계속해서 찾아봐야 겠지만, 우선 지금은 TextBlock 과 TextBox를 Grid에 꽉 채워 넣고, Width와 Height를 설정하지 않기 때문에 Grid.GetRow 와 Grid.GetColumn을 사용해서 해당 Grid에 넣고 Canvas를 설정하면 차이가 없었다.

그래서 local 컨트롤로 만들어서 하기 보다는 Canvas를 통해 설정하려고 한다.

local 컨트롤이 더 나은 것 같은 사람은 local 컨트롤을 이용해서 하기 바란다.

WPF에 Text를 관리할 때 Effect에는 Shadow Effect는 있지만 Outline Effect는 없습니다.

그래서 찾아보니 어떤 분이 만드신 사용자 지정 컨트롤이 있었고, (링크) 

msdn에서 알려주는 Geometry와 Path를 사용하는 방식이 있었습니다.

사용자 지정 컨트롤은 아래 파일을 받으신 후 프로젝트에 추가하신 뒤 xaml에서 추가해주시고, 사용하시면 됩니다.

OutlinedTextBlock.cs

TextBlock와 거의 유사하게 사용하실 수 있습니다.(FontSize, TextAlignment, TextWrapping 등)

(namespace를 해당 프로젝트의 namespace로 바꾸신 뒤 아래와 같이 사용하실 수 있습니다.)

<local:OutlinedTextBlock x:Name="textOutline" Text="Text" FontSize="50pt"
     StrokeThickness="2" Stroke="Orange" Fill="Yellow"/>

(혹은 해당 xaml의 Window 태그에 xmlns:OutlinedText="clr-namespace:OutlinedTextBlock" 를 추가해 주신 뒤 아래와 같이 사용하시면 됩니다.)

<OutlinedTextBlock:OutlinedTextBlock x:Name="textOutline" Text="Text" FontSize="50pt"
     StrokeThickness="2" Stroke="Orange" Fill="Yellow"/>

madn에서 알려주는 방식은 Geometry를 사용한 방식인데 제가 Label에 적용가능하게 함수를 만들었습니다.

윤곽선을 적용한 뒤 다시 윤곽선을 해제하시려면 해당 Label의 Content를 따로 저장하신 뒤,

해당 Content로 다시 적용해 주시면 됩니다.

void OutlinedTextLabel(Label lbl)
{
    FormattedText formattedText = new FormattedText(lbl.Content.ToString(),
        System.Globalization.CultureInfo.GetCultureInfo("ko-kr"),
        FlowDirection.LeftToRight,
        new Typeface(lbl.FontFamily, lbl.FontStyle, lbl.FontWeight, lbl.FontStretch),
        lbl.FontSize, Brushes.Black);
 
    formattedText.TextAlignment = TextAlignment.Center;
 
    Geometry geometry = formattedText.BuildGeometry(new Point(0, 0));
 
    PathGeometry pathGeometry = geometry.GetFlattenedPathGeometry();
 
    Canvas cvs = new Canvas();
    lbl.Content = cvs;
 
    Path pt = new Path();
    pt.Stroke = Brushes.Red;
    pt.StrokeThickness = 2;
    pt.Fill = lbl.Foreground;
    pt.Stretch = Stretch.Fill;
 
    cvs.Children.Add(pt);
 
    Canvas.SetTop(pt, (cvs.ActualHeight - formattedText.Extent) / 2);
    Canvas.SetLeft(pt, (cvs.ActualWidth - formattedText.Width) / 2);
 
    pt.Data = pathGeometry;
}

※참고1 참고2 참고3