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

Silverlight自动根据屏幕分辨率进行布局,第1张

概述问题背景:   使用silverlight 4.0做好的网站,在标准分辨率下表现良好,在其他分辨率下布局效果很差   希望在低分辨率的情况下,能产生滚动条,同时在高分辨率的情况下,能保持和低分辨率一样的显示效果   解决思路:   基本原则:使用表格进行布局,Grid布局能自动拉伸控件的宽高,使其贴合不同分辨率,前提是我们不能把Grid的宽高给定死了。   以分辨率 1300*685 为标准:  

问题背景:

  使用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 的值不可靠。

转载来自:http://www.cnblogs.com/odz521/archive/2011/11/05/2236936.html
总结

以上是内存溢出为你收集整理的Silverlight自动根据屏幕分辨率进行布局全部内容,希望文章能够帮你解决Silverlight自动根据屏幕分辨率进行布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1064952.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存