wpf 根据不同屏幕分辨率自动适应屏幕

最新推荐文章于 2024-03-23 00:15:00 发布
最新推荐文章于 2024-03-23 00:15:00 发布
阅读量2.3w 收藏 9
点赞数
分类专栏： c#

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    界面布局是默认采用的1920*1080的分辨率布局的，现在想自动适应不同的分辨率下的屏幕。

    如textblock宽100 高40 文字是20px

    适应到分辨率为1600*900,该如何做才能让textblock看起来没变化

    谢谢

    2014年5月7日 2:46
    |

答案

  • Question
    登录进行投票
    1
    登录进行投票

    可否考虑View Box? 只要按照固定值设计layout, 放入固定长宽的canvas/grid中，然后放入viewbox中，可保证您的所有控件长宽比例不变。

    改变窗口的大小，里面的控件会自适应改变。

    <Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Viewbox>
        <Canvas Height="1080" Width="1920">
            <TextBlock Text="Something" Canvas.Left="900" Canvas.Top="500" FontSize="32"/>
        </Canvas>
    </Viewbox>
</Window>

    http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx


    2014年5月21日 3:20
    |
  • Question
    登录进行投票
    0
    登录进行投票

    你好，

    请参考下面的代码：

    XAML:

    <Window x:Class="WPFresolutionIndependentApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        x:Name="myMainWindow"
        >
    <Grid Name="MainGrid" SizeChanged="MainGrid_SizeChanged">
        <Grid.LayoutTransform>
            <ScaleTransform x:Name="ApplicationScaleTransform"
                        CenterX="0"
                        CenterY="0"
                        ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
                        ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
        </Grid.LayoutTransform>
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
            <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
            <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>
</Window>

    C#:

            public MainWindow()
        {
            InitializeComponent();
        }

        #region ScaleValue Depdency Property
        public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(MainWindow), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue)));

        private static object OnCoerceScaleValue(DependencyObject o, object value)
        {
            MainWindow mainWindow = o as MainWindow;
            if (mainWindow != null)
                return mainWindow.OnCoerceScaleValue((double)value);
            else
                return value;
        }

        private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            MainWindow mainWindow = o as MainWindow;
            if (mainWindow != null)
                mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue);
        }

        protected virtual double OnCoerceScaleValue(double value)
        {
            if (double.IsNaN(value))
                return 1.0f;

            value = Math.Max(0.1, value);
            return value;
        }

        protected virtual void OnScaleValueChanged(double oldValue, double newValue)
        {

        }

        public double ScaleValue
        {
            get
            {
                return (double)GetValue(ScaleValueProperty);
            }
            set
            {
                SetValue(ScaleValueProperty, value);
            }
        }
        #endregion

        private void MainGrid_SizeChanged(object sender, EventArgs e)
        {
            CalculateScale();
        }

        private void CalculateScale()
        {
            double yScale = ActualHeight / 250f;
            double xScale = ActualWidth / 200f;
            double value = Math.Min(xScale, yScale);
            ScaleValue = (double)OnCoerceScaleValue(myMainWindow, value);
        }
    }

    详细信息：

    http://stackoverflow.com/questions/3193339/tips-on-developing-resolution-independent-application/5000120#5000120

    http://geekswithblogs.net/rakker/archive/2012/07/02/easy-scaling-in-xaml-wpf.aspx

    谢谢！

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. 
    Click HERE to participate the survey.

    • 已标记为答案 skczjun 2014年5月9日 0:46
    2014年5月8日 6:15
    |
    版主

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

    看起来没有变化是指？

    1. 长宽比率不变，布局位置比率不变

    ->  可以布局到Grid对象中

    2. 字体比率不变

     -〉 根据长宽，重新计算FontSize


    2014年5月7日 2:52
    |
  • Question
    登录进行投票
    0
    登录进行投票

    一个界面有许多的文本，都要重新计算FontSize?如果新添加一个Textblock又要后台添加代码？

    这样很繁琐啊

    看起来没有变化即，同样的屏幕，假设我在分辨率1920*1080下有个控件是1920px宽度的，如果我调整分辨率为1600*900就会超出屏幕，我想实现的是与屏幕一样宽

    2014年5月7日 5:15
    |
  • Question
    登录进行投票
    0
    登录进行投票

    一个界面有许多的文本，都要重新计算FontSize?如果新添加一个Textblock又要后台添加代码？

    这样很繁琐啊

    看起来没有变化即，同样的屏幕，假设我在分辨率1920*1080下有个控件是1920px宽度的，如果我调整分辨率为1600*900就会超出屏幕，我想实现的是与屏幕一样宽

    一样宽的话，可以借助Grid，设置比率。上面已经说过了。如果更改字体显示，而TextBlock比较多的情况，可以借助ViewBox。

    下面是个例子，你可以参考下，我将TextBlock的宽度设为80%。

    <Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.8*"/>
    <ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid Background="LightBlue">
    <Viewbox>
        <TextBlock Text="test" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
    </Viewbox>
</Grid>
</Grid>

    XAML的特性，你好像还未完全了解，宽度可以设置参照比率的。

    根据宽度大小和字数多少更改FontSize的方法有很多种，你可以采用扩展属性或方法来实现。在宽度和字数更改事件里对其调用。

    如果有必要，也可以自定义控件，来对TextBlock扩展。

    当多个UI控件需要统一设置时，你可以考虑下Binding来统一实现。


    2014年5月7日 6:07
    |
  • Question
    登录进行投票
    0
    登录进行投票
    也即是说像这样的 
    <Grid x:Name="MainGrid">
   <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300"></ColumnDefinition>
         <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
   <Grid Grid.Column="0">
<Grid.RowDefinitions>
   <RowDefinition Height="60"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
  </Grid.RowDefinitions>
 <Button Grid.Row="0" Content="放大比例" FontSize="24" Click="OnAddScale"></Button>
         <ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" Background="#FFBBD4EC">
             <TextBlock Text="aaaaaaaa" FontSize="20"></TextBlock>
              <TextBlock Text="bbbbbbb" FontSize="20"></TextBlock>
              <TextBlock Text="ccccccccc" FontSize="20"></TextBlock>
          </ListBox>
 </Grid>
<Grid Grid.Column="1">
     <Grid.RowDefinitions>
       <RowDefinition Height="60"></RowDefinition>
       <RowDefinition Height="*"></RowDefinition>
     </Grid.RowDefinitions>
      <Button Grid.Row="0" Content="缩小比例" FontSize="24" Click="OnReduceScale"></Button>
      <ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" Background="#FF8B8B96">
           <TextBlock Text="aaaaaaaa" FontSize="20"></TextBlock>
           <TextBlock Text="bbbbbbb" FontSize="20"></TextBlock>
           <TextBlock Text="ccccccccc" FontSize="20"></TextBlock>
       </ListBox>
 </Grid>
</Grid>
    改为这样 
    <Grid x:Name="MainGrid">
   <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300*"></ColumnDefinition>
         <ColumnDefinition Width="500*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
   <Grid Grid.Column="0">
<Grid.RowDefinitions>
   <RowDefinition Height="60*"></RowDefinition>
    <RowDefinition Height="540*"></RowDefinition>
  </Grid.RowDefinitions>
 <Button Grid.Row="0" Content="放大比例" FontSize="24" Click="OnAddScale"></Button>
         <ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" Background="#FFBBD4EC">
             <TextBlock Text="aaaaaaaa" FontSize="20"></TextBlock>
              <TextBlock Text="bbbbbbb" FontSize="20"></TextBlock>
              <TextBlock Text="ccccccccc" FontSize="20"></TextBlock>
          </ListBox>
 </Grid>
<Grid Grid.Column="1">
     <Grid.RowDefinitions>
       <RowDefinition Height="60*"></RowDefinition>
       <RowDefinition Height="540*"></RowDefinition>
     </Grid.RowDefinitions>
      <Button Grid.Row="0" Content="缩小比例" FontSize="24" Click="OnReduceScale"></Button>
      <ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" Background="#FF8B8B96">
           <TextBlock Text="aaaaaaaa" FontSize="20"></TextBlock>
           <TextBlock Text="bbbbbbb" FontSize="20"></TextBlock>
           <TextBlock Text="ccccccccc" FontSize="20"></TextBlock>
       </ListBox>
 </Grid>
</Grid>
    但这样做就没法使用对Width="60"与Width="*"的搭配了

    2014年5月7日 8:39
    |
  • Question
    登录进行投票
    0
    登录进行投票

    你好，

    请参考下面的代码：

    XAML:

    <Window x:Class="WPFresolutionIndependentApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        x:Name="myMainWindow"
        >
    <Grid Name="MainGrid" SizeChanged="MainGrid_SizeChanged">
        <Grid.LayoutTransform>
            <ScaleTransform x:Name="ApplicationScaleTransform"
                        CenterX="0"
                        CenterY="0"
                        ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
                        ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
        </Grid.LayoutTransform>
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
            <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
            <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>
</Window>

    C#:

            public MainWindow()
        {
            InitializeComponent();
        }

        #region ScaleValue Depdency Property
        public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(MainWindow), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue)));

        private static object OnCoerceScaleValue(DependencyObject o, object value)
        {
            MainWindow mainWindow = o as MainWindow;
            if (mainWindow != null)
                return mainWindow.OnCoerceScaleValue((double)value);
            else
                return value;
        }

        private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            MainWindow mainWindow = o as MainWindow;
            if (mainWindow != null)
                mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue);
        }

        protected virtual double OnCoerceScaleValue(double value)
        {
            if (double.IsNaN(value))
                return 1.0f;

            value = Math.Max(0.1, value);
            return value;
        }

        protected virtual void OnScaleValueChanged(double oldValue, double newValue)
        {

        }

        public double ScaleValue
        {
            get
            {
                return (double)GetValue(ScaleValueProperty);
            }
            set
            {
                SetValue(ScaleValueProperty, value);
            }
        }
        #endregion

        private void MainGrid_SizeChanged(object sender, EventArgs e)
        {
            CalculateScale();
        }

        private void CalculateScale()
        {
            double yScale = ActualHeight / 250f;
            double xScale = ActualWidth / 200f;
            double value = Math.Min(xScale, yScale);
            ScaleValue = (double)OnCoerceScaleValue(myMainWindow, value);
        }
    }

    详细信息：

    http://stackoverflow.com/questions/3193339/tips-on-developing-resolution-independent-application/5000120#5000120

    http://geekswithblogs.net/rakker/archive/2012/07/02/easy-scaling-in-xaml-wpf.aspx

    谢谢！

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. 
    Click HERE to participate the survey.

    • 已标记为答案 skczjun 2014年5月9日 0:46
    2014年5月8日 6:15
    |
    版主
  • Question
    登录进行投票
    1
    登录进行投票

    可否考虑View Box? 只要按照固定值设计layout, 放入固定长宽的canvas/grid中，然后放入viewbox中，可保证您的所有控件长宽比例不变。

    改变窗口的大小，里面的控件会自适应改变。

    <Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Viewbox>
        <Canvas Height="1080" Width="1920">
            <TextBlock Text="Something" Canvas.Left="900" Canvas.Top="500" FontSize="32"/>
        </Canvas>
    </Viewbox>
</Window>

    http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx


younger_z
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF控件大小随着窗体的改变而改变
05-24
WPF中的Button等控件随着窗体大小的改变而改变大小，能够自适应窗体的大小。
WpfApp1_WPF窗口贴边自动隐藏_
10-01
WPF窗体，靠屏幕右边，便会自动隐藏。鼠标移入窗体滑出。
【wpf应用8】如何让WPF Grid控件根据屏幕尺寸自动调整
最新发布
qq_35320456的博客
03-23 777
如何让WPF Grid控件根据屏幕尺寸自动调整
wpf项目 XX自动生产管理平台原码
01-06
wpf常用布局控件的使用，界面美观，深色系。科技感十足的分组控件，有动画效果的图表。先手学习的好项目
c# WPF 自助终端触控屏拼音手写屏幕键盘源码
02-19
基于c#与WPF开发的屏幕键盘程序源码，适用于自助终端，触控屏幕，包含字符、屏幕与手写等多种输入方式；
WPF10分钟不操作就自动退出登录
09-16
启动任务线程：默认10分钟不操作即注销退出 Task.Factory.StartNew(() => { while (isMonitor) { if (DateTime.Now.Subtract(GlobalUtil.LastOperateTime).TotalMinutes >= GlobalUtil.AdminTimeoutMinute) { LogoutWork();
WPF窗体的自适应分辨率方法
weixin_44540800的博客
01-20 3367
WPF窗体的自适应分辨率方法 开发工具与关键技术：MVC 作者：zhh 撰写时间：2021.1.8 使用WPF创建一个窗体(Window)时，如果设置了固定的高度(Height)和宽度（Width），一旦用户的电脑分辨率设置过低，就会使得窗体和内容无法完整的显示出来。 要解决这个问题有以下几个方法。如图 Viewbox ViewBox这个控件通常和其他控件结合起来使用，是WPF中非常有用的控件。定义一个内容容器。ViewBox组件的作用是拉伸或延展位于其中的组件，以填满可用空间，使之有更好的布局及视觉效果
WPF窗体自适应电脑分辨率的问题
yigedaimaxiaobai的博客
09-24 2311
如何解决WPF窗体自适应电脑分辨率前言一、DockPanel二、使用方法1.引入代码总结 前言 很多时候做WPF窗体的控件在运行展示的时候会有放大缩小的操作，这时候有些控件或者控件的文本就不能够随着窗体的放大缩小而改变，本文就为了解决这个问题 一、DockPanel 1、无论你是将窗体做成全屏还是自定义了窗体的高度和宽度，都可以利用DockPanel控件来进行布局。原因是DockPanel控件有一个LastChildFill="True"属性，表示DockPanel中的最后一个子元素可以拉伸以填充剩.
【WPF】 获取屏幕分辨率并自适应
u012799456的博客
11-21 4086
double x = SystemParameters.WorkArea.Width;//得到屏幕工作区域宽度 double y = SystemParameters.WorkArea.Height;//得到屏幕工作区域高度 double x1= SystemParameters.PrimaryScreenWidth;//得到屏幕整体宽度 double y1 = SystemParamete...
WPF 控件分辨率自适应问题
^@^lemon tea^@^
10-10 1870
WPF 控件分辨率自适应问题
C# WPF 界面根据分辨率的大小自适应
热门推荐
weixinhum
12-22 1万+
一般程序的界面做完之后都要考虑到多分辨率的问题
wpf 自动升级_WPF
09-21
简单的自动升级，下载压缩包后，替换文件，可以根据比对版本号，控制是否升级
Wpf TextBox自动补全
10-21
该案例主要实现TextBox控件在输入时，自动给出若干提示信息，提供自动补全功能
WPF分辨率无关性应用
04-15
传统的Windows程序的UI是不可伸缩的.这样 在高分辨率下显示,程序的UI就看起来就会比较小.而在底分辨率的时候,程序就会显得很大.老式的显示器一般都是96DPI(每英寸96个像素).而现在新出的显示器,一般都支持120DPI或者144DPI,的高分辨率. 在高分辨率下,每英寸的像素点更密集,这样UI上的内容就都挤在一起了,难以阅读. WPF没有这种和分辨率有关的问题,因为WPF自己绘制所有的图形而不依赖于GDI/GDI+....
WPF实现多屏幕显示
06-14
采用的是C# WPF 开发，实现一个主屏幕（主程序）,多个子屏幕显示主屏幕相同的信息内容
WPF 多屏幕鼠标区域限制软件
03-01
当具有多个屏幕，或者屏幕距离过远时，防止鼠标超过当前屏幕范围，限制鼠标在某一个区域内进行操作（最多支持六台显示屏）。可以使用鼠标或键盘进行操作，且不论焦点是否在当前软件上，都可以进行限制区域操作。
WPF 屏幕及摄像头录像 源码工程
11-20
源码工程，采用傲瑞组件二次开发，支持摄像头录像和屏幕录像，屏幕录像可以手动设置录像区域，支持支持预览，支持全局快捷键 界面预览请查看文章：https://blog.csdn.net/u010875635/article/details/84310784
WPF调色器&屏幕取色器
01-18
使用WPF写的调色器程序，支持HSV和RGB模式调色，支持屏幕鼠标取色。 介绍：http://blog.csdn.net/ymh441915964/article/details/79100911
c# 实现窗体拖到屏幕边缘自动隐藏
09-06
让窗体拖到屏幕边缘自动隐藏的原理，通过Form1_LocationChanged的方法，当窗体位置发生改变时，判断其是否在屏幕边缘，在则隐藏。再通过Timer控件经过指定时间判断出鼠标的位置，若鼠标在屏幕左边、上边或右边，这...
wpf中实现不同屏幕大小
06-10
在 WPF 中，可以通过以下方式来实现不同屏幕大小： 1. 使用 Grid 布局：Grid 布局可以自适应不同尺寸的屏幕，通过设置行和列的比例，控件可以在不同的屏幕上自动调整大小和位置。 2. 使用 ViewBox 控件：ViewBox 控件可以保持子控件的宽高比并自动调整子控件的大小，以适应不同的屏幕尺寸。 3. 使用资源文件：可以使用资源文件来存储不同分辨率下的视图，根据不同的屏幕尺寸加载不同的视图。 4. 使用布局容器：WPF 中有多种布局容器，如 StackPanel、WrapPanel、DockPanel 等，可以根据不同的需求选择合适的容器来实现自适应布局。 需要注意的是，为了确保应用程序在不同屏幕上的兼容性，需要进行多个屏幕的测试，并对不同情况进行适当的调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值