在上兩篇教程中，講述了Silverlight的Out of Browser理論知識和基礎實踐。本節將講述如何創建自定義的Out of Browser應用以及如何調試Silverlight的Out of Browser應用。 **Silverlight Out of Browser的自定義化** 從Silverlight 4開始,OOB應用支持信任權限設置和窗口自定義，最典型的自定義窗口應用是[Silverlight Facebook客戶端](http://www.google.ca/url?sa=t&source=web&cd=3&ved=0CB0QFjAC&url=http%3A%2F%2Fwww.silverlight.net%2Fcontent%2Fsamples%2Fapps%2Ffacebookclient%2F&ei=k387TLKkL8ftnQfU5M32Aw&usg=AFQjCNFWpZM0vn-dPbcUiaXbWvYzFxu-vA&sig2=K0zcUGBplGEL3Spe0559Dw)。從下圖可以看出，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，將最大化，最小化和關閉控件歸類放入該頁面，  ~~~ ?<UserControl?x:Class="SilverlightOOBDemo.WindowControls" ?????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:DesignHeight="300"?d:DesignWidth="400"??Width="80"?Height="24"> ?????<StackPanel?x:Name="LayoutRoot"?Background="DarkGray"?Orientation="Horizontal"> ?????????<Button?x:Name="btMinimize"?Height="20"?Width="20"?Margin="3"?> ?????????????<Image?Width="14"?Height="14"?VerticalAlignment="Center"?HorizontalAlignment="Center"?Source="/SilverlightOOBDemo;component/Images/min.png"?Stretch="None"/> ?????????</Button> ?????????<Button?x:Name="btMaximize"?Height="20"?Width="20"?Margin="3"?> ?????????????<Image?Width="14"?Height="14"?VerticalAlignment="Center"?HorizontalAlignment="Center"?Source="/SilverlightOOBDemo;component/Images/max.png"?Stretch="None"/> ?????????</Button> ?????????<Button?x:Name="btClose"?Height="20"?Width="20"?Margin="3"?> ?????????????<Image?Width="14"?Height="14"?VerticalAlignment="Center"?HorizontalAlignment="Center"?Source="/SilverlightOOBDemo;component/Images/close.png"?Stretch="None"/> ?????????</Button> ?????</StackPanel> ?</UserControl> ~~~ 然后創建簡單的哦OutofBrowserMainPage頁面樣式，調用上面新創建的WindowControls控件。由于這里基本都是基礎布局代碼，這里不再贅述，如果對Silverlight項目布局不熟悉的，請看這套系列教程“Expression Blend實例中文教程系列文章匯總 ”。 ~~~ ?<UserControl?x:Class="SilverlightOOBDemo.OutofBrowserMainPage" ?????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" ?????xmlns:local?="clr-namespace:SilverlightOOBDemo" ?????mc:Ignorable="d" ?????d:DesignHeight="600"?d:DesignWidth="900"> ?????<Border?CornerRadius="3"?BorderThickness="7"?BorderBrush="Black"??Background="Gray"?x:Name="lytRoot"> ?????????<Border?CornerRadius="4"?BorderBrush="Black"?BorderThickness="3"?Background="DarkGray"?Margin="1"> ?????????????<Grid?x:Name="LayoutRoot"> ?????????????????<Grid.ColumnDefinitions> ?????????????????????<ColumnDefinition?Width="325*"?/> ?????????????????????<ColumnDefinition?Width="57*"?/> ?????????????????</Grid.ColumnDefinitions> ?????????????????<Grid.RowDefinitions> ?????????????????????<RowDefinition?Height="24"?/> ?????????????????????<RowDefinition?Height="*"?/> ?????????????????</Grid.RowDefinitions> ?????????????????<local:WindowControls?HorizontalAlignment="Right"?VerticalAlignment="Top"?Grid.Column="1"?/> ?????????????????<StackPanel?Orientation="Horizontal"?IsHitTestVisible="True"?Background="DarkGray"?> ?????????????????????<TextBlock?Text="Silverlight?OOB?Demo"?HorizontalAlignment="Left"?VerticalAlignment="Top"?Margin="10,0,0,0"?FontSize="15"?Height="24"?Width="195"/> ?????????????????</StackPanel> ?????????????????<Grid?Grid.Row="1"?Grid.ColumnSpan="2"??> ?????????????????????<Grid.Background> ????????????????????????<LinearGradientBrush?EndPoint="0.5,1"?StartPoint="0.5,0"> ?????????????????????????????<GradientStop?Color="#FF000000"?Offset="0"/> ?????????????????????????????<GradientStop?Color="#FF585858"?Offset="1"/> ?????????????????????????</LinearGradientBrush> ?????????????????????</Grid.Background> ????????????????????? ?????????????????</Grid> ?????????????</Grid> ?????????</Border> ?????</Border> ?</UserControl> ~~~ 這樣一個自定義的OOB應用窗口已經創建完畢了。運行看看，這里會提示Security Warning，這是由于我們選擇了權限信任設置，Silverlight客戶端會自動提醒用戶是否授權安裝該應用。這里微軟提供了XAP簽名驗證，可以優化Security Warning窗口，讓用戶更容易接受和安裝，這將在后文介紹，這里我們直接點擊安裝即可。  這時會彈出以下自定義OOB應用窗口：  這樣基本的Layout算是完成，而我們會發現，創建的自定義最大化，最小化和關閉控件都不能使用而且，窗口無法進行拖動。下面我們來添加一些代碼來完善該自定義窗口。 **最大化，最小化和關閉的功能實現** 首先完善自定義最大化和最小化以及關閉控件的功能，進入WindowControl頁面，添加簡單代碼即可實現上述功能， ~~~ ?public?partial?class?WindowControls?:?UserControl ?????{ ?????????bool?maximized?=?false; ?????????public?WindowControls() ?????????{ ?????????????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 ?????????????{ ?????????????????maximized?=?false; ?????????????????Application.Current.MainWindow.WindowState?=?WindowState.Normal; ?????????????} ?????????} ?????????///?<summary> ?????????///?窗口關閉控制 ?????????///?</summary> ?????????///?<param?name="sender"></param> ?????????///?<param?name="e"></param> ?????????private?void?btClose_Click(object?sender,?RoutedEventArgs?e) ?????????{ ?????????????Application.Current.MainWindow.Close(); ?????????} ?????????///?<summary> ?????????///?窗口最小化控制 ?????????///?</summary> ?????????///?<param?name="sender"></param> ?????????///?<param?name="e"></param> ?????????private?void?btMinimize_Click(object?sender,?RoutedEventArgs?e) ?????????{ ?????????????Application.Current.MainWindow.WindowState?=?WindowState.Minimized; ?????????} ?????} ~~~ **主窗口位置拖拽功能實現** 而對于OOB應用主窗口的拖拽，則需要在OutofBrowserMainPage中添加簡單代碼即可實現，代碼如下： 首先聲明實例獲取當前主窗口 1?Window?OOBWindow?=?Application.Current.MainWindow; 然后在窗口頭部灰色區域創建鼠標響應事件，  ~~~ <StackPanel?Orientation="Horizontal"?MouseLeftButtonDown="StackPanel_MouseLeftButtonDown"?IsHitTestVisible="True"?Background="DarkGray"?> ????????????????????<TextBlock?Text="Silverlight?OOB?Demo"?HorizontalAlignment="Left"?VerticalAlignment="Top"?Margin="10,0,0,0"?FontSize="15"?Height="24"?Width="195"/> </StackPanel> ~~~ 在StackPanel_MouseLeftButtonDown事件中添加簡單的控制代碼即可實現OOB應用主窗口位置移動拖拽。 ~~~ ??private?void?StackPanel_MouseLeftButtonDown(object?sender,?MouseButtonEventArgs?e) ?????????{ ?????????????OOBWindow.DragMove(); ?????????} ~~~ **主窗口尺寸修改實現** 對于Windows窗口而言，修改窗口尺寸大小屬于基本功能，在Silverlight的Out of Browser中，同樣有相對應的API可以實現窗口尺寸修改，方法如下： 和上面相同，我們將創建一個獨立的控件頁面WindowResize，其中使用Path創建一個簡單的拖拽圖標 ， ~~~ ?<UserControl?x:Class="SilverlightOOBDemo.WindowResize" ?????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:DesignHeight="300"?d:DesignWidth="400"?MouseEnter="UserControl_MouseEnter"?MouseLeave="UserControl_MouseLeave"> ?????<Border?x:Name="LayoutRoot"?BorderThickness="0"?HorizontalAlignment="Right"?VerticalAlignment="Bottom"?Width="20"?Height="20"?Margin="0,0,-2,-2"> ?????????<Path?x:Name="ptResize"?Margin="6,6,0,0"?Cursor="SizeNWSE"?MouseLeftButtonDown="ptResize_MouseLeftButtonDown" ?????????????????Data="M?8,0?L10,0?L10,2?L8,2?Z?M?4,4?L6,4?L6,6?L4,6?Z?M?8,4?L10,4?L10,6?L8,6?Z?M0,8?L2,8?L2,10?L0,10?Z?M4,8?L6,8?L6,10?L4,10?Z?M8,8?L10,8?L10,10?L8,10?Z"Fill="Gray"/> ?????</Border> </UserControl> ~~~ 為了響應拖拽修改窗口尺寸，需要創建鼠標響應事件MouseLeftButtonDown，在事件中，調用Silverlight API， ~~~ ?public?partial?class?WindowResize?:?UserControl ?????{ ??????????public?WindowResize() ??????????{ ??????????????InitializeComponent(); ??????????} ????????///?<summary> ??????????///?修改主窗口尺寸 ?????????///?</summary> ?????????///?<param?name="sender"></param> ?????????///?<param?name="e"></param> ?????????private?void?ptResize_MouseLeftButtonDown(object?sender,?MouseButtonEventArgs?e) ?????????{ ?????????????Application.Current.MainWindow.DragResize(WindowResizeEdge.BottomRight); ?????????} ?????????private?void?UserControl_MouseEnter(object?sender,?MouseEventArgs?e) ?????????{ ?????????????this.Cursor?=?Cursors.SizeNWSE; ?????????} ?????????private?void?UserControl_MouseLeave(object?sender,?MouseEventArgs?e) ?????????{ ?????????????this.Cursor?=?Cursors.Arrow; ?????????} ?????} ~~~ 這樣該控件已經可以實現修改OOB應用主窗口尺寸大小，將該控件添加到OutofBrowserMainPage即可使用。 ~~~ <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應用項目](http://blogs.msdn.com/b/silverlight_sdk/archive/2010/05/24/creating-a-custom-out-of-browser-window-in-silverlight-4.aspx)，如果感興趣，大家可以下載該項目參考學習。 今天就寫到這了，如果您在閱讀中發現問題或者有好的建議，請您給我留言，在這里提前感謝您的支持和幫助。 [本篇源代碼下載](http://files.cnblogs.com/jv9/SilverlightOOBDemo2.rar) 歡迎大家加入"專注Silverlight" 技術討論群： 32679955(六群) 23413513(五群) 32679922(四群) 100844510(三群) 37891947(二群) 22308706(一群) ?