用于 LCD 屏幕的 WPF 全高清 [英] WPF for LCD screen Full HD
问题描述
我正在开发一个将在全高清 LCD 屏幕(42 英寸)中显示的 WPF 应用程序.此外，我需要在绝对位置容纳控件.在开发环境中，我看不到长度为 1920x1080 的窗口(这是目标屏幕的固定分辨率).
I am developing a WPF application that will be displayed in a Full-HD LCD screen (42 inch). In addition, I need to accommodate the controls in absolute positions. In the development environment I can not see a window in length 1920x1080 (this is the fixed resolution of the targeted screen).
完成这项任务的最佳实践是什么?
What is the best practice to accomplish this task?
推荐答案
WPF 使用与设备无关的单位来指定宽度/高度/位置/厚度等
WPF uses Device Independent Units for specifying width/heights/positions/thicknesses, etc.
当您的屏幕 DPI 设置为 96dpi 时，1 DIU/DIP = 1 个物理像素......但当 DPI 不是 96dpi 时，1 DIU = 不同数量的物理像素.
1 DIU/DIP = 1 physical pixel when your screen DPI is set to 96dpi.....but 1 DIU = a different number of physical pixels when the DPI is not 96dpi.
如果您使用 Canvas，则它使用 DIU 定位元素.
If you use a Canvas then it positions elements using DIUs.
现在您暗示要根据像素坐标进行绝对定位.
Now you imply that you want to position absolutely in terms of pixel coordinates.
所以要使用 Canvas 执行此操作，无论当前的 DPI 设置是什么，您都必须使用缩放技巧(您可以使用 ViewBox 执行此操作，或者一个 LayoutTransform).
So to do this with the Canvas no matter what the current DPI setting is, you have to use a scaling trick (you can do this with a ViewBox, or a LayoutTransform).
下面的例子展示了一种实现方式(我的屏幕是 1366x768....你可以把它改成全高清).
The example below shows one way to achieve it (my screen is 1366x768....you can change it to Full HD).
它查看系统的 DPI，并在 DPI 上升时按比例缩小 Canvas.这允许您使用真正意味着像素坐标的画布坐标.
It looks at the DPI of the system and gets the Canvas scaled down whenever the DPI goes up. This allows you to use Canvas coordinates that really mean pixel coords.
如果您能够将用户屏幕更改为 96dpi，则无需执行缩放技巧，因为在 96dpi 时 1 DIU = 1 物理像素...无需重新缩放.
If you are able to change the users screen to 96dpi then there is no need to do the scaling trick because 1 DIU = 1 physical pixel at 96dpi...no rescaling needed.
<Window x:Class="WpfApplication12.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStyle="None"
AllowsTransparency="True" Background="White"
SizeToContent="WidthAndHeight"
Title="MainWindow" Loaded="Window_Loaded">
<Viewbox x:Name="viewbox">
<Canvas x:Name="canvas">
<Rectangle x:Name="rect" Canvas.Top="10" Canvas.Left="10" Stroke="Red" StrokeThickness="1"/>
<Button Canvas.Top="20" Canvas.Left="20">Test Button</Button>
<Ellipse Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" Stroke="Red" StrokeThickness="10"/>
<TextBlock Canvas.Top="100" Canvas.Left="100" FontSize="15">Some Text</TextBlock>
</Canvas>
</Viewbox>
</Window>
<小时>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication12
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
// HD
const int screenwidth = 1366;
const int screenheight = 768;
// FULL HD
//const int screenwidth = 1920;
//const int screenheight = 1080;
public MainWindow()
{
InitializeComponent();
Top = 0;
Left = 0;
canvas.Width = screenwidth;
canvas.Height = screenheight;
rect.Width = screenwidth - 20;
rect.Height = screenheight - 20;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
bool bScaleBackToPixels = true;
if (bScaleBackToPixels)
{
PresentationSource presentationsource = PresentationSource.FromVisual(this);
Matrix m = presentationsource.CompositionTarget.TransformToDevice;
double DpiWidthFactor = m.M11;
double DpiHeightFactor = m.M22;
viewbox.Width = screenwidth / DpiWidthFactor;
viewbox.Height = screenheight / DpiHeightFactor;
}
else
{
viewbox.Width = screenwidth;
viewbox.Height = screenheight;
}
}
}
}
<小时>
<Window x:Class="WpfApplication12.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStyle="None"
AllowsTransparency="True" Background="White"
SizeToContent="WidthAndHeight"
Title="MainWindow" Loaded="Window_Loaded">
<Canvas x:Name="canvas">
<Rectangle x:Name="rect" Canvas.Top="10" Canvas.Left="10" Stroke="Red" StrokeThickness="1"/>
<Button Canvas.Top="20" Canvas.Left="20">Test Button</Button>
<Ellipse Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" Stroke="Red" StrokeThickness="10"/>
<TextBlock Canvas.Top="100" Canvas.Left="100" FontSize="15">Some Text</TextBlock>
</Canvas>
</Window>
<小时>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication12
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
// HD
const int screenwidth = 1366;
const int screenheight = 768;
// FULL HD
//const int screenwidth = 1920;
//const int screenheight = 1080;
public MainWindow()
{
InitializeComponent();
Top = 0;
Left = 0;
canvas.Width = screenwidth;
canvas.Height = screenheight;
rect.Width = screenwidth - 20;
rect.Height = screenheight - 20;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
bool bScaleBackToPixels = true;
if (bScaleBackToPixels)
{
PresentationSource presentationsource = PresentationSource.FromVisual(this);
Matrix m = presentationsource.CompositionTarget.TransformToDevice;
double DpiWidthFactor = m.M11;
double DpiHeightFactor = m.M22;
double scalex = 1 / DpiWidthFactor;
double scaley = 1 / DpiHeightFactor;
canvas.LayoutTransform = new ScaleTransform(scalex, scaley);
}
}
}
}
<小时>
在 96 DPI 设置(较小 - 100%)下，屏幕如下所示:
At the 96 DPI setting (Smaller - 100%) the screen looks like this:
在 120 DPI 设置(中 - 125%)(即 96 x 1.25 = 120DPI)下，使用上面的 ScaleBackToPixels 技术时，屏幕看起来像这样(即它看起来与第一个屏幕相同).
At the 120 DPI setting (Medium - 125%) (i.e. 96 x 1.25 = 120DPI) the screen looks like this when using my ScaleBackToPixels technique above (i.e. it looks the same as the first screen).
在 120 DPI 设置(中 - 125%)(即 96 x 1.25 = 120DPI)下，当您根本不做任何调整时，屏幕看起来像这样(注意圆圈是如何变大的，以及字体和大小按钮).
At the 120 DPI setting (Medium - 125%) (i.e. 96 x 1.25 = 120DPI) the screen looks like this when you don't do any adjustments at all (notice how the circle is bigger, and the font and size of the Button).
所有 3 个图像并排进行比较:
All 3 images side by side for comparison:
这篇关于用于 LCD 屏幕的 WPF 全高清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
