零基础学通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 标记摘录如下 ， 其中已添加完整的批注

    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元素内，定义背景渐变效果 à

            

            

   

                    

                                          

                   

                  

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

          

   

          

              

            

 

              Style="{StaticResource txtList}" SelectionChanged="SelectionChanged_Click" ScrollViewer.VerticalScrollBarVisibility="Visible">

                    Content="高尔夫6"/>

                         新明锐"/>

                         速腾1.4T" />

                         福克斯两厢" />

                         科鲁兹" />                   

          

          

 

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

          

          

                        

   

   

◎     为各车型 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 ();

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

                                break;    

                         case "速腾1.4T":

                                this.MyPanel .Children .Clear ();

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

                                break;

                         case "福克斯两厢":

                                this.MyPanel .Children .Clear ();

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

                                break;

                  }

◎ 在 App.xaml 定义全局新式资源

   

               

 

                  

   

◎ 定义各车型介绍的 xaml 界面 ， 下面为福克斯的 Fukesi.xaml 文件 ， 其它车型文件类同。

   

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

           款福克斯比较07款在节油技术上作了大幅度的提升，包括最新调校的可变正时气门技术、更低的风阻系数以及选择轻量化的新一代轮毂。"  Style="{StaticResource txtBlock}" />

   

3.2 导航模板

在 Silverlight 应用程序中使用 Frame 和 Page 控件可以实现应用程序导航。页面控件表示内容的分立部分。框架用作页面控件的容器，并使页导航非常简便。在任一时刻，框架只显示一个页面的内容。以编程方式或通过用户操作导航到新页时，框架中显示的页将会更改。

可以将 Silverlight 应用程序的根视觉效果设计为包含可导航内容和永久用户界面 (UI) 组件（例如页眉、页脚和导航边栏）的组合。使用 "Silverlight 导航应用程序 " 模板创建新项目时，该模板会生成一个包含永久 UI 组件的 XAML 文件并为可导航内容生成一个框架。

Visual Studio 中的 Silverlight 导航应用程序模板：“ Silverlight Navigation Appication ”，默认的模版向我们提供了一个 MainPage.xaml 页面并给出了一个大致的主页视图。导航框架 XAML 代码如下：

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

               

                 

       

                    

                 

               

           

       

                   

                   

                               Text="Application Name"/>

               

           

 

 

     

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

     

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

               

           

       

   

◎     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