在 AvaloniaUI 中,可以使用 'Style' 和 'Trigger' 来实现按钮的 'hover' 效果。下面是一个示例代码:

<Button Content='Hover Button' Width='100' Height='50'>
    <Button.Style>
        <Style Selector='Button'>
            <Setter Property='Background'>
                <Setter.Value>
                    <BitmapBrush Bitmap='{Binding NormalImage}' Stretch='UniformToFill'/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property='IsPointerOver' Value='True'>
                    <Setter Property='Background'>
                        <Setter.Value>
                            <BitmapBrush Bitmap='{Binding HoverImage}' Stretch='UniformToFill'/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

其中,'NormalImage' 和 'HoverImage' 是绑定到 ViewModel 中的图片路径。在正常状态下,按钮的背景是 'NormalImage',当鼠标移动到按钮上时,触发 'IsPointerOver' 属性,按钮的背景切换成 'HoverImage'。

注意,为了让图片在按钮中居中显示,需要设置 'BitmapBrush' 的 'Stretch' 属性为 'UniformToFill'。

AvaloniaUI 按钮 Hover 效果:鼠标悬停切换背景图片

原文地址: https://www.cveoy.top/t/topic/nDCB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录