Chúng ta có một cách rất dễ dàng để thay đổi nội dụng, giao diện bên trong của một điều khiển ví dụ một Button ở bên trong lại chứa một đoạn video đang mở và một TexBlock… bằng cách khai báo trong phần Content của Button đó.
Nhưng để thay đổi hẳn hình thù của một điều khiển bạn sẽ làm như thế nào?
Trong ứng dụng Window Form để xây dựng một Form, một Button hay một điêu khiển nào đó có hình dạng hiển thị không giống như bình thường ví dụ một Form có hình của một ngôi sao hay một Button có hình tròn.. Chúng ta sẽ can thiệp vào thuộc tính Region của các điều khiển đó. Để làm điều này trong WPF dường như đơn gian hơn. Chúng ta sẽ chỉnh lại Template (mẫu) mặc định cho kiểu hiện thị của điều khiển đó.
|
Tạo một Template cho Control<o:p></o:p>
|
Chúng ta sẽ thay đổi cách hiển thị của một điều khiển nào đó khác mặc định.
Để làm được điều này chúng ta sẽ tạo ra một ControlTemplate và áp đặt nó cho thuộc tính Template của điều khiển đó.
Trong phần này Chúng ta sẽ thay đổi giao diện của một Button không phải là hình chữ nhật nữa mà là hình eclip.
|
<Button Name="Button1" Content="Button" Click="Button1_Click" FontSize="40">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="Red" Height="100" Width="200"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/></Grid>
</ControlTemplate>
</Button.Template>
</Button><o:p></o:p>
|
Chúng ta sẽ nhận được kết quả như sau:
Khi chúng ta click đúng vào trong vùng Eclip thì sự kiện sẽ xảy ra và một thông báo hiện thị.
Trong đoạn code trên:
- Thuộc tính TargetType dùng để xác định ControlTemplate cho kiểu điều khiển nào.
- Thể <ContentPresenter… để xác định Content sẽ được hiện thị như thế nào.
Chú ý thẻ <ContentPresenter… cần thẻ Grid để có thể làm việc.
|
Thêm Trigger cho ControlTemplate<o:p></o:p>
|
Để kiểu hiện thị tự tạo của chúng ta có thể thay đổi theo sự kiện của người dùng như khi di chuyển chuột vào… thì chúng ta sẽ thêm cho ControlTemplate đó các Trigger.
Chúng ta sẽ thêm cho Button Eclipse của chung ta phía trên một Trigger khi chuột di chuyên qua (IsMouseOver=True) thì màu điền viền sẽ thành xanh và có nét = 4.
|
<Button Name="Button1" Content="Button" Click="Button1_Click" FontSize="40">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="ec" Fill="Red" Height="100" Width="200"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ec" Property="Stroke" Value="Blue"/>
<Setter TargetName="ec" Property="StrokeThickness" Value="4"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button><o:p></o:p>
|
Kết quả thu được khi di chuyển chuột vào Button như trong hình:
Để Trigger trong ControlTemplae có thể thiết đặt các thuộc tính cho một đối tượng – điều khiển nào trong ControlTemplate ta cần đặt tên cho đối tượng đó và khi sử dụng thẻ <Setter… để thiệt đặt một thuộc tính của đối tượng đó, chúng ta cần chỉ tên của đối tượng đó trong thuộc tính TargetName trong ví dụ trên Trigger tác động đến điều khiển Eclipse có tên là ec.
|
Đưa ControlTemplate vào trong Style<o:p></o:p>
|
Trong những bài viết trước tôi đã đề cấp tới Style trong WPF, như các bạn đã biết Style rất hữu dụng cho việc chia sẻ các định dạng…
Một vấn đề đặt ra, chúng ta muốn các điều khiển Button đều có hình eclipse hay chúng ta muốn chia sẻ CotrolTemplate thì chúng ta sẽ giải quyết như thế nào? Câu trả lời rất đơn gian là chúng ta sẽ thiết đặt thuộc tính Template trong Style, đoạn Code sau sẽ mô tả điều này:
|
<Window.Resources>
<Style x:Key="myButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid><o:p></o:p>
<Ellipse Name="ec" Fill="Red" Height="100" Width="200"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources><o:p></o:p>
|
Như trên chúng ta thấy phần CotrolTemplate trong Style là không hề thay đổi so với ví dụ ban đầu . Để sử dụng hay áp đặt Style chứa ControlTemplate này cho một điều khiển chúng ta sử dụng như Style thông thường, chúng ta chỉ cần thiết đặt thuộc tính Style="{StaticResource myButton}" của Button đó và kết quả giống như hình ban đầu.
|
Tạo ControTemplate có thể được tùy chỉnh thông qua các thuộc tính<o:p></o:p>
|
Chúng ta đã thiết kế ControlTemplate để thay đổi hình dạng của giao diện điều khiển. Nhưng chúng ta lại momg muốn một điều khiển khi áp dụng ControlTemplate này thì có thể thay đổi một số thuộc tính trong ControlTemplate đó. Ví dụ như chúng ta đã ControlTemplate thiết đặt hình dạng của một Button là hình Eclipse và chúng ta mong muỗn mỗi một Button khi áp dụng ControlTemplate này lại có thể thiết đặt màu của Eclipse đã được tạo trong ControlTemplate. Đoạn Code dưới đây mô phỏng điều này:<o:p></o:p>
<o:p></o:p>
|
<Window.Resources>
<ControlTemplate x:Key="myTempButton" TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Property = Background}" Height="100" Width="200"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Template="{StaticResource myTempButton}" Background="Red" FontSize="36"/>
<Button Content="Button2" Template="{StaticResource myTempButton}" Background="Blue" FontSize="36"/>
</StackPanel><o:p></o:p>
|
Kết quả của chúng ta thu được sẽ là:
Trong đó Fill="{TemplateBinding Property = Background}" cho phép gáp thuộc tính Fill bằng thuộc tính Background của điều khiển do TargetType xác định. Như vậy thuộc tính Fill của Eclips sẽ lấy giá trị bằng thuộc tính Background của Button.
Bạn có thể tải Source code các ví dụ trong bài tại đây.
Hy vọng bài viết sẽ giúp các bạn sử dụng Template tốt hơn. Ngoài ra chúng ta kết hợp tô mau hay đồ họa 2D (sẽ được tôi đề cập trong những bài viết sau) sẽ giúp các bạn tạo ra những ControlTemplate đẹp mắt hơn
____________________________________________________________<o:p></o:p>
Lê Công Thành
Khoa Công nghệ thông tin – Đại học sư phạm kỹ thuật Hưng Yên
Mobile : 0904464538
Email : thanhlct@gmail.com
