Wiki

Những hiệu ứng áp dụng cho các toolbar (thanh công cụ)  phổ biến đặc biệt là hiệu ứng zoom. Mục đích của tip này, tôi sẽ tạo ra một hiệu ứng zoom khi áp dụng lên một toolbar.

Để xem trước demo, hãy xem tại đường liên kết này:: http://silverlight.services.live.com/invoke/66033/Zoom%20Toolbar/iframe.html

Đây là hình ảnh hoàn thiện của demo này:

Khi di chuyển chuột vào một hình ảnh, hình ảnh đó sẽ to lên. Và khi di chuyển chuột ra khỏi hình ảnh đó, nó sẽ trở về kích thước bình thường.

Để bắt đầu, hãy làm theo những bước sau:

1. Tạo một ứng dụng Silverlight Application sử dụng  Visual Studio 2008.
2. Trong cửa sổ Solution Explorer của bạn , click chuột phải lên Silverlight Application của bạn và chọn  “Add New Item…”.
3. Chọn  "Silverlight Control” và thay đổi tên phía dưới thành  “Toolbar.xaml”.
4. Với mỗi hình ảnh bạn muốn hiển thị trong toolbar của bạn, thêm hình ảnh đó vào dự án  Silverlight application của bạn . Để làm điều này, click chuột phải trên Silverlight application của bạn trong cửa sổ Solution Explorer, chọn “Add->Existing item…”,  tìm những hình bạn cần và click OK để thêm chúng.

Nào bây giờ, bước tiếp theo của chúng ta là khai báo mỗi hình ảnh trong tập tin  Toolbar.xaml :

Dưới đây là một đoạn mã của chỉ một  Image trong thanh công cụ ( toolbar).  Chúng ta sẽ hiển thị chỉ một Image trong bài hướng dẫn này bởi vì khai báo các  Image giống nhau, chỉ khác nhau ở nguồn tải lên.  Với mỗi Image , đặt  một   RenderTransform với một  ScaleTransform để phóng to (zoom)  tỉ lệ hình ảnh . Điều này quan trọng để gán CenterX và  CenterY của  ScaleTransform   dành riêng cho  Image chia tỉ lệ.  Cũng đừng quên đặt giá trị cho các thuộc tính  Width và  Height của UserControl này để có kích thước chính xác. Trong trường hợp này nơi mà ta đặt 5 hình ảnh là một UserControl với chiều rộng( width) là  656 pixels  và chiều cao (high) là  84 pixels  để nó có thể chứa cả hình ảnh và text bên dưới.

<UserControl x:Class="SLDev.Toolbar"

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

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

    Width="656" Height="84">

    <Canvas>

        <Image x:Name="HomeImage" Source="images/home.png"  MouseEnter="DoMouseEnter" MouseLeave="DoMouseLeave" Width="96" Height="96" Canvas.Left="0" >

            <Image.RenderTransform>

                <ScaleTransform x:Name="HomeScale" CenterX="64" CenterY="64"></ScaleTransform>

            </Image.RenderTransform>

        </Image>

        ... aditional images

    </Canvas>

</UserControl>

Trong lớp Toolbar.xaml.cs, với mỗi Image bạn muốn thêm vào một  StoryBoard  timer để điều khiển chuyển động của nó, một biến direction (_homeDir) để đánh dấu chuyển động zoom của nó (1=lên, 0=xuống, -1=không phóng to) và một biến(_homeMouseOver) để đánh dấu xem chuột có di chuyển trên hình hay không.

public partial class Toolbar : UserControl

{

    private Storyboard _homeTimer;

    private int _homeDir = -1;

    private bool _homeMouseOver = false;

    ...

Trong hàm khởi tạo của lớp Toolbar chúng ta sẽ tạo và bắt đầu timer cho mỗi  Image mà chúng ta đã khai báo:

public Toolbar()

{

    InitializeComponent();

    _homeTimer = new Storyboard();

    _homeTimer.Duration = TimeSpan.FromMilliseconds(50);

    _homeTimer.Completed += new EventHandler(HomeTimer);

    _homeTimer.Begin();

}

Trong Timer  của chúng ta, hãy gọi lại sự kiện chúng ta sẽ điều chỉnh tỉ lệ hình ảnh dựa vào  trạng thái của nó. Thí dụ, nếu biến direction là  “1” và tỉ lệ kích thước xác định trước nhỏ hơn  “1.3”, ta sẽ thêm mỗi tỉ lệ rộng dài là  “0.05”. Nếu tỉ lệ xác định trước lớn hơn hoặc bằng “1.3” và chúng ta không di chuyển chuột lên hình ảnh, ta sẽ đảo ngược bằng cách đặt cho biến  direction = “0”. Ngược lại, chúng ta giảm tỉ lệ xuống một khoảng là “0.05” cho đến khi chúng ta quay trở lại kích thước ban đầu là  “1.0”. Hãy điều chỉnh những con số này cho phù hợp với kích thước thanh công cụ của bạn.

private int AdjustScale(int direction, ScaleTransform scale, bool mouseOver, Storyboard timer)

{

    if(direction == 1)

    {

        if (scale.ScaleX < 1.3)

        {

            scale.ScaleX += 0.05;

            scale.ScaleY += 0.05;

        }

        else if (false == mouseOver)

        {

            direction = 0;

        }

    }

    else if(scale.ScaleX > 1.0)

    {

        scale.ScaleX -= 0.05;

        scale.ScaleY -= 0.05;

    }

    timer.Begin();

    return direction;

}

private void HomeTimer(object sender, EventArgs e)

{

    _homeDir = AdjustScale(_homeDir, HomeScale, _homeMouseOver, _homeTimer);

}

Cuối cùng, chúng ta cần sử dụng sự kiện DoMouseLeave và  DoMouseEnter để thực hiện thay đổi kích thước khi bạn di chuyển chuột lên trên hay rời khỏi hình ảnh. Nếu chúng ta di chuyển chuột ra khỏi khu vực của hình ảnh, chúng ta đặt _homeMouseOver = false. Nếu chúng ta enter vào hình ảnh, chúng ta sẽ đặt nó bằng true và biến direction bằng  “1”.

private void DoMouseLeave(object sender, MouseEventArgs e)

{          

    if (sender == HomeImage)

        _homeMouseOver = false;

}

private void DoMouseEnter(object sender, MouseEventArgs e)

{

    if (sender == HomeImage)

    {

        _homeMouseOver = true;

        _homeDir = 1;

    }

}

Đó là tất cả, bây giờ bạn đã có một thanh công cụ thật cool.

Thank you,
--Mike Snow