iTunes Bar 仿制品

• 下载演示应用程序和二进制文件 iBarLib - 29 KB
• 下载源代码 - 8.56 KB

引言

这是我在这 CodeProject 上的第一篇文章，所以请告诉我任何英语上的错误，或者代码中不好的实现和错误。

我一直很喜欢 Apple 对操作系统和设备的设计。 因此，我自然会尝试模仿 OSX 和 iTunes 在其 GUI 中提供的一些很酷的控件。 我将在这里介绍的控件是 iTunes 在 iPod 视图下的“还剩多少空间”条。

我还扩展了该控件以支持具有递增和递减值的 ProgressBar 样式，所有这些都是可定制的。

关注点

控件使用的所有功能都是完全可定制的，包括基本颜色、边框、镜像不透明度等。

控件

该控件以 DLL 的形式出现，因此您只需在 .NET 项目中添加对 DLL 的引用，即可完全访问该控件，或者您可以包含 DLL 项目并进行自己的额外自定义。

该控件还完全支持 Mono。 只要您将 System.Windows.Forms 绑定与 Mono 一起使用，它就能很好地工作。

公共属性

public float StepSize
public int StepInterval
public int BarDividersCount
public float BarMirrorOpacity
public float BarFillProcent
public float BarBorderWidth
public Color BarBackgroundLight
public Color BarBackgroundDark
public Color BarLight
public Color BarDark
public Color BarBorderColor
public BarType BarType

此处列出的所有属性都是您需要修改控件外观和感觉的唯一值。 其中一些需要一些解释。

StepSize 和 StepInterval 属性控制控件是否应充当进度条控件。 您可以通过将 StepSize 设置为非 0（零）的值来激活此功能。 如果该值小于 0，则进度将向后移动，如果该值大于 0，它将像通常的进度控件一样移动，并且 StepInterval 设置为 > 0 的值。

BarDividersCount 控制控件将绘制多少条垂直线。

BarType 属性是一个枚举，用于控制控件状态或类型。 例如，如果您将 BarType 属性设置为 ProgressBar，它将充当进度条。 如果您将 BarType 设置为 Animation，则控件将“Rubber Band”到新的百分比值，最后，您可以将 BarType 设置为 Static，它将是一个静态控件，没有运动或动画。

Animation 效果的想法是由 Ben_64 提交的，感谢您的好主意 :)

实现“drop effect”的基本知识

为了完成 drop effect，我们需要创建原始绘制图像的副本，然后将其翻转 180 度。 此外，我们需要使图像半透明，然后添加从透明到目标背景色的渐变。

以下代码演示了这一点

Bitmap theImage = new Bitmap( width, height );
Graphics g = Graphics.FromImage( theImage );

g.SmoothingMode = SmoothingMode.AntiAlias;
g.Clear( bgColor );

// Here we generate the actual bar
Bitmap bmp = GenerateBarImage( width, height - ( height / 3 ), procent );

// We then take this image and apply the opacity and fade effect's
Bitmap mirror = FadeToBg( bmp, bgColor, -90.0F );

// This is important, we need to save the current state of the device
GraphicsState state = g.Save();

// Here we apply a upside down flip before we draw the "glassy" part
g.ScaleTransform( 1, -1.0F, MatrixOrder.Prepend );

// Then we create a ColorMatrix and the ImageAttributes we are going to use
// to make the reflected image opaque
ColorMatrix clr = new ColorMatrix();
ImageAttributes attributes = new ImageAttributes();

// This is important, it's the Matrix33 propertie that controls the opacity
// of the image. We set this to our desired value.
// This is a float value that takes a value from 
// 0.0F -> Completly transparent
// to
// 1.0F -> No transparency
clr.Matrix33 = ( mirrorOpacity / 100 );

// We then apply the color matrix to the image attributes we
// that we will use when drawing the image.
attributes.SetColorMatrix( clr );

// Here we create a destination rectange that the image will be drawn within.
Rectangle source = new Rectangle( 0, -( height ), mirror.Width, mirror.Height );
g.DrawImage( mirror, source, 0, 0, mirror.Width, 
             mirror.Height, GraphicsUnit.Pixel, attributes );

// Now, when the image is drawn upside down, we are going to restore the
// device to it's original state. This is simply done with our
// saved device state
g.Restore( state );

// Now we can draw the correct bar on the top of the flipped and opaque
// shadow.
g.DrawImage( bmp, 0, -5 );

最后

我真的希望有人会在某些项目中使用这个控件。 也许，我让翻转图形对象和修改图像的透明度变得更简单了。 由于我糟糕的英语，我真的希望代码能为自己说话。 ;)