• 对silverlight布局进行控制,使其居中显示,适用于不同的分辨率


    问题背景:

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

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

    解决思路:

            基本原则:使用表格<Grid></Grid>进行布局,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 的值不可靠。

    源码在一楼奉上

  • 相关阅读:
    攻防世界新手RE 6.getit
    攻防世界新手RE 5.logmein
    攻防世界新手RE 4.simple-unpack
    攻防世界新手RE 3.open-source
    攻防世界新手RE 2.Hello, CTF
    {DARK CTF }Misc/Minetest1 2 3
    {DARK CTF } forensics /Wolfie's Contact
    {DARK CTF } OSINT/Dark Social Web
    2021 1 13 js笔记5 end,JSON学习笔记
    2021 1 12 js笔记4
  • 原文地址:https://www.cnblogs.com/kimmy/p/2233533.html
Copyright © 2020-2023  润新知