WPF:如何使用Slider代替ScrollViewer控件中的Scrollbar?

[kissyou886]

具体点，我的目的就是让ScrollViewer的左右拖动更美观些，像自带的Scrollbar太丑，所以我选择了Slider,但我遇到下面几个问题：

1.如果使用控件自带的Scrollbar，在WPF中如何使它表现的更美观些？会涉及哪些技术？

2.使用Slider，如何绑定ScrollViewer的ItemsControl，或者其他可行办法？能够实现ScrollViewer里内容的拖动即可。

我尝试了很多办法，但都没找到好的解决办法？希望高手给指点一二！

[zyntl]

ScollViewer的Template属性时，把两个（一个横向的，一个纵向的）ScollBar元素换成Slider
以下是ScollViewer默认的控件模板（ControlTemplate）的源代码，希望对你有所帮助
<ControlTemplate
TargetType="ScrollViewer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid
Background="{TemplateBinding Panel.Background}">
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="Auto" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
<Rectangle
Grid.Column="1"
Grid.Row="1"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<ScrollContentPresenter
Grid.Column="0"
Grid.Row="0"
Margin="{TemplateBinding Control.Padding}"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />
<ScrollBar
Grid.Column="1"
Grid.Row="0"
Minimum="0"
Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"
Cursor="Arrow"
AutomationProperties.AutomationId="VerticalScrollBar" />
<ScrollBar
Orientation="Horizontal"
Grid.Column="0"
Grid.Row="1"
Minimum="0"
Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}"
ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}"
Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"
Cursor="Arrow"
AutomationProperties.AutomationId="HorizontalScrollBar" />
</Grid>
</ControlTemplate>

[zyntl]

你在改写ScollViewer的Template属性时，把两个（一个横向的，一个纵向的）ScollBar元素换成Slider，
Slider属性的设置及数据的绑定你可以参考ScollBar的设置
以下是ScollViewer默认的控件模板（ControlTemplate）的源代码（从里面你可以看出有两个ScollBar元素），希望对你有所帮助
<ControlTemplate TargetType="ScrollViewer">
<Grid
Background="{TemplateBinding Panel.Background}">
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="Auto" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
<Rectangle
Grid.Column="1"
Grid.Row="1"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<ScrollContentPresenter
Grid.Column="0"
Grid.Row="0"
Margin="{TemplateBinding Control.Padding}"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />
<ScrollBar
Grid.Column="1"
Grid.Row="0"
Minimum="0"
Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"
Cursor="Arrow"
AutomationProperties.AutomationId="VerticalScrollBar" />
<ScrollBar
Orientation="Horizontal"
Grid.Column="0"
Grid.Row="1"
Minimum="0"
Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}"
ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}"
Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"
Cursor="Arrow"
AutomationProperties.AutomationId="HorizontalScrollBar" />
</Grid>
</ControlTemplate>

[kissyou886]

再次感谢 zyntl ,问题解决后来结分---

[zyntl]

有可能上面的方法不行，从ScollViewer和ScrollBar的名称上来看，估计ScrollBar是ScrollViewer的控件模板（ControlTemplate）里专用的控件，
可能不能换成Slider，这点我没试过。
最好还是用ScrollBar。你可以改写ScrollBar的控件模板从而修改它的外观嘛。

[wts_net]

没用过，顶！

[kissyou886]

顶上来！
等待高手---------

[xixuan_sky]

自定义的样式是否可以？

[zhoulehua]

xaml可以应用样式表之类的效果，其实它就相当于css，美工就靠它了。

使用Slider，还得等我实践之后才会有结果。

[zyntl]

这个需要重写控件模板即ControlTemplate
具体来说
1.重写ScollViewer的Template属性（是一个ControlTemplate对象）
2.因为你不满意默认的ScollBar,你还需要自己重写ScollBar的Template属性（也是一个ControlTemplate对象）
MSDN提供的有现成的例子
网址如下
http://msdn.microsoft.com/zh-cn/library/ms771748.aspx

[kissyou886]

非常感谢zyntl的解答!
我同时也很想知道,怎么使用Slider来解决该问题！我开始直接使用的Slider，尝试了很多方法都失败了--

[高反差保留]

ding~

[高反差保留]

请教，我想把ScrollViwer设定成，鼠标移动到边缘，内容自动向后滚动，显示出未显示的内容，这可以怎样实现？

[frank198381]

学习一下 ，这个问题一直没解决。