wpf之自定义滚动条

首先我们添加一个带滚动条的textbox控件：

<ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}">
<TextBlock xml:space="preserve" Name="FtpServerConf" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap"  Width="610"/>
</ScrollViewer>

这里 VerticalScrollBarVisibility="Auto"表示是超出垂直距离自动显示滚动条，当然这个滚动条是win系统自带的效果，我们要修改的就是这部分，需要对滚动区域的模板进行自定义修改。

这里借用网上的两张图，解释一下滚动条的结构：

我们需要给scrollview控件自定义样式：

<Style x:Key="for_scrollviewer"  
           TargetType="{x:Type ScrollViewer}">
        <Setter Property="BorderBrush"  
                Value="LightGray"/>
        <Setter Property="BorderThickness"  
                Value="0"/>
        <Setter Property="HorizontalContentAlignment"  
                Value="Left"/>
        <Setter Property="HorizontalScrollBarVisibility"  
                Value="Disabled"/>
        <Setter Property="VerticalContentAlignment"  
                Value="Top"/>
        <Setter Property="VerticalScrollBarVisibility"  
                Value="Visible"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"  
                            BorderThickness="{TemplateBinding BorderThickness}"  
                            SnapsToDevicePixels="True">
                        <Grid Background="{TemplateBinding Background}">
                            <ScrollContentPresenter  
                                Cursor="{TemplateBinding Cursor}"  
                                Margin="{TemplateBinding Padding}"  
                                ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <!--垂直滚动条-->
                            <ScrollBar x:Name="PART_VerticalScrollBar"  
                                       HorizontalAlignment="Right"  
                                       Maximum="{TemplateBinding ScrollableHeight}"  
                                       Orientation="Vertical"  
                                       Style="{StaticResource for_scrollbar}"  
                                       ViewportSize="{TemplateBinding ViewportHeight}"  
                                       Value="{TemplateBinding VerticalOffset}"  
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                            <!--水平滚动条-->
                            <ScrollBar x:Name="PART_HorizontalScrollBar"  
                                       Maximum="{TemplateBinding ScrollableWidth}"  
                                       Orientation="Horizontal"  
                                       Style="{StaticResource for_scrollbar}"  
                                       VerticalAlignment="Bottom"  
                                       Value="{TemplateBinding HorizontalOffset}"  
                                       ViewportSize="{TemplateBinding ViewportWidth}"  
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="ScrollChanged">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_VerticalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="1"  
                                        Duration="0:0:1"/>
                                    <!--自动消失-->
                                    <!--<DoubleAnimation  
                                        Storyboard.TargetName="PART_VerticalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="0"  
                                        Duration="0:0:1"  
                                        BeginTime="0:0:1"/>-->
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_HorizontalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="1"  
                                        Duration="0:0:1"/>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_HorizontalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="0"  
                                        Duration="0:0:1"  
                                        BeginTime="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter"  
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_VerticalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="1"  
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <!---鼠标离开后渐渐消失-->
                        <!--
                        <EventTrigger RoutedEvent="MouseLeave"  
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_VerticalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="0"  
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        -->
                        <EventTrigger RoutedEvent="MouseEnter"  
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_HorizontalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="1"  
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave"  
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation  
                                        Storyboard.TargetName="PART_HorizontalScrollBar"  
                                        Storyboard.TargetProperty="Opacity"  
                                        To="0"  
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后在需要使用的地方进行引用：

<ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}">
<TextBlock xml:space="preserve" Name="FtpServerConf" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Style="{StaticResource tab_text}" Width="610"></TextBlock>
</ScrollViewer>

最终效果是这样的：