SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

FluentWPF v0.2.0～AcrylicPanel/DropShadowPanelの追加～

C# WPF

先日、↓のFluent Design SystemをWPFで再現するライブラリを作りましたが、ちょこっとバージョンアップしてみました。

sourcechord.hatenablog.com

f:id:minami_SC:20180110081212p:plain

主に以下のような変更を行いました。

  • 新規コントロールの追加
    • AcrylicPanel・・・・・・背景ぼかし処理をするパネル
    • DropShadowPanel・・・影の表示方法に少し手を入れたDropShadowEffect付きパネル
  • バグフィックス
    • AcrylicBrushのバグフィックス
      AcrylicBrush使用時に、LayoutChangedイベントが発生し続けて、CPU負荷が高くなる不具合を修正
    • AcrylicWindowのWin10環境以外への対応
      Win10以外の環境では、AcrylicWindowの背景ぼかし処理を無効化しました。

Acrylicなぼかしウィンドウの作成には、SetWindowCompositionAttributeという非公開API使っているので、以前のOSへの対応はやっぱ仕組み的に難しいですね。。。
ということで、Win10以外のOSでは、AcrylicWindowのぼかし処理を無効化しました。
(Win7ならAeroGrass効果をうまく使えば、それっぽい表示を真似できるかもしれませんが。。)

続きを読む

WPFでFluent Design Systemを再現するライブラリを作ってみました～FluentWPF～

C# WPF

はじめに

少し遅れてしまいましたが、この記事はXAML Advent Calendar 2017の25日目の記事です。

今年のBuildでは、Fluent Design Systemなどの発表がありましたが、このデザインをWPFで用いる方法は提供されていません。

対応するAPIがないなら、XAMLの機能を駆使してそれっぽく作ってしまえ!!ということで、FluentDesignをXAMLで再現したライブラリを作ってみました。
XAMLの拡張性は伊達じゃない!!

f:id:minami_SC:20171226020340g:plain:w300

StyleやStoryboard、マークアップ拡張やコンバーターに各種添付プロパティと、XAMLの機能をフル活用して色々なエフェクトを再現しています。
ただ、ウィンドウのアクリル化はXAMLだけではどうにもならないので、↓を使ってそれっぽく再現しています。
WPFでFluent Design Systemのアクリルっぽいウィンドウを作ってみる - SourceChord

概要

WPF向けにFluent Design Systemをそれっぽく再現したテーマのライブラリです。
主に以下のような機能を実装しました。

  • Acrylic
    • AcrylicWindow・・・半透明でぼかしをかけて透過するスタイルのウィンドウ。
    • AcrylicBrush・・・・ウィンドウ内の指定したXAML要素をぼかして表示するためのブラシ
  • Reveal・・・・・・・マウスカーソルの位置に応じた照明効果が効いた、各種コントロール用スタイル。
  • ParallaxView・・・UWPの同名コントロールを再現したもの。
  • AccentColor・・・・OSのテーマカラーなどを用いたColor/Brush定義
続きを読む

Windows Template Studio 1.6を使ってみた

C# WPF

この記事は、XAML Advent Calendar 2017の23日目の記事です。

UWPのアプリ雛形を作成できるVS拡張機能のWindows Template Studioですが、先日バージョン1.6がリリースされたので使ってみました。

最近あまり使ってなかったのですが、v1.5でローカライズ対応されてUIが日本語表示されるようになってます。
f:id:minami_SC:20171223235012p:plain

続きを読む

グリッドレイアウト用のライブラリ GridExtraを更新しました～Grid子要素の自動レイアウト機能などの追加～

C# WPF

この記事は、XAML Advent Calendar 2017の22日目の記事です。

以前↓に書いた、各種グリッドレイアウトを補助するGridExtraというライブラリを更新しました。
WPF/UWP向けに、グリッドレイアウト補助ライブラリを作ってみました～GridExtra～ - SourceChord

ソースコードのリポジトリはこちら

Nugetから以下のコマンドでインストールできます。

Install-Package GridExtra

主に以下のような変更が入っています。

  • GridExクラスの更新
    • GridEx.AutoFillChildren添付プロパティ
      • Gridパネル内の子要素を、UniformGridやWrapPanelみたいに各要素を自動で順々に並べる機能
  • WrapPanelExクラスの追加
    • WrapPanelEx.AdaptiveLayout添付プロパティ
      • WrapPanelの子要素がOrientation方向の幅いっぱいに広がるようにレイアウトを自動調整する機能

ということで変更点などを、ざっとご紹介したいと思います。

続きを読む

Ctr+C/Ctrl+Vなどのショートカットを、マウス/タッチパネル操作で実行するツールを作ってみました

WPF C#

本日は12/10ですが、この記事はXAML Advent Calendar 2017の7日目の記事です。 遅くなってしまいすみません。。。

当初はFluent Design関係の話題を書くつもりでしたが、結局あまり関係ないテーマになってしまいました。

Ctrl+CやCtrl+Vといった、コピペなどのショートカットを、マウス操作やタッチ操作で実行できるツールを作ってみました。
正直、思い付きで作っただけなので、コードとしては特筆すべき点や面白みはあまりないかもしれません。。。
↓こんな感じのツールです。
f:id:minami_SC:20171210235823g:plain

続きを読む

WPFでFluent Design Systemのアクリルっぽいウィンドウを作ってみる

WPF C#

この記事は、XAML Advent Calendar 2017の1日目の記事です。

今年のbuildでは、Fluent Design Systemが発表され、Windowsの各種UIでも徐々にこういうデザインの部分が増えてきました。

このFluent Designですが、UWPからは簡単に実装することができるAPIが色々用意されています。 しかし、残念ながらWPFでこのようなデザインを実装するための手段は用意されていません。

そうは言っても、WPFでもこういうカッコいいデザインのウィンドウを作ってみたいですよね。
ということでWPFでこういうFluent Designのアクリル風なウィンドウを真似してみました。

f:id:minami_SC:20171201234528g:plain

続きを読む