WPFSpark v1.2

• 下载 WPFSpark 演示 - 140 KB
• 从 GitHub 下载最新版本源代码 (外部链接)

​

WPFSpark v1.2

终于来了！在近 4 年的漫长等待后，我很高兴地宣布 WPFSpark 的下一个版本终于发布了。 :)

WPFSpark v1.2 中的新增内容

在本节中，我将概述 WPFSpark 控件的新增功能和修改，以便您可以快速适应您的代码并轻松集成新功能。对于 WPFSpark v1.1，我写了多篇文章，详细解释了每个控件的设计和实现方式。您可以在这里查看这些文章 (WPFSpark：M of N 系列)。我打算尽快更新这些文章。目前，本文档应该能让您快速了解情况。所有代码均已使用 C# 6.0 移植到 .NET Framework 4.6.1。

SprocketControl

所有现有依赖项均未更改。但是，为了给用户更多自由，添加了两个新的依赖属性 - InnerRadius 和 OuterRadius。它们控制辐条的长度。它们表示内圆和外圆（辐条位于其之间）的半径与 SprocketControl 宽度的比率。

​

依赖属性	类型	描述	默认值
InnerRadius	双精度浮点型	获取或设置内半径与 SprocketControl 宽度之比。	0.175
OuterRadius	双精度浮点型	获取或设置外半径与 SprocketControl 宽度之比。	0.3125

ToggleSwitch

WPFSpark v1.1 发布时，用户报告了 FluidMoveBehavior 中的内存泄漏（可以在 此处 找到）。ToggleSwitch 使用 FluidMoveBehavior 来在其 IsChecked 状态改变时为其内容设置动画。我研究了各种可能的解决方案来解决此问题，但均未令人满意。然后，我决定完全移除 ToggleSwitch 对 FluidMoveBehavior 的依赖。ToggleSwitch 的内容托管在一个 Grid 中，FluidMoveBehavior 用于动画化内容从 Grid 的一个列移动到另一个列。因此，不再将内容托管在 Grid 中，而是将其托管在 Canvas 中，并且不再使用 FluidMoveBehavior，而是使用 DoubleAnimation 来动画化内容的 Margin。

在进行此更改时，我深入研究了 ToggleSwitch 代码以及用户在 CodePlex 网站上报告的问题和建议。这引发了其他几项更改（最终进行了一次大规模重写），目的是使 ToggleSwitch 更易于使用，同时消除潜在问题（包括视觉和代码问题）。以下是更改：

默认情况下，IsThreeState 属性设置为 False，因为 ToggleSwitch 仅支持 IsChecked 属性的两种状态 - True 和 False。设置 IsChecked 属性对 ToggleSwitch 没有视觉效果。

已删除以下依赖属性

• TargetColumnInternal
• ThumbGlowColor - 已替换为 ThumbGlowBrush
• ThumbShineCornerRadius
• ThumbWidth - 已替换为 ThumbWidthRatio。ThumbWidth 现在是一个只读属性，表示 Thumb 的实际宽度。

已添加以下**只读**依赖属性

依赖属性	类型	描述
CheckedMargin	Thickness	获取 ToggleSwitch 处于 Checked 状态时 PART_ContentGrid 的计算 Margin。
UncheckedMargin	Thickness	获取 ToggleSwitch 处于 Unchecked 状态时 PART_ContentGrid 的计算 Margin。
ThumbWidth	double	获取 Thumb 的计算宽度。
ThumbHeight	double	获取 Thumb 的计算高度。
ThumbCornerRadius	CornerRadius	获取 Thumb 的计算 CornerRadius。

已添加以下新的依赖属性

依赖属性	类型	描述	默认值
CheckedTextEffect	Effect	获取或设置应用于 Checked 文本的效果。	null
UncheckedTextEffect	Effect	获取或设置应用于 Unchecked 文本的效果。	null
ThumbGlowBrush	Brush	获取或设置 Thumb 中在鼠标悬停在 ToggleSwitch 上时显示的辉光画刷。	透明
ThumbShineBrush	Brush	获取或设置 Thumb 上亮片画刷。	透明
ThumbWidthRatio	双精度浮点型	获取或设置 Thumb 宽度与 ToggleSwitch 宽度之比。值范围：0.1 - 0.9（含）。	0.4
OptimizeRendering	布尔值	获取或设置指示 ToggleSwitch 周围的 ClipBorder 是否启用 OptimizeClipRendering 以防止边框和裁剪内容之间出现间隙的属性。如果 ToggleSwitch 背景为透明或具有部分透明度，请将此值设置为 False。否则，如果背景为不透明，请将其设置为 True 以获得更好的渲染效果。	假
OptimizeThumbRendering	布尔值	获取或设置指示 ToggleSwitch Thumb 周围的 ClipBorder 是否启用 OptimizeClipRendering 以防止边框和裁剪内容之间出现间隙的属性。如果 ToggleSwitch ThumbBackground 为透明或具有部分透明度，请将此值设置为 False。否则，如果 ThumbBackground 为不透明，请将其设置为 True 以获得更好的渲染效果。	假
AutoThumbWidthRatio	布尔值	获取或设置指示 ThumbWidthRatio 是否应根据 ToggleSwitch 的 Width、Height 和 BorderThickness 自动计算的属性。此属性优先于 ThumbWidthRatio 属性。如果此属性设置为 true，则用户设置的任何 ThumbWidthRatio 值都将被忽略，ThumbWidth 将等于 ThumbHeight。	True

ToggleSwitch 的黄金法则

尽管 ToggleSwitch 允许您自由设置其依赖属性的值，但为了使 ToggleSwitch 有效渲染，请遵循以下黄金法则：

• 为 BorderThickness 和 ThumbBorderThickness 提供统一的值
• BorderThickness 和 ThumbBorderThickness 应成比例，即如果 BorderThickness 为 {a,b,a,b}，ThumbBorderThickness 为 {c,d,c,d}，则 (a/b) 应等于 (c/d)。
• 为 CornerRadius 提供统一的值。如果您提供非统一的值，请尝试确保半径在水平方向（例如 {a,a,b,b}）或垂直方向（例如 {a,b,b,a}）上是对称的。
• 确保 CornerRadius 小于或等于 ToggleSwitch 高度的一半。
• 如果您的 Background 和 ThumbBackground 是非透明颜色，则将 OptimizeRendering 和 OptimizeThumbRendering 属性设置为 true。
• 将 AutoThumbWidthRatio 设置为 true，让 ToggleSwitch 计算最佳 ThumbWidth。

在源代码的 ToggleSwitch.Generic.xaml 文件中，除了 ToggleSwitch 的 ControlTemplate 外，我还添加了几个使用该模板的样式。这些样式模仿了 Windows 10 和 iOS 中 Toggle 按钮的用户体验。您必须将 ToggleSwitch.Generic.xaml 添加到您的 App.xaml 中才能访问这些样式。样式列表如下：

• ToggleSwitch.UWP.Light.Style - 代表浅色背景的 Windows 10 ToggleButton。

  

• ToggleSwitch.UWP.Dark.Style - 代表深色背景的 Windows 10 ToggleButton。

  

• ToggleSwitch.iOS.Light.XXXX.Style - 代表浅色背景的 iOS ToggleButton，其中 XXXX 指的是强调色。

  

您可以从这些样式派生，以创建具有您选择的强调色的自定义样式。您可以在 XAML 中按以下方式引用这些样式：

<wpfspark:ToggleSwitch Grid.Row="1"
						  Grid.Column="1"
						  HorizontalAlignment="Center"
						  VerticalAlignment="Center"
						  Style="{StaticResource {ComponentResourceKey TypeInTargetAssembly=wpfspark:ToggleSwitch, ResourceId=ToggleSwitch.UWP.Dark.Style}}" />

ClipBorder

ClipBorder 类值得在此提及。如果没有 ClipBorder 类，WPFSpark 将不复存在。在 WPFSpark v1.1 中，ClipBorder 类派生自 Border 类，并设置 Clip 属性以在其边界内裁剪其子项。然而，这并不太有效。在某些情况下，ClipBorder 未能正确渲染。例如，当 ClipBorder 具有粗边框，并且 BorderBrush 和 Background 颜色相同时，您会看到边框和背景之间存在一个小的间隙，尤其是在圆角处。起初，我以为这是由于根据边框计算的 ClipBorder 子项的 Clip Geometry。我尝试了各种解决方案（例如，在计算 Clip Geometry 时添加一个小的容差值），但并未有效消除问题。

然后我发现问题不在于 ClipBorder。Border 类也显示了相同的行为。

这促使我深入研究 Border 类的 Microsoft Reference Source，并提出我自己的优化解决方案。ClipBorder 不再派生自 Border 类。它现在派生自 Decorator 类，并且比以前更有效地裁剪其子项。

FluidWrapPanel

​

在 WPFSpark v1.1 中，FluidWrapPanel 强制要求其所有子项必须具有相同的大小（由 ItemWidth 和 ItemHeight 定义）。用户最常提出的功能请求之一是移除此限制，允许添加尺寸不同的子项。起初，我认为这很难实现，需要进行一些疯狂的代码修改。然后，我想到使用 BitMatrix 来跟踪子项的位置，并在拖动子项时计算其放置位置。这导致实现了 FluidBitMatrix 类，该类取代了 FluidLayoutManager 类。

但是，有一个限制 - 子项的尺寸必须是 ItemWidth 和 ItemHeight 的倍数。我还添加了一个只读依赖属性 FluidItems，它是一个子项的 ObservableCollection。通过访问此属性，您可以获取 FluidWrapPanel 中子项的当前顺序，并在拖动子项到新位置时获得更改的通知。我添加的另一个依赖属性是 OptimizeChildPlacement，它控制计算在 FluidWrapPanel 中放置子项的最佳可用位置的算法。

依赖属性	类型	描述	默认值
OptimizeChildPlacement	布尔值	获取或设置指示子项放置是否已优化的属性。如果设置为 true，则子项从 FluidWrapPanel 的开头放置在第一个可用位置。如果设置为 false，则每个子项占据与前一个子项相同的（或更大的）行和/或列。	true

SparkWindow

SparkWindow 现在具有与 Windows 10 中的桌面窗口相同的外观和感觉。已删除“关于”按钮。我能够根据 Rafael Rivera 的博客文章 Adding the "Aero Glass" blur to your Windows 10 apps 中的精彩提示，为窗口添加了背景模糊选项（模糊玻璃效果）。

NVM#，我最近发布的一个应用程序，使用了 SparkWindow。WPFSparkClient（显示 WPFSpark 控件示例）也使用了它。这两个应用程序都展示了如何在 WPF 应用程序中使用 SplitViewMenu。（WPF 中不存在 SplitView Control！）

重要提示：无论何时以编程方式实例化 SparkWindow，请确保在调用 ShowDialog() 方法之前设置 AllowTransparency=true 和 WindowStyle=None 属性。否则会引发异常。

还添加了三个新的依赖属性 - TitleImage、TitleImageMargin、TitleMargin。

依赖属性	类型	描述	默认值
TitleImage	UIElement	获取或设置要在窗口标题栏中显示的 UIElement（通常是 Image）。	null
TitleImageMargin	Thickness	获取或设置 TitleImage 的 Margin。	0
TitleMargin	Thickness	获取或设置标题栏中标题文本的 Margin。	0

更新

SparkWindow 现在支持调整大小。请确保将 ResizeMode 属性设置为 CanResize。这在默认的 SparkWindow 模板中设置。这允许通过拖动边缘或角落来调整 SparkWindow 的大小。

FluidPivotPanel

PivotHeaderControl

为了防止用户选择 Pivot Header，您可以将其 IsEnabled 属性设置为 False。还添加了一个新的依赖属性 DisabledForeground 来定义 PivotHeader 在禁用状态下的前景。

依赖属性	类型	描述	默认值
DisabledForeground	Brush	获取或设置 PivotHeaderControl 在禁用状态下的 Foreground。	黑色

PivotPanel

添加了一个新的 API SelectHeaderByName，允许您通过代码选择一个 PivotHeaderControl。它以 PivotHeaderControl 的名称作为参数。

FluidProgressBar

未做任何更改。该控件应与 WPFSpark v1.1 中的工作方式相同。

FluidStatusBar

我添加了一个依赖属性 SyncLatest。当其设置为 True 时，仅显示最新消息。尚未显示的老消息将被丢弃。当属性设置为 False 时，消息将被排队并逐个显示。

依赖属性	类型	描述	默认值
SyncLatest	布尔值	获取或设置指示状态消息显示是否与最新消息同步的属性。如果设置为 true，当消息到达时，它们不会被排队显示。相反，会显示最新的消息并丢弃旧的消息。	假

在代码中使用 WPFSpark v1.2

WPFSpark v1.2.0.1 可在 NuGet 上获取。您可以在此处获取。或者，您可以使用 Manage NuGet Packages 选项从 Visual Studio 将其添加到您的项目中（只需右键单击解决方案资源管理器中的项目，然后单击 Manage NuGet Packages）。

如果您有兴趣动手编写代码，可以在 GitHub 上访问 WPFSpark 源代码。我已经将代码从 CodePlex 移至 GitHub，因为我认为在 GitHub 上管理代码更方便。代码也根据 MIT 许可证提供。

历史

• 2016年2月26日：为 SparkWindow 添加了 Resize 功能
• 2015年12月8日：发布了 WPFSpark v1.2.0.2
• 2015年12月1日：发布了 WPFSpark v1.2.0.1