SourceChord

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

FluentWPF 0.8.0をリリースしました

https://github.com/sourcechord/FluentWPF/releases/tag/v0.8.0

今回の更新では、FluentWPFのプロジェクトファイル類を新しい形式のcsproj形式に変更しました。
これによって、.NET Core環境でのWPFアプリもフルサポートできるようになってます。

慣れると、新形式のcsprojは便利ですね。
f:id:minami_SC:20191104230056p:plain

こんな風に、一つのプロジェクトで複数のターゲット向けのビルドなどもできるようになります。
⇒この辺の経緯は、また別途書こうかと。

ということで、FluentWPFは.NET Core 3.0でネイティブに動作するようになりました。 WPF on .NET Core3.0なプロジェクトでFluentWPFを使用しても、ビルド時の警告が出ないようになってます。

新機能

SystemThemeクラス

Windows10 19H1より追加された、ライトテーマ(Windowsモードの設定内容)を取得するプロパティを追加しました。

SystemTheme.WindowsThemeというプロパティで、OSの色設定の「Windowsモード」に関する設定値を取得できます。   f:id:minami_SC:20191104230559g:plain

機能追加

Button要素のRevealエフェクト・カスタマイズ

ButtonのRevealエフェクトを色々カスタマイズできるようにしました。 それぞれ、以下のようなプロパティで、Revealエフェクトのボーダー幅や色などを変更できます。

プロパティ名 内容
Background ボタンの背景色
Foreground ボタンの前景色
BorderBrush ボーダー色
BorderThickness ボーダーの太さ
RevealElement.BorderOpacity ボーダーの不透明度
RevealElement.MouseOverForeground マウスオーバー時のボタン前景色
RevealElement.MouseOverBackground マウスオーバー時の背景色
RevealElement.MouseOverBorderOpacity マウスオーバー時のボーダーの不透明度
RevealElement.BorderRadius ボタンの角の丸み
RevealElement.PressBorderOpacity ボタン押下時のボーダーの不透明度
RevealElement.PressTintBrush ボタン押下時に背景色に被せる色味の調整

以下使用例
f:id:minami_SC:20191104230747g:plain

            <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に適用するために、ButtonRevealStyleButtonAccentRevealStyleというスタイルを用意していました。

今回、以下のような角が丸いボタンを作るためのスタイルを追加しました。

  • ButtonRoundRevealStyle
  • ButtonRoundAccentRevealStyle

これらのクラスを使うと角が丸いボタンを作れます。

        <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>

f:id:minami_SC:20191104233522g:plain

丸いボタンを作る

ちなみに、これらの角丸ボタン用のスタイルですが、ButtonのWidthとHeightを同じ値にして使用すると、↓のような丸いボタンになります。
f:id:minami_SC:20191104233953p:plain

        <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ミュージックアプリ風なデザインも簡単に作れます。
f:id:minami_SC:20191104234804g:plain

    <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="&#xE8B1;"/>
            <Button Grid.Column="1" Content="&#xE892;"/>
            <Button Grid.Column="2" Content="&#xE768;" FontSize="28" Width="48" Height="48" fw:RevealElement.BorderOpacity="0.4"/>
            <Button Grid.Column="3" Content="&#xE893;"/>
            <Button Grid.Column="4" Content="&#xE72C;"/>
        </Grid>
    </Grid>

破壊的変更

前述したように、19H1から色設定に追加された「Windowsモード」項目の設定を扱えるようにするために、 SystemTheme.WindowsThemeというプロパティを追加しました。

このSystemThemeクラスでは、今までSystemTheme.Themeというプロパティで色設定の「アプリモード」の設定値を取得するプロパティを提供していました。
今回、WindowsThemeというプロパティを足したことで、ちょっとプロパティ名がわかりにくくなってしまったので、以下のようにプロパティ名を変更しています。

プロパティ名 内容
SystemTheme.Theme⇒SystemTheme.AppTheme 「アプリモード」の設定値
SystemTheme.WindowsTheme Windowsモード」の設定値

今回の更新は以上です。

ボタン系のコントロールは色々カスタマイズできるようになったけど、 まだまだWPF標準の各種コントロールでFluentDesign風なスタイルを提供できてないコントロールが多数あります。

今後の更新では、こういった各種標準コントロール類用のスタイルを追加していきたいと考えてます。