C# WPF ListBox或Listview的横竖滚动条的Style怎么修改可以实现如下图效果

2013-02-26 03:18:18 4.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

叶曦昊Leaf 墨衍会员 · AI 创作全网分发关注 + 加入社区

【WPF应用30】WPF中的ListBox控件详解 WPF中的ListBox控件详解阅读详情

滚动条效果图

...全文

WPF/C#：让绘制的图形可以被选中并将信息显示在ListBox中本文通过一个小示例，跟大家介绍了如何在WPF上绘制矩形，并在其中添加文本，同时也介绍了ListBox的使用，通过数据绑定与数据模板显示我们选中的单元格内的文本信息。希望对与我一样正在学习WPF或者对WPF感兴趣的同学有所帮助。阅读详情

叶曦昊Leaf

C# 111,128 成员 642,536 内容

+ 关注 + 加入社区

切换为时间正序

ariesget 2013-02-26

打赏
举报

引用 2 楼 yexihao 的回复:

引用楼主 yexihao 的回复:本帖最后由 yexihao 于 2013-02-26 15:29:30 编辑滚动条效果图 C# WPF 滚动条Style样式 listview ……

你图片的路径不对吧。自己看报错的提示啊。。。

叶曦昊Leaf 2013-02-26

打赏
举报

引用 1 楼 ariesget 的回复:

写个ScrollBar的Style，修改模板从这个图片上截出几段来分别作为RepeatButton跟Track的背景，然后写个ScrollViewer的样式里面应用这个ScrollBar的样式，再写个ListBox，Listview的样式里面使用ScrollViewer的样式。可以参照Blend里的样例样式自己改下就行 Plain Text code?1234567……

请问图片应该怎么加进去就是两头的小黑三角我之前是重新写的Style <Style x:Key="ScrollBarLineButtonTop" TargetType="{x:Type RepeatButton}"> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Focusable" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Border x:Name="Border" Margin="0" CornerRadius="0" BorderBrush="{StaticResource BorderColor}" BorderThickness="0"> <Border.Background> <ImageBrush ImageSource="Gs/Images/Button/Next.png"/> </Border.Background> <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource NormalColor}" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="Border" Property="Background" Value="{StaticResource NormalColor}" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{StaticResource NormalColor}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 红色部分提示不正确

叶曦昊Leaf 2013-02-26

打赏
举报

引用楼主 yexihao 的回复:

本帖最后由 yexihao 于 2013-02-26 15:29:30 编辑滚动条效果图 C# WPF 滚动条Style样式 listview wpf ……

ariesget 2013-02-26

打赏
举报

写个ScrollBar的Style，修改模板从这个图片上截出几段来分别作为RepeatButton跟Track的背景，然后写个ScrollViewer的样式里面应用这个ScrollBar的样式，再写个ListBox，Listview的样式里面使用ScrollViewer的样式。可以参照Blend里的样例样式自己改下就行


<!-- Simple ScrollBar  它使用了 SimpleThumb、SimpleRepeatButton 和 SimpleScrollRepeatButton -->
	
	<Style x:Key="SimpleScrollBar" TargetType="{x:Type ScrollBar}">
		<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollBar}">
					<Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{TemplateBinding Background}">
						<Grid.RowDefinitions>
							<RowDefinition MaxHeight="18"/>
							<RowDefinition Height="0.00001*"/>
							<RowDefinition MaxHeight="18"/>
						</Grid.RowDefinitions>
						
						<RepeatButton x:Name="DecreaseRepeat" Style="{DynamicResource SimpleRepeatButton}" Command="ScrollBar.LineUpCommand">
							<Grid>
								<Path x:Name="DecreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"/>
							</Grid>
						</RepeatButton>
						
						<!-- Track 是一种特殊的布局容器，可调整用于在其一侧执行跳转滚动的 thumb 和 repeat button 的大小 -->
						<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
							<Track.Thumb>
								<Thumb Style="{DynamicResource SimpleThumbStyle}"/>
							</Track.Thumb>
							<Track.IncreaseRepeatButton>
								<RepeatButton x:Name="PageUp" Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand"/>
							</Track.IncreaseRepeatButton>
							<Track.DecreaseRepeatButton>
								<RepeatButton x:Name="PageDown" Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand"/>
							</Track.DecreaseRepeatButton>
						</Track>
						
						<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Style="{DynamicResource SimpleRepeatButton}" Command="ScrollBar.LineDownCommand">
							<Grid>
								<Path x:Name="IncreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z"/>
							</Grid>
						</RepeatButton>
					</Grid>
					
					<!-- 它对 ScrollBar 使用一个模板，并将其旋转为“水平”
					它还会更改命令，使其执行“向左”和“向右”命令，而不是执行“向上”和“向下”命令 -->
					<ControlTemplate.Triggers>
						<Trigger Property="Orientation" Value="Horizontal">

							<!-- 将 ScrollBar 从“垂直”旋转为“水平” -->
							<Setter Property="LayoutTransform" TargetName="GridRoot">
								<Setter.Value>
									<RotateTransform Angle="-90"/>
								</Setter.Value>
							</Setter>
							
							<!-- Track 在内部绑定到“方向”，因此我们需要将其旋转回“垂直” -->
							<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>
					
							<!-- 更改命令，以执行“水平”命令 -->
							<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
							<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
							<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
							<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	
	<!-- Simple ScrollViewer 
	ScrollViewer 是 Grid 控件，该控件包含 ContentPresenter 以及 Horizontal 和 Vertical ScrollBar 
	它可供 ListBox、MenuItem、ComboBox 和 TreeView 使用 -->
	<Style x:Key="SimpleScrollViewer" TargetType="{x:Type ScrollViewer}" BasedOn="{x:Null}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollViewer}">
					<Grid Background="{TemplateBinding Background}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="*"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						<ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>
						
						<!-- ScrollBars 的可见性通过控件的实现来控制 -->
						<ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" x:Name="PART_HorizontalScrollBar" Style="{DynamicResource SimpleScrollBar}" Orientation="Horizontal" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" />
						<ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" x:Name="PART_VerticalScrollBar" Style="{DynamicResource SimpleScrollBar}" Orientation="Vertical" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}" />
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	
	<!-- Simple ListBox - 它使用 SimpleScrollViewer 来使项滚动，并使用 SimpleListBoxItem 定义每个项的外观 -->
	<Style x:Key="SimpleListBox" TargetType="{x:Type ListBox}">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
		<Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}"/>
		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ListBox}">
					<Grid>
						<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
						<ScrollViewer Margin="1" Style="{DynamicResource SimpleScrollViewer}" Focusable="false" Background="{TemplateBinding Background}">
							
							<!-- StackPanel 用来显示子级，方法是将 IsItemsHost 设置为 True -->
							<StackPanel Margin="2" IsItemsHost="true"/>
							
						</ScrollViewer>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
							<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
						</Trigger>
						<Trigger Property="IsGrouping" Value="true">
							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

C# WPF ListBox或Listview的横竖滚动条的Style怎么修改可以实现如下图效果

相关推荐