天天看點

Silverlight 5 Beta新特性[3]多視窗支援

前面兩篇分别介紹Silverlight 5 Beta中XAML資料綁定支援的斷點調試和滑鼠的多重點選實作. 本篇将解析Silverlight 5 Beta版本中對OOB模式下多視窗的支援.

談到Silverlight 對多窗體的支援.先對比以前Silverlight 版本中基本上無法獨立實作一個新的操作窗體.如果在目前應用程式打開一個新的操作窗體.一般通過使用支援彈出的Element對象實作 或是在主提窗體中派生ChildWindows Control方式.Silverlight 5 Beta中澤支援你建立類似WPF自己的獨立新窗體.可以建立依賴宿主窗體形式的新窗體.

先來回顧一下Silverlight 4版本中OOB[Out-Of-Browser]提升權限模式下能做什麼:

Silverlight 4 OOB:

[1]修改Windows窗體樣式

[2]通路剪貼闆

[3]通路使用者檔案夾(沙箱)

[4]通過WebBrowser顯示Html内容

[5]Notification Window(toast)

[6]寬松的跨域通路機制

[7]調用com元件 

我們可以看到其中提到Silverlight 4 OOB模式下支援建立新的操作Notification Window 而不支援建立獨立Window.如下示範Silverlight 5 Beta版本中建立整個新窗體Windows 過程.建立一個Silverlight Application.Solution組織結構:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220544488.png"></a>

設定為OOB模式并授予通路權限:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220555696.png"></a>

授予OOB模式下通路權限:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220604850.png"></a>

建立一個View界面點選Button時建立一個新的Window操作窗體:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220612472.png"></a>

Button背景時間建立一個Windows 窗體:

private void CreateWindows_BT_Click(object sender, RoutedEventArgs e)     

  {     

      //Create and Open New Windows      

      if (Application.Current.IsRunningOutOfBrowser)     

      {     

          Window CreatenewWindows = new Window();     

          CreatenewWindows.Width = 400;     

          CreatenewWindows.Height = 400;     

          CreatenewWindows.Title = "This Window Come From Native Button!";    

          CreatenewWindows.Content = new OperatorWindows.FirstChildWindow_From();    

          CreatenewWindows.Visibility = Visibility.Visible;//Display Windows Property    

      }    

      else    

        MessageBox.Show("Please Run Application to OOB Model!","Tip",MessageBoxButton.OK);    

   } 

設定新窗體的内容為新的操作頁面FirstChildWindow_From.XAML定義随意的内容來辨別新窗體如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220618162.png"></a>

運作起程式并打開多個窗體:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220646227.png"></a>

You See!成功建立多個Window. 當程式運作起來時操作上發現 當主窗體MainPage沒有關閉時可以打開任意的多的新窗體. 關閉任意子窗體對對其他窗體不産生任何影響.但一旦關閉MainPage主窗體其他子窗體也随之關閉.可見Silverlight 5 Beta版本中針對OOB模式下子窗體建立時依賴在宿主窗體之上的.

在建立窗體通過設定Windows類的Visibility屬性設定窗體是否可見. 當時在官方Blog有人提出這樣API設計為何不修改成類似WinFrom中窗體的Show()方法來進行替代.其實這個屬性在建立Windows不是必須需要設定的.WPF中隊窗體顯示采用也是Show()方法實作.說道性能.當然你還可以在Windows窗體加載生命期可以設定WindowsState:

Silverlight OOB WindowsSTate:

WindowState.Minimized-[MIX]

WindowState.Maximized-[MAX]

WindowState.Normal-[Default]

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220705396.png"></a>

視窗分為兩個區域:非工作區和工作區.非工作區包含如下内容:

Silverlight OOB Windows非工作區:

[1]邊框

[2]标題欄

[3]圖示

[4]“最小化”、“最大化”和“還原”、“關閉”按鈕

[5]“系統”菜單,其中包含允許使用者最小化、最大化、還原、移動和關閉視窗以及調整視窗大小的菜單項 

非工作區則是Windows窗體所有共有的屬性.工作區的非工作區内部的區域,開發人員使用它來添加應用程式特定的内容,如菜單欄、工具欄和控件.工作區的所具有職責:

Silverlight OOB Windows工作區:

[1]顯示窗體

[2]配置窗體的大小,位置和外觀

[3]承載應用程式特定的内容

[4]管理應用程式的生命周期 

Silverlight OOB WindowStyle:

[1]SingleBorderWindow-視窗顯示标題欄和邊框

[2]None-視窗不顯示标題欄或邊框

[3]BorderlessRoundCornersWindow-視窗不顯示标題欄或邊框,且視窗角變圓 

其中SingleBorderWindows作為預設值.預設顯示标題和邊框.當設定WindowsStyle=SingleBorderWindow窗體效果如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220715410.png"></a>

但經過測試WindowsStyle在呈現窗體樣式并不穩定.另外使用BorderlessCornersWindow偶爾出現一次異常.有待進一步改善.ok,我們可以看到沒有非工作區的窗體樣式.當然在項目實際使用場景中通常需要需要額外自定義窗體樣式.Silverlight 5 Beta對窗體樣式支援自定義.

建立窗體的自定義樣式不僅僅需要設定Window窗體本身屬性,同樣需要提供可以控制窗體大小和移動的元素.幸運的是,Silverlight 5 Beta中提供一些輔助方法來幫助避免編寫所有拖/移動/調整窗體大小的代碼.如果實作自定義窗體的非工作區樣式.需要哪些額外的元素:

Silverlight Customer Chorme UI Element:

[1]Title Bar:用于點選或拖拽窗體Widnow.

[2]Close Button:顧名思義關閉窗體Window.

[3]Left Resize, Right Resize, Bottom Resize:窗體四周的邊框,使用者用來單擊并拖拽調整窗體大小

[4]Left Bottom Resize, Right Bottom Resize:窗體地步左右兩邊正方形.這允許使用者在兩個方向上調整一次視窗,并有适當的對角線配置設定給他們調整的遊标 

ok.搞清楚我們需要什麼我們自定義一下窗體的樣式 添加一個新的WindowsChrome_Form.xaml 定義如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220723566.png"></a>

WindowsChrom_From的UserControl基本包含所有窗體共有的特性.拖拽 窗體大小控制.背景控制方法:

public partial class WindowsChrome_Form : UserControl     

      public WindowsChrome_Form()     

          InitializeComponent();     

      }     

      public Window parentWindow;     

      public Window ParentWindow    

      {    

          get { return this.parentWindow; }    

          set    

          {    

              this.parentWindow = value;    

              RealseUpWindow();    

          }    

      private void CloseButton_Click(object sender, RoutedEventArgs e)    

          if (this.parentWindow != null)    

              this.parentWindow.Close();//Close Windows    

      public void RealseUpWindow()    

              //Register Windows Event Handler    

              RightResize.MouseLeftButtonDown += (s, se) =&gt;     

              {    

                  this.parentWindow.DragResize(WindowResizeEdge.Right);    

              };    

              LeftResize.MouseLeftButtonDown += (s, ea) =&gt;    

                  this.parentWindow.DragResize(WindowResizeEdge.Left);    

              BottomResize.MouseLeftButtonDown += (s, ea) =&gt;    

                  this.parentWindow.DragResize(WindowResizeEdge.Bottom);    

              LeftBottomResize.MouseLeftButtonDown += (s, ea) =&gt;    

                  this.parentWindow.DragResize(WindowResizeEdge.BottomLeft);    

             RightBottomResize.MouseLeftButtonDown += (s, ea) =&gt;    

                  this.parentWindow.DragResize(WindowResizeEdge.BottomRight);    

              TitleBar.MouseLeftButtonDown += (s, ea) =&gt;    

                  this.parentWindow.DragMove();    

  } 

定義好Windows窗體所具有外在窗體行為.我們在把自定義樣式嵌入到新建立窗體上 在MainPage定義一個方法用來添加自定義樣式綁定行為:

private FrameworkElement BuildWindowContents(Window window)     

        {     

            Grid grid = new Grid();     

            OperatorWindows.WindowsChrome_Form chrome = new OperatorWindows.WindowsChrome_Form();     

            chrome.ParentWindow = window;//Set Parent Windows     

            grid.Children.Add(new OperatorWindows.FirstChildWindow_From());     

            grid.Children.Add(chrome);     

            return grid;    

         } 

再來修改建立窗體設定Windows.Style=None[不顯示标題和邊框],同時設定建立窗體内容設定為自定義樣式:

       {     

           //Create and Open New Windows      

           if (Application.Current.IsRunningOutOfBrowser)     

           {     

               Window CreatenewWindows = new Window();     

               CreatenewWindows.Width = 500;     

               CreatenewWindows.Height = 500;     

               CreatenewWindows.Title = "This Window Come From Native Button!";    

               CreatenewWindows.Content = BuildWindowContents(CreatenewWindows);//Set Content    

               CreatenewWindows.Visibility = Visibility.Visible;//Display Windows Property    

               CreatenewWindows.WindowStyle = WindowStyle.None;     

           }    

           else    

             MessageBox.Show("Please Run Application to OOB Model!","Tip",MessageBoxButton.OK);    

       } 

在此運作看看使用者自定義的窗體樣式就新鮮出爐了:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220732241.png"></a>

You See!效果雖然有些粗糙則足以證明使用者自定義樣式可以實作的,作為Silverlight 5 Beta添加對窗體支援.最為關鍵的是同時在一個主窗體宿主上支援多個Windows窗體.

<a target="_blank" href="http://blog.51cto.com/attachment/201201/220740762.png"></a>

視窗可以有三種狀态:正常、最小化和最大化。 處于正常狀态的視窗是視窗的預設狀态。 處于此狀态的視窗如果是可調整大小的,則允許使用者使用大小調整搖桿或邊框來移動視窗或調整視窗大小.

不知熟悉WPF看到Silverlight 5 Beta這個多窗體特性支援是否覺得和WPF中窗體支援有些類似.确實是.了解Silverlight OOB模式下Windows窗體的組成:

<a href="http://down.51cto.com/data/2359667" target="_blank">附件:http://down.51cto.com/data/2359667</a>

本文轉自chenkaiunion 51CTO部落格,原文連結:http://blog.51cto.com/chenkai/763602

繼續閱讀