二、创建项目与窗口样式

2020-07-24  本文已影响0人  安静的程序员

一、创建项目

开发工具:Visual Studio 2019
项目类型:WPF应用(.NET Framework)
项目名称:DuplicateFileCleaner

二、创建窗口样式

添加文件夹:CustomStyle
添加资源字典:WindowStyle.xaml


窗口上有两个按钮需要创建样式:最小化和关闭按钮。
因为只有窗口上用到这两个按钮,所以就不单独添加按钮样式资源字典了,直接写在窗口样式里:

<!-- 最小化按钮 -->
<Style x:Key="MinButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="Border" Background="Transparent">
                    <Canvas Width="10" Height="10">
                        <Line Stroke="White" X1="0" Y1="6" X2="10" Y2="6"/>
                    </Canvas>
                </Border>
                <!-- 触发器 -->
                <ControlTemplate.Triggers>
                    <!-- 鼠标悬停 -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#3665B3"/>
                    </Trigger>
                    <!-- 鼠标按下 -->
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#3D6099"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!-- 关闭按钮 -->
<Style x:Key="CloseButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="Border" Background="Transparent">
                    <Canvas Width="10" Height="10">
                        <Line Stroke="White" X1="0" Y1="0" X2="10" Y2="10"/>
                        <Line Stroke="White" X1="10" Y1="0" X2="0" Y2="10"/>
                    </Canvas>
                </Border>
                <!-- 触发器 -->
                <ControlTemplate.Triggers>
                    <!-- 鼠标悬停 -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#E04343"/>
                    </Trigger>
                    <!-- 鼠标按下 -->
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#BD3939"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

接下来是窗口样式,首先编辑基本框架:

<!-- 主窗口样式 -->
<Style x:Key="MainWindowStyle" TargetType="Window">
    <!-- 字体 -->
    <Setter Property="FontFamily" Value="NSimSun"/>
    <!-- 字号 -->
    <Setter Property="FontSize" Value="12"/>
    <!-- 文本显示模式:屏幕 -->
    <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
    <!-- 窗口样式:无边框 -->
    <Setter Property="WindowStyle" Value="None"/>
    <!-- 允许透明像素:是 -->
    <Setter Property="AllowsTransparency" Value="True"/>
    <!-- 关闭抗锯齿 -->
    <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
    <!-- 模板 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Window">

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

添加两个边框,最外层的边框用于显示窗口阴影,第二层用于显示窗口边框:

<!-- 模板 -->
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Window">
            <!-- 阴影 -->
            <Border>
                <!-- 边框 -->
                <Border>

                </Border>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

创建窗口内框架:

<!-- 边框 -->
<Border>
    <!-- 窗口内框架 -->
    <Grid>
        <!-- 将窗口区域分为二块 -->
        <Grid.RowDefinitions>
            <!-- 标题栏 -->
            <RowDefinition Height="30"/>
            <!-- 客户区 -->
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
</Border>

添加标题栏:

<!-- 标题栏 -->
<Grid Background="#59667D">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>
    </Grid.ColumnDefinitions>

    <!-- 标题栏 -->
    <TextBlock x:Name="TitleBar" Text="{TemplateBinding Title}"
                                               FontSize="17" FontFamily="站酷高端黑" Foreground="#FFFFFF"
                                               Padding="9,5,0,0" TextTrim-ming="CharacterEllipsis"/>
    <!-- 关闭按钮 -->
    <Button x:Name="MinButton" Style="{StaticResource MinButtonStyle}" Grid.Column="1"/>
    <!-- 关闭按钮 -->
    <Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" Grid.Column="2"/>
</Grid>

添加客户区:

<!-- 客户区 -->
<Grid Grid.Row="1" Background="#1C222A">
    <AdornerDecorator>
        <ContentPresenter/>
    </AdornerDecorator>
</Grid>

添加窗口阴影和边框:

<!-- 阴影 -->
<Border BorderThickness="10">
    <Border.Effect>
        <DropShadowEffect Color="Black" Opacity="0.2" BlurRadius="10"
                          Direction="0" ShadowDepth="0" Rendering-Bias="Quality"/>
    </Border.Effect>
    <!-- 边框 -->
    <Border BorderThickness="1" BorderBrush="White">
    </Border>
</Border>

若要关闭阴影或边框,将BorderThickness设置为0即可。

关于标题栏字体,我使用的是站酷网的免费字体:站酷高端黑,下载地址:
字体下载页面

完整样式文件
链接:https://pan.baidu.com/s/117cladFEEFwxDA9mqwhixg
提取码:5o24

三、引用并设置窗口样式

打开App.xaml文件,在<Application.Resources>标记对中添加:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <!-- 窗口样式 -->
        <ResourceDictionary Source="CustomStyle/WindowStyle.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

打开MainWindow.xaml,修改标题并设置窗口样式:


最终运行效果:


上一篇下一篇

猜你喜欢

热点阅读