对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 的值不可靠。
源码在一楼奉上
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端