AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Silverlight作者：编程之家
  [索引页]
[源码下载]

稳扎稳打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",255); orphans:2; widows:2">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",255); orphans:2; widows:2">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,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, 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, 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
[源码下载]

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native