詳解WPF雙滑塊控件的使用和強(qiáng)制捕獲鼠標(biāo)事件焦點(diǎn)
效果
概述
最近有個(gè)小需求要用雙滑塊表示一個(gè)取值范圍,于是就簡(jiǎn)單做了個(gè)用戶(hù)控件,在此記錄下.
使用矩形Rectangle表示范圍,橢圓Ellipse表示滑塊,使用Canvas控制滑塊的左右移動(dòng).
橢圓的鼠標(biāo)按下事件里強(qiáng)制獲取鼠標(biāo)事件焦點(diǎn),避免移動(dòng)過(guò)快或移出控件范圍時(shí),滑塊就不跟著跑了.橢圓的鼠標(biāo)抬起事件釋放強(qiáng)制獲取鼠標(biāo)事件焦點(diǎn)
代碼部分
需求比較簡(jiǎn)單,只定義了4個(gè)依賴(lài)屬性,范圍的最大值和最小值,取值的最大值和最小值.
接下來(lái)就是計(jì)算滑塊和高亮矩形的位置,計(jì)算時(shí)注意減去橢圓Ellipse控件(圓)的半徑,使圓心對(duì)準(zhǔn)值,而不是左側(cè)對(duì)準(zhǔn)值.
鼠標(biāo)移動(dòng)的時(shí)候,計(jì)算當(dāng)前位置對(duì)應(yīng)的值,去改變依賴(lài)屬性的值:
private void ell_MouseMove(object sender, MouseEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { double percentage = e.GetPosition(rect).X / rect.ActualWidth; double value = (Maximum - Minimum) * percentage + Minimum; if (_ellFromPressed) { MinValue = (int)value; } if (_ellToPressed) { MaxValue = (int)value; } } }
依賴(lài)屬性的值變化,引起滑塊的位置變化和高亮滑塊寬度和位置的變化:
//最小值變化 private void MinValuePropertyChanged() { if (MinValue < Minimum) { MinValue = Minimum; return; } if (MinValue > MaxValue) { MaxValue = MinValue; } //滑塊位置變化 _offsetFrom = (MinValue - Minimum) * rect.ActualWidth / (Maximum - Minimum) - 8; Canvas.SetLeft(ellFrom, _offsetFrom); //高亮矩形長(zhǎng)度和位置的變化 if (_offsetTo != -1) { double diff = _offsetTo - _offsetFrom; if (diff >= 0) { rectHighLight.Width = diff; Canvas.SetLeft(rectHighLight, _offsetFrom); } } } //最大值變化 private void MaxValuePropertyChanged() { if (MaxValue > Maximum) { MaxValue = Maximum; return; } if (MaxValue < MinValue) { MinValue = MaxValue; } //滑塊位置變化 _offsetTo = (MaxValue - Minimum) * rect.ActualWidth / (Maximum - Minimum) - 8; Canvas.SetLeft(ellTo, _offsetTo); //高亮矩形長(zhǎng)度和位置的變化 if (_offsetFrom != -1) { double diff = _offsetTo - _offsetFrom; if (diff >= 0) { rectHighLight.Width = diff; Canvas.SetLeft(rectHighLight, _offsetFrom); } } }
取值的TextBox沒(méi)有封裝在用戶(hù)控件里,是單獨(dú)的兩個(gè)TextBox跟依賴(lài)屬性雙向綁定的.注意綁定的時(shí)候觸發(fā)方式最好不要用PropertyChanged,沒(méi)有防抖效果,不然體驗(yàn)不是很好.回車(chē)觸發(fā)就可以了.
前臺(tái)雙向綁定:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <local:DoubleThumbSlider x:Name="dts" Width="500" Minimum="100" Maximum="200"></local:DoubleThumbSlider> <TextBox Name="tMin" Width="48" Text="{Binding ElementName=dts,Path=MinValue,UpdateSourceTrigger=Explicit,Mode=TwoWay}" PreviewKeyUp="tbox_PreviewKeyUp"></TextBox> <TextBlock Margin="5,0" Text="-"></TextBlock> <TextBox Name="tMax" Width="48" Text="{Binding ElementName=dts,Path=MaxValue,UpdateSourceTrigger=Explicit,Mode=TwoWay}" PreviewKeyUp="tbox_PreviewKeyUp"></TextBox> </StackPanel>
后臺(tái)回車(chē)觸發(fā):
private void tbox_PreviewKeyUp(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { TextBox tbox = (TextBox)sender; var binding = tbox.GetBindingExpression(TextBox.TextProperty); binding.UpdateSource(); } }
源碼下載:DoubleThumbSlider.zip 提取碼:1234
到此這篇關(guān)于詳解WPF雙滑塊控件的使用和強(qiáng)制捕獲鼠標(biāo)事件焦點(diǎn)的文章就介紹到這了,更多相關(guān)WPF雙滑塊控件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Linq利用Distinct去除重復(fù)項(xiàng)問(wèn)題(可自己指定)
這篇文章主要介紹了Linq利用Distinct去除重復(fù)項(xiàng)問(wèn)題(可自己指定),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01C#控制臺(tái)帶參數(shù)程序源碼編寫(xiě)實(shí)例講解
像ipconfig /all 這樣的CMD命令想必大家都知道,但是很多童鞋可能不知道怎么寫(xiě)這樣的控制臺(tái)帶參數(shù)的程序,需要的朋友可以了解下2012-12-12C#結(jié)合JavaScript實(shí)現(xiàn)上傳視頻到騰訊云點(diǎn)播平臺(tái)的操作方法
這篇文章主要介紹了C#結(jié)合JavaScript實(shí)現(xiàn)上傳視頻到騰訊云點(diǎn)播平臺(tái),上傳視頻功能,主要要解決兩個(gè)問(wèn)題,一是在服務(wù)端通過(guò)C#生成簽名和SDKID,二是在客戶(hù)端通過(guò)JavaScript上傳視頻到騰訊云點(diǎn)播服務(wù)器,感興趣的朋友跟隨小編一起看看吧2023-11-11C#中Forms.Timer、Timers.Timer、Threading.Timer的用法分析
這篇文章主要介紹了C#中Forms.Timer、Timers.Timer、Threading.Timer的用法分析,以實(shí)例形式較為詳細(xì)的講述了.NET Framework里面提供的三種Timer具體用法,需要的朋友可以參考下2014-10-10