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

                                
                                <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>

                        
                        <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">

                        
                        <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">

                                        

                                        <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>

                        
                        <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 ，如需转载请自行联系原作者

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

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关电子书