Silverlight實例教程 - Out of Browser的自定義應用

作者: jv9 來源: 博客園發布時間: 2010-08-11 21:13 閱讀: 1705 次推薦: 0 原文鏈接 [收藏]

　　Silverlight 實例教程索引

　　本節將講述如何創建自定義的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,0,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窗口，讓用戶更容易接受和安裝，這將在后文介紹，這里我們直接點擊安裝即可。

　　這時會彈出以下自定義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,0,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,0,-2,-2">
10         <Path x:Name="ptResize" Margin="6,6,0,0" Cursor="SizeNWSE" MouseLeftButtonDown="ptResize_MouseLeftButtonDown"
11                 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"/>
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應用項目，如果感興趣，大家可以下載該項目參考學習。

　　今天就寫到這了，如果您在閱讀中發現問題或者有好的建議，請您給我留言，在這里提前感謝您的支持和幫助。

　　本篇源代碼下載