WPF初学之绘制自己需要的Slider（之二）

结合之前的样式，做了一下修改和美化，贴出来！！！

  1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3
  4     <!--Control colors.-->
  5     <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  6     <Color x:Key="ControlLightColor">#4D4D4D</Color>
  7     <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  8     <Color x:Key="ControlDarkColor">#4D4D4D</Color>
  9     <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
 10     <Color x:Key="ControlPressedColor">#FF211AA9</Color>
 11     <Color x:Key="GlyphColor">#FF444444</Color>
 12     <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
 13     <Color x:Key="BorderDarkColor">#FF444444</Color>
 14     <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
 15     <Color x:Key="SliderTrackDarkColor">#4D4D4D</Color>
 16
 17     <!--StyleLeft-->
 18     <Style x:Key="StyleLeft" TargetType="{x:Type RepeatButton}">
 19         <Style.Setters>
 20             <Setter Property="Background" >
 21                 <Setter.Value>
 22                     <LinearGradientBrush  StartPoint="0.5,0"   EndPoint="0.5,1">
 23                         <!--<GradientStop Color="LightBlue" Offset="0"/>-->
 24                         <GradientStop Color="Red" Offset="1"/>
 25                     </LinearGradientBrush>
 26                 </Setter.Value>
 27             </Setter>
 28             <Setter Property="Height" Value="5"/>
 29             <!--<Setter Property="BorderBrush" Value="#4D4D4D"/>
 30             <Setter Property="BorderThickness" Value="0"></Setter>
 31             <Setter Property="Focusable" Value="False"/>-->
 32             <Setter Property="Control.Template">
 33                 <Setter.Value>
 34                     <ControlTemplate TargetType="{x:Type RepeatButton}">
 35                         <Border x:Name="Chrome"
 36                                 BorderBrush="{TemplateBinding BorderBrush}"
 37                                 Background="{TemplateBinding Background}"
 38                                 SnapsToDevicePixels="true">
 39                             <ContentPresenter
 40                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 41                                 Margin="{TemplateBinding Padding}"
 42                                 RecognizesAccessKey="True"
 43                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
 44                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
 45                         </Border>
 46                     </ControlTemplate>
 47                 </Setter.Value>
 48             </Setter>
 49         </Style.Setters>
 50         <Style.Triggers>
 51             <Trigger Property="IsPressed" Value="True">
 52                 <Setter Property="Background">
 53                     <Setter.Value>
 54                         <LinearGradientBrush StartPoint="0.5,0"  EndPoint="0.5,1">
 55                             <GradientStop Color="LightBlue" Offset="0"/>
 56                             <GradientStop Color="SkyBlue" Offset="1"/>
 57                         </LinearGradientBrush>
 58                     </Setter.Value>
 59                 </Setter>
 60             </Trigger>
 61         </Style.Triggers>
 62     </Style>
 63
 64     <!--<StyleRight>-->
 65     <Style x:Key="StyleRight"
 66          TargetType="{x:Type RepeatButton}">
 67         <Setter Property="SnapsToDevicePixels"
 68             Value="true" />
 69         <Setter Property="OverridesDefaultStyle"
 70             Value="true" />
 71         <Setter Property="IsTabStop"
 72             Value="false" />
 73         <Setter Property="Focusable"
 74             Value="false" />
 75         <Setter Property="Template">
 76             <Setter.Value>
 77                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 78                     <Border Background="Transparent" />
 79                 </ControlTemplate>
 80             </Setter.Value>
 81         </Setter>
 82     </Style>
 83
 84     <!--ThumbStyleByImage-->
 85     <Style x:Key="ThumbStyleByImage"
 86          TargetType="{x:Type Thumb}">
 87         <Setter Property="SnapsToDevicePixels"
 88             Value="true" />
 89         <Setter Property="OverridesDefaultStyle"
 90             Value="true" />
 91         <Setter Property="Height"
 92             Value="23" />
 93         <Setter Property="Width"
 94             Value="23" />
 95         <Setter Property="Template">
 96             <Setter.Value>
 97                 <ControlTemplate TargetType="{x:Type Thumb}">
 98                     <Ellipse x:Name="Ellipse"
 99                    StrokeThickness="1">
100                         <Ellipse.Fill>
101                             <SolidColorBrush Color="Green" ></SolidColorBrush>
102                         </Ellipse.Fill>
103                     </Ellipse>
104                 </ControlTemplate>
105             </Setter.Value>
106         </Setter>
107     </Style>
108
109     <!--HSlider-->
110     <ControlTemplate x:Key="HSlider"
111                    TargetType="{x:Type Slider}">
112         <Grid>
113             <Grid.RowDefinitions>
114                 <RowDefinition Height="Auto" />
115                 <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
116                 <RowDefinition Height="Auto" />
117             </Grid.RowDefinitions>
118             <TickBar x:Name="TopTick"
119                SnapsToDevicePixels="True"
120                Placement="Top"
121                Height="4"
122                Visibility="Collapsed">
123                 <TickBar.Fill>
124                     <SolidColorBrush Color="{DynamicResource GlyphColor}" />
125                 </TickBar.Fill>
126             </TickBar>
127             <Border x:Name="TrackBackground"
128               Margin="0"
129               CornerRadius="0"
130               Height="5"
131               Grid.Row="1"
132
133               BorderThickness="0.5">
134                 <Border.BorderBrush>
135                     <LinearGradientBrush StartPoint="0,0"
136                                EndPoint="0,1">
137                         <LinearGradientBrush.GradientStops>
138                             <GradientStopCollection>
139                                 <GradientStop Color="{DynamicResource BorderLightColor}"
140                               Offset="0.0" />
141                                 <GradientStop Color="{DynamicResource BorderDarkColor}"
142                               Offset="1.0" />
143                             </GradientStopCollection>
144                         </LinearGradientBrush.GradientStops>
145                     </LinearGradientBrush>
146                 </Border.BorderBrush>
147                 <Border.Background>
148                     <LinearGradientBrush StartPoint="0,0"
149                                EndPoint="0,1">
150                         <LinearGradientBrush.GradientStops>
151                             <GradientStopCollection>
152                                 <GradientStop Color="{DynamicResource ControlLightColor}"
153                               Offset="0.0" />
154                                 <GradientStop Color="{DynamicResource SliderTrackDarkColor}"
155                               Offset="1.0" />
156                             </GradientStopCollection>
157                         </LinearGradientBrush.GradientStops>
158                     </LinearGradientBrush>
159                 </Border.Background>
160             </Border>
161             <Track Grid.Row="1"
162              x:Name="PART_Track">
163                 <Track.DecreaseRepeatButton>
164                     <RepeatButton Style="{StaticResource StyleLeft}"
165                         Command="Slider.DecreaseLarge" />
166                 </Track.DecreaseRepeatButton>
167                 <Track.Thumb>
168                     <Thumb Style="{StaticResource ThumbStyleByImage}" />
169                 </Track.Thumb>
170                 <Track.IncreaseRepeatButton>
171                     <RepeatButton Style="{StaticResource StyleRight}"
172                         Command="Slider.IncreaseLarge" />
173                 </Track.IncreaseRepeatButton>
174             </Track>
175             <TickBar x:Name="BottomTick"
176                SnapsToDevicePixels="True"
177                Grid.Row="2"
178                Fill="{TemplateBinding Foreground}"
179                Placement="Bottom"
180                Height="4"
181                Visibility="Collapsed" />
182         </Grid>
183         <ControlTemplate.Triggers>
184             <Trigger Property="TickPlacement"
185                Value="TopLeft">
186                 <Setter TargetName="TopTick"
187                 Property="Visibility"
188                 Value="Visible" />
189             </Trigger>
190             <Trigger Property="TickPlacement"
191                Value="BottomRight">
192                 <Setter TargetName="BottomTick"
193                 Property="Visibility"
194                 Value="Visible" />
195             </Trigger>
196             <Trigger Property="TickPlacement"
197                Value="Both">
198                 <Setter TargetName="TopTick"
199                 Property="Visibility"
200                 Value="Visible" />
201                 <Setter TargetName="BottomTick"
202                 Property="Visibility"
203                 Value="Visible" />
204             </Trigger>
205         </ControlTemplate.Triggers>
206     </ControlTemplate>
207
208     <!--MainSlider-->
209     <Style  x:Key="MainSlider" TargetType="{x:Type Slider}">
210         <Setter Property="SnapsToDevicePixels"
211             Value="true" />
212         <Setter Property="OverridesDefaultStyle"
213             Value="true" />
214         <Style.Triggers>
215             <Trigger Property="Orientation"
216                Value="Horizontal">
217                 <Setter Property="MinWidth"
218                 Value="104" />
219                 <Setter Property="MinHeight"
220                 Value="21" />
221                 <Setter Property="Template"
222                 Value="{StaticResource HSlider}" />
223             </Trigger>
224         </Style.Triggers>
225     </Style>
226
227 </ResourceDictionary>

时间： 2024-12-24 23:31:37

WPF初学之绘制自己需要的Slider（之二）的相关文章

WPF初学之绘制自己需要的Slider

最近研究了slider的一些功能.主要是修改他们的样式,换成我们想要的控件模型.进度度显示等.首先说一下slider的组成 Slider 控件允许用户选择值从值的范围. 下面的插图演示了 Slider 控件的一个示例. slider 控件的示例可以通过设置 Slider 控件的属性来自定义该控件. 下表描述可以自定义的 Slider 的一些属性: Slider 的方向,水平或垂直. 沿 Slider 跟踪的刻度线位置. 显示 Slider的当前值的工具提示显示. Thumb 的能力.对齐的滴答

WPF 初学 - Path

使用HttpClient进行网络处理的基本步骤如下: 1.通过get的方式获取到Response对象. CloseableHttpClient httpClient = HttpClients.createDefault(); HttpGet httpGet = new HttpGet("http://www.baidu.com/"); CloseableHttpResponse response = httpClient.execute(httpGet); 2.获取Response对

WPF使用Canvas绘制可变矩形

1.问题以及解决办法最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.(位置信息连接起来是一个个小矩形.) 解决以上问题的大致思路如下:使用canvas进行绘制,把图片作为canvas的背景,在canvas上绘制矩形,类似于qq截图一样,矩形框可以使用鼠标拖动调整大小.然后在记下修改后的位置,提供给后面切割图片使用.目前的关键问题就是实现类似qq截图那样可以拖动的矩形.

WPF初学（一）——布局【良好界面的基础】

由Winform转到WPF的一部分人,很可能忽略掉布局,习惯性的使用固定定位.然而,没有良好的布局,后面界面控件画的再好看,花哨,都不过是鲜花插在牛粪上,很可能始终都是一坨??(呵呵). 闲话少说,首先说说WPF中最常用,其实功能也最强大的布局--Grid,很多时候,偶们只会注意到其最常用这一特点,而其之强大往往被忽略,其强大之处在于他可以替换到其他大部分布局面板,当然使用起来或许没有那些特种需求布局面板方便. 简例:Grid布局3行3列,行等分,列比例为1:2:3 <Grid> <Gr

WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过

WPF中自定义绘制内容

先说结论:实现了在自定义大小的窗口中,加载图片,并在图片上绘制一个矩形框:且在窗口大小改变的情况,保持绘制的矩形框与图片的先对位置不变. 在WinForm中,我们可以很方便地绘制自己需要的内容,在WPF中似乎被限制了,不能够很方便的使用:然后需求有总是奇葩的,所以在这里简单地总结一下. 在WinForm中,如果需要自己绘制,就需要拿到Graphics对象:同样的,我们就希望在WPF也得到一个其同样作用的对象,这个对象就是DrawingContext类的实例对象. 具体来说,就是要重载 UIEle

WP、Win10开发或者WPF开发时绘制自定义窗体~例如：一个手机

WP and Win10 效果:(数字是参考值,和UI无关) <Page x:Class="_05.AllControls._BorderUsePage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using

WPF初学之LinearGradientBrush

LinearGradientBrush 使用线性渐变绘制区域. 线性渐变沿直线定义渐变. 该直线的终点由线性渐变的 StartPoint 和 EndPoint 属性定义.LinearGradientBrush 画笔沿此直线绘制其 GradientStops. 默认的线性渐变是沿对角方向进行的. 默认情况下,线性渐变的 StartPoint 是被绘制区域的左上角 (0,0),其 EndPoint 是被绘制区域的右下角 (1,1). 所得渐变的颜色是沿着对角方向路径插入的. 下图演示对角渐变. 其中

WPF初学之The Current Application instance

这篇主要讲Application.Current属性.在WPF中,我们可以在应用程序域中的任何地方通过Application.Current.MainWindow来获取访问主程序.如何你想获取主程序中的方法,属性,事件等,你就需要把mainwindow转成你的MainWindow窗体. Application.Current.Windows能获取当前打开的window窗口. 1 Window main = Application.Current.MainWindow; 2 MessageBox.