c# - Avalonia UI 缩放问题

Question

我正在使用 Avalonia 开发跨平台桌面 MVVM 应用程序，我的问题性质相当简单:

我想使整个窗口适应目标设备的显示分辨率。例如，UI 应始终缩放以覆盖显示的 25% 到 50%，但不应更大。缩放应包括所有字体大小、宽度和高度属性等。为了使它形象化，这里是它在我的 4K 桌面上的外观，这就是它应该的样子:

在我的分辨率较低的 Linux 笔记本电脑上，它看起来像这样:

我想做的是根据显示分辨率放大或缩小所有内容，使其看起来不像垃圾，并且字体始终清晰可读(因此字体也需要缩放)。(可能还有一个用于 UI 缩放的 WinAPI 调用，但该解决方案也应该适用于 linux 和 OSX)

这如何使用 Avalonia 实现？或者是否有实现此目标的首选方法？

请注意，应用程序的宽高比应保持不变，应用程序不应覆盖整个屏幕。

到目前为止我的想法:

• 我或许可以为每个尺寸参数创建绑定(bind)，并使用某种比例因子在应用程序启动时重新计算最佳尺寸，但这需要大量新代码，并且使用字体实现起来会很痛苦尺寸。

• 也许创建绑定(bind)和一堆样式预设，例如 CSS 媒体查询？不过，这也是一大堆工作。

有没有更好的方法达到预期的效果？

Answer 1

I could probably create bindings for every size parameter and recalculate the optimal size on application startup using a scaling factor of some sort, but this would require a bunch of new code and would be a pain to implement with the font sizes.

这就是我所做的。我必须创建一个完整的独立命名空间来保存执行此操作所需的所有类。所以在这个答案中放入的代码太多了 but I put my full code on GitHub如果有人感兴趣的话。

基本上这一切都归结为像这样迭代 Avalonia LogicalTree:

/// <summary>
/// Recursively registers all <see cref="ILogical"/>s in <paramref name="logicals"/> to the <paramref name="bindingContext"/>.
/// </summary>
/// <param name="logicals">A <see cref="Queue{T}"/> containing the root controls that will be recursively registered.</param>
/// <param name="bindingContext">The <see cref="BindingContext"/> the <see cref="ScalableObject"/>s will be registered to.</param>
public static void RegisterControls(Queue<IEnumerable<ILogical>> logicals, BindingContext bindingContext)
{
    while (logicals.Count > 0)
    {
        IEnumerable<ILogical> children = logicals.Dequeue();
        foreach (ILogical child in children)
        {
            logicals.Enqueue(child.GetLogicalChildren());
            if (child is AvaloniaObject avaloniaObject)
            {
                ScalableObject scalableObject = new ScalableObject(avaloniaObject);
                bindingContext.Add(scalableObject);
            }
        }
    }
}

我的 ScalableObject 的构造函数如下所示:

/// <summary>
/// Initializes a new <see cref="ScalableObject"/> from the provided <paramref name="avaloniaObject"/>.
/// </summary>
/// <param name="avaloniaObject">The <see cref="AvaloniaObject"/> to be mapped to this new instance of <see cref="ScalableObject"/>.</param>
public ScalableObject(AvaloniaObject avaloniaObject)
{
    if (avaloniaObject is TextBlock textBlock)
    {
        Register(avaloniaObject, TextBlock.FontSizeProperty, textBlock.FontSize);
    }
    if (avaloniaObject is TemplatedControl templatedControl)
    {
        Register(avaloniaObject, TemplatedControl.FontSizeProperty, templatedControl.FontSize);
    }
    if (avaloniaObject is Border border)
    {
        Register(avaloniaObject, Border.CornerRadiusProperty, border.CornerRadius);
    }
    // .... This goes on like this for a while
}

然后我可以应用一个新的 UI 缩放因子迭代所有创建的绑定(bind)，如下所示:

/// <summary>
/// Applies the specified <paramref name="scalingFactor"/> to this <see cref="ScalableObject"/> and all of it's children.
/// </summary>
/// <param name="scalingFactor">The scaling factor to be applied to all <see cref="IScalable"/>s of this <see cref="ScalableObject"/>.</param>
public void ApplyScaling(double scalingFactor)
{
    PreScalingAction?.Invoke();
    foreach (IScalable binding in Bindings.Values)
    {
        binding.ApplyScaling(scalingFactor);
    }
    PostScalingAction?.Invoke();
}

同样，这个答案中的代码实在太多了，但希望它能让您了解我的解决方案是如何实现的。

这是结果:

可以缩放到这个