Silverlight浮动窗体组件的研究及自定义FW控件

最近在研究浮动窗体，搜索了半天，在Kinglee's Blog的博客里面找到了一个很强悍的浮动窗体控件，不过样子实在不怎么好看，根据自己的需求改了下样式，放大缩小可以根据ResizeMode的缩放模式来设置。后来要控件里面加一个翻转的效果，但是出现一个问题，就是如果拖动的话，翻转的中心位置就变了，这个问题我还是一直没有解决的。于是自己想办法把拖动效果给去掉了。去掉办法见后面。

 

下面就来详细的了解下FloatableWindow的属性及用法：

说明：Silverlight的ChildWindow组件给我们的开发带来了便利，比如说我们可以用它开发自定义对话框等。然而，这同时也带来了这样一个问题，ChildWindow组件只能以Modal Window（模式窗口）的形式进行应用，这也就是说同一时间只能有一个子窗体出现在应用程序中；另外，ChildWindow组件不能进行窗体大小的自定义缩放。如果我们想要开发多窗口的应用程序的话，ChildWindow显然就不能满足我们的要求了。幸运的是，Tim Heuer为我们提供了Non-Modal Used ChildWindow组件（非模式使用子窗体--Tim Heuer称之为浮动窗体[FloatableWindow]）这样我们就能轻松地开发多窗体应用了。

组件所在的命名空间：
System.Windows.Controls

组件常用属性：
[以下属性继承自ChildWindow]
DialogResult：获取或者设置一个值用来显示子窗体的反馈内容是否被接受或是取消。

HasCloseButton：获取或者设置一个值用来显示子窗体是否包含关闭按钮。

OverlayBrush：获取或者设置被用于当子窗体打开时覆盖在父窗体上的遮盖层的笔刷。

OverlayOpacity：获取或者设置被用于当子窗体打开时覆盖在父窗体上的遮盖层的笔刷的透明度。

Title：获取或者设置子窗体的窗口标题。

[以下属性为该组件特有属性]
HorizontalOffset：获取或者设置浮动窗口出现位置的水平偏移量。

IsModal：获取浮动窗体是否为模式窗体。

ParentLayoutRoot：获取或者设置父窗体的根部布局。[使用时必须设置]

ResizeMode：获取或者设置浮动窗体的缩放模式。

VerticalOffset：获取或者设置浮动窗口出现位置的垂直偏移量。

组件常用方法：
Close：关闭子窗体。

Show：以非模式窗口形式打开子窗体并返回而不等待该子窗体关闭。[此时，IsModal为false]

Show(horizontalOffset，verticalOffset)：设置出现位置后，以非模式窗口形式打开子窗体并返回而不等待该子窗体关闭。[此时，IsModal为false]

ShowDialog：以模式窗口形式打开子窗体并返回而不等待该子窗体关闭。[此时，IsModal为true]

组件常用事件：
Closed：当子窗体关闭后发生。
Closing：当子窗体正在关闭时发生。

效果图： 

 

 代码段：
MainPage.xaml代码：

 

<UserControl x:Class="SilverlightClient.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Width="640" Height="480">

  <Grid x:Name="LayoutRoot" Background="White" Width="640" Height="480">

    <Button x:Name="btnCreateFloatableWindow" Margin="207,30,221,0" Content="创建浮动窗体" Height="43" VerticalAlignment="Top" FontSize="16" Width="212"/>

  </Grid>

</UserControl>

 

MainPage.xaml.cs代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace SilverlightClient

{

    public partial class MainPage : UserControl

    {

       

        public MainPage()

        {

            InitializeComponent();

            //注册事件触发处理

            this.btnCreateFloatableWindow.Click += new RoutedEventHandler(btnCreateFloatableWindow_Click);

        }

 

        void btnCreateFloatableWindow_Click(object sender, RoutedEventArgs e)

        {

            FloatableWindow fw = new FloatableWindow();//创建浮动窗口实例

            fw.ParentLayoutRoot = LayoutRoot;//指定承载浮动窗口的父窗口的根布局元素[这里为Grid x:Name="LayoutRoot"]

            fw.Title = "Test Floatable Window";//浮动窗口标题

            fw.Content = "The time is " + DateTime.Now.ToLongTimeString();//浮动窗体内容

            fw.Width = 300;//浮动窗口的宽度

            fw.Height = 200;//浮动窗口的高度

            fw.ResizeMode = ResizeMode.CanResize;//设置浮动窗口可自定义缩放

            fw.Show();//以非模式窗口形式打开窗体

        }

    }

}

 

FloatableWindowDemo.xaml代码：

<controls:FloatableWindow x:Class="SilverlightClient.control.FloatableWindowDemo"

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=FloatableWindow"

           Width="400" Height="300"

           Title="FloatableWindowDemo">

    <Grid x:Name="LayoutRoot" Margin="2">

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />

        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />

    </Grid>

</controls:FloatableWindow>

 

FloatableWindowDemo.xaml.cs代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace SilverlightClient.control

{

    public partial class FloatableWindowDemo : FloatableWindow

    {

        public FloatableWindowDemo()

        {

            InitializeComponent();

        }

 

        private void OKButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = true;

        }

 

        private void CancelButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = false;

        }

    }

}

 

PS：这里的content是一个obj类型的，可以把自定义的控件加入到浮动窗体中，这样每个浮动窗体的样式得到了控制，以后修改浮动窗体的样式就简单方便多了。不用一个控件一个控件的改了。

fw.Content = new SilverlightControl1();

 

 

 下面就来说说改样式以及去掉自己不需要的功能：

1.创建新的样式，具体怎么设置颜色这里就不多做说明了。

 

2.由于floatalbewidow的方法都封装在dll里面，自己研究了一下，他的事件是根据x:Name=""里的名字进行控制的。有2个很简单的办法去掉这些控制。

（1）去掉x:Name="".使样式不受控制。

（2）反键选择clear part assignment.

 

 

PS:这些完全是个人工作需要才进行的修改。一般直接使用floatalbewindow就可以了，里面有拖放效果，放大缩小，及弹出来，关闭时的动画，十分的强大。

 

 

 

floatalbewindow.dl控件以及本文DEMO下载地址：

http://download.csdn.net/source/2350853