WPF自定义Slider样式外观 实现酷狗播放进度条
2024-05-10 14:39:59
自定义滑块左边和右边的样式以及滑块的样式
关键代码有注释说明
效果：
VS2015下测试：
VSBlend生成的模板
<Style x:Key="SliderStyle2" TargetType="{x:Type Slider}"><Setter Property="Stylus.IsPressAndHoldEnabled" Value="False"/><Setter Property="Background" Value="Transparent"/><Setter Property="BorderBrush" Value="Transparent"/><Setter Property="Foreground" Value="#FFE5E5E5"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Slider}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/><TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/><Border x:Name="TrackBackground" BorderBrush="#FFD6D6D6" BorderThickness="1" Background="#FFE7EAEA" Height="4" Margin="5,0" Grid.Row="1" VerticalAlignment="Center"><Canvas Margin="-6,-1"><Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4" Visibility="Hidden"/></Canvas></Border><Track x:Name="PART_Track" Grid.Row="1"><Track.DecreaseRepeatButton><RepeatButton Command="Slider.DecreaseLarge"><RepeatButton.Style><!--这里是滑块左边部分 可以通过设置Height属性与Slider控件保持一致 背景颜色才不会高度不一致--><Style TargetType="{x:Type RepeatButton}"><Setter Property="OverridesDefaultStyle" Value="True"/><!--设置滑块左边部分的背景颜色--><Setter Property="Background" Value="Green"/><Setter Property="Focusable" Value="False"/><Setter Property="Height" Value="5"/><Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RepeatButton}"><Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/></ControlTemplate></Setter.Value></Setter></Style></RepeatButton.Style></RepeatButton></Track.DecreaseRepeatButton><Track.IncreaseRepeatButton><RepeatButton Command="Slider.IncreaseLarge"><RepeatButton.Style><!--滑块右边的部分--><Style TargetType="{x:Type RepeatButton}"><Setter Property="OverridesDefaultStyle" Value="True"/><Setter Property="Background" Value="Transparent"/><Setter Property="Focusable" Value="False"/><Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RepeatButton}"><Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/></ControlTemplate></Setter.Value></Setter></Style></RepeatButton.Style></RepeatButton></Track.IncreaseRepeatButton><Track.Thumb><Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" VerticalAlignment="Center" Width="11"><Thumb.Template><!--滑块部分--><ControlTemplate TargetType="{x:Type Thumb}"><!--可以将ControlTemplate的内容变成Image控件 替换原本的滑块 也可以是其他控件 这里是Image控件--><Image Source="Resources\Slider.png"/></ControlTemplate></Thumb.Template></Thumb></Track.Thumb></Track></Grid></Border><ControlTemplate.Triggers><Trigger Property="TickPlacement" Value="TopLeft"><Setter Property="Visibility" TargetName="TopTick" Value="Visible"/><Setter Property="Template" TargetName="Thumb"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"><Path x:Name="grip" Data="M0,6C0,6 5.5,0 5.5,0 5.5,0 11,6 11,6 11,6 11,18 11,18 11,18 0,18 0,18 0,18 0,6 0,6z" Fill="#FFF0F0F0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="#FFACACAC" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/><Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/></Trigger><Trigger Property="TickPlacement" Value="BottomRight"><Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/><Setter Property="Template" TargetName="Thumb"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"><Path x:Name="grip" Data="M0,12C0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12z" Fill="#FFF0F0F0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="#FFACACAC" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/><Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/></Trigger><Trigger Property="TickPlacement" Value="Both"><Setter Property="Visibility" TargetName="TopTick" Value="Visible"/><Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/></Trigger><Trigger Property="IsSelectionRangeEnabled" Value="True"><Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="Foreground" TargetName="Thumb" Value="Blue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="Orientation" Value="Vertical"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Slider}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/><TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/><Border x:Name="TrackBackground" BorderBrush="#FFD6D6D6" BorderThickness="1" Background="#FFE7EAEA" Grid.Column="1" HorizontalAlignment="Center" Margin="0,5" Width="4"><Canvas Margin="-1,-6"><Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="4"/></Canvas></Border><Track x:Name="PART_Track" Grid.Column="1"><Track.DecreaseRepeatButton><RepeatButton Command="Slider.DecreaseLarge"><RepeatButton.Style><Style TargetType="{x:Type RepeatButton}"><Setter Property="OverridesDefaultStyle" Value="True"/><Setter Property="Background" Value="Transparent"/><Setter Property="Focusable" Value="False"/><Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RepeatButton}"><Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/></ControlTemplate></Setter.Value></Setter></Style></RepeatButton.Style></RepeatButton></Track.DecreaseRepeatButton><Track.IncreaseRepeatButton><RepeatButton Command="Slider.IncreaseLarge"><RepeatButton.Style><Style TargetType="{x:Type RepeatButton}"><Setter Property="OverridesDefaultStyle" Value="True"/><Setter Property="Background" Value="Transparent"/><Setter Property="Focusable" Value="False"/><Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RepeatButton}"><Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/></ControlTemplate></Setter.Value></Setter></Style></RepeatButton.Style></RepeatButton></Track.IncreaseRepeatButton><Track.Thumb><Thumb x:Name="Thumb" Focusable="False" Height="11" OverridesDefaultStyle="True" VerticalAlignment="Top" Width="18"><Thumb.Template><ControlTemplate TargetType="{x:Type Thumb}"><Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"><Path x:Name="grip" Data="M0.5,0.5L18.5,0.5 18.5,11.5 0.5,11.5z" Fill="#FFF0F0F0" Stretch="Fill" Stroke="#FFACACAC"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/><Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Thumb.Template></Thumb></Track.Thumb></Track></Grid></Border><ControlTemplate.Triggers><Trigger Property="TickPlacement" Value="TopLeft"><Setter Property="Visibility" TargetName="TopTick" Value="Visible"/><Setter Property="Template" TargetName="Thumb"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"><Path x:Name="grip" Data="M6,11C6,11 0,5.5 0,5.5 0,5.5 6,0 6,0 6,0 18,0 18,0 18,0 18,11 18,11 18,11 6,11 6,11z" Fill="#FFF0F0F0" Stretch="Fill" Stroke="#FFACACAC"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/><Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/></Trigger><Trigger Property="TickPlacement" Value="BottomRight"><Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/><Setter Property="Template" TargetName="Thumb"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"><Path x:Name="grip" Data="M12,11C12,11 18,5.5 18,5.5 18,5.5 12,0 12,0 12,0 0,0 0,0 0,0 0,11 0,11 0,11 12,11 12,11z" Fill="#FFF0F0F0" Stretch="Fill" Stroke="#FFACACAC"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/><Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/><Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/></Trigger><Trigger Property="TickPlacement" Value="Both"><Setter Property="Visibility" TargetName="TopTick" Value="Visible"/><Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/></Trigger><Trigger Property="IsSelectionRangeEnabled" Value="True"><Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="Foreground" TargetName="Thumb" Value="Blue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Trigger></Style.Triggers></Style>WPF自定义Slider样式外观 实现酷狗播放进度条相关推荐
- Photoshop和WPF双剑配合，打造炫酷个性的进度条控件
现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...
- 直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
- WPF 自定义CheckBox样式
引: WPF 自定义CheckBox样式 - 一叶知秋,知寒冬 - 博客园 Checkbox基本样式 下面的样式包含了CheckBox三种状态的显示,这里CheckBox的三种状态是使用图片代替的.当 ...
- 微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
前言 网上有很多关于 InnerAudioContext.onTimeUpdate 不执行.失效的问题,都导致播放进度条无法做了,本文完美解决. 本文实现了 自定义播放音频控件样式,且支持播放进度条显 ...
- 迷你酷狗播放器 v1.017
迷你酷狗pc版是一款带有音乐搜索功能的音乐播放器,又称之为迷你酷狗播放器,能够支持DirectSound.64比特混音.AddIn插件扩展技术,同时支持高级采样频率转换(SSRC)和多种比特输出方 ...
- 教你实现仿酷狗播放器(附源码)
文章目录 教你实现仿酷狗播放器 CSS HTML & JavaScript 后记 教你实现仿酷狗播放器 CSS <style>@charset "utf-8"; ...
- Android 模仿酷狗播放器（精品源码）
Android 模仿酷狗播放器精品Demo很值得学习特别推荐下载学习! 巨卓网下载地址:http://www.juapk.com/thread-516-1-1.html
- java闪屏怎么制作,Java Swing创建自定义闪屏:在闪屏下画进度条(一)
Java Swing创建自定义闪屏:在闪屏上画进度条(一) 由于本人十分热爱Java Swing,所以平时闲暇之余总是喜欢极尽所能去搜藏一些自认为比较"酷"的Swing代码来研究揣 ...
- vue+element制作音乐播放器播放进度条bug(鼠标拖拽slider滑块滑动到指定位置无效)
最开始bug还没解决时的效果图 bug解决后的效果图 项目场景: 想自己做一个基于vue仿网易云音乐的音乐网站,在制作播放器的时候用到了element ui里面的slider组件,制作完成后发现使用c ...
最新文章
- 跨平台的 .NET 运行环境 Mono 3.2 新特性
- android多语言编码格式,在Android中使用国家/地区代码以编程方式更改语言
- loj10165. 「一本通 5.3 例 3」Windy 数
- Vue学习笔记：使用CLI构建Vue项目
- mysql定时异地备份_MYsql 异地备份脚本
- html项目_Python Selenium项目实战之添加发送HTML测试报告邮件！
- [渝粤教育] 天水师范学院 matlab电子仿真与应用 参考 资料
- spring3: AOP 之 6.2 AOP的HelloWorld
- 教你如何制作浪漫的表白网站 七夕情人节表白网页在线制作(多种款式)
- Smart3D认识引擎（Engine） Smart3D更改工程或模型（Engine）执行路径、更改模型执行优先级（建立tile的顺序）
- Tomcat原理简述
- UCAS - AI学院 - 计算机视觉专项课 - 第6讲 - 课程笔记
- 在网站中接入 客服QQ
- 国内外计算机CPU差异,Intel 9代和10代CPU差别真的很大？配电脑看它选择不后悔
- c语言编辑三色球问题,C语言实例编程:三色球问题
- python走迷宫_Python使用Tkinter实现机器人走迷宫
- 试算平衡表示例图_试算平衡表的编制步骤是什么？
- python创建excel新的表格_python创建Excel表格并添加工作表
- PV，V，UV的概念,采集数据
- 录音转文字工具，支持6大语音识别引擎识别，非常好用的网赚工具！