稳扎稳打Silverlight(34) - 3.0控件之Frame, Page, Label, DescriptionViewer, ValidationSummary

[索引页]
[源码下载]

稳扎稳打Silverlight(34) - 3.0控件之Frame, Page, Label, DescriptionViewer, ValidationSummary

作者： webabcd


介绍
Silverlight 3.0 控件一览：

• Frame - 与 Page 控件结合使用，从而实现导航功能（可以由此实现 Deep Linking）
• Page - 与 Frame 控件结合使用
• Label - 比 TextBlock 功能多一些，可以用来对错误的验证信息做提示
• DescriptionViewer - 鼠标经过时的提示信息 
• ValidationSummary - 汇总显示验证错误的信息 

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html


示例
1、Frame 控件的使用演示。其可以导航 Page，可以做url映射
Frame.xaml

< navigation:Page  x:Class ="Silverlight30.Control.Frame"  
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"   
           xmlns:uriMapper ="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
           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:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="Frame Page" >
     < Grid  x:Name ="LayoutRoot" >
        
         < StackPanel  HorizontalAlignment ="Left" >
             < Border  BorderBrush ="Gray"  BorderThickness ="3"  Padding ="10" >
            
                 <!--
                    Frame - 与 Page 控件结合使用，从而实现导航功能（可以由此实现 Deep Linking）
                    Source - 需要在 Frame 中显示的 Page 的地址
                    JournalOwnership - 导航日志的记录方式 [System.Windows.Navigation.JournalOwnership 枚举]
                        Automatic - 如果 Frame 是最顶级的 Frame，则在浏览器端记录导航日志，否则由此 Frame 自行记录
                        OwnsJournal - 自行记录
                        UsesParentJournal - 当 Frame 是最顶级的 Frame 时，由浏览器记录。如果是非顶级 Frame 的话，则会抛出异常
                    UriMapper - Uri 映射器。可以在其内编辑映射规则
                    UriMapping - 具体的映射规则（在 System.Windows.Navigation 命名空间下）
                        如本例就是把类似 Silverlight30TestPage.aspx#/Control/PageDemo 的地址映射到类似 Silverlight30TestPage.aspx#/Control/PageDemo.xaml 的地址
                 -->             
                 < navigation:Frame  x:Name ="frame"  Source ="/Control/PageDemo"  JournalOwnership ="OwnsJournal" >
                     < navigation:Frame.Content >
                         < TextBlock  Text ="我是 Frame 的 Content"   />
                     </ navigation:Frame.Content >
                     < navigation:Frame.UriMapper >
                         < uriMapper:UriMapper >
                             < uriMapper:UriMapping  Uri ="/{address}"  MappedUri ="/{address}.xaml" />
                         </ uriMapper:UriMapper >
                     </ navigation:Frame.UriMapper >
                 </ navigation:Frame >
             </ Border >
             < Button  x:Name ="navigateToPageDemo"  Content ="链接到 PageDemo"  Click ="navigateToPageDemo_Click"  Width ="200"   />
             < Button  x:Name ="navigateToPageDemo2"  Content ="链接到 PageDemo2"  Click ="navigateToPageDemo2_Click"  Width ="200"   />
         </ StackPanel >
        
     </ Grid >
</ navigation:Page >

Frame.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight30.Control
{
    public partial class Frame : Page
    {
        public Frame()
        {
            InitializeComponent();
        }

        private void navigateToPageDemo_Click(object sender, RoutedEventArgs e)
        {
            /**//*
             * Navigate() - 导航到指定的 Uri 地址
             * CanGoBack - 是否可后退
             * CanGoForward - 是否可前进
             * GoBack() - 后退
             * GoForward() - 前进
             */
            
            frame.Navigate(new Uri("/Control/PageDemo", UriKind.Relative));
        }

        private void navigateToPageDemo2_Click(object sender, RoutedEventArgs e)
        {
            frame.Navigate(new Uri("/Control/PageDemo2", UriKind.Relative));
        }
    }
}

2、Page 控件的使用演示。在 Page 间做导航，以及之间的参数传递
PageDemo.xaml

< navigation:Page  x:Class ="Silverlight30.Control.PageDemo"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="PageDemo Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >
             < TextBlock  Text ="我是 PageDemo"   />
             < Button  Content ="链接到 PageDemo2"  Click ="Button_Click"   />
             < TextBlock  x:Name ="lblMsg"   />
         </ StackPanel >
     </ Grid >
</ navigation:Page >

PageDemo.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight30.Control
{
    public partial class PageDemo : Page
    {
        public PageDemo()
        {
            InitializeComponent();
        }

        // 当用户导航至此控件时，会调用如下方法
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /**//*
             * NavigationService - 在 Page 控件中做导航的类
             * NavigationContext - 导航的上下文，其 QueryString 属性可用于获取导航参数
             * NavigationEventArgs.Uri - 当前导航地址
             */

            lblMsg.Text += "当前的导航地址：" + e.Uri.ToString() + "/n";

            if (this.NavigationContext.QueryString.ContainsKey("param1"))
                lblMsg.Text += "参数1：" + NavigationContext.QueryString["param1"] + "/n";
            if (this.NavigationContext.QueryString.ContainsKey("param2"))
                lblMsg.Text += "参数2：" + NavigationContext.QueryString["param2"];
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (((System.Windows.Controls.Frame)this.Parent).UriMapper == null)
                NavigationService.Navigate(new Uri("/Control/PageDemo2.xaml", UriKind.Relative));
            else
                NavigationService.Navigate(new Uri("/Control/PageDemo2", UriKind.Relative));
        }
    }
}

PageDemo2.xaml

< navigation:Page  x:Class ="Silverlight30.Control.PageDemo2"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="PageDemo2 Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >
             < TextBlock  Text ="我是 PageDemo2"   />
             < Button  Content ="链接到 PageDemo"  Click ="Button_Click"   />
         </ StackPanel >
     </ Grid >
</ navigation:Page >

PageDemo2.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight30.Control
{
    public partial class PageDemo2 : Page
    {
        public PageDemo2()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (((System.Windows.Controls.Frame)this.Parent).UriMapper == null)
                NavigationService.Navigate(new Uri("/Control/PageDemo.xaml?param1=param1&param2=param2", UriKind.Relative));
            else
                NavigationService.Navigate(new Uri("/Control/PageDemo?param1=param1&param2=param2", UriKind.Relative));
        }
    }
}

3、演示 Label 控件
Label.xaml

< navigation:Page  xmlns:dataInput ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"   x:Class ="Silverlight30.Control.Label"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="Label Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >
        
             <!-- Label 控件的演示 -->
             < dataInput:Label  Content ="我是 Label"  Foreground ="White" >
                 < dataInput:Label.Background >
                     < LinearGradientBrush  StartPoint ="0,0"  EndPoint ="1,1" >
                         < GradientStop  Color ="Red"  Offset ="0"   />
                         < GradientStop  Color ="Green"  Offset ="0.5"   />
                         < GradientStop  Color ="Blue"  Offset ="1"   />
                     </ LinearGradientBrush >
                 </ dataInput:Label.Background >
             </ dataInput:Label >

         </ StackPanel >
     </ Grid >
</ navigation:Page >

4、演示 DescriptionViewer 控件
DescriptionViewer.xaml

< navigation:Page  xmlns:dataInput ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"   x:Class ="Silverlight30.Control.DescriptionViewer"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="DescriptionViewer Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel  Margin ="10" >
        
             <!--
                Description - 鼠标经过时的提示信息
                GlyphTemplate - 显示提示信息的图标部分的外观
             -->
             < dataInput:DescriptionViewer  Description ="设置 DescriptionViewer 的 Description 属性"   />
            
         </ StackPanel >
     </ Grid >
</ navigation:Page >

5、ValidationSummary, Label, DescriptionViewer 的结合使用，实现数据验证的 UI 部分。验证的逻辑部分由 System.ComponentModel.DataAnnotations 实现
EmployeeModel.cs

/**/ /*
 * Silverlight 支持 System.ComponentModel.DataAnnotations 方式的数据验证。同样支持该数据验证的还有 Dynamic Data, asp.net mvc 2
 */

using  System;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Ink;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;

using  System.ComponentModel.DataAnnotations;

namespace  Silverlight30.Model
{
    public class EmployeeModel
    {
        private string _name;
        [Display(Name = "名字", Description = "必填字段")]
        [Required(ErrorMessage="名字必填")]
        public string Name
        {
            get { return _name; }
            set
            {
                /**//*
                 * Validator.ValidateProperty() - 用于决定指定的属性是否通过了验证（根据属性的 DataAnnotations 的 Attribute 做判断）。以及当其没有通过验证时，抛出异常
                 */
                Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Name" });
                _name = value;
            }
        }

        private double _salary;
        [Display(Name="薪水", Description="薪水介于 0 - 10000 之间")]
        [Range(0,10000)]
        public double Salary
        {
            get { return _salary; }
            set
            {
                Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Salary" });
                _salary = value;
            }
        }

        public DateTime DateOfBirty { get; set; }
    }
}

ValidationSummary.xaml

< navigation:Page  xmlns:dataInput ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"   x:Class ="Silverlight30.Control.ValidationSummary"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="ValidationSummary Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >

             < StackPanel  x:Name ="employee" >
                 < StackPanel  Orientation ="Horizontal" >

                     <!--
                        Label - 可以用来对错误的验证信息做提示。默认为将文本变为红色
                        DescriptionViewer - 其 Description 属性可以自动绑定到指定属性的 Display 特性上
                        Target - 关联的对象，以对相应的元数据（metadata）做提示
                        PropertyPath - 所关联的对象的指定的字段
                     -->

                     < dataInput:Label  Target =" {Binding ElementName=name} "   />
                     < TextBox  x:Name ="name"  Text =" {Binding Name, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True} "   />
                     < dataInput:DescriptionViewer  Target =" {Binding ElementName=employee} "  PropertyPath ="Name"   />
                    
                 </ StackPanel >
                 < StackPanel  Orientation ="Horizontal" >
                
                     < dataInput:Label  Target =" {Binding ElementName=salary} "   />
                     < TextBox  x:Name ="salary"  Text =" {Binding Salary, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True} "   />
                     < dataInput:DescriptionViewer  Target =" {Binding ElementName=employee} "  PropertyPath ="Salary"   />
                    
                 </ StackPanel >
             </ StackPanel >

             <!--
                ValidationSummary - 汇总显示验证错误的信息
                SummaryListBoxStyle - 显示汇总错误信息的 ListBox 控件的样式
             -->
             < dataInput:ValidationSummary  />

         </ StackPanel >
     </ Grid >
</ navigation:Page >

ValidationSummary.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

using  Silverlight30.Model;

namespace  Silverlight30.Control
{
    public partial class ValidationSummary : Page
    {
        public ValidationSummary()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ValidationSummary_Loaded);
        }

        void ValidationSummary_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = new EmployeeModel() { Name = "webabcd", Salary = 0 };
        }
    }
}

OK
[源码下载]