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>

最終效果是這樣的：