Question

我想在WPF中创建一个类似于iTunes封面流程中的滚动条。请参阅下面的滚动条图片，该图片还会显示滚动条下方的专辑封面的反射。

以下是xaml中的基本滚动条控件。

<ScrollBar Name="scrollBar1" Height="24" Width="Auto" Orientation="Horizontal"  
           SmallChange="1" />

如何从上面看到iTunes封面流滚动条看？完全可以使用的源代码示例将是首选。

Answer 1

从http://msdn.microsoft.com/en-us/library/ms742173.aspx开始使用MSDN中的ScrollBar ControlTemplate示例（这比从Blend或ShowMeTheTemplate获得的窗口样式更容易修改）

现在开始编辑模板，更改颜色，箭头按钮和拇指的模板，直到它看起来像你想要的那样。

Answer 2

你有Expression Blend吗？如果不是，我建议安装它（如果您没有MSDN许可证，则有30天试用版）。

例如，有很多Expression Blend教程here's a good place to start。

基本上，您复制标准滚动条的模板，该模板将为您提供构建它的所有元素。然后，您可以更改每个元素的外观，直到您看到它想要的样子。在这个过程中会有相当多的反复试验。

Answer 3

第一项任务是显示滚动条下方的滚动区域。您必须更改ScrollViewer控件的结构。默认情况下，它是2x2 Grid，因此水平滚动条位于滚动区域下方。编辑其模板以将滚动区域和滚动条放在同一单元格中，垂直对齐滚动条到底部。

第二部分是设置滚动条本身的样式。我不相信这不能用圆角矩形来完成。

我通常使用Blend提取模板进行修改，还有一个免费的ShowMeTheTemplate工具。

Answer 4

查看codeplex上的WPF Themes project。 Expression Blend主题（浅色/深色）非常接近您提供的示例。它在Ms PL下发布。