WPF TreeView自带自定义滚动条

发布于:2025-08-06 ⋅ 阅读:(17) ⋅ 点赞:(0)

放在TreeView.Resources中:

 <Style TargetType="ScrollBar">
     <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
     <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
     <Setter Property="Width" Value="12"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type ScrollBar}">
                 <Grid x:Name="Bg" SnapsToDevicePixels="true">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto"/>
                         <RowDefinition Height="*"/>
                         <RowDefinition Height="Auto"/>
                     </Grid.RowDefinitions>
                     <!-- 定义滚动条的各个部分,如按钮和轨道 -->
                     <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarButtonStyle}" Command="{x:Static ScrollBar.LineUpCommand}" >
                         <Image Source="/Image/UpperIcon.png"/>
                     </RepeatButton>
                     <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                         <Track.DecreaseRepeatButton>
                             <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                         </Track.DecreaseRepeatButton>
                         <Track.Thumb>
                             <Thumb Style="{StaticResource ScrollBarThumbStyle}"/>
                         </Track.Thumb>
                         <Track.IncreaseRepeatButton>
                             <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                         </Track.IncreaseRepeatButton>
                     </Track>
                     <RepeatButton Grid.Row="2" Style="{StaticResource ScrollBarButtonStyle}" Command="{x:Static ScrollBar.LineDownCommand}" >
                         <Image Source="/Image/BelowIcon.png"/>
                     </RepeatButton>
                 </Grid>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

剩下的放上面资源中:

<!-- 按钮样式定义 -->
<Style x:Key="ScrollBarButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="BorderThickness" Value="0"/>
</Style>
<!-- 页面按钮样式定义 -->
<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
</Style>
<!-- 拇指样式定义 -->
<Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="Width" Value="12"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Background="{TemplateBinding Background}" CornerRadius="6">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

最后记得给TreeView设置高度,不然滚动条出不来


网站公告

今日签到

点亮在社区的每一天
去签到