在上两篇教程中，讲述了Silverlight的Out of browser理论知识和基础实践。本节将讲述如何创建自定义的Out of browser应用以及如何调试Silverlight的Out of browser应用。
Silverlight Out of browser的自定义化
从Silverlight 4开始,OOB应用支持信任权限设置和窗口自定义，最典型的自定义窗口应用是Silverlight Facebook客户端。从下图可以看出，OOB应用其运行效果已经基本和windows应用相似，其专业效果不逊于WinForm和WPF应用。
对于创建自定义窗口应用，微软提供了非常简单的方法，
首先选择“Require elevated trust when running outsIDe the browser”， 在下面“Window Style”中可以选择不同的窗口模式，其中分别是：
1. Default模式，默认模式是使用windows默认窗口样式；
2. No border，无边框模式；
3. borderless Round Corners， 圆角无边框模式；
对比以上三种方模式，第一种默认模式最为简单，因为使用的是windows默认窗口，其中最大化和最小化以及关闭控件都是继承自windows窗口，其中窗口的拖拉事件默认的也是使用windows API进行控制； 而第二种和第三种窗口模式，允许设计开发人员创建个性的OOB窗口应用，但是同时也需要创建自定义的最大化，最小化以及关闭控件。下面看一个简单的实例演示，
这里我们使用第三种窗口模式，圆角无边框窗口作为演示，首先打开上一讲中的例程项目SilverlightOOBDemo，为了演示的清晰明了，我们将重新创建一个OutofbrowserMainPage页面，承载新的自定义窗口页面。
该页面，我们模拟上面Facebook的黑色配色方案，简单实现自定义窗口。由于我们使用的是第三种窗口模式，圆角无边框，这里我们需要为OOB应用创建自定义最大化，最小化和关闭控件，以及拖拽响应事件。
首先创建自定义最大化，最小化和关闭控件，
创建一个新的控件WindowControls，将最大化，最小化和关闭控件归类放入该页面，
1 < UserControl x:Class ="SilverlightOOBDemo.WindowControls"
2 xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d ="http://schemas.microsoft.com/Expression/blend/2008"
5 xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable ="d"
7 d:DesignHeight ="300" d:DesignWIDth ="400" WIDth ="80" Height ="24" >
8
9 < StackPanel x:name ="LayoutRoot" Background ="DarkGray" OrIEntation ="Horizontal" >
10 < button x:name ="btMinimize" Height ="20" WIDth ="20" margin ="3" >
11 < Image WIDth ="14" Height ="14" VerticalAlignment ="Center" HorizontalAlignment ="Center" Source ="/SilverlightOOBDemo;component/Images/min.png" Stretch ="None" />
12 </ button >
13 < button x:name ="btMaximize" Height ="20" WIDth ="20" margin ="3" >
14 < Image WIDth ="14" Height ="14" VerticalAlignment ="Center" HorizontalAlignment ="Center" Source ="/SilverlightOOBDemo;component/Images/max.png" Stretch ="None" />
15 </ button >
16 < button x:name ="btClose" Height ="20" WIDth ="20" margin ="3" >
17 < Image WIDth ="14" Height ="14" VerticalAlignment ="Center" HorizontalAlignment ="Center" Source ="/SilverlightOOBDemo;component/Images/close.png" Stretch ="None" />
18 </ button >
19 </ StackPanel >
20 </ UserControl >
21
然后创建简单的哦OutofbrowserMainPage页面样式，调用上面新创建的WindowControls控件。由于这里基本都是基础布局代码，这里不再赘述，如果对Silverlight项目布局不熟悉的，请看这套系列教程“Expression Blend实例中文教程系列文章汇总 ”。
1 < UserControl x:Class ="SilverlightOOBDemo.OutofbrowserMainPage"
2 xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d ="http://schemas.microsoft.com/Expression/blend/2008"
5 xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 xmlns:local ="clr-namespace:SilverlightOOBDemo"
7 mc:Ignorable ="d"
8 d:DesignHeight ="600" d:DesignWIDth ="900" >
9
10 < border CornerRadius ="3" borderThickness ="7" borderBrush ="Black" Background ="Gray" x:name ="lytRoot" >
11
12 < border CornerRadius ="4" borderBrush ="Black" borderThickness ="3" Background ="DarkGray" margin ="1" >
13 < GrID x:name ="LayoutRoot" >
14 < GrID.ColumnDeFinitions >
15 < ColumnDeFinition WIDth ="325*" />
16 < ColumnDeFinition WIDth ="57*" />
17 </ GrID.ColumnDeFinitions >
18 < GrID.RowDeFinitions >
19 < RowDeFinition Height ="24" />
20 < RowDeFinition Height ="*" />
21 </ GrID.RowDeFinitions >
22
23 < local:WindowControls HorizontalAlignment ="Right" VerticalAlignment ="top" GrID.Column ="1" />
24
25 < StackPanel OrIEntation ="Horizontal" IsHitTestVisible ="True" Background ="DarkGray" >
26 < TextBlock Text ="Silverlight OOB Demo" HorizontalAlignment ="left" VerticalAlignment ="top" margin ="10,0" FontSize ="15" Height ="24" WIDth ="195" />
27 </ StackPanel >
28
29 < GrID GrID.Row ="1" GrID.ColumnSpan ="2" >
30
31 < GrID.Background >
32 < linearGradIEntBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
33 < GradIEntStop color ="#FF000000" Offset ="0" />
34 < GradIEntStop color ="#FF585858" Offset ="1" />
35 </ linearGradIEntBrush >
36 </ GrID.Background >
37
38 </ GrID >
39 </ GrID >
40 </ border >
41 </ border >
42 </ UserControl >
43
这样一个自定义的OOB应用窗口已经创建完毕了。运行看看，这里会提示Security Warning，这是由于我们选择了权限信任设置，Silverlight客户端会自动提醒用户是否授权安装该应用。这里微软提供了XAP签名验证，可以优化Security Warning窗口，让用户更容易接受和安装，这将在后文介绍，这里我们直接点击安装即可。
这时会d出以下自定义OOB应用窗口：
这样基本的Layout算是完成，而我们会发现，创建的自定义最大化，最小化和关闭控件都不能使用而且，窗口无法进行拖动。下面我们来添加一些代码来完善该自定义窗口。
最大化，最小化和关闭的功能实现
首先完善自定义最大化和最小化以及关闭控件的功能，进入WindowControl页面，添加简单代码即可实现上述功能，
1 public partial class WindowControls : UserControl
2 {
3 bool maximized = false ;
4
5 public WindowControls()
6 {
7 InitializeComponent();
8 }
9
10 /// <summary>
11 /// 窗口最大化控制
12 /// 欢迎访问我的博客:
13 /// http://jv9.cnblogs.com
14 /// </summary>
15 /// <param name="sender"></param>
16 /// <param name="e"></param>
17 private voID btMaximize_Click( object sender, RoutedEventArgs e)
18 {
19 if ( ! maximized)
20 {
21 Application.Current.MainWindow.windowstate = windowstate.Maximized;
22 maximized = true ;
23 }
24 else
25 {
26 maximized = false ;
27 Application.Current.MainWindow.windowstate = windowstate.normal;
28 }
29 }
30
31 /// <summary>
32 /// 窗口关闭控制
33 /// </summary>
34 /// <param name="sender"></param>
35 /// <param name="e"></param>
36 private voID btClose_Click( object sender, RoutedEventArgs e)
37 {
38 Application.Current.MainWindow.Close();
39 }
40
41 /// <summary>
42 /// 窗口最小化控制
43 /// </summary>
44 /// <param name="sender"></param>
45 /// <param name="e"></param>
46 private voID btMinimize_Click( object sender, RoutedEventArgs e)
47 {
48 Application.Current.MainWindow.windowstate = windowstate.Minimized;
49 }
50
51 }
主窗口位置拖拽功能实现
而对于OOB应用主窗口的拖拽，则需要在OutofbrowserMainPage中添加简单代码即可实现，代码如下：
首先声明实例获取当前主窗口
1 Window OOBWindow = Application.Current.MainWindow;
然后在窗口头部灰色区域创建鼠标响应事件，
1 < StackPanel OrIEntation ="Horizontal" MouseleftbuttonDown ="StackPanel_MouseleftbuttonDown" IsHitTestVisible ="True" Background ="DarkGray" >
2 < TextBlock Text ="Silverlight OOB Demo" HorizontalAlignment ="left" VerticalAlignment ="top" margin ="10,0" FontSize ="15" Height ="24" WIDth ="195" />
3 </ StackPanel >
在StackPanel_MouseleftbuttonDown事件中添加简单的控制代码即可实现OOB应用主窗口位置移动拖拽。
1 private voID StackPanel_MouseleftbuttonDown( object sender, MousebuttonEventArgs e)
2 {
3 OOBWindow.DragMove();
4 }
主窗口尺寸修改实现
对于windows窗口而言，修改窗口尺寸大小属于基本功能，在Silverlight的Out of browser中，同样有相对应的API可以实现窗口尺寸修改，方法如下：
和上面相同，我们将创建一个独立的控件页面WindowResize，其中使用Path创建一个简单的拖拽图标
，1 < UserControl x:Class ="SilverlightOOBDemo.WindowResize"
2 xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d ="http://schemas.microsoft.com/Expression/blend/2008"
5 xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable ="d"
7 d:DesignHeight ="300" d:DesignWIDth ="400" MouseEnter ="UserControl_MouseEnter" MouseLeave ="UserControl_MouseLeave" >
8
9 < border x:name ="LayoutRoot" borderThickness ="0" HorizontalAlignment ="Right" VerticalAlignment ="Bottom" WIDth ="20" Height ="20" margin ="0,-2,-2" >
10 < Path x:name ="ptResize" margin ="6,6,0" Cursor ="SiZenWSE" MouseleftbuttonDown ="ptResize_MouseleftbuttonDown"
11 Data ="M 8,0 L10,2 L8,2 Z M 4,4 L6,6 L4,6 Z M 8,4 L10,6 L8,6 Z M0,8 L2,10 L0,10 Z M4,8 L6,10 L4,10 Z M8,8 L10,10 L8,10 Z" Fill ="Gray" />
12 </ border >
13 </ UserControl >
14
为了响应拖拽修改窗口尺寸，需要创建鼠标响应事件MouseleftbuttonDown，在事件中，调用Silverlight API，
1 public partial class WindowResize : UserControl
2 {
3 public WindowResize()
4 {
5 InitializeComponent();
6 }
7
8 /// <summary>
9 /// 修改主窗口尺寸
10 /// </summary>
11 /// <param name="sender"></param>
12 /// <param name="e"></param>
13 private voID ptResize_MouseleftbuttonDown( object sender, MousebuttonEventArgs e)
14 {
15 Application.Current.MainWindow.DragResize(WindowResizeEdge.Bottomright);
16 }
17
18 private voID UserControl_MouseEnter( object sender, MouseEventArgs e)
19 {
20 this .Cursor = Cursors.SiZenWSE;
21 }
22
23 private voID UserControl_MouseLeave( object sender, MouseEventArgs e)
24 {
25 this .Cursor = Cursors.Arrow;
26 }
27 }
这样该控件已经可以实现修改OOB应用主窗口尺寸大小，将该控件添加到OutofbrowserMainPage即可使用。
1 < local:WindowResize GrID.Row ="1" GrID.Column ="1" Height ="20" WIDth ="20" VerticalAlignment ="Bottom" HorizontalAlignment ="Right" ></ local:WindowResize >
通过上面步骤的介绍，我们已经创建了一个完整的简单的Silverlight OOB自定义窗口应用。以上所有功能都是Silverlight 4的API提供。如果你在项目中需要更多的自定义功能，你可以通过继承Silverlight基类创建更为灵活和强大的自定义OOB控件。在微软官方提供了一套开源的创建自定义Out of Browser应用项目，如果感兴趣，大家可以下载该项目参考学习。
今天就写到这了，如果您在阅读中发现问题或者有好的建议，请您给我留言，在这里提前感谢您的支持和帮助。
本篇源代码下载
欢迎大家加入"专注Silverlight" 技术讨论群：
32679955(六群) 23413513(五群) 32679922(四群) 100844510(三群) 37891947(二群) 22308706(一群) 总结以上是内存溢出为你收集整理的Silverlight实例教程 - Out of Browser的自定义应用全部内容，希望文章能够帮你解决Silverlight实例教程 - Out of Browser的自定义应用所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）