稳扎稳打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://webabcd.blog.51cto.com/1787395/342289

示例
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¶m2=param2", UriKind.Relative)); 
                         else 
                                NavigationService.Navigate( new Uri( "/Control/PageDemo?param1=param1¶m2=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
[源码下载]

 

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342748 ，如需转载请自行联系原作者