astel-labs.net

今回も海外サイトを眺めていた時に見つけたサンプルになります

ただ、海外のサイトも断片的な情報しかなかなか見つからなかったため、ほかのサイトやMSDNを巡ってそれっぽい感じのサンプルに作り直してみました

サンプルの見た目はこんな感じ

サンプルで意外と面倒だったのは、ウィンドウアイコンやウィンドウタイトルの配置でした…

見つけたサンプルではアイコンが純粋なボタンスタイルで配置されていたり、タイトルの背景にブラー的なエフェクトがかかっていなく背景が黒いと見難かったりしたので、適当にそれっぽく見えるように追加してみました

タイトルの背景が若干白っぽく浮いて見えるようにスクリーンショットを撮ってみましたが、あんまりわからないですね…

グラス効果を利用するには、「Microsoft Ribbon for WPF」を予めインストールして組み込んでおく必要があります

リンク先のページから「Microsoft Ribbon for WPF.msi」をダウンロードしてインストールしたら、Visual Studio を再起動して通常通りプロジェクトの作成で「WPF アプリケーション」プロジェクトを作成します

プロジェクトを作成したら、「参照設定」から「参照の追加」で「.NET」のタブから「Microsoft.Windows.Shell」のアセンブリを追加します
グラス効果を利用するにはこのアセンブリが必須ですので注意してください

以下のサンプルプログラムは前回のステータスバーのコードを流用しています…

<Window x:Class="GlassStyleTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
        xmlns:local="clr-namespace:GlassStyleTest"
        Title="MainWindow" Height="350" Width="360" Icon="DfIcon.ico"
        x:Name="ChromeWindow">
    <Window.Resources>
        <Style x:Key="GadgetStyle" TargetType="{x:Type local:MainWindow}">
            <Setter Property="shell:WindowChrome.WindowChrome">
                <Setter.Value>
                    <shell:WindowChrome GlassFrameThickness="-1"
                                        ResizeBorderThickness="6"
                                        CaptionHeight="25" />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:MainWindow}">
                        <Grid>
                            <!-- ウィンドウアイコンの設定 -->
                            <Button VerticalAlignment="Top" HorizontalAlignment="Left" Padding="1"
                                    Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
                                    Path=(shell:WindowChrome.WindowChrome).ResizeBorderThickness}"
                                    shell:WindowChrome.IsHitTestVisibleInChrome="True"
                                    Command="{x:Static shell:SystemCommands.ShowSystemMenuCommand}"
                                    CommandParameter="{Binding ElementName=ChromeWindow}">
                                <!-- アイコンの背景を透過するためにスタイルを再設定 -->
                                <Button.Style>
                                    <Style TargetType="{x:Type Button}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Button">
                                                    <ContentPresenter VerticalAlignment="Center"
                                                                      HorizontalAlignment="Center" />
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Button.Style>
                                <!-- アイコンイメージの設定 -->
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"
                                       Width="16" Height="16"
                                       shell:WindowChrome.IsHitTestVisibleInChrome="True" />
                            </Button>
                            <!-- ウィンドウタイトルを見やすくするために背景に白いぼかしを設定 -->
                            <TextBlock VerticalAlignment="Top" TextAlignment="Left"
                                       Padding="27,6,0,0" Foreground="White"
                                       Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}">
                                <TextBlock.Effect>
                                    <BlurEffect KernelType="Box" Radius="8" />
                                </TextBlock.Effect>
                            </TextBlock>
                            <!-- ウィンドウタイトルを設定 -->
                            <TextBlock VerticalAlignment="Top" TextAlignment="Left"
                                       Padding="27,6,0,0" Foreground="Black"
                                       Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
                            <!-- クライアントエリアの設定 -->
                            <Border Margin="6,26,6,6" BorderBrush="Gray" BorderThickness="1,1,1,1">
                                <ContentPresenter Content="{TemplateBinding Content}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <DockPanel>
        <!-- コントロールを配置する際は Opacity プロパティを設定することで
            グラス効果を持った状態で透過効果を設定することができます -->
        <StatusBar DockPanel.Dock="Bottom" Opacity="0.8">
            <StatusBarItem DockPanel.Dock="Right">アイテム３</StatusBarItem>
            <Separator DockPanel.Dock="Right" />
            <StatusBarItem DockPanel.Dock="Right">アイテム２</StatusBarItem>
            <Separator DockPanel.Dock="Right" />
            <StatusBarItem>アイテム１</StatusBarItem>
        </StatusBar>
        <TextBox Opacity="0.5"></TextBox>
    </DockPanel>
</Window>

xaml コード以外にも、グラス効果を適用できない環境も考慮するため、アプリケーションロード時にグラス効果が利用可能かを判断してからスタイルを適用しています

using System.Windows;
using Microsoft.Windows.Shell;

namespace GlassStyleTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler( MainWindow_Loaded );
        }

        private void MainWindow_Loaded( object sender, RoutedEventArgs e )
        {
            // グラス効果が利用できるかを確認してスタイルを適用する
            this.Style = SystemParameters2.Current.IsGlassEnabled
                ? (Style)Resources["GadgetStyle"] : null;
        }
    }
}

グラス効果を確認するために、「デスクトップのカスタマイズ」から「ウィンドウの色とデザイン」で色設定を変更すると、クライアントエリアを含めた透過領域の配色がきちんと反映されていることも確認できます

また、グラス効果を利用する際には、Microsoft からガイドラインが発表されていますのでこちらも参考にするとよいでしょう