65.9K
CodeProject 正在变化。 阅读更多。
Home

一种创建 WPF 无边框窗口的简单方法

Steve Naidamast
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2016 年 9 月 16 日

CPOL

7分钟阅读

viewsIcon

24557

这里有一种创建 WPF 无边框窗口的简单方法

wpfchromelesswindow

引言

微软推出了“Windows Presentation Foundation”或 WPF，旨在使桌面开发与开发者在开发 Web 应用程序时获得的类似体验保持一致。除了可能用于创建窗口和页面的相当弱的图形界面之外，WPF 大部分为桌面开发者提供了一个高质量的基础，用于将桌面和桌面风格的应用程序投入生产环境以及多个移动平台。

就像 Web 开发现在将界面和编码结构或多或少地分开了 HTML/CSS 和客户端/服务器端编码（尽管客户端编码模型只是对“经典 ASP”的回归）一样，WPF 提供了一个类似的格式。

在 WPF 中，您同时拥有 Window 和 Page 对象，这类似于原始的 WinForms 环境，其中可以有一个 Window 和类似页面的控件，两者都可以拥有显示 Page 的 Windows。

与 Web 开发不同，微软出于某种原因选择让 WPF 窗口和页面的样式成为开发者难以理解的噩梦。尽管 CSS，在熟练的 Web 开发人员手中可能会变得非常复杂，但 CSS 仍然保留着大多数 Web 开发人员可以通过学习获得技能来使网页看起来不错的那种简洁性。

另一方面，WPF 将 CSS 的简洁性颠倒过来，通过实现提供微软或第三方供应商提供的所有 WPF 控件的基线样式的模板。对于许多人来说，用 CSS 来考虑的轻微样式选项，WPF 却给开发者带来了一系列复杂性，让许多人厌恶地放弃了。

人们会认为，需要一个完全独立的应用程序（Visual Studio 之外的“Blend”）来设计 WPF 样式，这样的过程会变得更容易。如果样式术语被转化为每个人都能理解的简单语言，而不是含糊不清的术语，导致大多数人求助于帮助系统来澄清，那么这个过程本会更容易。

进行简单的样式更改，例如 WPF 列表框中选择高亮的颜色，可能需要您将更新后的列表框样式模板的全部内容实现到页面中，这非常冗长，或者找到一种方法将样式资源添加到其中。无论哪种情况，查找此类过程的优质信息所需的研究可能非常广泛，因为很少有优质的手册能以简单直接的方式处理 WPF 样式。

许多开发者希望能够为客户和用户提供没有丑陋边框的窗口，这与 Web 浏览器中的边框类似。有趣的是，大多数开发者认为要做到这一点，他们需要一个昂贵的工具套件，提供无边框窗口以及高级样式。

不可否认，我也曾有过同样的看法，我自己的商业产品也遭受了许多人所遭受的同样的视觉损害……直到最近。经过大量关于此主题的研究，目的是避免购买我并不认为有必要的工具套件，我找到了足够的信息来构建这样的界面，发现它比我想象的要容易得多，一旦我梳理了其他人发布在技术网站上的各种文档。

设置窗口的属性

首先，您必须为 WPF 项目提供一个 Window 对象。如果您对 Visual Studio 和 WPF 的经验很少，这是一个类似于其他任何控件实例化的直接过程。右键单击您想添加 Window 的项目，然后选择“添加新项”，这将为您提供一个弹出窗口，如下图所示。只需选择“Window (WPF)”控件，Visual Studio 就会处理其余的事情。

visualstudionewitemselction

一旦您的项目有了 Window 控件/对象，请使用“XAML”（标记）视图打开它（使用“查看设计器”，然后选择“XAML”视图）。

在标记视图的顶部，您将看到您为窗口提供的类名……

<Window x:Class="MainWindow"

将鼠标光标放在这个名称上，右键单击以弹出属性屏幕。有时，此屏幕会显示为空白，所以您可能需要多次重新选择类名，属性窗口才会正确显示。当您看到属性信息显示出来时，请确保已选择属性条目（右上角的小扳手）。

在 **“画笔”** 部分，您需要更改以下属性

  • BorderBrush

单击颜色显示右侧的黑色方块，然后选择“自定义表达式”。输入“LightGray”。您可以输入任何标准的 WPF 样式颜色，但“LightGray”将提供一个不错的柔和边框颜色，不会刺眼。

在 **“外观”** 部分，您需要更改以下属性……

  • BorderThickness
  • WindowStyle

在“边框粗细”的四个条目区域（左、右、上、下），将数字设置为“1”。

对于“窗口样式”，将其设置为“None”。

在 **“通用”** 部分，应更改以下属性……

  • 图标
  • ResizeMode
  • ShowInTaskbar (在任务栏中显示)
  • SizeToContent
  • WindowStartupLocation
  • WindowState

对于“Icon”属性，您需要提供一个图像，该图像将在窗口最小化时显示在任务栏中。

WPF 中的所有图像都需要一个路径前缀，如下所示……

/(项目名称);”component”/(应用程序图像路径)

示例：/SQLServer.SourceControl;component/Images/ApplicationIcon_128x128.png

将“ResizeMode”设置为“CanResizeWithGrip”。此选项将在显示窗口的右下角提供一个调整大小的抓手，允许用户将窗口拖动到更大或更小的尺寸。

将“ShowInTaskbar”属性设置为已选中，以便窗口最小化后可以重新最大化。

将“SizeToContent”设置为“Manual”，以便可以执行手动调整大小。

将“WindowStartupLocation”设置为“CenterScreen”。

最后，将“WindowState”属性设置为“Normal”。

设置完所有这些属性后，您的窗口就可以在“标记”模式（XAML）下向设计器添加适当的 XAML 标记了。

窗口的 XAML 标记

当一个新 WPF 窗口被初始化时，它会带有其标题标记，其中包含我们刚刚调整的属性，以及一个主要的“grid”控件，如下所示……

<Window x:Class="MainWindow" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="MainWindow" 
Title="SQL Server Source Control for Developers" 
Icon="/SQLServer.SourceControl;component/Images/ApplicationIcon_128x128.png" 
Background="WhiteSmoke" WindowStartupLocation="
CenterScreen" ResizeMode="CanResizeWithGrip" 
FontFamily="Arial" Height="844" 
Width="1262" BorderThickness="1" BorderBrush="LightGray" 
AllowsTransparency="True" WindowStyle="None">

        <Grid>
	
	</Grid>
</Window>

这个 grid 是整个窗口的最外层 grid，应该保持不变，以便将所有其他 XAML 标记输入到其中。

在我们的情况下，我们将开始在主 grid 中添加两个停靠面板，这将允许我们为其他标记（控件）进行框架设置，以便它们沿着窗口的顶部和底部对齐。

<DockPanel VerticalAlignment="Top" Height="844">

  <DockPanel x:Name="TitleBar" DockPanel.Dock="Top" 
  Background="WhiteSmoke" Height="24">

  </DockPanel>

</DockPanel>

内部停靠面板允许我们配置窗口显示标题栏的两个区域，类似于原始的边框但更干净。在下面的 XAML 标记中，您会找到一个带有窗口标题的文本块以及一个“最小化”按钮，该按钮允许您将窗口最小化到任务栏。

<DockPanel x:Name="TitleBar" DockPanel.Dock="Top" 
Background="WhiteSmoke" Height="24">

<TextBlock HorizontalAlignment="Left" 
VerticalAlignment="Center" Background="WhiteSmoke" 
Foreground="DimGray" FontFamily="Arial" FontWeight="DemiBold">
SQL Server Source Control for Developers 2.1.1
</TextBlock>

<Button Name="btnMinimizeScreen" 
HorizontalAlignment="Right" VerticalAlignment="Center" 
BorderThickness="0" Height="20" Width="208">

        <Button.Template>
           <ControlTemplate>
              <Image Source="/SQLServer.SourceControl;component/Images/Minimize_64x64.png" 
               Height="24" Width="24" 
               HorizontalAlignment="Right" VerticalAlignment="Center" 
               ToolTip="minimize screen" />
           </ControlTemplate>
        </Button.Template>
</Button>

</DockPanel>

内部停靠面板之后是一个包含窗口主菜单的 grid，这是一个标准的 WPF Menu Control……

<Grid Name="grdMenu" 
DockPanel.Dock="Top" VerticalAlignment="Top">

</Grid>

由于本文使用的菜单特定于商业产品，因此其内部内容不会在此文中显示。但是，对于那些希望查看此演示文稿的完整 XAML 和源代码的人，可以从以下链接下载……

https://1drv.ms/u/s!AnW5gyh0E3V-g2E28JO3KJkRBFnN

这项工作的结果显示在下图，并包含在图像文件中，以便在下载中更好地查看……

wpfprojectchromelesswindow

对于那些有兴趣尝试微软“Windows Presentation Foundation”的人，请访问以下页面获取 Visual Studio 2016 Community Edition 和新的免费 SQL Server 2016 Developer Edition 数据库引擎的链接……

https://blackfalconsoftware.wordpress.com/visual-studio-net/

对于免费的开源 SQL Server 数据访问层，请访问以下链接下载……

http://blackfalconsoftware.com/OpenSource

有关本文的任何问题，请通过 support@blackfalconsoftware.com. 与我联系。

© . All rights reserved.