Expression Blend實例中文教程(6) - 項目控件和用戶交互控件快速入門

時間 2020-10-22

標籤 php 數組 ide 工具佈局測試網站 this spa .net 欄目 PHP 简体版

原文原文鏈接

前文咱們曾經描述過，微軟把Silverlight控件大體分爲三類：

第一類： Layout Controls（佈局控件)

第二類： Item Controls （項目控件)

第三類： User Interaction Controls（用戶交互控件)

咱們已經對第一類佈局控件在Blend中的應用進行了描述。本文將介紹Item Controls，也稱爲項目控件;和User Interaction Controls，也稱爲用戶交互控件.

Item Controls （項目控件)

在實際項目中，咱們常常會遇處處理數據集合或者數組的狀況，而處理數據集合最好的方法就是使用「Binding」綁定。正如您所知道的，在ASP.NET中，就已經應用了「Binding」綁定的概念，其優點在於節省了大量的開發時間，下降了開發難度。而在Silverlight中微軟增強了Binding功能，而且使用Item Controls（項目控件）來顯示和處理數據集合和數組類型數據。Silverlight提供了四種標準項目控件，分別是ListBox，ComboBox，TabControl和TreeView。下面，我將演示在Blend中如何使用這些控件。

根據上文描述，使用Item Controls前，首先須要綁定數據，而綁定數據須要有相關數據源，因此，咱們須要先定義數據源。本文依舊使用前文例程SilverlightBlendDemo，在Silverlight客戶端建立一個新的Usercontrol，ItemControlsDemo.xaml.

建立完畢後，主設計窗口將呈現ItemControlsDemo的UI設計界面，看右邊屬性欄，有三個Tab，其中包含「Data」，選中Data，

該窗口容許用戶在Blend中定義數據源，導入XML格式數據，定義外部數據源等功能。

首先，咱們選擇「Define New Sample Data.."，定義一個新的例程數據源，名字使用默認SampleDataSource。其中，Define in是指定該數據源的應用訪問，默認爲整個項目，固然，若是做爲測試，也能夠指定該數據源僅應用於當前打開文檔。這裏，咱們使用默認設置。

建立完成後，在右邊Data數據欄中，會出現SampleDataSource選項，而在該數據源下包含一個集合「Collection」，該集合默認有兩個屬性「Property1」和「Property2」。在項目應用中，能夠根據須要再添加新的屬性。

因爲咱們添加的是例程數據源，Blend已經在該數據源中添加了例程數據，根據需求，咱們能夠對例程數據進行修改。首先選擇Collection，而後點擊

編輯例程數據，

能夠看到，Blend生成的默認例程數據，這裏咱們能夠進行簡單修改，Property1默認類型String，Property2默認類型爲Boolean，這裏我想修改Property2爲String，

類型修改成String，還能夠修改該數據列的具體的格式：

爲了方便演示我修改兩個默認屬性名，分別爲，「網站」和「網址」

點擊OK，例程數據創建完成。

下面，看看在Blend中如何使用Item Controls裝載數據源。首先咱們測試ListBox：

在左邊工具欄，選擇ListBox控件，而後在ItemControlsDemo.Xaml設計頁面，畫一個ListBox。

而後從右邊Data欄中，選中Collection，拖拽到ListBox空白處，ListBox便可自動綁定例程數據。

Blend會自動生成XAML代碼，對例程數據進行綁定。

1 < UserControl.Resources >
2      < DataTemplate x:Key ="ItemTemplate" >
3          < StackPanel >
4            < TextBlock Text =" {Binding 網址} " />
5            < TextBlock Text =" {Binding 網站} " />
6          </ StackPanel >
7      </ DataTemplate >
8 </ UserControl.Resources >
9 < Grid x:Name ="LayoutRoot" DataContext =" {Binding Source={StaticResource SampleDataSource}} " >
10      < ListBox HorizontalAlignment ="Left" Margin ="48,45,0,43" Width ="249" ItemTemplate =" {StaticResource ItemTemplate} " ItemsSource =" {Binding Collection} " />
11 </ Grid >

這樣就輕鬆實現了ListBox綁定例程數據。

再試試ComboBox，從左邊工具框選擇ComboBox,在設計頁面畫一個ComboxBox，

仍舊按照以上方法，拖拽Collection到ComboBox上，便可看到數據已經進行綁定。

一樣，在Treeview中，也能夠正常綁定。

在數據綁定的時候，Data欄目，會有×××的框，表示「Data Binding」。

具體的定義，在Property屬性欄中查看：

以上則是使用Blend對Item Controls進行數據綁定的方法。因爲文本主要講述Blend應用，這裏，就再也不對Item Controls的屬性進行贅述，若是您有問題能夠留言給我。

User Interaction Controls（用戶交互控件)

Silverlight控件中，User Interaction Controls是面向用戶行爲交互，該控件和ASP.NET和WPF中的大部分交互控件相同，用法也基本類似。其選取和設計，和前文Item Controls相同，這裏就再也不贅述。須要注意的是，不一樣的交互控件，具備不一樣的交互事件，從而達到不一樣的交互效果。在後文，若是有須要，我將詳細解釋說明。