Giả sử là bạn có 1 ứng dụng Silverlight mà bạn muốn thu nhỏ lại bằng chiều rộng và chiều của cửa sổ trình duyệt của bạn. Bằng cách này ứng dụng được đưa lên toàn bộ cửa sổ và không chỉ là một cửa sổ với kích thước cố định. Để minh họa điều này, tôi đã tạo một ứng dụng đơn giản của những phần tử UI ngẫu nhiên trên nó.
Bạn có thể xem trước và chạy ứng dụng tại đây:http://silverlight.services.live.com/invoke/66033/Page%20Scaling/iframe.html
Ngoài ra, những cửa sổ sau sẽ cho bạn thấy ứng dụng đơn giản thay đổi trình duyệt với nhiều kích cỡ khác nhau (cao, bình thường, rộng). Như bạn có thể thấy, mỗi phần tử UI trong ứng dụng được chia cân xứng với kích thước của trình duyệt.
Để hoàn thành điều này, tất cả những việc bạn phải làm là thêm một RenderTransform của phần ScaleTransform vào một Grid hay Canvas của ứng dụng Silverlight của bạn.
Thí dụ, thêm đoạn code sau vào trang Page.xaml của bạn:
<Canvas>
<Canvas.RenderTransform>
<ScaleTransform x:Name="CanvasScale" ScaleX=”1” ScaleY=”1”></ScaleTransform>
</Canvas.RenderTransform>
</Canvas>
Gán ScaleX và ScaleY là “1” thì tương đương với tỉ lệ là 100% . Nếu bạn gán ScaleX và ScaleY là “0.33” thì control sẽ bằng 1/3 kích cỡ bình thường của nó.
Nào bây giờ, như đã chứng minh tại Tip of the Day #9 kiểm soát việc thay đổi kích cỡ trình duyệt trong tập tin Page.xaml.cs của bạn. Gán cho CanvasScale ScaleX và ScaleY với một phần trăm mà bạn muốn cho chiều dài và chiều rộng.
namespace ScaleTransform
{
public partial class Page : UserControl
{
private int _startingWidth = 800;
private int _startingHeight = 600;
public Page()
{
InitializeComponent();
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
}
void Content_Resized(object sender, EventArgs e)
{
double height = App.Current.Host.Content.ActualHeight;
double width = App.Current.Host.Content.ActualWidth;
CanvasScale.ScaleX = width / _startingWidth;
CanvasScale.ScaleY = height / _startingHeight;
}
}
}
Thank you,
--Mike Snow