Button control

Không có framework về giao diện nào lại thiếu Button, vì thế dĩ nhiên WPF cũng sẽ có button. Và cũng như các framework control còn lại, nó rất uyển chuyển và cho phép bạn hoàn thành hầu hết mọi việc. Bây giờ chúng ta sẽ bắt đầu với một vài ví dụ cơ bản.

Button đơn giản

Giống như những WPF control khác, button có thể được hiển thị đơn giản bằng cách thêm 1 Button tag vào Window của bạn. Nếu bạn đặt text giữa các tag (hoặc control khác), nó sẽ coi đó là nội dung của Button:

<Button>Hello, world!</Button>

Quá đơn giản, đúng không? Dĩ nhiên, Button thực sự chưa thực hiện gì cả, nhưng nếu bạn trỏ tới nó bạn sẽ thấy hiệu ứng hover khá đẹp. Nhưng hãy cho Button làm gì đó, bằng cách đăng ký sự kiện Click cho nó (thông tin chi tiết về tiến trình này có thể được tìm thấy trong bài viết về đăng ký sự kiện trong XAML):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

Trong phần Code-behind, bạn sẽ cần 1 hàm tương ứng để xử lý sự kiện click:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Bây giờ bạn sẽ có 1 button rất cơ bản và khi bạn nhấp chuột vào nó, 1 thông báo sẽ được hiển thị!

Định dạng nội dung

Chuỗi ký tự đơn giản bên trong Content của Button có thể được chuyển thành 1 TextBlock control. Điều này có nghĩa bạn có thể điều khiển phần định dạng chữ. Bạn sẽ tìm thấy một vài thuộc tính của Button để làm việc này; bao gồm (nhưng không hạn chế) Foreground, Background, FontWeight v.v... Nói cách khác, để thay đổi định dạng của phần chữ bên trong 1 button thì khá là đơn giản:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Bằng cách thết lập những thuộc tính trực tiếp trên Button, dĩ nhiên bạn bị hạn chế áp dụng những định dạng cho tất cả các nội dung, nhưng nếu nó không đủ tốt, bạn nên tiếp tục đọc mục định dạng nâng cao.

Button có nội dung nâng cao

Chúng ta đã nói về điều này vài lần, nhưng một trong những điều tuyệt vời về WPF là khả năng thay thế những text đơn giản bên trong 1 control bằng những WPF control khác. Điều này có nghĩa bạn không bị hạn chế như button chỉ bao hàm text đơn giản, hoặc định dạng cùng 1 kiểu. Bạn có thể thêm một vài text control với những định dạng khác nhau. WPF Button chỉ hỗ trợ 1 control con trực tiếp, nhưng bạn có thể tạo 1 Panel chứa nhiều control bạn muốn. Bạn có thể sử dụng điều này để tạo những button với nhiều loại định dạng khách nhau:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Dĩ nhiên, bạn không bị giới hạn với chỉ mỗi text - bạn có thể đặt bất cứ thứ gì bạn muốn vào bên trong button của bạn, và nó sẽ dẫn dắt chúng ta tới một chủ đề mà tôi biết nhiều người sẽ hỏi. Button có hình ảnh!

Buttons có hình ảnh (ImageButton)

Trong nhiều UI framework, bạn sẽ tìm thấy Button thông thường và một hoặc nhiều biến thể của nó để cung cấp thêm các tính năng khác. Một trong những tính năng thường được sử dụng là ImageButton, là một Button có bao gồm hình ảnh mình họa phía trước nội dung. Nhưng trong WPF, bạn không cần phải sử dụng một control hỗ trợ khác để làm điều đó - như bạn đã thấy, chúng ta có thể đặt nhiều loại control bên trong một Button, vì thế bạn chỉ đơn giản thêm một control Image vào trong nó, như thế này:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

Thật sự tạo 1 button có hình ảnh thì rất là đơn giản với WPF, và bạn dĩ nhiên được tư do di chuyển chúng xung quanh, ví dụ: nếu bạn muốn hình ảnh nằm sau text thay vì nằm trước v.v...

Button Padding

Bạn có thể để ý rằng những button trong WPF framework không có bất kỳ padding mặc định nào. Đó có nghĩa là text nằm rất gần các đường viền, điều này có lẽ hơi lạ lẫm bởi vì hầu hết button được tìm thấy ở mọi nơi (web, những ứng dụng khác v.v...) đều có ít nhất vài padding ở các cạnh. Đừng lo lắng, bởi vì Button có thuộc tính Padding:

<Button Padding="5,2">Hello, World!</Button>

Đoạn code trên sẽ gắn padding 5 pixels vào 2 bên, và 2 pixels cho bên trên và bên dưới. Nhưng phải gắn padding cho tất cả các button của bạn có thể hơi mệt mỏi tại thời điểm nhất định, vì thế đây là gợi ý nhỏ: bạn có thể gắn padding toàn cục, trên toàn ứng dụng hoặc chỉ trên 1 Window nhất định bằng cách sử dụng 1 Style (chi tiết style sẽ bàn ở phần sau). Sau đây là 1 ví dụ chúng ta gắn nó vào Window, sử dụng thuộc tính Window.Resources:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

Những padding này bây giờ sẽ được áp dụng cho toàn bộ các button, nhưng dĩ nhiên bạn có thể override nó bằng cách định nghĩa thuộc tính Padding một cách riêng biệt trên 1 button. Sau đây là tất cả button của ví dụ dùng chung padding:

Tóm tắt

Như bạn đã thấy trong bài viết này, việc sử dụng button trong WPF thì rất đơn giản và bạn có thể tùy biến control không giới hạn.