用WPF实现带滑块的进度条

用WPF实现带滑块的进度条

背景：

哎，用WPF的人还是太少，在网上也看到很多关于WPF未来如何发展的讨论，众说纷纭。总之，WPF的定义就是Windows Presentation Foundation，它是微软推出的专门针对表示层，也就是UI的一个东东。而且，伴随WPF而生的xaml语言，也将因为Windows 8的大力推广而拥有更广阔的未来“开发部高级副总裁S. Somasegar对外宣布微软的XAML 技术团队直接并入Windows部门”。

个人觉得，利用WPF可以很方便的做出在WinForm里较难实现的东东，而且效果上WPF也具有更大的发挥空间。而且WPF和WinForm之间相互利用是很方便的。下面讲一个具体的例子。

“带滑块的进度条”是想把ProgressBar和TrackBar（Slider）结合起来，让进度条的进度可以像滑块一样调整。偶在百度上面输入关键词“带滑块进度条”，没有搜到太多可用的内容。因此，想到用WPF实现一个UI控件，然后放到Winform程序中调用（如果直接用Winform来实现，个人觉得很麻烦）。

具体代码：

首先在Blend3中新建一个UserControl，结构如下：

pbar是一个ProgressBar，gxp是一个Slider，TextBlock用来显示百分数。将Slider重叠在ProgressBar上，然后通过Slider来调节进度。如果不做任何修改，效果就是这样。

我们需要通过编辑Slider的模板将Slider中横着的那条线隐藏掉。“编辑模板”这个工具真是很好用啊，你可以很方便的修改默认风格的WPF控件，而且所见即所得，这在Winform中就不可能了。现在我们可以看到Slider的内部结构了！

我们发现“[Border]”就是那条要隐藏的线，我们直接在属性里将它设为隐藏就OK了。下面的步骤是什么呢？外观上我们已经基本搞定了，如果你还有其它的外观需求，比如要设

成这个颜色那个颜色的，都可以通过编辑模板来搞定。下面的步骤就是进度值的同步，当你调整滑块的时候，进度条没有任何反应，原因就是progressBar的Value没有和Slider的Value 同步起来。

方法就是绑定Binding，Binding是WPF的核心之一，确实很有用，而且有很大的发挥空间。在ProgressBar的属性里面加上：

Value="{Binding ElementName=gxp,Path=Value}"

效果就出来了！

最后就是怎么在WinForm中调用WPF控件。先添加4个WPF引用（装了Blend就会有），PresentationCore、PresentationFramework、WindowsBase、WindowsFormsIntegration。然后添加using System.Windows.Forms.Integration;

ElementHost ehost = new ElementHost();

ehost.Width = 152;

ehost.Height = 21;

m_ProgressUC = new ProgressGxp.MainControl();

ehost.Child = m_ProgressUC;

panel1.Controls.Add( ehost );