WPF学习：Slider — 冒泡显示值

最新推荐文章于 2025-09-30 09:02:05 发布

原创

最新推荐文章于 2025-09-30 09:02:05 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #学习

文章介绍了如何在WPF中创建一个Slider，当鼠标悬停或滑动时，以冒泡方式显示其Value值。方法一是通过修改Slider的模板，使用Canvas添加“泡”元素并绑定触发器。方法二是利用自定义的FellowPopup控件，跟随目标元素移动，解决了“泡”无法超出窗体显示的问题。文章提供了详细的代码示例和解释。

想做一个下图所示的Slider，以冒泡的方式显示其Value值，该怎么做呢？

在这里插入图片描述

功能要求，当鼠标放在滑块上的时候，冒“泡”显示值；当滑块移动的时候，“泡”跟随移动。

看似简单的功能，但要完美实现，确实要花费不少心思的。

方法一：使用Canvas面板。

改造Slider
Slider的样式改造，比较简单，重写其模板即可。

  <Slider.Template>
            <ControlTemplate TargetType="Slider">
                <Border Name="border" SnapsToDevicePixels="True"
                        Background="{TemplateBinding Panel.Background}" 
                        BorderBrush="{TemplateBinding Border.BorderBrush}" 
                        BorderThickness="{TemplateBinding Border.BorderThickness}" >
                    <Grid>
                        <Border Background="Gray" Height="4" CornerRadius="2"/>
                        <Track Name="PART_Track" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton>
                                    <RepeatButton.Template>
                                        <ControlTemplate TargetType="RepeatButton">
                                            <Border Height="4" CornerRadius="2" Background="#FF006CBE"/>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                            </Track.DecreaseRepeatButton>

                            <Track.Thumb>
                                <Thumb Name="thumb" VerticalAlignment="Center" Focusable="False">
                                    <Thumb.Template>
                                        <ControlTemplate TargetType="Thumb">
                                            <Grid>
                                                <Ellipse Name="thumbEllipse" Width="10" Height="10" Fill="White" StrokeThickness="1" Stroke="#FF006CBE" />
                                            </Grid>
                                        </ControlTemplate>
                                    </Thumb.Template>
                                </Thumb>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Slider.Template>
    </Slider>

添加“泡”
很明显，这个“泡”的形状、文字都是一个元素，因此需要使用面板来将两个元素组合起来。这里最好使用Canvas，因为它的子元素是绝对定位的，可以通过Canvas.Left、Canvas.Top等属性安排子元素的位置，且Canvas也不会影响父元素的布局。因此将Slider的模板继续改造一下，如下所示：

 <Slider Name="slider" Width="255">
        <Slider.Template>
            <ControlTemplate TargetType="Slider">
                <Border Name="border" SnapsToDevicePixels="True"
                        Background="{TemplateBinding Panel.Background}" 
                        BorderBrush="{TemplateBinding Border.BorderBrush}" 
                        BorderThickness="{TemplateBinding Border.BorderThickness}" >
                    <Grid>
                        <Border Background="Gray" Height="4" CornerRadius="2"/>
                        <Track Name="PART_Track" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton>
                                    <RepeatButton.Template>
                                        <ControlTemplate TargetType="RepeatButton">
                                            <Border Height="4" CornerRadius="2" Background="#FF006CBE"/>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                            </Track.DecreaseRepeatButton>

                            <Track.Thumb>
                                <Thumb Name="thumb" VerticalAlignment="Center" Focusable="False">
                                    <Thumb.Template>
                                        <ControlTemplate TargetType="Thumb">
                                            <Grid>
                                                <Ellipse Name="thumbEllipse" Width="10" Height="10" Fill="White" StrokeThickness="1" Stroke="#FF006CBE" />
                                                <Canvas Name="canvas" Opacity="0">
                                                    <Grid Canvas.Bottom="10" Canvas.Left="-8">
                                                        <Path Width="25" Stretch="Uniform" Fill="White" Stroke="#FF006CBE" StrokeThickness="1" Data="M172,633.14a339.4,339.4,0,0,1-169.9-294C2.13,151.76,154.2-.29,341.57-.29S681,151.76,681,339.11a339.38,339.38,0,0,1-169.9,294h0a183.88,183.88,0,0,0-84.27,106.38h0l-85.26,283.61L256.3,739.52A183.88,183.88,0,0,0,172,633.14Z"/>
                                                        <TextBlock HorizontalAlignment="Center" Margin="0,5,0,0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}, Path=Value, Converter={S