AvaloniaUI 按钮 Hover 效果:鼠标悬停切换背景图片
在 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'。
原文地址: https://www.cveoy.top/t/topic/nDCB 著作权归作者所有。请勿转载和采集!