Thứ bảy, ngày 3 tháng 12 năm 2016

WPF – Cơ bản về XAML trong WPF 4 (Part 1 of 2)

Ngày đăng: 11/3/2012, 1:48:51AM | Lượt xem: 6,138
Hot!

XAML (eXtensible Application Markup Language) là một ngôn ngữ  đánh dấu với cú pháp tương tự XML dùng để tạo các đối tượng .Net trong các ứng dụng WPF, Silverlight và WF. Mặc dù đây là những mảng đề tài lớn nhưng nếu bạn đã biết đến XML, sẽ không khó để làm quen với XAML. Trong bài này tôi sẽ trình bày các đặc điểm và chức năng cơ bản của XAML để giúp bạn tiếp cận với WPF từ mức đơn giản nhất. Nền tảng mà tôi sử dụng là .Net framework 4 cùng với C# 2010.

 

XAML (eXtensible Application Markup Language) là một ngôn ngữ  đánh dấu với cú pháp tương tự XML dùng để tạo các đối tượng .Net trong các ứng dụng WPF, Silverlight và WF. Mặc dù đây là những mảng đề tài lớn nhưng nếu bạn đã biết đến XML, sẽ không khó để làm quen với XAML. Trong bài này tôi sẽ trình bày các đặc điểm và chức năng cơ bản của XAML để giúp bạn tiếp cận với WPF từ mức đơn giản nhất. Nền tảng mà tôi sử dụng là .Net framework 4 cùng với C# 2010.

 

Giới thiệu

XAML được dùng để tạo giao diện đồ họa cho ứng dụng thông qua các đối tượng của .Net hoặc do bạn tự định nghĩa. Do đó mỗi thẻ XAML phải ánh xạ và có tên tương ứng với một lớp.

Giống như các ngôn ngữ đánh dấu HTML, XML cho phép các thẻ lồng nhau. Điều này giúp bạn tạo ra các control đa dạng hơn, ví dụ như bạn có thể lồng một TextBox vào trong Button. Bên cạnh đó, các giá trị có kiểu dữ liệu cơ bản như chuỗi, số, màu,… mà bạn gán cho các thuộc tính của thẻ cũng phải được đặt trong cặp nháy kép.

Ví dụ với đoạn XAML đơn giản sau (MainWindow.xaml).

Listing 1:

 

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Hello XAML" Height="250" Width="250">
        <Button>
            <TextBox>I'm a TextBox</TextBox>
        </Button>
</Window>

 

Sẽ tạo cho ta một giao diện cửa sổ với tiêu đề là “Hello XAML” :

Thay vì sử dụng XAML, bạn có thể dùng mã lệnh code-behind để thay thế. Để minh họa, bạn hãy tạo một C# Empty Project, sau đó Add reference các thư viện .Net cần thiết:

-          PresentationCore

-          PresentationFramework

-          WindowsBase

-          System.Xaml

Tạo một class mới có nội dung sau:

Listing 2:

 

using System;
using System.Windows;
using System.Windows.Controls;

namespace Y2WpfExample
{
    class Program
    {
        [STAThread]
        static void Main()
        {
            Button button = new Button()
            {
                Content = new TextBox()
                {
                    Text = "I'm a TextBox",
                }
            };

            Window window = new Window
            {
                Width=250,
                Height=250,
                Title = "Hello XAML",
                Content = button
            };

            Application app = new Application();

            app.Run(window);
        }
    }
}

 

Ví dụ trên sử dụng cách khởi tạo nhanh đối tượng của C# 3. Nếu thấy khó hiểu, bạn có thể viết theo cách thông thường như:

Button button = new Button();

TextBox txt = new TextBox();

txt.Text = “I’m a TextBox”;

button.Content = txt;

Giao diện chương trình khi thực thi sẽ giống với ví dụ mà ta viết bằng XAML trước đó kèm theo một cửa sổ console (bạn có thể vào Project > Project Properties để chuyển Output type thành Windows Application).

Namespace trong XAML

Namespace mặc định

Các namespace trong XAML được khai báo qua thuộc tính (attribute) xmlns (XML name space). Thuộc tính xmlns này cho phép sử dụng nhiều lần trong tài liệu XAML, tuy nhiên mỗi thuộc tính này được phân biệt thông qua prefix mà bạn gán cho namespace mà nó khai báo.

Namespace chứa các lớp mà bạn cần dùng đến trong ứng dụng. Ngoài namespace mặc định dùng cho những lớp cơ bản của WPF, bạn có thể thêm bất kì namespace nào khác bên trong hoặc ngoài assembly. Hãy xem lại ví dụ trước:

 

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Hello XAML" Height="250" Width="250">
        <Button>
            <TextBox>I'm a TextBox</TextBox>
        </Button>
</Window>

 

Các thuộc tính xmlns khai báo hai namespace được sử dụng trong các ứng dụng WPF:

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

  • Namespace đầu tiên ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” chứa các lớp cơ bản được sử dụng trong WPF. Namespace được khai báo không kèm theo prefix và là namespace mặc định đối với tất cả các lớp mà bạn sử dụng trong tập tin XAML hiện tại.
  • Namespace thứ hai “http://schemas.microsoft.com/winfx/2006/xaml” chứa các chức năng của XAML để bổ sung thuộc tính cho các đối tượng và chỉ ra cách bộ phân tích XAMLsẽ xử lý. Namespace này được ánh xạ vào prefix ‘x’ như  một bí danh (alias), trong ví dụ bạn cũng có thể thấy cách prefix được sử dụng:

x:Class=”WpfApplication1.MainWindow”

Việc sử dụng bí danh này cũng tương tự như trong C#:

using Text = System.Text;

Những chức năng của namespace gán cho prefix x, bạn có thể tham khảo tại địa chỉ sau:

XAML Namespace (x:) Language Features

Bao gồm các phần để bạn có thể tham khảo nhanh:

x:Array Markup Extension

x:Class Directive

x:ClassModifier Directive

x:Code Intrinsic XAML Type

x:FieldModifier Directive

x:Key Directive

x:Member Directive

x:Members Directive

x:Name Directive

x:Null Markup Extension

x:Shared Attribute

x:Property Directive

x:Static Markup Extension

x:Subclass Directive

x:Type Markup Extension

x:TypeArguments Directive

x:Uid Directive

x:XData Intrinsic XAML Type

XamlName Grammar

{} Escape Sequence / Markup Extension

xml:lang Handling in XAML

xml:space Handling in XAML

Bạn có thể thắc mắc là việc đặt hai namespace trên giống theo dạng địa chỉ URL có tác dụng gì? Một điều chắc chắn rằng các lớp, chức năng trong hai namespace mà ta sử dụng đều nằm trong máy cục bộ. Namespace dạng URL này chỉ là một định danh và giúp gom tất cả các namespace cần thiết vào trong một namespace duy nhất.

Thêm namespace vào tài liệu XAML

Để thêm các namespace khác vào tài liệu XAML, bạn cũng sử dụng thuộc tính xmlns kèm theo tên một prefix tự đặt. Trình soạn thảo của Visual Studio tự động xổ ra các namespace có hiệu lực, bao gồm các namespace do bạn tạo ra.

Tên của các namespace này được khai báo bắt đầu bằng chuỗi prefix “clr-namespace”. Nếu namespace không nằm trong assembly hiện tại, bạn phải chỉ ra tên của assembly chứa nó trong tên của namespace. Ví dụ sau khai báo một namespace Microsoft.Win32 trong assembly mscorlib với alias là win32:

xmlns:win32=”clr-namespace:Microsoft.Win32;assembly=mscorlib”

Thuộc tính xmlns có thể được override bằng cách khai báo với alias trùng tên với alias của phần tử cha trong tài liệu XAML. Ra ngoài phạm vi này, prefix sẽ được trả lại để ánh xạ cho namespace ban đầu.

Phần tử gốc của tài liệu XAML

Khi bạn tạo ra các đối tượng top-level (phần tử gốc) trong một tài liệu XAML. Chẳng hạn như Application, Window, Page hoặc subclass của các element tự tạo khác. Bạn không thể sử dụng tên mới của subclass này MainWindow để khai báo và tạo thể hiện của nó bởi vì namespace cần thiết chưa được khai báo. Điều này là dĩ nhiên bởi vì namespace được khai báo bằng attribute bên trong đối tượng.

Giải quyết cho vấn đề này, XAML sử dụng thuộc tính Class trong namespace “http://schemas.microsoft.com/winfx/2006/xaml” (được gán cho x) để xác định lớp sẽ được tạo thể hiện thay cho lớp được dùng để khai báo.

<Window x:Class=”WpfApplication1.MainWindow”

</Window>

Như bạn thấy trong ví dụ tập tin MainWindow.xaml, mặc dù thẻ Window được sử dụng để khai báo là thành phần top-level, nhưng thực tế một thể hiện của lớp MainWindow sẽ được tạo ra. Tất nhiên lớp MainWindow phải được kế thừa từ Window. Điều này giống như việc bạn tạo một subclass của lớp Window trong code-behind.

Và như bạn có thể suy luận, thuộc tính x:Class này chỉ hỗ trợ cho phần tử top-level trong một tài liệu XAML.

Một ví dụ khác cho ra cùng kết quả như ví dụ ở Listing 1 và Listing 2. Ta tách riêng lớp Button ra để tạo một tài liệu XAML mới, lúc này lớp Button trở thành phần tử top-level. Bạn nhấn phải chuột vào project để add một User Control và đặt tên là Y2Button. Chỉnh sửa tập tin Y2Button.xaml như nội dung sau và sửa lại lớp thừa kế là Button trong tập tin code-behind Y2Button.xaml.cs:

 

Y2Button.xaml:

 

<Button x:Class="WpfApplication1.Y2Button"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="154" d:DesignWidth="174">
    <TextBox>I'm a TextBox</TextBox>
</Button>

 

MainWindow.xaml:

 

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:y2="clr-namespace:WpfApplication1"
    Title="Hello XAML" Height="250" Width="250">
    <y2:Y2Button />

</Window>

 

Property, Event và Attribute

Các property, event của những đối tượng có thể được xem như những attribute trong các thẻ của XAML.

-          Đối với các property có kiểu đơn giản, bạn có thể gán trực tiếp bằng cách dùng attribute với giá trị nằm trong cặp nháy kép. Như bạn thấy trong các đoạn mã ở các phần trên của đối tượng Window:

Title=”Hello XAML” Height=”250″ Width=”250″

-          Với các property phức tạp bạn cần phải sử dụng các thẻ để định nghĩa, các thẻ này phải nằm bên trong thẻ khai bảo property của đối tượng. Ví sau minh họa cách tô màu nền gradient cho Window bằng cách đặt thuộc tính Background của Window với một LinearGradientBrush. LinearGradientBrush lại chứa property GradientStops là một collection các điểm dừng để xác định màu.

 

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:y2="clr-namespace:WpfApplication1"
    Title="Hello XAML" Height="250" Width="250">
    <Window.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1, 1">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="0.2" Color="Azure" />
                    <GradientStop Offset="0.4" Color="LightCyan" />
                    <GradientStop Offset="0.7" Color="LightBlue" />
                    <GradientStop Offset="1" Color="Blue" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Background>
</Window>

 

Đoạn XAML trên tương tự với đoạn code-behind trong C# sau:

 

 // [...]
LinearGradientBrush linearBrush = new LinearGradientBrush();
linearBrush.GradientStops.Add(new GradientStop(Colors.White, 0));
linearBrush.GradientStops.Add(new GradientStop(Colors.Azure, 0.2));
linearBrush.GradientStops.Add(new GradientStop(Colors.LightCyan, 0.4));
linearBrush.GradientStops.Add(new GradientStop(Colors.LightBlue, 0.7));
linearBrush.GradientStops.Add(new GradientStop(Colors.Blue, 1));
this.Background = linearBrush;
// [...]

 

Và cho ra kết quả:

-          Với event, bạn đặt tương tự như các property đơn giản, gán giá trị cho tên event với tên của phương thức xử lý tương ứng.

<Button Click=”Button_Click”>Click Me!</Button>

 

 

 

>> Part 2

htttp://yinyangit.wordpress.com

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.