在上两篇教程中,讲述了Silverlight的Out of browser理论知识和基础实践。本节将讲述如何创建自定义的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”中可以选择不同的窗口模式,其中分别是:
2. No Border,无边框模式;
3. Borderless Round Corners, 圆角无边框模式;
对比以上三种方模式,第一种默认模式最为简单,因为使用的是Windows默认窗口,其中最大化和最小化以及关闭控件都是继承自Windows窗口,其中窗口的拖拉事件默认的也是使用Windows API进行控制; 而第二种和第三种窗口模式,允许设计开发人员创建个性的OOB窗口应用,但是同时也需要创建自定义的最大化,最小化以及关闭控件。下面看一个简单的实例演示,
这里我们使用第三种窗口模式,圆角无边框窗口作为演示,首先打开上一讲中的例程项目SilverlightOOBDemo,为了演示的清晰明了,我们将重新创建一个OutofbrowserMainPage页面,承载新的自定义窗口页面。
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 ="btMinimize" ="20" Width Margin ="3" 11 Image Width ="14" VerticalAlignment ="Center" HorizontalAlignment Source ="/SilverlightOOBDemo;component/Images/min.png" Stretch ="None" /> 12 </ Button 13 ="btMaximize" 14 ="/SilverlightOOBDemo;component/Images/max.png" 15 16 ="btClose" 17 ="/SilverlightOOBDemo;component/Images/close.png" 18 19 StackPanel 20 UserControl 21
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 ="btMinimize" ="20" Width Margin ="3" 11 Image Width ="14" VerticalAlignment ="Center" HorizontalAlignment Source ="/SilverlightOOBDemo;component/Images/min.png" Stretch ="None" /> 12 </ Button 13 ="btMaximize" 14 ="/SilverlightOOBDemo;component/Images/max.png" 15 16 ="btClose" 17 ="/SilverlightOOBDemo;component/Images/close.png" 18 19 StackPanel 20 UserControl 21
然后创建简单的哦OutofbrowserMainPage页面样式,调用上面新创建的WindowControls控件。由于这里基本都是基础布局代码,这里不再赘述,如果对Silverlight项目布局不熟悉的,请看这套系列教程“
Expression Blend实例中文教程系列文章汇总 ”。
="SilverlightOOBDemo.OutofbrowserMainPage"
xmlns:local
="clr-namespace:SilverlightOOBDemo"
8
="600"
="900"
Border
CornerRadius
BorderThickness
="7"
BorderBrush
="Black"
Background
="Gray"
x:Name
="lytRoot"
="4"
="1"
Grid
="LayoutRoot"
Grid.ColumnDeFinitions
ColumnDeFinition
="325*"
="57*"
Grid.RowDeFinitions
RowDeFinition
Height
="24"
="*"
21
22
23
local:WindowControls
HorizontalAlignment
="Right"
="Top"
Grid.Column
="1"
24
25
Orientation
="Horizontal"
IsHitTestVisible
="True"
26
TextBlock
Text
="Silverlight OOB Demo"
="Left"
="10,0"
FontSize
="15"
="195"
27
28
29
Grid.Row
Grid.ColumnSpan
="2"
30
31
Grid.Background
32
LinearGradientBrush
EndPoint
="0.5,1"
StartPoint
33
GradientStop
Color
="#FF000000"
Offset
="0"
34
="#FF585858"
35
LinearGradientBrush
36
37
38 Grid 39 40 Border 41 42 43
38 Grid 39 40 Border 41 42 43
这样一个自定义的OOB应用窗口已经创建完毕了。运行看看,这里会提示Security Warning,这是由于我们选择了权限信任设置,Silverlight客户端会自动提醒用户是否授权安装该应用。这里微软提供了XAP签名验证,可以优化Security Warning窗口,让用户更容易接受和安装,这将在后文介绍,这里我们直接点击安装即可。
这时会弹出以下自定义OOB应用窗口:
public
partial
class
WindowControls : UserControl
2 {
3 bool maximized = false ;
4 5 WindowControls()
6 {
7 InitializeComponent();
}
/// <summary> 窗口最大化控制
欢迎访问我的博客:
http://jv9.cnblogs.com </summary> <param name="sender"></param> <param name="e"></param>
private void btMaximize_Click( object sender, RoutedEventArgs e)
if ( ! maximized)
{
Application.Current.MainWindow.WindowState WindowState.Maximized;
maximized true }
else WindowState.normal;
窗口关闭控制
btClose_Click( Application.Current.MainWindow.Close();
窗口最小化控制
43 44 45 46 btMinimize_Click( 47 48 Application.Current.MainWindow.WindowState WindowState.Minimized;
49 50 51 }
2 {
3 bool maximized = false ;
4 5 WindowControls()
6 {
7 InitializeComponent();
}
/// <summary> 窗口最大化控制
欢迎访问我的博客:
http://jv9.cnblogs.com </summary> <param name="sender"></param> <param name="e"></param>
private void btMaximize_Click( object sender, RoutedEventArgs e)
if ( ! maximized)
{
Application.Current.MainWindow.WindowState WindowState.Maximized;
maximized true }
else WindowState.normal;
窗口关闭控制
btClose_Click( Application.Current.MainWindow.Close();
窗口最小化控制
43 44 45 46 btMinimize_Click( 47 48 Application.Current.MainWindow.WindowState WindowState.Minimized;
49 50 51 }