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

2016-08-20 10:55:07来源:http://webabcd.blog.51cto.com/1787395/342748作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(34) - 3.0控件之Frame, Page, Label, DescriptionViewer, ValidationSummary作者:webabcd介绍Silverlight 3.0控件一览:

Frame-与 Page 控件结合使用,从而实现导航功能(可以由此实现 Deep Linking)
Page -与 Frame 控件结合使用
Label-比 TextBlock 功能多一些,可以用来对错误的验证信息做提示
DescriptionViewer -鼠标经过时的提示信息
ValidationSummary -汇总显示验证错误的信息
在线DEMOhttp://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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台