Avalonia窗口最大化时图片闪烁问题的成因与解决咨询

我通过Visual Studio模板创建了一个简单的Avalonia应用，窗口内容仅为一张静态图片。应用运行正常，但最大化窗口时会短暂出现两张图片同时显示的闪烁现象。慢动作观察可见，原图片在放大淡出的同时，最大化后的图片滑入到位。应用中未设置任何样式或过渡效果，请问该现象的成因是什么，能否进行修改？

相关代码 #

MainWindow.axaml #

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="AvaloniaApplication1">
    <Image Source="C:\MyImage.jpg"></Image>
</Window>

App.axaml #

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaApplication1.App"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.Styles>
    </Application.Styles>
</Application>

Program.cs #

using System;
using Avalonia;

namespace AvaloniaApplication1
{
    internal class Program
    {
        // Initialization code. Don't use any Avalonia, third-party APIs or any
        // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
        // yet and stuff might break.
        [STAThread]
        public static void Main(string[] args) => BuildAvaloniaApp()
            .StartWithClassicDesktopLifetime(args);

        // Avalonia configuration, don't remove; also used by visual designer.
        public static AppBuilder BuildAvaloniaApp()
            => AppBuilder.Configure<App>()
                .UsePlatformDetect()
                .WithInterFont()
                .LogToTrace();
    }
}

成因分析 #

这是Avalonia框架默认启用的窗口状态切换动画导致的。当窗口从普通尺寸切换到最大化时，框架会自动执行一套过渡逻辑：旧窗口尺寸下的内容会进行淡出+缩放的退场动画，同时新尺寸的内容会以滑入方式进场。虽然你没有手动设置任何过渡效果，但这套系统级动画是默认开启的，在图片铺满窗口的场景下，就会出现两张图片短暂共存的闪烁现象。

修改方案 #

只需禁用窗口的状态切换动画即可解决问题，以下是两种常用实现方式：

方式1：通过XAML直接禁用 #

修改MainWindow.axaml，给Window标签添加WindowStateTransitioning="False"属性：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="AvaloniaApplication1"
        WindowStateTransitioning="False">
    <Image Source="C:\MyImage.jpg"></Image>
</Window>

方式2：通过代码动态控制 #

在MainWindow的构造函数中添加代码禁用动画：

public MainWindow()
{
    InitializeComponent();
    WindowStateTransitioning = false;
}

设置完成后，窗口切换到最大化时将直接适配新尺寸，不会再出现双图闪烁的过渡效果。

内容的提问来源于stack exchange，提问作者Brian Berns