稳扎稳打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

/article/4589629.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¶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

[源码下载]