图像按钮和模拟 Windows Media Player 界面

• 下载源代码 - 789.43 KB

引言

在我的共享软件“LanTing Music Center”中，我希望 UI 看起来更具个性，所以我决定设计一些 UI 元素来构建应用程序。图像按钮是第一个也是最基本的元素。 使用图像按钮，可以很容易地构建一个非常漂亮的用户界面。

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

背景

在一个换肤窗体中，一些按钮看起来不规则，但实际上它也是一个矩形按钮。 只是因为图像使它看起来不规则，我们可以使用图像来表示一个按钮。 通常一个按钮有四种状态：禁用、正常、悬停和按下，所以我们可以使用四个图像来表示按钮的四种状态。

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

演示解决方案

Andy.UI

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

Using the Code

将程序集 Andy.UI 添加到您的项目引用中，或者将图像按钮控件添加到 Visual Studio 工具箱中，然后您就可以使用它了。

关注点

1. 双缓冲

为了提高性能，图像按钮使用双缓冲来防止闪烁。 为此，只需在构造函数中使用下面的代码

DoubleBuffered = true;

2. 透明

要支持透明，您需要下面的代码。 但我想说这才是真正的透明。 当图像按钮绘制时，它会要求它的父控件绘制它的背景，所以它看起来是透明的。

SetStyle ( ControlStyles.UserPaint, true ); 
SetStyle ( ControlStyles.SupportsTransparentBackColor, true ); 
BackColor = Color.Transparent;

3. 图像属性

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

 /// <summary>
 /// images that state used
 /// </summary>
 private Dictionary<ButtonState,Image> mImages = new Dictionary<ButtonState, Image> ( ); 
        /// <summary>
        /// Get or set normal state image
        /// </summary>
        [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 类中使用属性。 这是因为只有在获取属性时才能将键添加到字典中。 或者您可以将状态键添加到构造函数中的字典中。

4. 设计器

第一次将 ImageButton 添加到窗体时，没有状态图像，因此在 ImageButton 上没有显示。 在设计窗体时，判断按钮在哪里不方便。 因此有一个 ImageButtonDesigner，仅在设计时在按钮上绘制一个灰色矩形，没有正常状态图像，因此您知道按钮在哪里。

历史

• 2008-5-28 – 创建了文章