WPF雙滑塊控制元件以及強制捕獲滑鼠事件焦點

效果

概述

最近有個小需求要用雙滑塊表示一個取值范圍,于是就簡單做了個用戶控制元件,在此記錄下.

使用矩形Rectangle表示范圍,橢圓Ellipse表示滑塊,使用Canvas控制滑塊的左右移動.

橢圓的滑鼠按下事件里強制獲取滑鼠事件焦點,避免移動過快或移出控制元件范圍時,滑塊就不跟著跑了.橢圓的滑鼠抬起事件釋放強制獲取滑鼠事件焦點

代碼部分

需求比較簡單,只定義了4個依賴屬性,范圍的最大值和最小值,取值的最大值和最小值.

接下來就是計算滑塊和高亮矩形的位置,計算時注意減去橢圓Ellipse控制元件(圓)的半徑,使圓心對準值,而不是左側對準值.

滑鼠移動的時候,計算當前位置對應的值,去改變依賴屬性的值:

 1         private void ell_MouseMove(object sender, MouseEventArgs e)
 2         {
 3             if (e.LeftButton == MouseButtonState.Pressed)
 4             {
 5                 double percentage = e.GetPosition(rect).X / rect.ActualWidth;
 6                 double value = https://www.cnblogs.com/tsliwei/archive/2022/07/04/(Maximum - Minimum) * percentage + Minimum;
 7                 if (_ellFromPressed)
 8                 {
 9                     MinValue = https://www.cnblogs.com/tsliwei/archive/2022/07/04/(int)value;
10 
11                 }
12                 if (_ellToPressed)
13                 {
14                     MaxValue = https://www.cnblogs.com/tsliwei/archive/2022/07/04/(int)value;
15                 }
16             }
17         }

依賴屬性的值變化,引起滑塊的位置變化和高亮滑塊寬度和位置的變化:

 1         //最小值變化
 2         private void MinValuePropertyChanged()
 3         {
 4             if (MinValue < Minimum)
 5             {
 6                 MinValue =https://www.cnblogs.com/tsliwei/archive/2022/07/04/ Minimum;
 7                 return;
 8             }
 9             if (MinValue > MaxValue)
10             {
11                 MaxValue =https://www.cnblogs.com/tsliwei/archive/2022/07/04/ MinValue;
12             }
13             //滑塊位置變化
14             _offsetFrom = (MinValue - Minimum) * rect.ActualWidth / (Maximum - Minimum) - 8;
15             Canvas.SetLeft(ellFrom, _offsetFrom);
16             //高亮矩形長度和位置的變化
17             if (_offsetTo != -1)
18             {
19                 double diff = _offsetTo - _offsetFrom;
20                 if (diff >= 0)
21                 {
22                     rectHighLight.Width = diff;
23                     Canvas.SetLeft(rectHighLight, _offsetFrom);
24                 }
25             }
26         }
27 
28         //最大值變化
29         private void MaxValuePropertyChanged()
30         {
31             if (MaxValue > Maximum)
32             {
33                 MaxValue =https://www.cnblogs.com/tsliwei/archive/2022/07/04/ Maximum;
34                 return;
35             }
36             if (MaxValue < MinValue)
37             {
38                 MinValue =https://www.cnblogs.com/tsliwei/archive/2022/07/04/ MaxValue;
39             }
40             //滑塊位置變化
41             _offsetTo = (MaxValue - Minimum) * rect.ActualWidth / (Maximum - Minimum) - 8;
42             Canvas.SetLeft(ellTo, _offsetTo);
43             //高亮矩形長度和位置的變化
44             if (_offsetFrom != -1)
45             {
46                 double diff = _offsetTo - _offsetFrom;
47                 if (diff >= 0)
48                 {
49                     rectHighLight.Width = diff;
50                     Canvas.SetLeft(rectHighLight, _offsetFrom);
51                 }
52             }
53         }

取值的TextBox沒有封裝在用戶控制元件里,是單獨的兩個TextBox跟依賴屬性雙向系結的.注意系結的時候觸發方式最好不要用PropertyChanged,沒有防抖效果,不然體驗不是很好.回車觸發就可以了.

前臺雙向系結:

1         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
2             <local:DoubleThumbSlider x:Name="dts" Width="500" Minimum="100" Maximum="200"></local:DoubleThumbSlider>
3             <TextBox Name="tMin" Width="48" Text="{Binding ElementName=dts,Path=MinValue,UpdateSourceTrigger=Explicit,Mode=TwoWay}" PreviewKeyUp="tbox_PreviewKeyUp"></TextBox>
4             <TextBlock Margin="5,0" Text="-"></TextBlock>
5             <TextBox Name="tMax" Width="48" Text="{Binding ElementName=dts,Path=MaxValue,UpdateSourceTrigger=Explicit,Mode=TwoWay}" PreviewKeyUp="tbox_PreviewKeyUp"></TextBox>
6         </StackPanel>

后臺回車觸發:

1         private void tbox_PreviewKeyUp(object sender, KeyEventArgs e)
2         {
3             if (e.Key == Key.Enter)
4             {
5                 TextBox tbox = (TextBox)sender;
6                 var binding = tbox.GetBindingExpression(TextBox.TextProperty);
7                 binding.UpdateSource();
8             }
9         }

 原始碼下載:DoubleThumbSlider.zip

參考連接:

1.https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.uielement.capturemouse?view=windowsdesktop-6.0

標籤：.NET技术

上一篇：為什么在自定義鉤子反應之前必須使用“使用”？

下一篇：c# 實作定義一套中間SQL可以跨庫執行的SQL陳述句