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

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

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

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

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

OK
[源码下载]