博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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", 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&param2=param2", UriKind.Relative));
            
else
                NavigationService.Navigate(
new Uri("/Control/PageDemo?param1=param1&param2=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(thisnullnull{ 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(thisnullnull{ MemberName = "Salary" });
                _salary 
= value;
            }

        }


        
public DateTime DateOfBirty getset; }
    }

}


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
[源码下载]