在不同分辨率下有效缩放屏幕伪像...... [英] Effective scaling of screen artefacts at differing resolutions...

问题描述

我已经阅读了大量关于缩放，字体，UI等的MSDN页面，但没有解决字体和缩放问题。事实上，我在网络搜索中找不到任何内容。目前我使用了一个使用以下逻辑的FontSize的iValueConverter：



（FontSize看起来好于1366x768分辨率）/（屏幕高度为1366x768分辨率）x（运行时的屏幕高度）=>

Hi,
I've read loads of MSDN pages on scaling, fonts, UI etc. but none address the issue of fonts and scaling together. In fact I've found nothing in web searches that covers both. For the moment I've resorted to an iValueConverter for the FontSize that uses the following logic:

(FontSize that looks Ok at 1366x768 resolution) / (Screen Height at 1366x768 resolution) x (Screen Height at Runtime) =>

var newFontSize = (int)Math.Round((oldFontSize / 768.0) * screenHeight, 0);

这样的iValueConverter然后应用如下：

This iValueConverter is then applied like this:

<TextBlock x:Name="BackgroundTextBlock" Grid.Column="1"

Text="{Binding [Ads/BackgroundText], Source={StaticResource Localised}}"

FontSize="{Binding Converter={StaticResource SizeConverter}, ConverterParameter={StaticResource AdBackgroundFontSize}, FallbackValue={StaticResource AdBackgroundFontSize}}"

TextWrapping="WrapWholeWords" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" />

我正在使用Visual Studio设计视图分辨率或1366x768。在我的笔记本电脑上以1920x1080分辨率运行应用程序使用iValueConverter放大它们的字体。但是，我发现在朋友的PC上测试应用程序的分辨率介于1366x768和1920x1080之间，这些字体太大了。所以看来，考虑到其他显示分辨率的不同缩放或者iValueConverter方法不正确，我的逻辑需要更复杂！我还复制了类似的iValueConverters，用于厚度应用于边框和边距。



有没有人建议我应该如何有效地缩放所有屏幕人工制品？



提前谢谢...

I'm using Visual Studio with the design view resolution or 1366x768. Running the App on my Laptop at 1920x1080 resolution the fonts where fine using the iValueConverter to enlarge them. However, I found that on testing the app on a friends PC with a resolution somewhere between 1366x768 and 1920x1080 the fonts where much too large. So it seems, either my logic needs to be more complicated to take account of different scaling at other display resolutions or the iValueConverter approach is not the correct one! I've also replicated similar iValueConverters for such things as Thickness as applied to borders and margins.

Has anyone any advice of how I should be doing effective scaling of all screen artefacts?

Thanks in advance...

推荐答案

是的，使用WPF你可以扩展所有的工件，包括字符。但你确定你真的想要吗？如果您使用此类应用程序始终最大化窗口，您将获得以下效果：对于不同的屏幕大小，您将获得相对于屏幕的两个像素宽度或像素高度之一相同的相对字符大小。由于不同设备的宽高比规格差别不大，它可以很好地为您提供每个物理屏幕的缩放外观。但是，从另一方面来说，用户会试图调整视窗大小，试图调整窗口大小;但是，您可以使用最小大小（ MinWidth，MinHeight 属性）来限制它。这个问题将是另一个硬币翻转。



为了比较，我为你准备了两个XAML样本。首先将所有元素缩放到窗口大小，但不是将我格式化为不同大小的字符，以演示行为：

Yes, with WPF you can scale all the artifacts, including characters. But are you sure you really want it? If you use such application with always maximized window, you will get the following effect: for different screen sizes, you will get the same relative character size, relative to one of the two, pixel width or pixel height of the screen. With not very different aspect ratio specs of different devices, it will give you the look scaled to each physical screen nicely. But, from the other hand, the user will screw up the view way too much trying to resize the window down; however, you can curb it by using minimum size (MinWidth, MinHeight properties). This problem will be another flip of the coin.

For comparison, I prepared two XAML samples for your. First will scale all elements to the Window size, but not characters, which I formatted to different sizes, to demonstrate the behavior:

<Window x:Class="Scaling.Ui.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="300" Width="300">
        <DockPanel LastChildFill="True">
            <TextBlock DockPanel.Dock="Top">One element</TextBlock>
            <TextBlock DockPanel.Dock="Top" FontSize="20">Another element</TextBlock>
            <TextBlock DockPanel.Dock="Top">Smaller element again</TextBlock>
            <TextBlock DockPanel.Dock="Top" FontSize="16">Enter text below:</TextBlock>
            <Border BorderBrush="Black" BorderThickness="1">
                <TextBox/>
            </Border>
        </DockPanel>
</Window>

现在，如果你添加 ViewBox ，它将以图形方式缩放，带有字符 - 这是关键。立即尝试：

Now, it all will be graphically scaled, with characters, if you add ViewBox — this is the key. Try it now:

<Window x:Class="Scaling.Ui.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="300" Width="300">
    <Viewbox>
        <DockPanel LastChildFill="True">
            <TextBlock DockPanel.Dock="Top">One element</TextBlock>
            <TextBlock DockPanel.Dock="Top" FontSize="20">Another element</TextBlock>
            <TextBlock DockPanel.Dock="Top">Smaller element again</TextBlock>
            <TextBlock DockPanel.Dock="Top" FontSize="16">Enter text below:</TextBlock>
            <Border BorderBrush="Black" BorderThickness="1">
                <TextBox/>
            </Border>
        </DockPanel>
    </Viewbox>
</Window>

关于 ViewBox 的好处是：它对其内容元素完全不可知;同等对待图形和文本元素，内容的整个可视树被视为图形。好吧，这是显示矢量图形的好方法，它可以是嵌套在里面的任何其他元素的任何 Canvas 元素。但它可能是其他任何东西。



你可以结合这些方法，因为你可以在 ViewBox 而有些则没有。此外，您可以更改所有字体以响应渲染大小的变化;它可以使用绑定或代码隐藏，或两者兼而有之。我警告过你要仔细考虑并考虑所有后果。你决定。





-SA

The good thing about ViewBox is: it is fully agnostic about its content element; graphic and text elements are treated equally, the whole visual tree of the content is treated as graphics. Well, this is good way to show vector graphics, which can be any Canvas element with any other elements nested inside. But it could be anything else.

And you can combine these approaches, because you can show some part of the window under ViewBox and some not. Besides, you can change all fonts in response to change of rendered size; it can be done using binding or code behind, or both. I warned you about using careful considerations and taking into account all consequences. You decide.

—SA

请记住现代字体（.otf ,. ttf等）使用字形的特殊动态调整（提示），以便在以某些较小的尺寸（通常为9~14个点）渲染时，它们的外观优化了可读性。



虽然我希望你能在谢尔文的优秀答案中找到你需要的东西，但我认为（并且，我不使用WPF，这是一个免责声明）试图动态扩展Windows应用程序中的字体是一个错误当使用较小的点尺寸时，这将导致奇怪的文本。



imho，如果你试图实现动态缩放并忽略现代字体的这个特性，那么，是的，这可能意味着那些包含Text的视觉元素必须改变大小，并且，可能，更改元素的整个祖先链必须改变大小...但是，在WPF中，容器视觉元素之间的那种缩放响应是，我读到，我被告知，并不困难。



我建议的解决方案是在运行时为应用程序的用户提供更改字体大小的能力，从设计的标准点大小数组中进行选择看起来最好。

Keep in mind that modern fonts (.otf, .ttf, etc.) use special dynamic adjustment of the glyphs ("hinting") so their appearance is optimized for readability when rendered at certain smaller sizes (typically 9~14 points).

While I hope you will find what you need in Sergey's excellent answer here, I would argue (and, I don't use WPF, so that's one disclaimer) that trying to dynamically scale Fonts in a Windows app is a mistake that will lead to weird looking Text when smaller point sizes are used.

imho, if you try to implement dynamic scaling and ignore this feature of modern fonts, then, yes, that may mean that those visual elements that contain the Text must change size, and, possibly, the entire "ancestor chain" of the changed element must change size ... however, in WPF that kind of scaling response among container visual elements is, I read, I am told, not difficult.

The solution I suggest is to give the user of your application the ability at run-time to change the size of the fonts, selecting from the standard array of point sizes that are designed to look best.

这篇关于在不同分辨率下有效缩放屏幕伪像......的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！