原文:WPF 带刻度的滑动条实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BYH371256/article/details/83507170

本章讲述：带刻度的水平滑动条实现；主要通过修改Slider的样式实现。

样式主要代码

<Style x:Key="SliderRepeatButtonStyle_Horiz" TargetType="{x:Type RepeatButton}">

	<Setter Property="OverridesDefaultStyle" Value="true"/>

	<Setter Property="IsTabStop" Value="false"/>

	<Setter Property="Height" Value="2"/>

	<Setter Property="Focusable" Value="false"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type RepeatButton}">

				<Rectangle Fill="#2DBDFA"/>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<Style x:Key="SliderRepeatButtonStyle_Horiz1" TargetType="RepeatButton">

	<Setter Property="OverridesDefaultStyle" Value="true"/>

	<Setter Property="IsTabStop" Value="false"/>

	<Setter Property="Height" Value="2"/>

	<Setter Property="Focusable" Value="false"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type RepeatButton}">

				<Rectangle Fill="White"/>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<Geometry x:Key="SliderThumbOuterBorderGeometry">

	M9.5,5 C9.5,7.4852814 7.4852814,9.5 5,9.5 C2.5147186,9.5 0.5,7.4852814 0.5,5 C0.5,2.5147186 2.5147186,0.5 5,0.5 C7.4852814,0.5 9.5,2.5147186 9.5,5 z

</Geometry>

<Style x:Key="HorizontalSliderThumbStyle_Horiz" TargetType="{x:Type Thumb}">

	<Setter Property="Focusable" Value="false"/>

	<Setter Property="OverridesDefaultStyle" Value="true"/>

	<Setter Property="Height" Value="20"/>

	<Setter Property="Width" Value="11"/>

	<Setter Property="Foreground" Value="Transparent"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type Thumb}">

				<Canvas SnapsToDevicePixels="true">

					<Canvas.RenderTransform>

						<TranslateTransform X="0" Y="5.0"/>

					</Canvas.RenderTransform>

					<Path x:Name="Background"  Data="{StaticResource SliderThumbOuterBorderGeometry}" Fill="#FF1F9CF0" />

					<Path x:Name="InnerBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="White"  />

					<Path x:Name="OuterBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="Transparent" />

				</Canvas>

				<ControlTemplate.Triggers>

					<Trigger Property="IsMouseOver" Value="true">

						<Setter Property="Fill" TargetName="Background" Value="#FF29AFF5"/>

						<Setter Property="Stroke" TargetName="OuterBorder" Value="White"/>

					</Trigger>

					<Trigger Property="IsDragging" Value="true">

					</Trigger>

				</ControlTemplate.Triggers>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<Style x:Key="SliderStyle_TrickBar_Horiz" TargetType="{x:Type Slider}">

	<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

	<Setter Property="Background" Value="Transparent"/>

	<Setter Property="Foreground" Value="White"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type Slider}">

				<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

			Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

					<Grid Margin="0">

						<Grid.RowDefinitions>

							<RowDefinition Height="Auto"/>

							<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>

						</Grid.RowDefinitions>

						<TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Top" Grid.Row="0"

					 Minimum="0" Maximum="15" Visibility="Visible"/>

						<TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Bottom"

					 Grid.Row="2" Visibility="Collapsed"/>

						<Track x:Name="PART_Track" Grid.Row="1">

							<Track.DecreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle_Horiz}"/>

							</Track.DecreaseRepeatButton>

							<Track.IncreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle_Horiz1}"

								  HorizontalAlignment="Stretch"/>

							</Track.IncreaseRepeatButton>

							<Track.Thumb>

								<Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle_Horiz}" Margin="0,1,0,0"/>

							</Track.Thumb>

						</Track>

					</Grid>

				</Border>

				<ControlTemplate.Triggers>

					<Trigger Property="IsSelectionRangeEnabled" Value="true">

					</Trigger>

					<Trigger Property="IsKeyboardFocused" Value="true">

						<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>

					</Trigger>

				</ControlTemplate.Triggers>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<Style x:Key="SliderStyle_TrickBarNegative_Horiz" TargetType="{x:Type Slider}">

	<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

	<Setter Property="Background" Value="Transparent"/>

	<Setter Property="Foreground" Value="White"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type Slider}">

				<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

			Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

					<Grid Margin="0">

						<Grid.RowDefinitions>

							<RowDefinition Height="Auto"/>

							<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>

						</Grid.RowDefinitions>

						<TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Top" Grid.Row="0"

					 Minimum="0" Maximum="10" Visibility="Visible"/>

						<TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Bottom"

					 Grid.Row="2" Visibility="Collapsed"/>

						<Track x:Name="PART_Track" Grid.Row="1">

							<Track.DecreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle_Horiz}"/>

							</Track.DecreaseRepeatButton>

							<Track.IncreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle_Horiz1}"

								  HorizontalAlignment="Stretch"/>

							</Track.IncreaseRepeatButton>

							<Track.Thumb>

								<Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle_Horiz}" Margin="0,1,0,0"/>

							</Track.Thumb>

						</Track>

					</Grid>

				</Border>

				<ControlTemplate.Triggers>

					<Trigger Property="IsSelectionRangeEnabled" Value="true">

					</Trigger>

					<Trigger Property="IsKeyboardFocused" Value="true">

						<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>

					</Trigger>

				</ControlTemplate.Triggers>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

引用示例代码

<Slider Margin="2,2" x:Name="DefinitionSlider" Width="250" Minimum="0" Maximum="15" Value="5"

                IsSnapToTickEnabled="True" Style="{StaticResource SliderStyle_TrickBar_Horiz}" />

效果图

WPF 带刻度的滑动条实现的更多相关文章

  1. 【WPF】点击滑动条（Slider），移动滑块（Tick）到鼠标点击的位置

    问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上. 办法:给Slider控件设置属性IsMoveToPointEnabled="True"即 ...

  2. 疯狂JAVA讲义---第十二章：Swing编程（五）进度条和滑动条

    http://blog.csdn.net/terryzero/article/details/3797782 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条 标签: swing编程 ...

  3. WPF 背景颜色渐变的滑动条实现

    原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...

  4. DIV+ul+LI实现表格效果以及div带滑动条

    写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. 【JavaScript吉光片羽】--- 滑动条

    灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条d ...

  6. MFC 滑动条的重绘

    MFC自带的滑动条的样子是这样的. 比较难看,所以需要重绘下,重绘后的样子是这样的. 代码如下: CustomSliderCtr.h #pragma once // CCustomSliderCtr ...

  7. Android 自定义带刻度的seekbar

    自定义带刻度的seekbar 1.布局 <span style="font-family:SimHei;font-size:18px;"><com.imibaby ...

  8. Slider插件（滑动条，拉链）

    Slider插件(滑动条,拉链) 下载地址:http://files.cnblogs.com/elves/Slider.rar 提示:微软AJAX插件中也带此效果!

  9. VC++ 中滑动条（slider控件）使用 [转+补充]

    滑动控件slider是Windows中最常用的控件之一.一般而言它是由一个滑动条,一个滑块和可选的刻度组成,用户可以通过移动滑块在相应的控件中显示对应的值.通常,在滑动控件附近一定有标签控件或编辑框控 ...

随机推荐

  1. kvm 虚拟机

    关于text模式安装的一个问题 http://serverfault.com/questions/257962/kvm-guest-installed-from-console-but-how-to- ...

  2. IOS 缓存思路

    为了提高程序的响应速度,可以考虑使用缓存(内存缓存\硬盘缓存) 第一次请求数据时内存缓存中没有数据硬盘缓存中没有数据 当服务器返回数据时,需要做以下步骤 使用服务器的数据(比如解析.显示) 将服务器的 ...

  3. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  4. servlet的生命周期详解

    一.servlet生命周期原理解析 1.Servlet生命周期分为三个阶段: (1)初始化阶段  调用init()方法 (2)响应客户请求阶段 调用service()方法 (3)终止阶段 调用dest ...

  5. hctf2018wp复现

    1.bottle 登陆网站后存在提交url的地方 测试发生存在如下paload,知识点:1.crlf 2.写一个网站开发的端口小于80,浏览器就不会跳转能执行js(payload只能在火狐浏览器执行) ...

  6. 【node.js】事件循环、EventEmitter

    Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 ...

  7. mean函数一个神代码

    cs231n上的一个代码,能求出准确率: print 'accuracy: %f' % ( np.mean(Yte_predict == Yte) ) >>> a = np.arra ...

  8. PHP面试系列 之Linux（五）---- 案例

    题:如何实现每天0点重新启动服务器? 答: (1)创建定时任务,并进行编辑 crontab -e (2)编写脚本内容 * * * reboot 0分  0时  每日  每月  每周 执行的命令:reb ...

  9. PAT——1031. 查验身份证

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  10. 快速排序及STL中的sort算法

    快速排序基本思想是,对待排序序列进行划分(Partition),一次划分,选择一个元素作为枢轴,然后将所有比枢轴小的元素放到枢轴的左边,将比枢轴大的元素放到枢轴的右边.然后对该枢轴划分的左右子序列分别 ...