Khái niệm Style trong WPF

Style

 

Khi xây dựng 1 giao diện đồ họa, ta thường thiết lập các Control khác nhau có cùng 1 format. Ví dụ: đặt tất cả Label có cùng cỡ chữ, font chữ, màu chữ… Điều này bên lập trình ứng dụng web có sự giúp đỡ của CSS, nhưng WinForm thì lại không có. WPF giúp giải quyết bằng việc đưa ra khái niệm ‘Style’

‘Style’ tương tự như CSS trong ứng dụng web. Nó cho phép lưu trữ 1 danh sách các thuộc tính vào 1 nơi, thường là Resource hoặc file xaml tài nguyên riêng.  Bài viết này sẽ giới thiệu các bạn về những thành phần cơ bản của Style. (Từ bài này trở đi, mình sẽ làm việc trên môi trường VS 2010)

 

1. BaseOn

 

Tương tự tính kế thừa. Mỗi Style chỉ cho phép 1 giá trị BaseOn. Ví dụ:

 

<Style x:Key=”baseStyle”>

       ….

</Style>

  

<Style x:Key=”derivedStyle” BasedOn=”{StaticResource baseStyle}”>

       ….

</Style>

 

Lưu ý về từ khóa x: :để tạo các style cho các control, bạn cần phải thêm vào các Resource. Bất kỳ control nào trong WPF đều có một Resource, đó là một kế thừa cho tất cả các control. Đó là lý do tại sao chúng ta phải chỉ định một thuộc tính   x: Key để định nghĩa một resource định danh duy nhất.

2. TargetType

Chọn loại Control nào được sử dụng Style đó.

Ví dụ như chọn loại Control Label:

<Style TargetType=”{x:Type Label}”>

         ….

</Style>

 

3. Setter

 

Dùng để gán các giá trị cho thuộc tính.

Ví dụ như muốn gán màu đỏ cho màu chữ của Label:

<Style TargetType=”{x:Type Label}”>

       <Setter Property=”Foreground” Value=”Red”/>

</Style>

Tương tự thiết lập sự kiện, ta dùng EventSetter.

 

4. Cách sử dụng Style

 

Đ áp dng các Style cho các Control chúng ta cn thiết lp thuc tính Style. Bạn có thể code XAML hoặc cũng có thể sử dụng thanh Properties của Visual Studio. Ngoài ra bạn cũng có thể code bằng ngôn ngữ lập trình C# hoặc VB để lập trình động.

Đ ly các Style ta đã xây dựng t resource chúng ta s dng {StaticResource [resourceKey]}

Ví dụ 1:

Tạo 1 Style dành cho 2 Label thiết lập thuộc tính màu chữ là đỏ.

clip_image001

Bắt đầu, ta tạo mới 1 project WPF Application, sau đó tại MainWindow ta tạo giao diện 2 Label (có thể tạo bằng công cụ).

 

<Window x:Class=”StyleDemo.MainWindow”

        xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

        Title=”MainWindow” Height=”244″ Width=”233″>

    <Grid>

        <Label Content=”Label1″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,36,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”133″ />

        <Label Content=”Label2″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,126,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”133″ />

    </Grid>

</Window>

 

Ta sẽ code tiếp code Style trong thẻ Grid.Resources như sau

<Window x:Class=”StyleDemo.MainWindow”

        xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

        Title=”MainWindow” Height=”244″ Width=”233″>

    <Grid>

        <Grid.Resources>

            <Style x:Key=”labelStyle” TargetType=”{x:Type Label}”>

                <Setter Property=”Foreground” Value=”Red”></Setter>

            </Style>

        </Grid.Resources>

        <Label Content=”Label1″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,36,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”133″ />

        <Label Content=”Label2″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,126,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”133″ />

    </Grid>

</Window>

 

Cuối cùng, ta lấy labelStyle từ Resource và gán vào thuộc tính Style từng label

<Label Content=”Label1″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,36,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”133″ Style=”{StaticResource labelStyle}” />

<Label Content=”Label2″ Height=”28″ HorizontalAlignment=”Left” Margin=”33,126,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”133″ Style=”{StaticResource labelStyle}”/>

 

Giao diện trở thành:

clip_image002

Vậy là xong!

 

5. Trigger

 

Dùng để thay đổi thuộc tính phụ thuộc những điều kiện nhất định.

Ví dụ Style sau áp dụng cho điều khiển Button. Khi Button bị bấm xuống thì màu chữ, cỡ chữ bị đổi :

<Style TargetType=”{x:Type Button}”>

     <Style.Triggers>

         <Trigger Property=”IsPressed” Value=”true”>

             <Setter Property=”Foreground” Value=”Red”></Setter>

             <Setter Property=”FontSize” Value=”14″></Setter>

         </Trigger>

     </Style.Triggers>

</Style>

Ngoài ra còn có DataTrigger, MultiDataTrigger và EventTrigger.

 

 

Ví dụ 2:

Ứng dụng có giao diện như sau:

1 TextBlock với tiêu đề: Danh sách sinh viên tốt nghiệp

3 Label là tên các sinh viên

2 Button

Yêu cầu giao diện:

 

Label

Button

Chung

Chữ in nghiên

Font Times New Roman

Riêng

Đưa chuột đến à đổi màu xanh

Chữ màu đỏ

 

Giao diện ban đầu:

clip_image003

 

Theo yêu cầu, ta sẽ tiến hành tạo Style áp dụng cho Label, Button. Để đơn giản mình đặt ngay trong Grid.Resources

Ta sẽ tạo 1 Style chung để áp dụng cho Button lẫn Label để được chữ in nghiên và font Times New Roman:

 

<Style x:Key=”baseStyle” TargetType=”{x:Type Control}”>

    <Setter Property=”FontFamily” Value=”Times New Roman”/>

    <Setter Property=”FontStyle” Value=”Italic”></Setter>  

</Style>

 

Tiếp theo tạo tiếp 2 Style riêng:

 

Style cho Label:

 <Style BasedOn=”{StaticResource baseStyle}” TargetType=”{x:Type Label}” >

     <Setter Property=”FontStyle” Value=”Italic”></Setter>

     <Style.Triggers>

         <Trigger Property=”IsMouseOver” Value=”True”>

             <Setter Property=”Foreground” Value=”Blue” />

         </Trigger>

     </Style.Triggers>

 </Style>

 

Style cho Button:

 <Style BasedOn=”{StaticResource baseStyle}” TargetType=”{x:Type Button}”>

     <Setter Property=”Foreground” Value=”Red” />

 </Style>

 

clip_image004

 

Khi chạy:

clip_image005

Toàn bộ source:

 

<Window x:Class=”StyleNewDemo.MainWindow”

        xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

        Title=”MainWindow” Height=”361″ Width=”353″>

    <Grid>

        <Grid.Resources>

            <Style x:Key=”baseStyle” TargetType=”{x:Type Control}”>

                <Setter Property=”FontFamily” Value=”Times New Roman”/>

                <Setter Property=”FontStyle” Value=”Italic”></Setter>

            </Style>

           

            <Style BasedOn=”{StaticResource baseStyle}” TargetType=”{x:Type Label}” >

                <Setter Property=”FontStyle” Value=”Italic”></Setter>

                <Style.Triggers>

                    <Trigger Property=”IsMouseOver” Value=”True”>

                        <Setter Property=”Foreground” Value=”Blue” />

                    </Trigger>

                </Style.Triggers>

            </Style>

           

            <Style BasedOn=”{StaticResource baseStyle}” TargetType=”{x:Type Button}”>

                <Setter Property=”Foreground” Value=”Red” />

            </Style>

        </Grid.Resources>

       

        <TextBlock Height=”27″ HorizontalAlignment=”Left” Margin=”46,32,0,0″ Name=”textBlock1″ Text=”Danh sách sinh viên tốt nghiệp” VerticalAlignment=”Top” Width=”169″ />

        <Label Content=”1. Đỗ Hà Vân” Height=”28″ HorizontalAlignment=”Left” Margin=”46,95,0,0″ Name=”label1″ VerticalAlignment=”Top” />

        <Label Content=”2. Trần Ngọc Trang” Height=”28″ HorizontalAlignment=”Left” Margin=”46,150,0,0″ Name=”label2″ VerticalAlignment=”Top” />

        <Label Content=”3. Nguyễn Văn Việt” Height=”28″ HorizontalAlignment=”Left” Margin=”46,204,0,0″ Name=”label3″ VerticalAlignment=”Top” />

        <Button Content=”Thoát” Height=”23″ HorizontalAlignment=”Left” Margin=”225,276,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”75″ />

        <Button Content=”Xác nhận” Height=”23″ HorizontalAlignment=”Left” Margin=”130,276,0,0″ Name=”button2″ VerticalAlignment=”Top” Width=”75″ />

    </Grid>

</Window>

 

One response to “Khái niệm Style trong WPF

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s