您的位置:首页 > 其它

Silverlight自动根据屏幕分辨率进行布局

2013-03-07 15:03 381 查看
问题背景:

  使用silverlight 4.0做好的网站,在标准分辨率下表现良好,在其他分辨率下布局效果很差

  希望在低分辨率的情况下,能产生滚动条,同时在高分辨率的情况下,能保持和低分辨率一样的显示效果

  解决思路:

  基本原则:使用表格进行布局,Grid布局能自动拉伸控件的宽高,使其贴合不同分辨率,前提是我们不能把Grid的宽高给定死了。

  以分辨率 1300*685 为标准:

  1、 我们可以使用ScrollViewer作为Grid的容器,低于该分辨率的情况下,产生滚动条

  2、 在高于该分辨率的情况下,我们按比例(当前分辨率/标准分辨率)对本页进行缩放, 这样,在大分辨率的显示器上,我们的布局的比例也能和标准分辨率保持一致。

  解决步骤:

  前端XAML

<UserControl x:Class="SLCenterLayout.MainPage"

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400" x:Name="ControlMainPage"
>

    <UserControl.Resources>

        

    </UserControl.Resources>

    <UserControl.RenderTransform>

        <CompositeTransform />

    </UserControl.RenderTransform>

    <ScrollViewer x:Name="LayoutRoot" MaxWidth="1300" MaxHeight="685"VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Background="Black">

     <Grid HorizontalAlignment="Center">

            <Grid.RowDefinitions>

                <RowDefinition />

                <RowDefinition />

            </Grid.RowDefinitions>

            <Image Source="2.jpg"/>

            <TextBlock Grid.Row="1" FontSize="30" Foreground="White">小米手机快发货啊</TextBlock>

        </Grid>

    </ScrollViewer>

</UserControl>

  后台代码:

using System;
using System.Windows.Controls;
using System.Windows.Media;

namespace SLCenterLayout

{

    public partial class MainPage : UserControl

    {

        //标准显示宽度

        private const double RECOMMAND_SCREEN_WIDTH = 1300;

        //标准显示高度

        private const double RECOMMAND_SCREEN_HEIGHT = 685;

        public MainPage()

        {

            InitializeComponent();

            App.Current.Host.Content.Resized+=new EventHandler(Content_Resized);

        }

        private void ChangePageRenderSize(double currentWidth, double currentHeight)

        {

            if (currentWidth > RECOMMAND_SCREEN_WIDTH || currentHeight > RECOMMAND_SCREEN_HEIGHT)

            {

                CompositeTransform ctf = new CompositeTransform();

                ctf.ScaleX = currentWidth / RECOMMAND_SCREEN_WIDTH;

                ctf.ScaleY = currentHeight / RECOMMAND_SCREEN_HEIGHT;

                //沿着中心点进行缩放,这样的话,在多次缩放后,不会偏移原来位置

                ctf.CenterX = currentWidth / 2;

                ctf.CenterY = currentHeight / 2;

                ControlMainPage.RenderTransform = ctf;

            }

        }

        private void Content_Resized(object sender, EventArgs e)

        {

            ChangePageRenderSize(ControlMainPage.ActualWidth, ControlMainPage.ActualHeight);

        }

    }

为什么要在Resized事件里面,对页面进行缩放

  因为我们在对页面缩放的时候,很重要的一对数据就是当前页面的宽度和高度,而这对数据,我们可以在Resized事件里面获得

  MSDN关于Resized事件的阐述是:

  此事件将在开始加载 Silverlight 插件过程中发生。在发生该事件后,ActualHeight 或 ActualWidth 的值是可靠的。在这一时刻之前,ActualHeight 或 ActualWidth 的值不可靠。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  silverlight