Mỗi phần tử Silverlight đều được biểu diễn bằng một thuộc tính là RenderTransform
, thuộc tính này được sử dụng để chuyển đổi vị trí của phần tử. Tôi sẽ làm thử một chuyển động xoay tròn không ngừng của 1 hình ảnh như dưới đây:
Click vào để xem ảnh gốc
Đầu tiên hãy khai báo một hình ảnh trong trang Page.xaml. Hãy chắc là bạn đã thêm cái hình đó vào cái thư mục nơi bạn đặt project mã của bạn. Vì chúng ta sẽ thực hiện xoay ảnh quanh trung tâm của nó, nên ta sẽ gán 2 thuộc tính CenterX và CetnerY là tọa độ trung tâm của hình mà ta sẽ xoay. Trong trường hợp của tôi, tôi sử dụng ảnh có kích thước là 64x48 pixels, nên trung tâm sẽ gán là CenterX=32, CenterY=24.
Trong trang XAML thay <Grid></Grid> bằng:
<Canvas Background="Black">
<Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
<Image.RenderTransform>
<RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
Tiếp theo, hãy thiết lập thời gian lặp bằng cách sử dụng CompositionTarget.Rendering trong sự kiện lặp của chúng ta. Ta thực hiện chuyển đổi vị trí xung quanh trung tâm của hình là 32,24 vì kích thước của hình là 64x48 . Với mỗi lần chuyển động, chúng ta tăng góc lên 1.
namespace Tip17
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
FireballTransform.Angle += 1;
FireballTransform.Transform(new Point(32, 24));
}
}
}
Thank you,
--Mike Snow
