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

Question

   具体点，我的目的就是让ScrollViewer的左右拖动更美观些，像自带的Scrollbar太丑，所以我选择了Slider,但我遇到下面几个问题：     1.如果使用控件自带的Scrollbar，在WPF中如何使它表现的更美观些？会涉及哪些技术？     2.使用Slider，如何绑定ScrollViewer的ItemsControl，或者其他可行办法？能够实现ScrollViewer里内容的拖动即可。   我尝试了很多办法，但都没找到好的解决办法？希望高手给指点一二！

Answer 1

xaml可以应用样式表之类的效果，其实它就相当于css，美工就靠它了。使用Slider，还得等我实践之后才会有结果。

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

你在改写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>

Answer 6

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

Answer 7

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

Answer 8

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