ToB企服应用市场:ToB评测及商务社交产业平台

标题: WPF自定义TreeView滚动条样式 [打印本页]
作者: 来自云龙湖轮廓分明的月亮    时间: 2023-8-8 21:19
标题: WPF自定义TreeView滚动条样式
  根据客户需求，要在TreeView目录树上显示10万+个节点，但是目录树显示10万加节点后，整个页面操作起来非常卡，所以给目录树增加了虚拟化设置。但是虚拟化设置一直没生效，后来经过排查发现是使用的自定义滚动条导致了虚拟化设置没有生效，后来自己写了一个滚动条样式，问题解决了。
目录树虚拟化设置属性
WPF虚拟化技术
https://blog.51cto.com/u_15127512/4364505 
属性说明描述
VirtualizingStackPanel.IsVirtualizing开启虚拟化属性VirtualizingPanel.IsVirtualizing="True" 
VirtualizingStackPanel.VirtualizationMode列表绑定大数据时，显示的速度和流畅性VirtualizingStackPanel.VirtualizationMode="Recycling"
ScrollViewer.CanContentScroll设置像素滚动或者单元格滚动设置true 单元滚动，效率更高。
ScrollViewer.IsDeferredScrollingEnabled如果用户拖动 Thumb 的 ScrollBar 时内容为静止状态，则为 true；否则为 false。 
虚拟化属性 目录树滚动条样式：以下的滚动条样式，是通过原生的滚动条模板样式基础上进行简单修改的，增加了一些注释。
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3.    
  4.     <SolidColorBrush x:Key="ScrollBar.Static.Background" Color="#F0F0F0"/>
  5.     <SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
  6.     <SolidColorBrush x:Key="ScrollBar.Static.Glyph" Color="#606060"/>
  7.     <SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#CDCDCD"/>
  8.     <SolidColorBrush x:Key="ScrollBar.MouseOver.Background" Color="#DADADA"/>
  9.     <SolidColorBrush x:Key="ScrollBar.MouseOver.Border" Color="#DADADA"/>
  10.     <SolidColorBrush x:Key="ScrollBar.MouseOver.Glyph" Color="#000000"/>
  11.     <SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb" Color="#CCCCCC"/>
  12.     <SolidColorBrush x:Key="ScrollBar.Pressed.Background" Color="#606060"/>
  13.     <SolidColorBrush x:Key="ScrollBar.Pressed.Border" Color="#606060"/>
  14.     <SolidColorBrush x:Key="ScrollBar.Pressed.Thumb" Color="#CCCCCC"/>
  15.     <SolidColorBrush x:Key="ScrollBar.Pressed.Glyph" Color="#FFFFFF"/>
  16.     <SolidColorBrush x:Key="ScrollBar.Disabled.Background" Color="#F0F0F0"/>
  17.     <SolidColorBrush x:Key="ScrollBar.Disabled.Border" Color="#F0F0F0"/>
  18.     <SolidColorBrush x:Key="ScrollBar.Disabled.Glyph" Color="#BFBFBF"/>
  19.    
  21.    
  22.    
  23.    
  24.    
  25.    
  26.    
  28.    
  29.     <ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="VerticalBarTemplate">
  30.         <Grid x:Name="Bg" SnapsToDevicePixels="true">
  31.             <Grid.RowDefinitions>
  32.                 <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
  33.                 <RowDefinition Height="0.00001*"/>
  34.                 <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
  35.             </Grid.RowDefinitions>
  36.             
  37.             <Border Background="#EDF2FF" BorderBrush="{TemplateBinding BorderBrush}"
  38.                         BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1"/>
  39.             
  40.             <RepeatButton x:Name="PART_LineUpButton" Command="{x:Static ScrollBar.LineUpCommand}"
  41.                               IsEnabled="{TemplateBinding IsMouseOver}"
  42.                               Style="{StaticResource ScrollBarButton}">
  43.                
  44.                 <Path x:Name="ArrowTop" Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z" Fill="#CCCCCC" Margin="3,4,3,3" Stretch="Uniform"/>
  45.             </RepeatButton>
  46.             
  47.             <Track x:Name="PART_Track" IsDirectionReversed="true"
  48.                        IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
  49.                
  50.                 <Track.DecreaseRepeatButton>
  51.                     
  52.                     <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
  53.                 </Track.DecreaseRepeatButton>
  54.                
  55.                 <Track.IncreaseRepeatButton>
  56.                     
  57.                     <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
  58.                 </Track.IncreaseRepeatButton>
  59.                
  60.                 <Track.Thumb>
  61.                     <Thumb Style="{StaticResource ScrollBarThumbVertical}"/>
  62.                 </Track.Thumb>
  63.             </Track>
  64.             
  65.             <RepeatButton x:Name="PART_LineDownButton" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}">
  66.                
  67.                 <Path x:Name="ArrowBottom" Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z" Fill="#CCCCCC" Margin="3,4,3,3" Stretch="Uniform"/>
  68.             </RepeatButton>
  69.         </Grid>
  70.         <ControlTemplate.Triggers>
  71.             <MultiDataTrigger>
  72.                 <MultiDataTrigger.Conditions>
  73.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}" Value="true"/>
  74.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}" Value="true"/>
  75.                 </MultiDataTrigger.Conditions>
  76.                 <Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
  77.             </MultiDataTrigger>
  78.             <MultiDataTrigger>
  79.                 <MultiDataTrigger.Conditions>
  80.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}" Value="true"/>
  81.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}" Value="true"/>
  82.                 </MultiDataTrigger.Conditions>
  83.                 <Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
  84.             </MultiDataTrigger>
  85.             <MultiDataTrigger>
  86.                 <MultiDataTrigger.Conditions>
  87.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}" Value="true"/>
  88.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}" Value="false"/>
  89.                 </MultiDataTrigger.Conditions>
  90.                 <Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
  91.             </MultiDataTrigger>
  92.             <MultiDataTrigger>
  93.                 <MultiDataTrigger.Conditions>
  94.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}" Value="true"/>
  95.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}" Value="false"/>
  96.                 </MultiDataTrigger.Conditions>
  97.                 <Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
  98.             </MultiDataTrigger>
  99.             <Trigger Property="IsEnabled" Value="false">
  100.                 <Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
  101.                 <Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
  102.             </Trigger>
  103.         </ControlTemplate.Triggers>
  104.     </ControlTemplate>
  106.    
  107.     <ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="HorizontalBarTemplate">
  108.         <Grid x:Name="Bg" SnapsToDevicePixels="true">
  109.             <Grid.ColumnDefinitions>
  110.                 <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
  111.                 <ColumnDefinition Width="0.00001*"/>
  112.                 <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
  113.             </Grid.ColumnDefinitions>
  114.             
  115.             <Border Background="#EDF2FF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1"/>
  116.             
  117.             <RepeatButton x:Name="PART_LineLeftButton" Command="{x:Static ScrollBar.LineLeftCommand}"
  118.                               IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}">
  119.                
  120.                 <Path x:Name="ArrowLeft" Data="M 3.18,7 C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7 z"
  121.                           Fill="#CCCCCC" Margin="3" Stretch="Uniform"/>
  122.             </RepeatButton>
  123.             
  124.             <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
  125.                
  126.                 <Track.DecreaseRepeatButton>
  127.                     
  128.                     <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
  129.                 </Track.DecreaseRepeatButton>
  130.                
  131.                 <Track.IncreaseRepeatButton>
  132.                     
  133.                     <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
  134.                 </Track.IncreaseRepeatButton>
  135.                
  136.                 <Track.Thumb>
  137.                     <Thumb Style="{StaticResource ScrollBarThumbHorizontal}"/>
  138.                 </Track.Thumb>
  139.             </Track>
  140.             
  141.             <RepeatButton x:Name="PART_LineRightButton" Command="{x:Static ScrollBar.LineRightCommand}"
  142.                               Grid.Column="2" IsEnabled="{TemplateBinding IsMouseOver}"
  143.                               Style="{StaticResource ScrollBarButton}">
  144.                
  145.                 <Path x:Name="ArrowRight" Data="M 1.81,7 C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7 z" Fill="#CCCCCC" Margin="3" Stretch="Uniform"/>
  146.             </RepeatButton>
  147.         </Grid>
  148.         <ControlTemplate.Triggers>
  149.             <MultiDataTrigger>
  150.                 <MultiDataTrigger.Conditions>
  151.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/>
  152.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="true"/>
  153.                 </MultiDataTrigger.Conditions>
  154.                 <Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
  155.             </MultiDataTrigger>
  156.             <MultiDataTrigger>
  157.                 <MultiDataTrigger.Conditions>
  158.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/>
  159.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="true"/>
  160.                 </MultiDataTrigger.Conditions>
  161.                 <Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
  162.             </MultiDataTrigger>
  163.             <MultiDataTrigger>
  164.                 <MultiDataTrigger.Conditions>
  165.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/>
  166.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="false"/>
  167.                 </MultiDataTrigger.Conditions>
  168.                 <Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
  169.             </MultiDataTrigger>
  170.             <MultiDataTrigger>
  171.                 <MultiDataTrigger.Conditions>
  172.                     <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/>
  173.                     <Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="false"/>
  174.                 </MultiDataTrigger.Conditions>
  175.                 <Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
  176.             </MultiDataTrigger>
  177.             <Trigger Property="IsEnabled" Value="false">
  178.                 <Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
  179.                 <Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
  180.             </Trigger>
  181.         </ControlTemplate.Triggers>
  182.     </ControlTemplate>
  184.    
  185.    
  187.    
  188. </ResourceDictionary>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4