WPF Slider滑動條的顏色修改

来源:https://www.cnblogs.com/hbatjzyb/archive/2018/08/01/9401218.html
-Advertisement-
Play Games

效果如下： 鄙人雖然開發WPF有些時間，但之前一直是一些簡單Template和Style改改之類的工作，並沒有深入研究過。此次為了完成工作，首先也是網上搜了半天，沒有找到合適的代碼直接拷貝（搜索能力待提高），乾脆就直接靜下心來琢磨琢磨。 一開始在界面上就放了Slider，撓撓頭，怎麼修改Templa ...


效果如下：

鄙人雖然開發WPF有些時間，但之前一直是一些簡單Template和Style改改之類的工作，並沒有深入研究過。此次為了完成工作，首先也是網上搜了半天，沒有找到合適的代碼直接拷貝（搜索能力待提高），乾脆就直接靜下心來琢磨琢磨。

一開始在界面上就放了Slider，撓撓頭，怎麼修改Template才能達到效果呢？後來想到了Blend，之前一直聽說很強大的界面設計工具，但是一直沒有用過，就趁此機會就簡單運用了一下。Blend中很牛逼的就是編輯模板，通過創建模板副本，可以看到Slider結構

結合代碼發現，Thumb左右兩邊的ReapeatButton的寬度會隨著Thumb的位置會變化。那問題就變得簡單很多，修改左RepeatButton的Template就可以達到目的，核心代碼如下。 
       <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="{TemplateBinding Background}" 
                                Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                            <!--軌跡，設置Background-->
                            <Border Margin="0,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}" 
                                    VerticalAlignment="center" Height="4.0" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

完整代碼(只是考慮水平的Slider)：

  1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3     
  4     
  5     <SolidColorBrush x:Key="SliderThumb.Static.Foreground" Color="#FFE5E5E5"/>
  6     <SolidColorBrush x:Key="SliderThumb.MouseOver.Background" Color="Gray"/>
  7     <SolidColorBrush x:Key="SliderThumb.MouseOver.Border" Color="#FF7Eb4EA"/>
  8     <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="Gray"/>
  9     <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="Gray"/>
 10     <SolidColorBrush x:Key="SliderThumb.Disabled.Background" Color="#FFF0F0F0"/>
 11     <SolidColorBrush x:Key="SliderThumb.Disabled.Border" Color="#FFD9D9D9"/>
 12     <SolidColorBrush x:Key="SliderThumb.Static.Background" Color="#989898"/>
 13     
 14     <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">
 15         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
 16             <Path x:Name="grip" Data="M 0,6 C0,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,6 z" 
 17                   Fill="{StaticResource SliderThumb.Static.Background}" 
 18                   Stretch="Fill" SnapsToDevicePixels="True" 
 19                   Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
 20         </Grid>
 21         <ControlTemplate.Triggers>
 22             <Trigger Property="IsMouseOver" Value="true">
 23                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
 24                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
 25             </Trigger>
 26             <Trigger Property="IsDragging" Value="true">
 27                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
 28                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
 29             </Trigger>
 30             <Trigger Property="IsEnabled" Value="false">
 31                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
 32                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
 33             </Trigger>
 34         </ControlTemplate.Triggers>
 35     </ControlTemplate>
 36     <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">
 37         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
 38             <Path x:Name="grip" Data="M 0,12 C0,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,12 z" 
 39                   Fill="{StaticResource SliderThumb.Static.Background}"
 40                   Stretch="Fill" 
 41                   SnapsToDevicePixels="True" 
 42                   Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
 43         </Grid>
 44         <ControlTemplate.Triggers>
 45             <Trigger Property="IsMouseOver" Value="true">
 46                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
 47                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
 48             </Trigger>
 49             <Trigger Property="IsDragging" Value="true">
 50                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
 51                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
 52             </Trigger>
 53             <Trigger Property="IsEnabled" Value="false">
 54                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
 55                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
 56             </Trigger>
 57         </ControlTemplate.Triggers>
 58     </ControlTemplate>
 59     <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="#b6b6b6"/>
 60     <SolidColorBrush x:Key="SliderThumb.Track.DecreaseBackground" Color="#45db5e"/>
 61     <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
 62         <Setter Property="OverridesDefaultStyle" Value="true"/>
 63         <Setter Property="Background" Value="Transparent"/>
 64         <Setter Property="Focusable" Value="false"/>
 65         <Setter Property="IsTabStop" Value="false"/>
 66     </Style>
 67 
 68     <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">
 69         <Setter Property="Template">
 70             <Setter.Value>
 71                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 72                     <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
 73                         <Border Margin="1,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}" 
 74                                 VerticalAlignment="center" Height="4.0" />
 75                     </Border>
 76                 </ControlTemplate>
 77             </Setter.Value>
 78         </Setter>
 79     </Style>
 80     
 81     <Style x:Key="IncreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">
 82         <Setter Property="Template">
 83             <Setter.Value>
 84                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 85                     <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
 86                 </ControlTemplate>
 87             </Setter.Value>
 88         </Setter>
 89     </Style>
 90     
 91     <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
 92         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
 93             <Path x:Name="grip" Data="M0 512C0 229.230208 229.805588 0 512 0 794.769792 0 1024 229.805588 1024 512 1024 794.769792 794.194412 1024 512 1024 229.230208 1024 0 794.194412 0 512Z" 
 94                       StrokeThickness="1" Fill="{StaticResource SliderThumb.Static.Background}" Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}"
 95                       Width="18" Height="{Binding Path=Width, RelativeSource={x:Static RelativeSource.Self}}"
 96                       Stretch="Fill" SnapsToDevicePixels="True" UseLayoutRounding="True" VerticalAlignment="Center"/>
 97         </Grid>
 98         <ControlTemplate.Triggers>
 99             <Trigger Property="IsMouseOver" Value="true">
100                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
101             </Trigger>
102             <Trigger Property="IsDragging" Value="true">
103                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
104                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
105             </Trigger>
106             <Trigger Property="IsEnabled" Value="false">
107                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
108                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
109             </Trigger>
110         </ControlTemplate.Triggers>
111     </ControlTemplate>
112 
113     <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
114         <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" 
115                     BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
116             <Grid>
117                 <Grid.RowDefinitions>
118                     <RowDefinition Height="15"/>
119                     <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
120                     <RowDefinition Height="15"/>
121                 </Grid.RowDefinitions>
122                 <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" 
123                              Visibility="Collapsed"/>
124                 <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" 
125                              Visibility="Collapsed"/>
126 
127                 <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Background}" 
128                         BorderThickness="1" Background="{Binding Path=BorderBrush, RelativeSource={x:Static RelativeSource.Self}}" 
129                         Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
130                     <Canvas HorizontalAlignment="Stretch" Margin="0,-1">
131                         <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
132                                    Height="{Binding Path=Height, ElementName=TrackBackground}" Visibility="Hidden"/>
133                     </Canvas>
134                 </Border>
135                 <Track x:Name="PART_Track" Grid.Row="1">
136                     <Track.DecreaseRepeatButton>
137                         <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DecreaseBtn}"/>
138                     </Track.DecreaseRepeatButton>
139                     <Track.IncreaseRepeatButton>
140                         <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource IncreaseBtn}"/>
141                     </Track.IncreaseRepeatButton>
142                     <Track.Thumb>
143                         <Thumb x:Name="Thumb" Focusable="False" Height="20" OverridesDefaultStyle="True" 
144                                Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" 
145                                Width="{Binding Path=Height, RelativeSource={x:Static RelativeSource.Self}}"/>
146                     </Track.Thumb>
147                 </Track>
148             </Grid>
149         </Border>
150         <ControlTemplate.Triggers>
151             <Trigger Property="TickPlacement" Value="TopLeft">
152                 <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
153                 <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>
154                 <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
155             </Trigger>
156             <Trigger Property="TickPlacement" Value="BottomRight">
157                 <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
158                 <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>
159                 <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
160             </Trigger>
161             <Trigger Property="TickPlacement" Value="Both">
162                 <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
163                 <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
164             </Trigger>
165             <Trigger Property="IsSelectionRangeEnabled" Value="true">
166                 <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
167             </Trigger>
168         </ControlTemplate.Triggers>
169     </ControlTemplate>
170 
171     <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
172         <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
173         <Setter Property="Background" Value="Transparent"/>
174         <Setter Property="BorderBrush" Value="Transparent"/>
175         <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
176     </Style>
177 </ResourceDictionary>
View Code

其實最重要的還是控制項的結構，只要對此很熟悉，做出理想的控制項應該不難。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • xddpay.com 個人支付介面接入流程
    作為一個獨立開發者產品需要支付介面是挺麻煩的，支付寶微信都不對個人開放，註冊公司維護成本太高，市面上各種收款工具要麼手續費太高，要麼到賬很慢，體驗很不好。 看到 「小叮噹支付」 這個收款工具，挺有意思的。原理是監控手機微信、支付寶的二維碼掃碼支付到賬通知並回調開發者應用，通知開發者用戶的支付結果。 ...
  • ASP.NET Core 2.0 MVC - 獲取當前登錄用戶信息
    一、前言 上篇實戰完成後，沒想到會有那麼多的圈友給了那麼多的支持，甚至連只是作為代碼倉儲的git上也給了一些小星星，真的感覺很惶恐啊，哈哈哈，畢竟代碼寫的很爛啊。由於上一篇只是大概說了下項目，所以準備寫下這篇詳細說下自己對於獲取當前登錄用戶的設計與實現，原本準備上周末就完成的這篇，結果周六一起來，發 ...
  • 程式員人生之路
    當你選擇電腦或者電子、自控等專業進入大學時，你本來還是有機會從事其它行業的，可你畢業時執迷不悟，仍然選擇了開發做為你的職業，真是自做孽不可活。不過，歡迎你和我一樣加入這個被其它人認為是風光無限的“白領”吧。 如果你不是特別的與人世隔絕，我想你一定看過金老先生的名著《笑傲江湖》吧，裡面有一門十分奇特 ...
  • 語法糖
    字元串: C#中$的用法: 是為了替代string.format();https://www.cnblogs.com/hilolin/p/9123970.htmlhttps://blog.csdn.net/kebi007/article/details/52612610語法糖: C#6.0: htt... ...
  • C# 操作Word 中的OLE——插入、編輯、讀取 OLE
    概述 OLE，Object Linking and Embedding，即對象連接與嵌入。我們在設計程式時，OLE可以用來創建複合文檔，把文字、聲音、圖像、表格、應用程式等類型的信息組合在一起，在Word中，我們可以通過OLE來實現以上要素信息的組合。下麵的示例中將介紹如何通過C# 來操作Word中 ...
  • 細說C#繼承
    簡介 繼承(封裝、多態)是面向對象編程三大特性之一，繼承的思想就是擯棄代碼的冗餘，實現更好的重用性。 繼承從字面上理解，無外乎讓人想到某人繼承某人的某些東西，一個給一個拿。這個語義在生活中，就像 家族繼承財產，爺爺將財產繼承給兒女，兒女在將財產繼承給子孫，有些東西可以繼承有些的東西只繼承給 某人。映 ...
  • 未能載入文件或程式集“Oracle.DataAccess”或它的某一個依賴項.試圖載入格式不正確的程式
    1.今天在部署IIS7應用程式的時候出現了這個錯誤，本以為是發佈的錯誤，其實不然，是IIS中所依賴的項沒有配置正確 2.選擇創建站點中對應的應用池 高級設置 啟用32位應用程式，然後把值改為true。 3.打開cmd命令進行安裝 如果映射存在，請檢查應用程式是否分配給了.NET Framework4 ...
  • ado.net的簡單資料庫操作（一）
    摘要：接下來的幾篇博客將要講到如何使用ado.net實現簡單的資料庫操作，包括增刪改等內容。首先會介紹基礎的資料庫操作，然後以一個實例來進行講解，這個實例會把一個數據表讀取到winform上，然後在winform上有一些按鈕和文本框，通過這些實現對資料庫里的內容的增刪改的操作。我個人比較菜，因此記錄... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類