WPF利用WindowChrome实现自定义窗口

首先我们来详细讲解如何利用WindowChrome实现自定义窗口的完整攻略。

简介

WindowChrome 是 WPF 中的一个类，可以帮助我们自定义窗口视觉。通过 WindowChrome，可以自定义窗口的样式，改变标题栏和窗口边框的样式，甚至可以设置圆角窗口。

攻略

1. 新建 WPF 项目，添加 Windows 项目

首先，我们需要新建一个空的 WPF 项目，并添加一个 Windows（Application）项目。

1. 设置窗口样式

在 App.xaml 中，我们可以通过 ResourceDictionary 来设置窗口样式。

在 ResourceDictionary 中添加以下代码：

<Style x:Key="MyCustomWindowStyle" TargetType="{x:Type Window}">
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="WindowStyle" Value="None"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Window}">
                <Grid>
                    <!-- 在此处添加内容 -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1. 使用 WindowChrome

为了使用 WindowChrome，我们需要添加 PresentationFramework.Aero2 框架，然后通过 WindowChrome 属性来自定义窗口。

在 ResourceDictionary 中添加以下代码：

<Style x:Key="MyCustomWindowStyle" TargetType="{x:Type Window}">
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="WindowStyle" Value="None"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Window}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="32"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- 自定义标题栏 -->
                    <Grid Background="#1E1E1E">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Button Content="_" Style="{StaticResource MyMinimizeButtonStyle}" Grid.Column="0"/>
                        <Button Content="▢" Style="{StaticResource MyMaximizeButtonStyle}" Grid.Column="2"/>

                        <TextBlock Text="{TemplateBinding Title}" Foreground="White" Grid.Column="1" HorizontalAlignment="Center"/>

                        <Rectangle x:Name="ResizeGrip" Width="12" Height="12" Fill="Transparent" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,5,5"/>

                        <!-- 使用 WindowChrome 进行自定义 -->
                        <Border x:Name="WindowChrome" CornerRadius="0 0 5 5" Background="White" Grid.ColumnSpan="3"/>
                    </Grid>

                    <!-- 在此处添加内容 -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

其中，WindowChrome 标签需要设置在 Border 标签中。在设置边框的形状和颜色时，可以使用 CornerRadius 和 Background 属性来进行设置。

1. 自定义 WindowChrome 样式

WindowChrome 提供了许多属性可以修改窗口的外观。例如，我们可以通过 CaptionHeight 属性来设置标题栏的高度，通过 ResizeBorderThickness 属性来设置窗口的边框大小。

在 ResourceDictionary 中添加以下代码：

<WindowChrome.WindowChrome>
    <WindowChrome CaptionHeight="32"
                  ResizeBorderThickness="5 5 10 10"
                  CornerRadius="0 0 5 5"
                  GlassFrameThickness="0">
        <WindowChrome.ResizeGrip>
            <Path Data="M 0 6 L 6 6 L 6 0"
                  Width="12"
                  Height="12"
                  Fill="#666"/>
        </WindowChrome.ResizeGrip>
    </WindowChrome>
</WindowChrome.WindowChrome>

上面的代码设置了标题栏的高度为 32 像素，设置了窗口边框的大小为 5 像素，在右下角设置了 10 像素的边框，设置了窗口的圆角为 5 像素。同时，设置了 ResizeGrip 的大小为 12 像素，填充颜色为 #666。

示例1：

我们可以在窗口标题栏添加一些按钮来实现一些功能。

<Button Content="_" Style="{StaticResource MyMinimizeButtonStyle}" Grid.Column="0"
        Command="{Binding MinimizeCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
<Button Content="▢" Style="{StaticResource MyMaximizeButtonStyle}" Grid.Column="2"
        Command="{Binding MaximizeCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
<Button Content="X" Style="{StaticResource MyCloseButtonStyle}" Grid.Column="3"
        Command="{Binding CloseCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>

示例2：

我们也可以在窗口的边框上添加一些阴影效果，使窗口看起来更加现代化。

<Grid.Resources>
    <DropShadowEffect x:Key="ShadowEffect" BlurRadius="5" ShadowDepth="0" Opacity="0.5" Color="Black"/>
</Grid.Resources>

<Border x:Name="WindowChrome" CornerRadius="0 0 5 5"
        Background="White"
        Grid.ColumnSpan="3"
        Effect="{StaticResource ShadowEffect}">
</Border>

总结

通过使用 WindowChrome，我们可以方便地自定义 WPF 程序的窗口样式。通过修改 WindowChrome 的属性，我们可以轻松地设置窗口的样式，实现各种不同的效果。