WPF の Bootstrap っぽい テーマ

2016年2月14日 12:13 , 0 件のコメント

WPF の "Bootstrap" っぽい デザイン テーマ を作成しました。 コントロールだけ似せていては物足りなかったので、 メトロデザイン（フラットデザイン？）っぽい Window スタイル も作成しています。

※ まだ開発中なので足りない部分等あるかもしれません。その際はご意見いただけると嬉しいです。

Twining テーマ

ダウンロード
V0.0.2
旧バージョン
外部リンク

概要

簡単に Bootstrap ライク な フラットデザイン の WPFアプリケーション 作成ができます。 "Twining"テーマ を利用した時の外観イメージは以下のようなものになります。

コントロール類は Bootstrap に似たデザインを、ウィンドウは枠のないフラットなデザインになるようなテーマになります。

使い方（導入）

テーマのダウンロード

  1. 最新版を以下のページよりダウンロード

    GitHub - garafu / Twining : releases

プロジェクトの新規作成

  1. WPFアプリケーションを新規作成

  2. ダウンロードした dll を配置

    ダウンロードした Twining.dll は プロジェクト内の任意の位置へ配置します。 ここでは、"library" ディレクトリを作成してその配下へ配置しました。

  3. 参照設定に追加

    参照に追加する際は「参照(B)...」からプロジェクトに追加した Twining.dll を直接参照するようにします。 参照先のパスが該当DLLになっていることを確認します。

テーマの設定

  1. "App.xaml"に追加した ResourceDictionary を追加

    追加コード

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <Application x:Class="WpfApplication.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 StartupUri="Views/MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary Source="/Twining;component/Themes/Generic.xaml" />
        </Application.Resources>
    </Application>

    追加場所

  2. "MainWindow.xaml"に Style を適用

    追加コード

    ?
    1
    2
    3
    4
    5
    6
    7
    <Window x:Class="WpfApplication.Views.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525"
            Style="{StaticResource wnd-metro}">
      ...
    </Window>

    追加場所

以上で導入作業は終わりです。 実行して動作確認を行ってみてください。 （きっと動くハズ！）

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