在上两篇教程中,讲述了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<UserControlx:Class="SilverlightOOBDemo.WindowControls"
2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6mc:Ignorable="d"
7d:DesignHeight="300"d:DesignWidth="400"Width="80"Height="24">
8
9<StackPanelx:Name="LayoutRoot"Background="DarkGray"Orientation="Horizontal">
10<Buttonx:Name="btMinimize"Height="20"Width="20"Margin="3">
11<ImageWidth="14"Height="14"VerticalAlignment="Center"HorizontalAlignment="Center"Source="/SilverlightOOBDemo;component/Images/min.png"Stretch="None"/>
12</Button>
13<Buttonx:Name="btMaximize"Height="20"Width="20"Margin="3">
14<ImageWidth="14"Height="14"VerticalAlignment="Center"HorizontalAlignment="Center"Source="/SilverlightOOBDemo;component/Images/max.png"Stretch="None"/>
15</Button>
16<Buttonx:Name="btClose"Height="20"Width="20"Margin="3">
17<ImageWidth="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<UserControlx:Class="SilverlightOOBDemo.OutofBrowserMainPage"
2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6xmlns:local="clr-namespace:SilverlightOOBDemo"
7mc:Ignorable="d"
8d:DesignHeight="600"d:DesignWidth="900">
9
10<BorderCornerRadius="3"BorderThickness="7"BorderBrush="Black"Background="Gray"x:Name="lytRoot">
11
12<BorderCornerRadius="4"BorderBrush="Black"BorderThickness="3"Background="DarkGray"Margin="1">
13<Gridx:Name="LayoutRoot">
14<Grid.ColumnDefinitions>
15<ColumnDefinitionWidth="325*"/>
16<ColumnDefinitionWidth="57*"/>
17</Grid.ColumnDefinitions>
18<Grid.RowDefinitions>
19<RowDefinitionHeight="24"/>
20<RowDefinitionHeight="*"/>
21</Grid.RowDefinitions>
22
23<local:WindowControlsHorizontalAlignment="Right"VerticalAlignment="Top"Grid.Column="1"/>
24
25<StackPanelOrientation="Horizontal"IsHitTestVisible="True"Background="DarkGray">
26<TextBlockText="SilverlightOOBDemo"HorizontalAlignment="Left"VerticalAlignment="Top"Margin="10,0,0,0"FontSize="15"Height="24"Width="195"/>
27</StackPanel>
28
29<GridGrid.Row="1"Grid.ColumnSpan="2">
30
31<Grid.Background>
32<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
33<GradientStopColor="#FF000000"Offset="0"/>
34<GradientStopColor="#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窗口,让用户更容易接受和安装,这将在后文介绍,这里我们直接点击安装即可。
这时会弹出以下自定义OOB应用窗口:
这样基本的Layout算是完成,而我们会发现,创建的自定义最大化,最小化和关闭控件都不能使用而且,窗口无法进行拖动。下面我们来添加一些代码来完善该自定义窗口。
最大化,最小化和关闭的功能实现
首先完善自定义最大化和最小化以及关闭控件的功能,进入WindowControl页面,添加简单代码即可实现上述功能,
1publicpartialclassWindowControls:UserControl
2{
3boolmaximized=false;
4
5publicWindowControls()
6{
7InitializeComponent();
8}
9
10///<summary>
11///窗口最大化控制
12///欢迎访问我的博客:
13///http://jv9.cnblogs.com
14///</summary>
15///<paramname="sender"></param>
16///<paramname="e"></param>
17privatevoidbtMaximize_Click(objectsender,RoutedEventArgse)
18{
19if(!maximized)
20{
21Application.Current.MainWindow.WindowState=WindowState.Maximized;
22maximized=true;
23}
24else
25{
26maximized=false;
27Application.Current.MainWindow.WindowState=WindowState.Normal;
28}
29}
30
31///<summary>
32///窗口关闭控制
33///</summary>
34///<paramname="sender"></param>
35///<paramname="e"></param>
36privatevoidbtClose_Click(objectsender,RoutedEventArgse)
37{
38Application.Current.MainWindow.Close();
39}
40
41///<summary>
42///窗口最小化控制
43///</summary>
44///<paramname="sender"></param>
45///<paramname="e"></param>
46privatevoidbtMinimize_Click(objectsender,RoutedEventArgse)
47{
48Application.Current.MainWindow.WindowState=WindowState.Minimized;
49}
50
51}
主窗口位置拖拽功能实现
而对于OOB应用主窗口的拖拽,则需要在OutofBrowserMainPage中添加简单代码即可实现,代码如下:
首先声明实例获取当前主窗口
1WindowOOBWindow=Application.Current.MainWindow;
然后在窗口头部灰色区域创建鼠标响应事件,
1<StackPanelOrientation="Horizontal"MouseLeftButtonDown="StackPanel_MouseLeftButtonDown"IsHitTestVisible="True"Background="DarkGray">
2<TextBlockText="SilverlightOOBDemo"HorizontalAlignment="Left"VerticalAlignment="Top"Margin="10,0,0,0"FontSize="15"Height="24"Width="195"/>
3</StackPanel>
在StackPanel_MouseLeftButtonDown事件中添加简单的控制代码即可实现OOB应用主窗口位置移动拖拽。
1privatevoidStackPanel_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
2{
3OOBWindow.DragMove();
4}
主窗口尺寸修改实现
对于Windows窗口而言,修改窗口尺寸大小属于基本功能,在Silverlight的Out of Browser中,同样有相对应的API可以实现窗口尺寸修改,方法如下:
和上面相同,我们将创建一个独立的控件页面WindowResize,其中使用Path创建一个简单的拖拽图标,
1<UserControlx:Class="SilverlightOOBDemo.WindowResize"
2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6mc:Ignorable="d"
7d:DesignHeight="300"d:DesignWidth="400"MouseEnter="UserControl_MouseEnter"MouseLeave="UserControl_MouseLeave">
8
9<Borderx:Name="LayoutRoot"BorderThickness="0"HorizontalAlignment="Right"VerticalAlignment="Bottom"Width="20"Height="20"Margin="0,0,-2,-2">
10<Pathx:Name="ptResize"Margin="6,6,0,0"Cursor="SizeNWSE"MouseLeftButtonDown="ptResize_MouseLeftButtonDown"
11Data="M8,0L10,0L10,2L8,2ZM4,4L6,4L6,6L4,6ZM8,4L10,4L10,6L8,6ZM0,8L2,8L2,10L0,10ZM4,8L6,8L6,10L4,10ZM8,8L10,8L10,10L8,10Z"Fill="Gray"/>
12</Border>
13</UserControl>
14
为了响应拖拽修改窗口尺寸,需要创建鼠标响应事件MouseLeftButtonDown,在事件中,调用Silverlight API,
1publicpartialclassWindowResize:UserControl
2{
3publicWindowResize()
4{
5InitializeComponent();
6}
7
8///<summary>
9///修改主窗口尺寸
10///</summary>
11///<paramname="sender"></param>
12///<paramname="e"></param>
13privatevoidptResize_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
14{
15Application.Current.MainWindow.DragResize(WindowResizeEdge.BottomRight);
16}
17
18privatevoidUserControl_MouseEnter(objectsender,MouseEventArgse)
19{
20this.Cursor=Cursors.SizeNWSE;
21}
22
23privatevoidUserControl_MouseLeave(objectsender,MouseEventArgse)
24{
25this.Cursor=Cursors.Arrow;
26}
27}
这样该控件已经可以实现修改OOB应用主窗口尺寸大小,将该控件添加到OutofBrowserMainPage即可使用。
1<local:WindowResizeGrid.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(一群)
分享到:
相关推荐
Klotski是一个困难的滑块游戏。这个游戏的第一个版本早在几年前,Windows 3.1的游戏包中就有了。这是原者的Silverlight 2 版本。
SilverLight学习笔记--Silverlight之数据校验的实现
silverlight-通过-WebService-连接数据库.doc
pro-silverlight-2-in-c-2008-windows-net.pdf
随着Silverlight 2 Beta 更新的发布,这个航线演示的例子展示了Silverlight的伟大魔力。可以看到想要在浏览器上带给用户丰富的体验,使用Silverlight编程是多么的容易实现。
Silverlight Surface 给人一种有趣和灵活的感觉,这正是Microsoft “Surface”产品所拥有的。这个例子提供了一些照片,对每张照片你都能十分轻易的移动、改变大小和旋转。
SourceCode-Silverlight-InstallExperience-SC.zip Silverlight 源码
SilverLight入门系列教程,本教程共计23课时。
模拟微软DirectX数学库,这个例子展示了在Silverlight中如何做一个完美的3D动画。
Silverlight 4 Problem - Desgin - Solution是由Wrox公司推出的Silverlight 4新书,该书使用10余中案例,详细介绍Silverlight 4项目设计,和在设计过程中会发生的问题,以及相关解决方案。该书是目前市面上不可多得...
Silverlight-Developer-x64文件版本5.1.30514.0
商业源码-编程源码-Silverlight Photo Browser源码.zip
在这个键盘控制的Silverlight大钢琴上展示你的音乐才华。键盘可以控制动画和声音。
Silverlight_json-rpc
用模拟时钟演示时间小时、分钟、秒钟的显示。
This book uses the popular Problem – Design – Solution strategy to demonstrate how to harness the power and abilities of Silverlight 4 to add value to the overall user experience of a Web site. ...
VS2010创建SILVERLIGHT项目时提示“你需要安装时新的SILVERLIGHT DEVELOPER运行时”。解决这个问题,可以先安装这个程序,然后搜索我的资源,安装第二个程序:Silverlight5_Developer--“需要安装最新的silverlight ...
C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手 C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手 C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手
Silverlight 完整例子带教学资料。
Sprawl是一个基础的鼠标点击游戏,您可以和计算机进行比赛,看谁能在地图上获得更多的地盘。