Avalonia UI 缩放问题

Question

我正在使用Avalonia开发跨平台桌面MVVM应用程序，我的问题比较简单：

我想要将整个窗口适应目标设备的显示分辨率。例如，UI应该始终按照显示器的25％至50％进行缩放，但不应该更大。缩放应包括所有字体大小、宽度和高度属性等。为了可视化，这是在我的4K桌面上的样子，也就是应该的样子：

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

我想要做的是根据显示分辨率缩放所有内容，以便它看起来不会很糟糕，并且字体始终清晰可读（因此字体也需要缩放）。 （可能还有一个WinAPI调用UI缩放，但解决方案也应该在Linux和OSX上工作）

如何在Avalonia中实现这一点？或者是否有更好的方法实现这一点？

请注意，应用程序的宽高比应保持不变，并且应用程序不应完全覆盖屏幕。

我目前的想法：

• 我可能可以为每个大小参数创建绑定，并使用某种缩放因子在应用程序启动时重新计算最佳大小，但这将需要大量新代码，并且在字体大小方面实现起来很麻烦。

• 也许可以创建绑定和一堆类似于CSS媒体查询的样式预设？但这也需要大量工作。

是否有更好的实现所需效果的方法？

- Frederik Hoeft

Answer 1

我可以为每个尺寸参数创建绑定，并在应用程序启动时使用某种缩放因子重新计算最佳尺寸，但这将需要大量新代码并且在字体大小方面实现起来很麻烦。

最终我做的是创建一个完整的命名空间来保存所有需要的类。所以如果有人感兴趣，可以在GitHub上查看我的完整代码。

基本上，这都归结于像这样迭代 Avalonia 逻辑树：

/// <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缩放因子，方法如下：

/// <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();
}

再次说明，这里放不下太多的代码，但希望能让你了解我的解决方案是如何实现的。

这是结果：

可以按比例缩放到这个大小

- Frederik Hoeft

Answer 2

你可能想要看一下ViewBox控件。

- timkicker

---

你的回答可以通过添加更多支持性信息来改进。请编辑以添加进一步的细节，如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community