https://github.com/sourcechord/FluentWPF/releases/tag/v0.8.0
今回の更新では、FluentWPFのプロジェクトファイル類を新しい形式のcsproj形式に変更しました。
これによって、.NET Core環境でのWPFアプリもフルサポートできるようになってます。
慣れると、新形式のcsprojは便利ですね。
こんな風に、一つのプロジェクトで複数のターゲット向けのビルドなどもできるようになります。
⇒この辺の経緯は、また別途書こうかと。
ということで、FluentWPFは.NET Core 3.0でネイティブに動作するようになりました。 WPF on .NET Core3.0なプロジェクトでFluentWPFを使用しても、ビルド時の警告が出ないようになってます。
新機能
SystemThemeクラス
Windows10 19H1より追加された、ライトテーマ(Windowsモードの設定内容)を取得するプロパティを追加しました。
SystemTheme.WindowsThemeというプロパティで、OSの色設定の「Windowsモード」に関する設定値を取得できます。
機能追加
Button要素のRevealエフェクト・カスタマイズ
ButtonのRevealエフェクトを色々カスタマイズできるようにしました。 それぞれ、以下のようなプロパティで、Revealエフェクトのボーダー幅や色などを変更できます。
| プロパティ名 | 内容 |
|---|---|
| Background | ボタンの背景色 |
| Foreground | ボタンの前景色 |
| BorderBrush | ボーダー色 |
| BorderThickness | ボーダーの太さ |
| RevealElement.BorderOpacity | ボーダーの不透明度 |
| RevealElement.MouseOverForeground | マウスオーバー時のボタン前景色 |
| RevealElement.MouseOverBackground | マウスオーバー時の背景色 |
| RevealElement.MouseOverBorderOpacity | マウスオーバー時のボーダーの不透明度 |
| RevealElement.BorderRadius | ボタンの角の丸み |
| RevealElement.PressBorderOpacity | ボタン押下時のボーダーの不透明度 |
| RevealElement.PressTintBrush | ボタン押下時に背景色に被せる色味の調整 |
以下使用例
<StackPanel Orientation="Horizontal"><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"BorderBrush="Red"BorderThickness="1"fw:RevealElement.MouseOverBorderOpacity="0.5"fw:RevealElement.PressBorderOpacity="0.5"Style="{StaticResource ButtonRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Background="Transparent"Style="{StaticResource ButtonRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonAccentRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Background="Transparent"Style="{StaticResource ButtonAccentRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"fw:RevealElement.MouseOverBackground="Coral"Style="{StaticResource ButtonAccentRevealStyle}"/></StackPanel><StackPanel Orientation="Horizontal"><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonRoundRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"BorderBrush="Red"BorderThickness="1"fw:RevealElement.MouseOverBorderOpacity="0.5"fw:RevealElement.PressBorderOpacity="0.5"Style="{StaticResource ButtonRoundRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Background="Transparent"Style="{StaticResource ButtonRoundRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonRoundAccentRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Background="Transparent"Style="{StaticResource ButtonRoundAccentRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"fw:RevealElement.MouseOverBackground="Coral"Style="{StaticResource ButtonRoundAccentRevealStyle}"/></StackPanel>
角丸ボタン用のスタイル追加
今まで、RevealエフェクトをButtonに適用するために、ButtonRevealStyle、ButtonAccentRevealStyleというスタイルを用意していました。
今回、以下のような角が丸いボタンを作るためのスタイルを追加しました。
ButtonRoundRevealStyleButtonRoundAccentRevealStyle
これらのクラスを使うと角が丸いボタンを作れます。
<StackPanel Orientation="Horizontal"><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonRoundRevealStyle}"/><Button Content="Button"HorizontalAlignment="Left"Margin="5"Width="75"Height="32"Style="{StaticResource ButtonRoundAccentRevealStyle}"/></StackPanel>
丸いボタンを作る
ちなみに、これらの角丸ボタン用のスタイルですが、ButtonのWidthとHeightを同じ値にして使用すると、↓のような丸いボタンになります。
<StackPanel Orientation="Horizontal"><Button HorizontalAlignment="Left"Margin="5"Width="32"Height="32"Style="{StaticResource ButtonRoundRevealStyle}"/><Button HorizontalAlignment="Left"Margin="5"Width="32"Height="32"Style="{StaticResource ButtonRoundAccentRevealStyle}"/></StackPanel>
で、こういう丸いボタンと、Segoe MDL2 Assetsフォントを組み合わせると、こんな風に、Windows10のGrooveミュージックアプリ風のデザインもお手軽に作れます。
こんな風にボタン並べると、Windows10のGrooveミュージックアプリ風なデザインも簡単に作れます。
<Grid fw:PointerTracker.Enabled="True"Background="#01FFFFFF"><Grid Height="70"VerticalAlignment="Bottom"HorizontalAlignment="Center"><Grid.Resources><Style TargetType="{x:Type Button}"BasedOn="{StaticResource ButtonRoundRevealStyle}"><Setter Property="Margin"Value="2" /><Setter Property="Width"Value="32" /><Setter Property="Height"Value="32" /><Setter Property="Background"Value="Transparent" /><Setter Property="FontSize"Value="20" /><Setter Property="FontFamily"Value="Segoe MDL2 Assets" /></Style></Grid.Resources><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><Button Grid.Column="0"Content=""/><Button Grid.Column="1"Content=""/><Button Grid.Column="2"Content=""FontSize="28"Width="48"Height="48"fw:RevealElement.BorderOpacity="0.4"/><Button Grid.Column="3"Content=""/><Button Grid.Column="4"Content=""/></Grid></Grid>
破壊的変更
前述したように、19H1から色設定に追加された「Windowsモード」項目の設定を扱えるようにするために、 SystemTheme.WindowsThemeというプロパティを追加しました。
このSystemThemeクラスでは、今までSystemTheme.Themeというプロパティで色設定の「アプリモード」の設定値を取得するプロパティを提供していました。
今回、WindowsThemeというプロパティを足したことで、ちょっとプロパティ名がわかりにくくなってしまったので、以下のようにプロパティ名を変更しています。
| プロパティ名 | 内容 |
|---|---|
| 「アプリモード」の設定値 | |
| SystemTheme.WindowsTheme | 「Windowsモード」の設定値 |
今回の更新は以上です。
ボタン系のコントロールは色々カスタマイズできるようになったけど、 まだまだWPF標準の各種コントロールでFluentDesign風なスタイルを提供できてないコントロールが多数あります。
今後の更新では、こういった各種標準コントロール類用のスタイルを追加していきたいと考えてます。