穩紮穩打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">

<!--

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>

</navigation:Frame.Content>

<navigation:Frame.UriMapper>

<uriMapper:UriMapper>

<uriMapper:UriMapping Uri="/{address}" MappedUri="/{address}.xaml"/>

</uriMapper:UriMapper>

</navigation:Frame.UriMapper>

</navigation:Frame>

</Border>

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

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

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

<dataInput:Label Content="我是 Label" Foreground="White">

<dataInput:Label.Background>

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

<!--

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

<!--

Label - 可以用來對錯誤的驗證信息做提示。默認爲將文本變爲紅色

DescriptionViewer - 其 Description 屬性可以自動綁定到指定屬性的 Display 特性上

Target - 關聯的對象，以對相應的元數據（metadata）做提示

PropertyPath - 所關聯的對象的指定的字段

-->

<dataInput:Label Target="{Binding ElementName=name}" />

<dataInput:DescriptionViewer Target="{Binding ElementName=employee}" PropertyPath="Name" />

</StackPanel>

<dataInput:Label Target="{Binding ElementName=salary}" />

<dataInput:DescriptionViewer Target="{Binding ElementName=employee}" PropertyPath="Salary" />

</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
[源碼下載]

chgsh_2008

發佈了6 篇原創文章 · 獲贊 1 · 訪問量 2萬+

私信關注

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

穩紮穩打Silverlight(24) - 2.0通信之Socket, 開發一個多人聊天室

穩紮穩打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定義字體, 爲程序傳遞參數, 自定義鼠標右鍵, 程序常用配置參數

遊戲人生Silverlight(5) - 星際競技場[Silverlight 2.0(c#, Farseer Physics Engine)]

穩紮穩打Silverlight(26) - 2.0線程之Lock, Interlocked, EventWaitHandle, Monitor, ThreadStaticAttribute

Silverlight與HTML雙向交互

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結