WPF中有中心点的slider滑动条

这篇具有很好参考价值的文章主要介绍了WPF中有中心点的slider滑动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

想要实现的效果

WPF中有中心点的slider滑动条

原生滑动条

WPF中有中心点的slider滑动条

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

WPF中有中心点的slider滑动条

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

具体的自定样式修改

SliderHorizontal样式

<Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TickBar
      x:Name="TopTick"
      Grid.Row="0"
      Height="4"
      Margin="0,0,0,2"
      Fill="{TemplateBinding Foreground}"
      Placement="Top"
      Visibility="Collapsed" />
    <TickBar
     x:Name="BottomTick"
     Grid.Row="2"
     Height="4"
     Margin="0,2,0,0"
     Fill="{TemplateBinding Foreground}"
     Placement="Bottom"
     Visibility="Collapsed" />
     <Border
     x:Name="TrackBackground"
     Grid.Row="1"
     Height="4.0"
     Margin="5,0"
     VerticalAlignment="center"
     Background="{StaticResource SliderThumb.Track.Border}"
     BorderBrush="{StaticResource SliderThumb.Track.Border}"
     BorderThickness="1">
     <Canvas Margin="-6,-1">
       <Rectangle
        x:Name="PART_SelectionRange"
        Height="4.0"
        Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
        Visibility="Hidden" />
      </Canvas>
     </Border>
      <Ellipse
       Grid.Row="1"
       Width="10"
       Height="10"
       Fill="Black" />
      <Line
      Grid.Row="1"
      Grid.RowSpan="3"
      VerticalAlignment="Center"
      Fill="Purple"
      Stroke="Purple"
      StrokeThickness="3"
      X1="{Binding Path=LineX1, RelativeSource={RelativeSource TemplatedParent}}"
      X2="{Binding Path=LineX2, RelativeSource={RelativeSource TemplatedParent}}"
      Y1="0"
      Y2="0" />
     <Track x:Name="PART_Track" Grid.Row="1">
        <Track.DecreaseRepeatButton>
             <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}" />
              </Track.DecreaseRepeatButton>
               <Track.IncreaseRepeatButton>
              <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}" />
        </Track.IncreaseRepeatButton>
           <Track.Thumb>
            <Thumb
             x:Name="Thumb"
             Width="11"
             Height="18"
             VerticalAlignment="Center"
             Focusable="False"
             OverridesDefaultStyle="True"
             Template="{StaticResource SliderThumbHorizontalDefault}" />
             </Track.Thumb>
           </Track>
</Grid>

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

WPF中有中心点的slider滑动条

  • 所以需要将这里的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;
        }
    }

最终效果

WPF中有中心点的slider滑动条

文章来源地址https://www.toymoban.com/news/detail-476763.html

到了这里,关于WPF中有中心点的slider滑动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UE4中修改模型的中心点

    在UE4中的模型中心点一般都在模型的中点,如果是门这样的模型,我们就不能绕中心点旋转了,不然会觉得很奇怪。但是默认的静态网格体中心点都在物体中心,那我们怎么办?有两种方法: 1.我们就需要移动物体的中心点 2.在三维建模软件中移动模型中心点 下面我们就讨论

    2023年04月08日
    浏览(68)
  • Unity将模型的世界坐标下的中心点归到模型中心

    效果对比: 调整前: 调整后: 需求:由于建模时的疏忽或者网上找的一些测试模型不规范,会出现导入unity中,模型的世界坐标下的中心点与模型实际的位置差出很多。 注意:物体中心点和父物体中心点的设置代码隐忍而异,看模型结构需求 注意:这里模型的位置必须Re

    2024年02月03日
    浏览(59)
  • uniapp小程序地图设置中心点位置向上偏移

    图示: id=\\\"map\\\" ref=\\\"map\\\"

    2024年02月11日
    浏览(67)
  • vue canvas拖拽,鼠标中心点缩放,标记点位等

    vue实现canvas画布建立图片,坐标建立,可进行拖拽,鼠标中心点位缩放,标记点位等功能 直接上源码 仅供学习使用

    2024年02月17日
    浏览(52)
  • 高德API JS 高德地图获取多个坐标点的中心点

    我需要: 在地图上展示多个地点 地图缩放到合适的大小,要求刚好能显示全部点位 边缘留有一部分间隔。 做成如图所示这样。 经过一下午的研究,弄出来了。 需要以下这些 AMap 的类库: AMap.Bounds() 区域 AMap.LngLat() 点坐标(基础点位) AMap.setBounds() 设置地图区域,这会自动

    2024年02月07日
    浏览(59)
  • Unity中如何修改精灵(Sprite)的中心点(Pivot)位置

    在Unity中,精灵(Sprite)是游戏中最常用的图形资源之一。精灵的中心点(Pivot)决定了它的旋转和缩放的中心位置。默认情况下,精灵的中心点位于其包围盒(Bounding Box)的中心。然而,在某些情况下,我们可能需要将精灵的中心点设置为不同的位置,以便更好地适应特定的需求

    2024年02月04日
    浏览(61)
  • Android双指缩放ScaleGestureDetector检测放大因子大图移动到双指中心点ImageView区域中心,Kotlin

      在 Android双击图片放大移动图中双击点到ImageView区域中心,Kotlin-CSDN博客 基础上,这次使用ScaleGestureDetector检测两根手指的缩放动作,记录两根手指的中心点位置,根据ScaleGestureDetector检测到的缩放因子(系数),放大原图,并移动放大前两根手指中心点在原图的位置移动到

    2024年01月23日
    浏览(59)
  • 已知中心点、长宽和旋转角度,求矩形的四个顶点坐标(Python)

    本次实现有几个前提: 已知的信息如下形式:[x_center, y_center, w, h, angle],其中默认 w w w 是矩形最长的边,即 w h w h w h 。 已知的旋转角度 θ theta θ 是矩形的最长边 w w w 相对于 x x x 坐标轴的旋转角度 旋转角度 θ theta θ 的旋转区间在 [ 0 , π ] [0, pi] [ 0 , π ] 可以将情况分为两

    2024年02月05日
    浏览(88)
  • 【赏】three.js如何确定3dtile格式的模型的中心点和缩放比例

    three.js如何确定3dtile格式的模型的中心点和缩放比例。 有多个3dtile格式的模型(tileset.json + b3dm),请问如何确定合适的比例?即在three.js中如何确定像机的位置和缩放比例? 在three.js中确定3D模型的中心点和缩放比例通常需要以下步骤: 加载3D模型。使用three.js的加载器(例如

    2024年02月08日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包