WPF アプリケーション で Elysium の 使い方

WPF アプリケーション の開発において Elysium を利用すると、ストアアプリ のような画面 (Github for windows のような画面) が簡単に作成できます。 見た目を簡単にフラットデザインぽくできるので、便利なプラグイン？ ライブラリ？ だと思います。 ここでは、その 実装手順 の 簡単な チュートリアル を記載します。

実行サンプル

Elysium を使って実装した WPF アプリケーション の実行画面は次のようなものになります。

実装手順

以下では、ボタン も何も配置しない、単なる Window だけの アプリケーション を作成します。

1. 新規プロジェクトの作成
   • [ファイル]-[新規作成]-[プロジェクト] を選択
     
   • 「プロジェクト名」を入力して[OK]を選択
     
2. Elysium を 参照 に 追加
   • ソリューションエクスプローラーで右クリック、[NuGetパッケージの管理]を選択
     
   • 「オンラインの検索」ボックスに「Elysium」を入力
     
   • 検索結果の「Elysium」をインストール
     
3. MainWindow.xaml の 修正

   名前空間を追加、修正します。

   <metro:Window x:Class="ConfigurationTool.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:metro="http://schemas.codeplex.com/elysium"
           Title="MainWindow" Height="350" Width="525">
       <Grid></Grid>
   </metro:Window>
   

4. MainWindow.xaml.cs の 修正

   名前空間を修正します。

   namespace Sample
   {
       /// <summary>
       /// MainWindow.xaml の相互作用ロジック
       /// </summary>
       public partial class MainWindow : Elysium.Controls.Window
       {
           public MainWindow()
           {
               InitializeComponent();
           }
       }
   }
   

5. App.xaml の 修正

   リソースを追加します。

   <Application x:Class="ConfigurationTool.App"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                StartupUri="MainWindow.xaml">
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="/Elysium;component/Themes/Generic.xaml" />
               </ResourceDictionary.MergedDictionaries>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

6. ビルドして実行
   

今回、以下のサイトを参考にしました。

• Elysium Official Site

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter