温馨提示:本文翻译自stackoverflow.com,查看原文请点击:c# - Avalonia UI Scaling Issues
avaloniaui c# resize user-interface

c# - Avalonia UI缩放问题

发布于 2021-02-25 03:03:10

我正在使用Avalonia开发跨平台的桌面MVVM应用程序,而我的问题本质上很简单:

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

桌面

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

在此处输入图片说明

我要做的是根据显示分辨率上下缩放所有内容,以使其看起来不像垃圾,这样字体始终清晰可读(因此字体也需要缩放)。 (可能还有一个WinAPI调用用于UI缩放,但是该解决方案也应该在Linux和OSX上也可以使用)

如何使用Avalonia来实现?还是有实现这一目标的首选方法?

请注意,应用程序的宽高比应保持恒定,并且应用程序永远不能覆盖整个屏幕。

到目前为止,我的想法是:

  • 我可能可以为每个大小参数创建绑定,并使用某种缩放因子在应用程序启动时重新计算最佳大小,但这将需要一堆新代码,并且难以实现字体大小。

  • 也许创建绑定和一堆样式预设(如CSS媒体查询)?不过,那也是一堆工作。

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

查看更多

提问者
Frederik Hoeft
被浏览
22
Frederik Hoeft 2020-11-02 18:02

我可能可以为每个大小参数创建绑定,并使用某种缩放因子在应用程序启动时重新计算最佳大小,但这将需要一堆新代码,并且难以实现字体大小。

最终这就是我所做的。我必须创建一个完整的单独的命名空间来容纳执行此操作所需的所有类。因此,要输入此答案的代码太多了,但是如果有人感兴趣,我会将完整的代码放在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缩放因子,如下所示:

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

同样,要在此答案中放入太多代码,但希望它能使你对我的解决方案的实现方式有所了解。

结果如下:

在此处输入图片说明

可以缩放到这个

在此处输入图片说明