WPF Library - Tạo Kính Lúp Cho Ứng Dụng WPF (Zoom Behavior) Phần I

Hôm nay tôi sẽ giới thiệu đến các bạn một thư viện mở(GalaSoft.Utilities) giúp chúng ta có thể tạo một ứng dụng có thể zoom.


Tôi có thiết kế giao diện như sau:


  1. CheckBox để ẩn/hiện kính Lúp
  2. Slider thay đổi chiều rộng kính
  3. Slider thay đổi chiều cao kính
  4. Slider thay đổi độ thu/phóng của kính

Chú ý: Kính lúp được mặc định là hình TRÒN, điều này có thể được thay đổi.
Zoom behavior
Zoom behavior design

Chúng ta sẽ Attach Zoom Behavior trong thư viện GalaSoft.Utilities  vào Root Grid Control(là vùng chúng ta muốn kính hoạt động)và binding đến các control đã thiết kế ở trên:

















Kết quả
Zoom behavior
Chúng ta có thể thay đổi hình chiếc kính lúp bằng cách thay đổi Control Template của nó:


1-> Đầu tiên tôi định nghĩa 2 Template


















2 -> Sau đó tôi tạo một group RadioButton (Rb1Rb2):

Thể hiện lại 2 Template trên, khi người dùng chọn một trong hai RadioButton này thì tôi sẽ gán Template mà nó đang giữ cho ZoomControl(tức x:Name="MyZoom")











Kết quả ta có 2 button để select kiểu kính lúp(góc trên trái 10h)

Zoom behavior design wpf acttach behavior

Code.CS



#region
using System.Windows;
using System.Windows.Controls;
#endregion

namespace ZoomBehavior
{
///
/// Interaction logic for MainWindow.xaml
///

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

///
/// Change the magnifier's template
///

private void TemplateRadioButton_Click(object s, RoutedEventArgs e)
{
var sender = s as RadioButton;

// Thay đổi hình dạng kính lúp
MyZoom.Template = sender.Template;
}
}
}


Đến đây bạn có thể làm Thánh Soi được rồi, có thể thêm tính năng mở file ảnh để show cho tiện soi
tuanpham wpf acttach behavior

Tải về source tại đây
Vậy là chúng ta đã hoàn thiện một chiếc kính lúp cho ứng dụng của mình, chúc các bạn thành công!
Phạm Tuân.


Chúc các bạn thành công!
PHẠM TUÂN