图像按钮和模拟Windows媒体播放器UI

最新推荐文章于 2025-06-11 20:36:42 发布

转载最新推荐文章于 2025-06-11 20:36:42 发布 · 177 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.diyabc.com/frontweb/news673.html

本文介绍了一种使用图像按钮构建个性化用户界面的方法，通过四个不同状态的图像展示按钮的禁用、正常、悬停和按下状态，实现了类似WindowsMediaPlayer的界面效果。文中详细解释了双缓冲、透明背景和支持PNG格式等技术要点。

下载source - 789.43 KB

介绍

在我自己的共享软件“兰亭音乐中心”中，我希望UI看起来更有个性，所以我决定设计一些UI元素来构建应用程序。图像按钮是第一个也是最基本的元素。有了图像按钮，就很容易建立一个非常漂亮的用户界面。

在这个示例中，我使用image按钮构建一个看起来像Microsoft的Windows Media Player的表单。

背景

在蒙皮的形式，一些按钮看起来不规则，但实际上它也是一个矩形按钮。仅仅因为图像使它看起来不规则，我们可以使用图像来表示一个按钮。通常一个按钮有四种状态:禁用、正常、悬停和按下，所以我们可以使用四幅图像来表示一个按钮的四种状态。

有时我们使用PNG格式的图像，我们知道PNG支持透明背景。我们希望按钮能够支持透明，这样按钮的背景就不会被覆盖。

演示解决方案

Andy.UI

这是一个UI库，现在它只包含一个控件- imagebutton。我将添加更多的UI控件到这个库-一个显示UI元素用法的WinForm应用程序。现在只有图像按钮的演示，使用图像按钮来构建一个看起来像Windows Media Player的表单。

使用的代码

添加组装安迪。或将图像按钮控件添加到Visual Studio工具箱，然后您就可以使用它了。

的兴趣点

双缓冲

为了提高性能，图像按钮采用双缓冲防止闪烁。要做到这一点，只使用下面的代码在构造函数:

隐藏,复制CodeDoubleBuffered = true;

透明的

为了只支持传输，您需要下面给出的代码。但我想说的是，这是非常透明的。当图像按钮绘制时，它会要求它的父对象绘制它的背景，所以它看起来是透明的。

隐藏,复制CodeSetStyle ( ControlStyles.UserPaint, true );
SetStyle ( ControlStyles.SupportsTransparentBackColor, true );
BackColor = Color.Transparent;

3.图像属性

我们需要四个图像来表示按钮状态;通常我们需要四个图像类型的变量。这有点麻烦，所以我用字典来存储图像，按钮状态是关键。

隐藏,复制Code///
/// images that state used
///
private Dictionary<ButtonState,Image> mImages = new Dictionary<ButtonState, Image> ( );
///
/// Get or set normal state image
///
[DefaultValue ( null )]
public Image NormalImage
{
get
{
if ( !mImages.ContainsKey ( ButtonState.Normal ) )
mImages.Add ( ButtonState.Normal, null );
return mImages [ ButtonState.Normal ];
}
set
{
mImages [ ButtonState.Normal ] = value;
Invalidate ( );
}
}

注意，如果是这种模式，建议使用ImageButton类中的属性。这是因为键只有在它获得属性时才能添加到字典中。或者您可以在构造函数中向字典添加状态键。

设计师

第一次向表单添加ImageButton时，没有状态图像，因此ImageButton上没有显示。在设计表单时，判断按钮的位置并不方便。所以这里有一个ImageButtonDesigner，在设计时只在按钮上画一个灰色的矩形，没有正常状态的图像，因此你知道按钮在哪里。

历史

2008-5-28 -创建文章

本文转载于：http://www.diyabc.com/frontweb/news673.html