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

0 件のコメント

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. ビルドして実行

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