FloatingWindow - Silverlight 4 的多窗口界面

在开始阅读之前，请点击FloatingWindow 演示链接，看看它是否能引起您的兴趣。如果可以，请在此处获取。

• 下载 FloatingWindow Silverlight 演示项目 - 87.5 KB
• 下载最新版本

如果您的浏览器支持 Silverlight 4，您将看到类似这样的内容

21 天学会 Windows

确实，编写这个库花费了更多的时间。虽然浮动窗口在图形应用程序中很常见，但在 Silverlight 中这样的控件并不多。其中最好的之一是 Tim Heuer 的 FloatableWindow 控件。

开始这个项目时，我只想为现有控件添加一些功能。但事实证明，完全重写更容易。最终，在我重写之后，只剩下少量原始方法。我添加了以下功能：

• 窗口可以通过拖动任何边缘或角落来调整大小
• 增加了在移动或调整窗口大小时将其吸附到最近的窗口边界的可能性
• 窗口可以最小化、最大化并恢复其位置和大小
• 窗口可以以模态模式打开
• 窗口可以保存和恢复其大小和位置
• 添加了一个图标栏，显示最小化或所有窗口
• 图标栏可以显示最小化窗口的快照或一个附加到窗口的 FrameworkElement 图标。

里面有什么

详细解释它的工作原理需要太多时间。我确定，您（和我一样）不喜欢阅读冗长无聊的文档。毕竟，您有我的源代码。我最好还是描述一下它如何使用。但在我们开始之前，我将介绍一些库中使用的术语和属性。下图将帮助我说明它们。

其中最重要的元素是

• FloatingWindow - 可调整大小窗口的基类
• FloatingWindowHost - 包含浮动窗口的 Canvas 元素
• Iconbar - 包含最小化窗口图标的面板
• Bootstrap Button - 打开 Iconbar 的按钮

类及其成员

本节包含最常用类成员的列表。

FloatingWindow 类

• DialogResult - 指示 FloatingWindow 是否被接受或取消的值
• FlowDirection - 窗口图标内标题文本流动的方向
• Icon - 在图标栏上显示为窗口图标的内容。如果未指定，则显示窗口的快照作为图标
• IconText - 显示在最小化窗口图标上的文本
• Position - 当前窗口位置
• ResizeEnabled - 指示是否启用调整大小的值
• ResizingAreaThickness - 调整大小区域的宽度
• ShowInIconbar - 指示是否在图标栏中显示最小化窗口的值
• ShowCloseButton - 指示是否显示关闭按钮的值
• ShowMaximizeButton - 指示是否显示最大化按钮的值
• ShowMinimizeButton - 指示是否显示最小化按钮的值
• Title - 显示在窗口顶部的标题。可以包含任何 UI 元素
• TitleBackground - 标题背景

• Close - 关闭窗口
• RestoreSizeAndPosition - 恢复窗口关闭时存储在 IsolatedStorage 中的大小和位置
• RestoreWindow - 恢复窗口状态、大小及其位置（如果被最小化或最大化）
• Show - 显示窗口
• ShowModal - 以模态模式显示窗口

• Activated - 窗口已激活并获得焦点
• Closed - 窗口已关闭
• Closing - 窗口正在关闭
• Deactivated - 窗口已停用
• Maximized - 窗口已最大化
• Minimized - 窗口已最小化
• Restored - 窗口已恢复

FloatingWindowHost 类

• IconWidth - 窗口图标的宽度
• IconHeight - 窗口图标的高度
• OverlayBrush - 覆盖颜色
• SnapinEnabled - 指示是否启用吸附的值
• SnapinDistance - 移动窗口时，窗口边界之间吸引到另一个窗口的距离
• SnapinMargin - 相邻窗口之间的间隙
• ShowMinimizedOnlyInIconbar - 指示是否仅在图标栏中显示最小化窗口的值
• WindowIconWidth - 图标栏项的宽度
• WindowIconHeight - 图标栏项的高度

• CloseAllWindows - 关闭所有浮动窗口
• HideIconbar - 隐藏图标栏
• ShowIconbar - 显示图标栏

其他属性可以在代码中找到。

入门

窗口“浮动”在 FloatingWindowHost 中 - 这是一个 Canvas 控件，需要首先创建，例如在标记中。

<my:FloatingWindowHost x:Name="host" 
    SnapinEnabled="True" ShowMinimizedOnlyInIconbar="False">
</my:FloatingWindowHost>

下一步，我们将窗口添加到主机中

FloatingWindow window = new FloatingWindow();
window.Title = "New window";
host.Add(window);
window.Show();

创建的窗口是隐藏的。FloatingWindow 类有三个重载的 Show() 方法。第一个重载不带参数，并在托管容器的中心显示窗口。第二个和第三个重载在指定坐标处显示窗口。

还有另一个选项：恢复窗口关闭时保存的大小和位置。不用担心保存这些参数。如果您指定了一个唯一的窗口 Tag，它们将在窗口关闭时自动存储在 IsolatedStorage 中。您可以在运行时或在 XAML 中设置它。

<my:FloatingWindow x:Class="FloatingWindowControl.DetailsForm"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:SilverFlow.Controls;assembly=SilverFlow.Controls"
    Height="Auto" MinWidth="100" MinHeight="100"
    Title="Details" IconText="Details Form" Tag="Details">

现在您可以调用 RestoreSizeAndPosition() 方法，以先前保存的坐标显示窗口。

detailsForm.RestoreSizeAndPosition();
detailsForm.Show(); 

在 1.2 版本中，添加了新的 ShowModal() 方法以模态模式显示浮动窗口。它通过在下方窗口上显示一个覆盖层来阻止对其的访问。覆盖层的颜色由 OverlayBrush 属性定义。

与 ChildWindow 一样，它有一个 DialogResult 属性，可以在窗口关闭时检索。

FloatingWindow window = new FloatingWindow(); 
window.Title = "Confirmation"; 
host.Add(window); 
window.ShowModal(); 
window.Closed += (s, a) =>
    {
        bool? result = window.DialogResult;
    };  

模态窗口与 ChildWindow 的主要区别在于，后者会阻止访问 Silverlight 应用程序所占用的整个区域，而模态模式下的浮动窗口则只阻止父 FloatingWindowHost。

如果您需要知道哪个窗口变为活动状态（获得焦点），可以订阅 1.2.1 版本中添加的 Activated 或 Deactivated 事件（请参阅 *MainPage.xaml.cs*）。

FloatingWindow window = new FloatingWindow();
host.Add(window);
window.Activated += (s, a) =>
    {
        Debug.WriteLine("Activated: {0}", window.IconText);
    };

现在窗口已显示，我们可以切换它们、移动和调整它们的大小。选定的窗口将成为最顶部的窗口并获得焦点。如果我们希望某个窗口始终显示在其他窗口之上，可以将其 TopMost 属性设置为 true。

窗口的外观在 *generic.xaml* 文件中定义。

亲爱的，我缩小了窗口

当我们移动或调整窗口大小时，它会吸附到最近的边界。窗口吸引到其他窗口的最大距离是 5 像素，它由 SnapinDistance 属性定义。如果您不喜欢窗口紧密吸附在一起，可以指定非零的 SnapinMargin - 相邻窗口之间的间隙。正如伦敦人常说的“小心缝隙”。

我们可以通过设置 ResizeEnabled 属性来启用或禁用调整大小。此外，还可以禁用按一个坐标进行调整大小。例如，如果我们将窗口的 MinWidth 设置为其 MaxWidth，则窗口无法按 X 坐标调整大小。

在编写调整大小的代码时，我创建了两个有趣（至少对我而言）的副产品：ResizeController 和 SnapinController。它们在很大程度上独立于代码的其他部分，我将在我的其他控件中使用它们。

伙计，我的窗口在哪儿？

如果我们提供了最小化窗口的功能，那么我们就应该提供对它们的快速访问。而且不仅仅是最小化的窗口，因为有些窗口可能会被移出窗口容器的可见区域。这就是为什么我建议将 ShowMinimizedOnlyInIconbar 属性设置为 false。

每次按下窗口容器底部的 bootstrap 按钮时，图标栏就会出现，当点击图标时隐藏。它包含按 IconText 排序的窗口缩略图。如果您不想在图标栏上显示窗口的图标，请将其 ShowInIconbar 属性设置为 false。

窗口的缩略图显示为窗口的快照，如果 Icon 属性未设置。否则，将显示由属性设置的 FrameworkElement。例如，请查看 *WindowWithChart.xaml* 的标记。

<my:FloatingWindow.Icon>
    <my1:MyIcon />
</my:FloatingWindow.Icon>

它将 MyIcon UserControl 定义为窗口的图标。看起来不错，不是吗？如果您想使用图像作为图标，您需要指定其尺寸。

<my:FloatingWindow.Icon>
    <Image Source="Images/computer.png" Width="48" Height="48"></Image>
</my:FloatingWindow.Icon>

如何将其添加到您的项目

这是一份简短的分步说明。

1. 在下载的归档文件中找到 *FloatingWindowTemplate.zip*，并将 ZIP 文件复制到 Visual Studio 的 *ItemTemplates* 文件夹。在我的机器上，它是 *“C:\Users\Eugene\Documents\Visual Studio 2010\Templates\ItemTemplates\Visual C#”* 文件夹。
2. 将 *SilverFlow.Controls.dll* 添加到您的 Silverlight 项目的引用中。
3. 将 SilverFlow.Controls 项目中的资源字典 *generic.xaml* 复制到您的 Silverlight 项目，并将其添加到您的应用程序资源中。
4. 右键单击您的 Silverlight 项目，选择“添加 > 新项...”，然后选择 *FloatingWindow 控件* 项模板。
5. 构建项目。
6. 将 FloatingWindowHost 控件添加到您的页面，该控件将托管“浮动”窗口。请参阅 *MainPage.xaml* 说明如何操作。
7. 添加代码，创建并显示“浮动”窗口。

后记

首先，我想感谢大家对我的贡献、想法、笔记和批评。我不会承诺回答您的所有邮件或实现您所有的建议。毕竟，您可以自由使用和修改此代码。

我偶尔会在我的网站 jevgenijpankov.heliocode.com 上发布 FloatingWindow 控件的新版本。

如果您使用此库创建了有趣的内容，请写信给我，我将发布指向您最令人印象深刻的示例的链接。

参考文献

• Tim Heuer: FloatableWindow

历史

• 2010 年 10 月 24 日 - 初始版本
• 2011 年 2 月 12 日 - 版本 1.2
• 修复了一些错误
• 重构了 Iconbar
• 添加了模态模式
• 2011 年 5 月 12 日 - 版本 1.2.1
• 修复了一些错误
• 添加了 Activated 和 Deactivated 事件
• 添加了 RestoreSizeAndPosition 方法