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 ...
最新文章
- RecyclerView显示加载多种布局的原理
- win2008一键配置php mysql_Windows 2008一键安装包配置环境：Windows+IIS+Php+Mysql
- 初识数据流 bit byte char三者的区别 java
- [转]PCM文件格式
- C、C++ 不得宠，微软正开发新的编程语言！
- Delphi 与 DirectX 之 DelphiX(60): TDIB.DoTrace();
- AMD64(x86_64)架构abi文档：中
- 2019 iPad iPhone所有尺寸
- 互联网产品经理的学习计划
- python求数组平均值numpy_计算numpy数组的平均值
- web可嵌入编辑器汇总
- 工业软件CAD、CAE、CAM介绍
- 【UE5】自定义环形进度条、方形进度条
- 2022-2028全球与中国高级计划和排程软件市场现状及未来发展趋势
- 路由器wan口和lan口短接_路由器WAN口和LAN口功能介绍
- 如何撩学计算机的小哥哥,撩小哥哥的套路句子 这些金句绝对让你一撩一个准...
- 怎样快速实现整篇文档中英互译
- 量子信息革命引领未来科技革命 | 科技导报
- 达人评测 赛扬J4105和赛扬N5095选哪个好
- grub2命令 linux启动盘,使用grub2制作多重启动盘(下)