Ash*_*mad 2 wpf canvas lcd viewbox scaletransform
我正在开发一个WPF应用程序,它将以全高清LCD屏幕(42英寸)显示.另外,我需要在绝对位置容纳控件.在开发环境中,我看不到长度为1920x1080的窗口(这是目标屏幕的固定分辨率).
完成此任务的最佳做法是什么?
WPF使用设备无关单元来指定宽度/高度/位置/厚度等.
当屏幕DPI设置为96dpi时,1 DIU/DIP = 1个物理像素.......当DPI不是96dpi时,1 DIU =不同数量的物理像素.
如果你使用它Canvas
然后使用DIU定位元素.
现在你暗示你想要在像素坐标方面绝对定位.
所以要做到这一点,Canvas
无论当前的DPI设置是什么,你都必须使用缩放技巧(你可以使用a ViewBox
或a LayoutTransform
).
下面的例子显示了实现它的一种方法(我的屏幕是1366x768 ....你可以将它改为全高清).
它会查看系统的DPI,并Canvas
在DPI上升时按比例缩小.这允许您使用真正意味着像素坐标的Canvas坐标.
如果您能够将用户屏幕更改为96dpi,则无需执行缩放技巧,因为1 DIU = 96dpi时的1个物理像素...无需重新缩放.
<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>
Run Code Online (Sandbox Code Playgroud)
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;
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)
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);
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
在96 DPI设置(较小 - 100%)时,屏幕如下所示:
在120 DPI设置(中等 - 125%)(即96 x 1.25 = 120DPI)时,屏幕在使用上面的ScaleBackToPixels技术时看起来像这样(即它看起来与第一个屏幕相同).
在120 DPI设置(中等 - 125%)(即96 x 1.25 = 120DPI)时,如果您根本不进行任何调整,屏幕看起来像这样(请注意圆圈的大小以及按钮的字体和大小).
所有3张图片并排进行比较: