Markdown.XAMLを使ってWPFでMarkdownテキストをレンダリングする

この記事は、XAML Advent Calendar 2013用です。今日は、MarkdownをWPFアプリケーションに表示する方法についてです。
---

Windows Phoneでmarkdownで書いたテキストをhtmlに変換して表示する を見て、そういえばMarkdownを表示するためのライブラリがあったことを思い出した。

その名もMarkdown.XAML。これは、MarkdownテキストをFlowDocumentに変換してくれる。使い方はざっくり言うと、TextToFlowDocumentConverterというコンバータが使えるようになるので、FlowDocumentScrollViewerのようなFlowDocumentを表示してくれるコントロールに、Markdownテキストが入ったプロパティとこのコンバータをセットでバインドしておくだけでOK.

詳しい使い方は以下の通り。

1. 下準備

Markdown.XAMLをclone or zipでダウンロードして、Visual Studioで開き、コンパイルする。

そうすると、build\Markdown.Xaml\(Configuration)のあたりにMarkdown.Xaml.dllができるので、これを、Markdownを表示させたいプロジェクトに持っていって、参照させる。

NuGetになさそうなのが残念だけど、すんなりコンパイルできるのでまぁ。

2. Markdownテキストを適当なプロパティに入れておく

ファイルから読んでとか、いろいろありそうだが、ここの本題ではないので、ここでは適当な文字列を返すプロパティを作っておく。

	public class TestData
	{
	public string MarkdownText
	{
	get { return "* Get-Host\n* Get-Job\n"; }
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

3. リソースに、MarkdownとTextToFlowDocumentConverterを定義する

TextToFlowDocumentConverterを作り、そこに実体であるMarkdownオブジェクトを紐づける。とりあえずこんなかんじ:

	<Window x:Class="MarkdownTest.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:md="clr-namespace:Markdown.Xaml;assembly=Markdown.Xaml"
	Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
	<md:Markdown x:Key="Markdown" />
	<md:TextToFlowDocumentConverter x:Key="TextToFlowDocumentConverter" Markdown="{StaticResource Markdown}" />
	</Window.Resources>

view raw gistfile1.xml hosted with ❤ by GitHub

4. FlowDocumentをレンダリングするコントロールを配置する

FlowDocumentScrollViewerを配置して、さきほどのプロパティとコンバータをバインドする。

	<DockPanel>
	<FlowDocumentScrollViewer Document="{Binding MarkdownText, Converter={StaticResource TextToFlowDocumentConverter}}" />
	</DockPanel>

view raw gistfile1.xml hosted with ❤ by GitHub

シンプルに表示したいだけなら、これだけ。

できたものはこんなかんじ：

活用編

FlowDocumentになっているので、もう少しWPFに寄った形で使える。

1. パネルの見た目を変更する

ちゃんとパネルも見えているので、たとえばパネルの背景色を変えたりすることができる。FlowDocumentScrollViewerのプロパティも当然使える。

	<DockPanel Background="#012456">
	<FlowDocumentScrollViewer Document="{Binding MarkdownText, Converter={StaticResource TextToFlowDocumentConverter}}" VerticalScrollBarVisibility="Disabled" IsHitTestVisible="False" />
	</DockPanel>

view raw gistfile1.xml hosted with ❤ by GitHub

2. スタイルを設定する

たとえば、文字色を変えたければ、このようにいつもの通りStyleを定義することで、変更することができる。

	<md:Markdown x:Key="Markdown">
	<md:Markdown.DocumentStyle>
	<Style TargetType="FlowDocument">
	<Setter Property="Foreground" Value="#EEEDF0" />
	</Style>
	</md:Markdown.DocumentStyle>
	</md:Markdown>

view raw gistfile1.xml hosted with ❤ by GitHub

結果はこんなかんじ：

詳しくはデモがあるので見るとわかりやすいと思う。
https://github.com/theunrepentantgeek/Markdown.XAML/blob/master/src/Markdown.Xaml.Demo/MainWindow.xaml


----

どうでしょうか。わりと簡単に使えると思うので、適当なテキストを出したいときなんかにどうぞ。