Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Nguyễn Thị Như Quỳnh — Thu, 19 Aug 2010 01:49:55 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/19/2010 9:49:55 AM

Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Filed under: Silverlight

Hãy nói

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

Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Nguyễn Thị Như Quỳnh — Thu, 23 Jul 2009 05:21:16 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/23/2009 1:21:16 PM

Hãy nói 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

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ó.

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