零基礎學通Silverlight4（3）：佈局和導航

3.1 佈局原則

Silverlight提供了一個靈活的系統用於在頁面上佈置界面元素、支持絕對定位和相對定位的佈局。佈局用於描述在屏幕上元素的過程，爲了使界面更具備吸引力、更實用、更靈活，必須花大量的時間來設計界面，Silverlight使用容器來安排佈局。每一個容器有它本身的佈局邏輯，Silverlight注重於建立更加靈活的佈局，開發人員可以建立與顯示分辨率和窗口無關的、在不一樣的顯示器上能夠很好地進行縮放的用戶界面，當窗口內容發生變化時能夠調整它們本身。

佈局由所使用的容器決定，在容器中添加其它元素，一個典型的佈局應當遵循如下的原則：

◎     容器能夠被嵌套。Grid面板是功能最強大的佈局控件，能夠包含其餘佈局容器，這些容器以分組來安排元素，如文本框、列表框、工具條、按扭等

◎     不使用屏幕座標指定元素的位置。各元素應當由它們的容器，根據它們的尺寸、順序以及其餘特定於具體佈局容器的信息進行安排。

◎     不該顯式設定元素的尺寸。元素應當能夠自動改變以適合它們的內容。

◎     容器與元素動態使用多餘的空間。若是空間容許，佈局容器儘量爲它所包含的元素設置更合適的尺寸。

   全部容器類都是從Panel抽象類中派生出來的，Panel類提供了少許的共同成員，以下二個經常使用公有屬性：

◎     Background屬性爲面板背景着色的畫刷。

◎     Children屬性是在面板存儲的元素集合。

幾種佈局面板中，最經常使用的是佈局控件是Canvas、StackPanel、Grid，Grid使用的是精確座標，StackPanel則是使用相對座標完成佈局定義的，在該面板包含的元素使用Margin等屬性，最複雜的是Grid，當Grid只有一行和一列的時候，它在功能上等同於一個Canvas，只是Canvas只能夠使用絕對座標而Grid能夠使用Margin等相對屬性，另外Grid還能夠仿StackPanel佈局方式，只是使用Grid模訪的過程不如直接使用StackPanel更方便。

 

範例 示範使用綜合佈局

實際中，每每將各種佈局綜合使用，他們能夠相互包容，以達到預期設計效果，圖 3.4-1 是 Ch6_Exam4_1 運行的結果 。

                             圖 3.4-1

◎以下所示， MainPage.xaml 的主要 XAML 標記摘錄以下 ， 其中已添加完整的批註

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="Ch6_Exam4_1.MainPage"

    Width="800" Height="450" Background="Red">

<Border Background="#FF958B8B">

    <Grid x:Name="LayoutRoot" Background="White" Margin="40,5,40,5">

 

<!—定義三行三列，中間一行和一列做爲邊框 à

           <Grid.ColumnDefinitions>

                  <ColumnDefinition Width="Auto"/>

                  <ColumnDefinition Width="8"/>

                  <ColumnDefinition/>

           </Grid.ColumnDefinitions>

           <Grid.RowDefinitions>

                  <RowDefinition Height="Auto" />

                  <RowDefinition Height="8"/>

                  <RowDefinition/>

           </Grid.RowDefinitions>

 

<!—標題放Border元素內，定義背景漸變效果 à

           <Border Grid.ColumnSpan="3" > 

             <Border.Background>

    <LinearGradientBrush EndPoint="0.502,2.158" StartPoint="0.472,-1.366">

                     <GradientStop Color="#FFECDDDD" Offset="0.404"/>

                     <GradientStop Color="#FF0E4EBD" Offset="1"/>                     

                    </LinearGradientBrush>

             </Border.Background>     

           <TextBlock   Text="2010汽車排行榜"  TextWrapping="Wrap" FontSize="26.667" FontWeight="Bold" HorizontalAlignment="Center" Width="252" Foreground="#FFD42525"/>

           </Border>

    <Border Background="#FF958B8B" Grid.Row="1" Grid.ColumnSpan="3" />

           <Border Background="#FF958B8B" Grid.Column="1" Grid.Row="1" />

           <Border Background="#FF958B8B" Grid.Column="1" Grid.Row="2" />   

           <Border Background="#FF958B8B" Grid.Row="2" > 

 

<!--使用樣式資源 -->

           <ListBox x:Name="lstBox"   Style="{StaticResource txtList}" SelectionChanged="SelectionChanged_Click" ScrollViewer.VerticalScrollBarVisibility="Visible">

                  <ListBoxItem  Content="高爾夫6"/>

                         <ListBoxItem Content="新明銳"/>

                         <ListBoxItem Content="速騰1.4T" />

                         <ListBoxItem Content="福克斯兩廂" />

                         <ListBoxItem Content="科魯茲" />                   

           </ListBox>

           </Border>

 

<!--呈現動態XAML頁面 -->

           <Border  Grid.Column="2" Grid.Row="2" Background="#FF958B8B" >

           <StackPanel x:Name="MyPanel">

           </StackPanel>

           </Border>             

    </Grid>

    </Border>

</UserControl>

◎     爲各車型 ListBoxItem 的 SelectionChanged 事件處理編寫以下程序代碼 ，在 Panel 中 動態加載 XAML 界面的實例。

void SelectionChanged_Click(object sender, SelectionChangedEventArgs e)

        {

                  ListBoxItem Car=((ListBox)sender).SelectedItem as ListBoxItem;

                  switch  (Car.Content.ToString())

                  {

                         case "高爾夫6":

                                this.MyPanel .Children .Clear ();

<!—加載高爾夫6界面，建立Golf.xaml的實例並將它添加到MyPanel中 à

                                this.MyPanel.Children.Add(new Golf ());

                                break;

                         case "新明銳":

                                this.MyPanel .Children .Clear ();

<!--加載新明銳界面，建立Mingrui.xaml的實例並將它添加到MyPanel中 -->

                                this.MyPanel.Children.Add(new Mingrui ());

                                break;    

                         case "速騰1.4T":

                                this.MyPanel .Children .Clear ();

<!--加載速騰1.4T界面，建立Shuteng.xaml的實例並將它添加到MyPanel中 -->

                                this.MyPanel.Children.Add(new Shuteng ());

                                break;

                         case "福克斯兩廂":

                                this.MyPanel .Children .Clear ();

<!--加載福克斯兩廂界面，建立Fukesi.xaml的實例並將它添加到MyPanel中 --〉

                             this.MyPanel.Children.Add(new Fukesi ());

                                break;           

                         case "科魯茲":

                                this.MyPanel .Children .Clear ();

 

<!--加載科魯茲界面，建立Kouluz.xaml的實例並將它添加到MyPanel中 -->

                          this.MyPanel.Children.Add(new Kouluz ());

                                break;

                  }

◎ 在 App.xaml 定義全局新式資源

    <Application.Resources>

<!--各車型介紹文字 -->

          <Style x:Key="txtBlock" TargetType="TextBlock">

                 <Setter Property="FontSize" Value="15" ></Setter>

                    <Setter Property="FontWeight" Value="Bold"></Setter>

                    <Setter Property="Foreground"  Value="Red"></Setter>

                    <Setter Property="TextWrapping" Value="Wrap"></Setter>

                    <Setter Property="FontFamily" Value="Arial"></Setter>

             </Style>     

 

<!--各車型名稱 -->

             <Style x:Key="txtList" TargetType="ListBox">

                 <Setter Property="FontSize" Value="18" ></Setter>

                    <Setter Property="Foreground"  Value="Blue"></Setter>

                    <Setter Property="FontFamily" Value="Arial"></Setter>

             </Style>     

    </Application.Resources>

◎ 定義各車型介紹的 xaml 界面 ， 下面爲福克斯的 Fukesi.xaml 文件 ， 其它車型文件類同。

    <Grid x:Name="LayoutRoot">

           <Image  Source="Img/fukes.jpg" Stretch="UniformToFill"/>

<!--介紹文字的TextBlock，使用樣式資源 -->

           <TextBlock Height="Auto" Margin="66,0,126,0" Text=" 09款福克斯比較07款在節油技術上做了大幅度的提高，包括最新調校的可變正時氣門技術、更低的風阻係數以及選擇輕量化的新一代輪轂。"  Style="{StaticResource txtBlock}" />

    </Grid>

</UserControl>

3.2 導航模板

在 Silverlight 應用程序中使用 Frame 和 Page 控件能夠實現應用程序導航。頁面控件表示內容的分立部分。框架用做頁面控件的容器，並使頁導航很是簡便。在任一時刻，框架只顯示一個頁面的內容。以編程方式或經過用戶操做導航到新頁時，框架中顯示的頁將會更改。

能夠將 Silverlight 應用程序的根視覺效果設計爲包含可導航內容和永久用戶界面 (UI) 組件（例如頁眉、頁腳和導航邊欄）的組合。使用 "Silverlight 導航應用程序 " 模板建立新項目時，該模板會生成一個包含永久 UI 組件的 XAML 文件併爲可導航內容生成一個框架。

Visual Studio 中的 Silverlight 導航應用程序模板：「 Silverlight Navigation Appication 」，默認的模版向咱們提供了一個 MainPage.xaml 頁面並給出了一個大體的主頁視圖。導航框架 XAML 代碼以下：

<Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">

<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">

<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"

   Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed">

                <navigation:Frame.UriMapper>

                  <uriMapper:UriMapper>

        <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>

                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

                  </uriMapper:UriMapper>

                </navigation:Frame.UriMapper>

            </navigation:Frame>

        </Border>

<Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}">

<Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}">

<StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}">

                    <ContentControl Style="{StaticResource LogoIcon}"/>

                    <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"

                               Text="Application Name"/>

                </StackPanel>

            </Border>

 <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">

<StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">

 

      <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"

                                     NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>

     <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

<HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}"

   NavigateUri="/About" TargetName="ContentFrame" Content="about"/>

                </StackPanel>

            </Border>

        </Grid>

    </Grid>

</UserControl>

◎     Frame 是一片能夠被導航的區域。能夠指定一個默認的視圖，任何導航均可以在那片區域被觸發,Frame 類提供用於頁導航的方法和屬性。將 Source 屬性設置爲要顯示的頁的 URI，或調用 Navigate 方法並將該頁的 URI 做爲參數來傳遞。

◎     UriMapper 元素了定義了導航終端，能夠用/Home終端來映射/View/Home.xaml終端。

◎     HyperlinkButton 一超鏈按鈕，其TargetName定義了目標框架區域。HyperlinkButton 控件位於框架外時，能夠經過將 NavigateUri 屬性設置爲映射到某一頁的 URI 並將 TargetName 屬性設置爲該框架的名稱來啓用對該框架內資源的導航。

◎     各個Page頁面，在Views目錄下，如默認的Home.xaml、About.xaml等。

 

更詳細內容及源代碼下載：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1