最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

天天关注：WPF中有中心点的slider滑动条

来源：博客园

想要实现的效果


(资料图片仅供参考)

原生滑动条

需要认识一下滑动条的组成

  • 在原生控件中生成“资源字典”对应的样式
  • 然后在track所在的列进行添砖加瓦
  • 由于track在row="1"的位置，只需要在这个位置上面添加一个Ellipse和Line
  • Ellipse是来描述固定在滑动条上的中心点的位置
  • line是来描述Thumb从中心点移动到其他位置显示的颜色

具体的自定样式修改

SliderHorizontal样式

主要颜色距离的显示通过X1和X2的编辑显示距离

  • 所以需要将这里的X1和X2改成自定义进行绑定
  • 新建自定义控件

自定义控件CentreSlider

public class CentreSlider : Slider {        protected override void OnValueChanged(double oldValue, double newValue) {            base.OnValueChanged(oldValue, newValue);            RefreshSlider();        }        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo) {            base.OnRenderSizeChanged(sizeInfo);            RefreshSlider();        }        public double LineX1 {            get { return (double)GetValue(LineX1Property); }            set { SetValue(LineX1Property, value); }        }        public double LineX2 {            get { return (double)GetValue(LineX2Property); }            set { SetValue(LineX2Property, value); }        }        // Using a DependencyProperty as the backing store for LineX2.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty LineX2Property =            DependencyProperty.Register("LineX2", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));        // Using a DependencyProperty as the backing store for LineX1.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty LineX1Property =            DependencyProperty.Register("LineX1", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));        public void RefreshSlider() {            var Proportion = ActualWidth / Maximum;            LineX1 = ActualWidth / 2;            LineX2 = Value * Proportion;        }    }

最终效果

关键词：