自定义ScrollBar样式

最新推荐文章于 2024-03-27 10:30:00 发布

wu_pan123

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量362

点赞数 9

分类专栏：深入浅出WPF 文章标签： wpf scroll bar 滚动条

本文链接：https://blog.csdn.net/wu_pan123/article/details/135622673

版权

深入浅出WPF 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

本文详细描述了如何在WPF中使用XAML定义和自定义滚动条的样式，包括Track、Thumb以及不同方向的滚动条模板，以及相关属性的设置。

摘要由CSDN通过智能技术生成

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Styles/ColorStyles.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <!--#region 参数-->
    <!--  滚动条宽度/高度  -->
    <sys:Double x:Key="ScrollBarThickness">4</sys:Double>
    <!--  滑块圆角  -->
    <sys:Double x:Key="ThumbCornerRadius">2</sys:Double>
    <!--  轨道背景色  -->
    <SolidColorBrush
        x:Key="TrackBackgroundBrush"
        Color="Transparent" />
    <!--  滑块颜色  -->
    <SolidColorBrush
        x:Key="ScrollBarThumbNormal"
        Opacity="0.3"
        Color="{StaticResource PrimaryColorStyle2}" />
    <SolidColorBrush
        x:Key="ScrollBarThumbBright"
        Opacity="0.6"
        Color="{StaticResource PrimaryColorStyle2}" />
    <!--#endregion-->
    <!--#region Thumb样式-->
    <!--  滚动条拇钮样式  -->
    <Style
        x:Key="ScrollBarThumbStyle"
        TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle
                        x:Name="thumbRect"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Fill="{StaticResource ScrollBarThumbNormal}"
                        RadiusX="{DynamicResource ThumbCornerRadius}"
                        RadiusY="{DynamicResource ThumbCornerRadius}" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" Value="Hand" />
                            <Setter TargetName="thumbRect" Property="Fill" Value="{DynamicResource ScrollBarThumbBright}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="thumbRect" Property="Fill" Value="{DynamicResource ScrollBarThumbNormal}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--#endregion-->
    <!--#region Template-->
    <!--#region 纵向滚动条template-->
    <ControlTemplate
        x:Key="VerticalScrollBar"
        TargetType="{x:Type ScrollBar}">
        <Border
            Width="{DynamicResource ScrollBarThickness}"
            Background="{DynamicResource TrackBackgroundBrush}">
            <Track
                Name="PART_Track"
                IsDirectionReversed="true"
                IsEnabled="{TemplateBinding IsMouseOver}">
                <Track.DecreaseRepeatButton>
                    <RepeatButton
                        Command="ScrollBar.PageUpCommand"
                        Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        x:Name="PART_Thumb"
                        Width="{TemplateBinding Width}"
                        Style="{StaticResource ScrollBarThumbStyle}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton
                        Command="ScrollBar.PageDownCommand"
                        Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.IncreaseRepeatButton>
            </Track>
        </Border>
    </ControlTemplate>
    <!--#endregion-->
    <!--#region 横向滚动条template-->
    <ControlTemplate
        x:Key="HorizontalScrollBar"
        TargetType="{x:Type ScrollBar}">
        <Border
            Height="{DynamicResource ScrollBarThickness}"
            Background="{DynamicResource TrackBackgroundBrush}">
            <Track
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton
                        Command="ScrollBar.PageLeftCommand"
                        Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        x:Name="PART_Thumb"
                        Height="{TemplateBinding Height}"
                        Style="{StaticResource ScrollBarThumbStyle}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton
                        Command="ScrollBar.PageRightCommand"
                        Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.IncreaseRepeatButton>
            </Track>
        </Border>
    </ControlTemplate>
    <!--#endregion-->
    <!--#endregion-->
    <Style
        x:Key="WpScrollBarStyle"
        TargetType="ScrollBar">
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
                <Setter Property="Template" Value="{DynamicResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{DynamicResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>