Layout Management là gì ? Silverlight và WPF hỗ trợ một hệ thống sắp xếp các thành phần giao diện rất mềm dẻo cho phép các nhà phát triển và người thiết kế dễ dàng đặt vị trí cho các control bên trong một giao diện. Hệ thống sắp xếp giao diện này cho phép đặt các control tại một tọa độ cố định, cũng như một mô hình đặt vị trí động, cho phép các layout và control có thể được đặt kích thước và hướng khi thay đổi kích thước cửa sổ trình duyệt. Các nhà phát triển dùng Silverlight và WPF dùng layout panel để đặt vị trí và kích thước của các control chứa bên trong. Silverlight Beta1 có 3 trong số những layout thường dùng nhất trong WPF: Canvas StackPanel Grid Canvas Panel Canvas panel là loại layout panel cơ bản hỗ trợ việc đặt vị trí các control dùng tọa độ cụ thể. Bạn đặt vị trí các thành phần trong một Canvas dùng một đặc tính có trong XAML được gọi là “Attached Properties” (các thuộc tính đính kèm) cho phép bạn chỉ ra một vị trí tương đối của nó so với các thuộc tính Left, Top, Right hay Bottom của đối tượng Canvas chứa nó. Các thuộc tính gắn kèm này là một cách hữu dụng vì nó cho phép một panel cha mở rộng tập thuộc tính của một control chứa bên trong nó. Canvas, bằng cách định nghĩa một thuộc tính gắn kèm cho Top và Left, nó cho phép định nghĩa các thuộc tính Top và Left của một Button (hay bất kỳ đối tượng giao diện nào đã thêm và Canvas), mà không cần phải thêm các thuộc tính này hoặc chỉnh sửa lại lớp Button. Chúng ta có thể thêm hai nút bấm vào một Canvas, và đặt vị trí cho nó là 50 pixel từ cạnh trái, 50 pixel và 150 pixel từ cạnh trên dùng XAML giống như dưới đây (các thuộc tính Canvas.Left and Canvas.Top là các ví dụ về thuộc tính gắn kèm):

Và sau đây là kết quả hiển thị trên trình duyệt:

Canvas hữu dụng khi bạn không bao giờ thay đổi vị trí của các control bên trong, do vậy nó không thực sự mềm dẻo mỗi khi bạn thêm một control mới vào, hay mỗi khi bạn thay đổi vị trí hoặc kích thước, hoặc trong trường hợp bạn phải viết code để di chuyển các thành phần bên trong một Canvas. Một giải pháp tốt hơn trong những trường hợp như vậy là dùng một layout panel khác như StackPanel và Grid. StackPanel StackPanel là một dạng Panel đơn giản cho phép đặt các thành phần bên trong theo dòng hay cột, StackPanel hay được dùng khi bạn muốn sắp xếp chỉ trong một phần của toàn bộ trang. Lấy ví dụ, chúng ta có thể dùng StackPanel để đặt 3 nút bấm theo hàng dọc trên trang bằng cách dùng XAML như sau:

Khi chạy, StackPanel sẽ sắp xếp các nút bấm một cách tự động theo chiều dọc:

Hay chúng ta cũng có thể đặt thuộc tính “Orientation” của StackPanel thành “Horizontal” (chiều ngang) thay vì giá trị mặc nhiên là “Vertical”:

Điều này sẽ làm cho StackPanel tự động sắp xếp các nút bấm theo chiều ngang:

Grid Panel Grid là layout panel mềm dẻo nhất, nó cho phép sắp xếp các control theo dạng bảng bao gồm nhiều dòng và nhiều cột. Về tính năng, nó tương tự như thẻ Table trong HTML. Không như table trong HTML, bạn sẽ không đặt các control trực tiếp trong cột hay dòng, thay vào đó bạn sẽ chỉ định vị trí dòng hoặc cột bằng cách khai báo ngay bên trong control các thuộc tính và . Bạn có thể áp dụng cú pháp “Attached Property” của XAML lên trên các control bên trong Grid để chỉ ra nó sẽ phải nằm bên trong dòng hay cột nào. Lấy ví dụ, chúng ta có thể khai báo một Grid có 3 dòng và 3 cột, và sau đó chúng ta đặt 4 nút bấm vào bên trong dung XAML như sau:

Grid layout khi đó sẽ đặt vị trí các thành phần Button cho chúng ta giống như sau:

Ngoài khả năng cho phép đặt kích thước một cách tuyệt đối (ví dụ như Height=”60″), RowDefinition and ColumnDefinition còn hỗ trợ chế độ đặt kích thước động (Height=”Auto”), điều này cho phép đặt lại kích thước của Grid hay Row dựa trên kích thước của nội dung nó chứa bên trong (bạn có thể đặt kích thước tối đa hoặc tối thiểu), đây là một tính năng vô cùng hữu ích. Row và ColumnDefinitions của Grid cũng hỗ trợ một tính năng được gọi là “Proportional Sizing” - nó cho phép bạn đặt kích thước của một Row hay một Column theo một tỷ lệ tương ứng so với một cái khác (ví dụ như bạn có thể đặt dòng thứ hai luôn cao gấp đôi dòng thứ nhất). Bạn sẽ thấy rằng Grid cung cấp rất nhiều sức mạnh và sự mềm dẻo - và có lẽ nó cũng là layout panel mà bạn sẽ sử dụng nhiều nhất. Dùng các layout panel để sắp xếp các thành phần trên trang Digg của chúng ta Chúng ta nhớ lại rằng mục đích khi xây dựng trang ví dụ Digg là tạo một trang trông giống như sau:

Để tạo dạng sắp xếp như vậy, bạn sẽ phải thêm một đối tượng Grid mà nó có 2 RowDefinitions bên trong. Dòng đầu tiên có chiều cao 40 pixel, dòng thứ hai chiếm toàn bộ phần còn lại (Height=”*”):

Mẹo: Bạn để ý rằng ở trên chúng ta đã đặt thuộc tính “ShowGridLines” của Grid là “True”. Diều này sẽ cho phép chúng ta dễ dàng thấy được các đường biên của dòng hoặc cột bên trong Grid khi chạy ( Thực ra không phải là khi chạy, mà chỉ là khi thiết kế thôi :D)

Chúng ta sẽ nhúng một Grid khác như là một control con vào bên trong dòng đâu tiên của Grid gốc, và dùng nó để sắp xếp các control bên trong dòng đầu tiên (header). Chúng ta sẽ tạo ra 3 cột bên trong, một cho tiêu đề, một cho ô “Search” và một cho nút “Search”:

(Ghi chú: ở trên, cụm Grid.ColumnDefinitions được sử dụng để định nghỉa 3 cột (Column) cho hàng đầu tiên, vì cụm đó là con của grid.row="0")

Một khi đã làm xong, chúng ta sẽ có được dạng sắp trang của trang Digg như sau:

Ghi chú: Thay vì dùng các Grid lồng nhau, chúng ta cũng có thể chỉ dùng một Grid với 3 cột 2 dòng và dùng tính năng ColSpan/RowSpan của Grid để ghép nội dung của nhiều cột làm một (giống table trong HTML). Tôi chọn cách dùng Grid lồng nhau vì tôi nghĩ nó sẽ đơn giản hơn Giờ chúng ta đã sắp xếp xong, vấn đề còn lại là thêm các control vào đúng vị trí của nó. Với dòng header, chúng ta sẽ dùng control <WatermarkedTextBox> (với thuộc tính CornerRadius bằng 10 để có các góc bo tròn) và thêm một số văn bản bên trong để hiển thị tiêu đề. Chúng ta cũng sẽ dùng control trong cột thứ 2 để tạo ô tìm kiếm. Và đặt một <Button> để tạo nút “Search” trong cột thứ 3. Chúng ta cũng sẽ đặt một số văn bản trong dòng thứ 2 để sau này hiển thị kết quả tìm kiếm. Chi chú: Ở sau đây tôi sẽ nhúng các thông tin định dạng (FontSize, Colors, Margins, …) trực tiếp lên trên các điều khiển. Trong những bài sau tôi sẽ cho các bạn thấy cách dùng Styles để tách các thuộc tính trên vào một file riêng (như CSS) và cho phép dùng lại các thuộc tính này trong toàn bộ ứng dụng. Lưu ý: Vào thời điểm này, control WatermarkedTextBox đã bị loại bỏ trong Silverlight 2 Beta 2, và sẽ đc gộp vào làm 1 thuộc tính của textbox trong bản update tới => tui dùng 1 Textbox để thay thế. Đây là đoạn code thay thế cho đoạn watermarkedtextbox(bạn nhớ bỏ hẳn cả dòng đó đi nhé !) <Textbox Grid.Column="1" FontSize="14" Text="Topic..." />

Ghi chú: Chỗ Textblock thứ 2 đc đánh dấu, cũng có thể viết theo cách khác: <TextBlock Text="Todo: Stories will display here..." Grid.Row="1" Margin="10" ForeGround="White"/>

Và chương trình của chúng ta nếu chạy sẽ cho ra giao diện giống như sau:

Tự động thay đổi kích thước của ứng dụng Một điều các bạn có thể để ý thấy là trong đoạn XAML trên, control cấp cao nhất đã được đặt kích thước cố định:

Nếu đặt theo cách này thì chương trình của chúng ta sẽ luôn có kích thước mà chúng ta đã đặt, khi đó nếu bạn mở rộng sửa sổ trình duyệt thì nó sẽ trở nên giống như sau:

Trong khi việc đặt kích thước của một ứng dụng nhúng là cố định có thể hữu ích trong một số trường hợp, nhưng trong ứng dụng Digg của chúng ta, điều thực sự mong muốn lại là nó phải chiếm của sổ trình duyệt và thay đổi kích thước theo trình duyệt - giống như một trang HTML vậy. Một tin tốt lành là làm điều này vô cùng đơn giản. Bạn chỉ cần xóa đi hai thuộc tính Width và Height của control cấp cao nhất:

Chương trình Silverlight của chúng ta nay sẽ tự động mở rộng (hoặc thu lại) để chiếm đầy phần trang web mà nó được nhúng bên trong. Vì file SilverlightTestPage.html mà chúng ta đang dùng để test chứa control Silverlight bên trong một thẻ
với chiều rộng và chiều cao là 100%, do vậy chương trình Digg của chúng ta sẽ tự động chiếm đầy cửa sổ trình duyệt:

Bạn để ý sẽ thấy cách mà nội dung bên trong phần header của ứng dụng tự động thay đổi kích thước dựa trên chiều rộng của trình duyệt:

Khi thu hẹp lại cửa sổ trình duyệt, ô văn bản và nút tìm kiếm sẽ vẫn giữ nguyên kích thước, đó là vì các cột chứa nó trong Grid có kích thước cố định. Control chứa tiêu đề “Digg Search” sẽ tự động thay đổi là ví cột chứa nó đã được đặt Width=”*”. Chúng ta đã chẳng phải viết một dòng lệnh nào để thực hiện việc sắp xếp lại các thành phần, Grid và hệ quản lý layout sẽ làm việc đó cho chúng ta. Bước tiếp theo Giờ đây chúng ta đã có một cấu trúng trang cơ bản cho chương trình Digg, và cũng đã có một dòng header. Bước tiếp theo sẽ là thêm khả năng tìm kiếm vào chương trình - và làm cho nó có thể lấy được dữ liệu thực sự từ trang Digg.com mỗi khi người dùng thực hiện việc tìm kiếm trên một chủ đề nào đó. Để làm điều này, xin mời bạn đọc phần kế tiếp: Kết nối mạng để lấy dữ liệu vào một DataGrid

• http://www.ssblueprints.net/sharepoint
• http://www.codeplex.com/SL4SP 

• Comprou o Office 2007 e não sabe por onde começar? Então clique aqui, conheça o Guia de Introdução e veja como tudo ficou mais fácil.

• Onde estão os menus? Confira aqui o Guia Interativo de Referência e veja na prática o que mudou no Office 2007 em relação ao Office 2003 em um comparativo entre Word, Excel e PowerPoint.

  

• Informações na velocidade de um clique. Domine o Office 2007 com 41 treinamentos gratuitos sobre os produtos do novo pacote de aplicativos. Clique aqui e aprimore já os seus conhecimentos.

• Precisa fazer uma apresentação em PowerPoint para impressionar sua equipe? Então baixe agora vários modelos de apresentações e dê aquele visual caprichado aos seus trabalhos.

• Veja o Office 2007 em ação. Aprenda mais sobre seus aplicativos favoritos assistindo a demonstrações em vídeo dos produtos. Clique aqui e confira.

• Procurando atualizações, conversores ou suplementos para seus aplicativos do Office 2007? Então visite nossa página de downloads e baixe tudo o que você precisa.

• Recebeu um arquivo do Office 2007 (.docx, .xlsx, .pptx, etc.), mas não consegue abrir porque você tem uma versão anterior do software? Então baixe agora o Pacote de Compatibilidade para visualizar e salvar arquivos do Office 2007 no Office 2003 e Office XP.

"Software-plus-Services Blueprints are a series of source code and guidance packages designed to provide an architectural bridge between vision and implementation by making it easier to build Software-plus-Services applications. "

Planing to install and try out the silverlighth blueprint today. I will post my comments soon.

Indeed, Sun will have its work cut out for it, taking on giants such as Adobe and Microsoft in the rich Internet development space. If this competition can be likened to a race between Olympic runners, it might be broadcast like this:

"In Lane 1, we have Adobe with its Flash and attendant Flex technologies, downloaded millions of times and popular on high-profile sites like YouTube."

"In Lane 2, it's AJAX (Asynchronous JavaScript and XML), the popular RIA technique used in countless Web sites."

"In Lane 3, its up-and-coming newcomer Silverlight, backed by software giant Microsoft and now being leveraged by NBC's prominent Olympics Web site."

"And in Lane 4, we have Sun's JavaFX used by Web properties such as - well, it's still in development."

Source

iCrossing, ( http://news.icrossing.com) a global digital marketing company, today announced the company's collaboration with Toyota to redesign ToyotaFishing.com using Microsoft Silverlight. The site, which went live earlier this year, demonstrates how, with a proper strategy, Silverlight can be used as a viable tool for search friendly creative development.
Silverlight is a cross-browser, cross-platform plug-in that supports media experiences and rich interactive applications for the Web. ToyotaFishing.com was developed using Silverlight 1.0, and gives the formerly flash-based site greater natural search visibility while maintaining rich graphics and media content.

The site was designed, developed, and launched in Silverlight in just eight weeks. It delivers a rich media experience to the end user while allowing search engines to properly index the content on the site. Successful integration with the existing Interwoven content management system reduced the time required to update the site by more than 75 percent.

Source

The local telco is the title sponsor of the auto-racing event, to be held here from Sep. 26 to 28 this year, and hopes the site's photos and videos will entice users to watch the TV program showcasing the ladies. Dubbed the Grid Girls, the women will accompany the cars during the event.

The site, which launches a week before the show airs, puts 202 videos together on a Microsoft Silverlight platform to create a user experience SingTel hopes will be "immersive and engaging".

Peter Heng, director of corporate communications at SingTel, said in an interview with ZDNet Asia: "One of the issues with the online experience is realism... The quality of the site will help to bridge that."

Source

The company is working with games developers, animators and cinematographers to achieve natural motion control of avatars that will be displayed on-screen in each room of the conference.

The avatars will be triggered by a passive RFID tag placed behind delegates’ lanyards.

As people enter, they will be able to see their avatar move across the screen and disappear into the distance of the theatre.

The animation will enable users to see the ‘cause-and-effect’ of their actions – as well as provide a few surprises, according to Microsoft Australia user experience (UX) evangelist, Shane Morris.

“Animators and game designers have a good idea of natural motion, but for UX designers this is a real challenge,” Morris told iTnews.

Source

Source