WPFでWindowsStoreアプリ(メトロ)風UIを簡単に利用できるライブラリは以下の二つがあります。
Modern UI for WPF
http://mui.codeplex.com/
mahapps.metro
http://mahapps.com/MahApps.Metro/
どちらのライブラリもModern/Metoro風のコントロールが含まれています。
これらを使えば簡単にModern/Metoro風アプリケーションをWPFで作ることができると思います。
しかし、MVVMを意図して設計されているサンプルのためか自分のアプリに組み込むにはいささか難しいように思えました。
そこで、以下のようにWindowフレームだけでもModern風にする方法をここでは紹介します。
1.)ライブラリの準備
使用するライブラリは以下です。
WPF Shell Integration Library
http://archive.msdn.microsoft.com/WPFShell
※このライブリの説明は窓の杜の記事を読んでください。
WPF Custom Chrome Library
http://www.codeproject.com/Articles/131515/WPF-Custom-Chrome-Library
2.)参照にライブラリを追加する
ソリューションに「CustomChromeLibrary.csproj」を追加します。
追加後、「CustomChromeLibrary.csproj」と「Microsoft.Windows.Shell.dll」を参照するように設定します。
3.)ターゲットWindowsのXAMLを編集します。
以下のコードをXAMLのWindowに追加します。
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
xmlns:ccl="clr-namespace:CustomChromeLibrary;assembly=CustomChromeLibrary"
ChromeWindowsの設定を記載します。
<shell:WindowChrome.WindowChrome>
<shell:WindowChrome
ResizeBorderThickness="6"
CaptionHeight="16"
CornerRadius="1,1,1,1"
GlassFrameThickness="0">
</shell:WindowChrome>
</shell:WindowChrome.WindowChrome>
タイトルバーとシステムボタンを配置します。
<DockPanel>
<TextBlock FontWeight="Bold" Margin="12,2,0,2">Test Chrome Window</TextBlock>
<ccl:CaptionButtons DockPanel.Dock="Right"/>
</DockPanel>
4.)サンプルコード
TestChoromeWindow.zip
0 件のコメント :
コメントを投稿