想做一个下图所示的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={StaticResource double2Int}}"/>
</Grid>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="canvas" Property="Opacity" Value="1"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="canvas" Property="Opacity" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Slider.Template>
</Slider>
红色部分为添加的代码。有两点需要注意：
-
TextBlock.Text属性的绑定，使用了RelativeSource模式。
-
记得要添加触发器（Trigger），使的Canvas能在指定的状态下显示出来。
以这种方式改的Slider控件，有一个问题：“泡”不能超出窗体显示。也就是说当滑块处于屏幕的边缘时，这个“泡”是显示不出来的。
方法二：使用Window
WPF框架中有Popup控件和Tooltip控件。通过微软的源代码可知，他们的实现都是使用Window控件。即在一定的条件下打开一个Windows，并显示内容，在另一个条件下，则关闭这个Window。
根据这个思路，就可以自定义一个控件，并实现更多的功能
- 自定义控件
控件类：FellowPopup，其他的几个类为辅助类。
/// <summary>
/// 坐标系转换类
/// </summary>
public static class CoordinateHelper
{
/// <summary>
/// 将用户空间坐标系的点，转换为屏幕坐标系的点。
/// 已考虑系统Dpi问题
/// </summary>
/// <param name="relativeTo">可视化对象。它的坐标系原点在左上角</param>
/// <param name="point">在可视化对象坐标系中的点</param>
/// <returns></returns>
public static Point ClientToScreen(Visual relativeTo, Point point)
{
if (relativeTo == null) return point;
Point targetToScreen = relativeTo.PointToScreen(point); // 将point的点转换为屏幕坐标系的点
var source = PresentationSource.FromVisual(relativeTo);
double dpiX = 96.0, dpiY = 96.0;
if (source?.CompositionTarget != null)
{
dpiX = 96.0 * source.CompositionTarget.TransformToDevice.M11;
dpiY = 96.0 * source.CompositionTarget.TransformToDevice.M22;
}
return new Point(targetToScreen.X * 96.0 / dpiX, targetToScreen.Y * 96 / dpiY);
}
}
public static class DependencyPropertyHelper
{
/// <summary>
/// 为依赖属性注册值发生改变时的回调方法
/// </summary>
/// <param name="Register">含有依赖属性的对象</param>
/// <param name="dependencyProperty">依赖属性</param>
/// <param name="action">要注册的值发生改变时的回调方法</param>
/// <param name="runOnceImmediately">是否立即执行一次</param>
public static void RegisterDependencyPropertyChanged(this DependencyObject Register, DependencyProperty dependencyProperty, EventHandler action, bool runOnceImmediately = false)
{
DependencyPropertyDescriptor obj = DependencyPropertyDescriptor.FromProperty(dependencyProperty, Register.GetType());
if(obj != null) obj.AddValueChanged(Register, action);
if(runOnceImmediately) action?.Invoke(Register,new EventArgs());
}
}
/// <summary>
/// 放置模式
/// </summary>
public enum PlacementMode
{
/// <summary>
/// 顶部靠左
/// </summary>
TopLeft,
/// <summary>
/// 顶部居中
/// </summary>
TopMiddle,
/// <summary>
/// 顶部靠右
/// </summary>
TopRight,
/// <summary>
/// 左侧居中
/// </summary>
LeftMiddle,
/// <summary>
/// 右侧居中
/// </summary>
RightMiddle,
/// <summary>
/// 底部靠左
/// </summary>
BottomLeft,
/// <summary>
/// 底部居中
/// </summary>
BottomMiddle,
/// <summary>
/// 底部靠右
/// </summary>
BottomRight
}
/// <summary>
/// 可跟随控件移动的弹出提示框。
/// </summary>
public class FellowPopup : ContentControl
{
private Window _popupWnd;
/// <summary>
/// 水平位置偏移量
/// </summary>
public double HorizontalOffset
{
get => (double)GetValue(HorizontalOffsetProperty);
set => SetValue(HorizontalOffsetProperty, value);
}
internal static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.Register(
"HorizontalOffset", typeof(double), typeof(FellowPopup), new PropertyMetadata(0.0d, OnValueChanged));
/// <summary>
/// 垂直偏移量
/// </summary>
public double VerticalOffset
{
get => (double)GetValue(VerticalOffsetProperty);
set => SetValue(VerticalOffsetProperty, value);
}
internal static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.Register(
"VerticalOffset", typeof(double), typeof(FellowPopup), new PropertyMetadata(0.0d, OnValueChanged));
/// <summary>
/// 放置位置
/// </summary>
public PlacementMode Placement
{
get => (PlacementMode)GetValue(PlacementProperty);
set => SetValue(PlacementProperty, value);
}
internal static readonly DependencyProperty PlacementProperty = DependencyProperty.Register(
"Placement", typeof(PlacementMode), typeof(FellowPopup), new PropertyMetadata(PlacementMode.BottomRight,OnValueChanged));
/// <summary>
/// 放置的目标元素
/// </summary>
public FrameworkElement PlacementTarget
{
get => (FrameworkElement)GetValue(PlacementTargetProperty);
set => SetValue(PlacementTargetProperty, value);
}
internal static readonly DependencyProperty PlacementTargetProperty = DependencyProperty.Register(
"PlacementTarget", typeof(FrameworkElement), typeof(FellowPopup), new PropertyMetadata(null,OnValueChanged));
private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FellowPopup popup = (FellowPopup)d;
popup.UpdateLocation();
}
/// <summary>
/// 是否打开。当其为true时，则显示提示框，false则不显示提示框
/// </summary>
public bool IsOpen
{
get => (bool)GetValue(IsOpenProperty);
set => SetValue(IsOpenProperty, value);
}
internal static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
"IsOpen", typeof(bool), typeof(FellowPopup), new PropertyMetadata(false,OnIsOpenChanged));
private static void OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FellowPopup fp = d as FellowPopup;
if((bool)e.NewValue ) fp.Open();
else fp.Close();
}
#region 触发位置更新
/// <summary>
/// 触发位置更新的控件
/// </summary>
public FrameworkElement TriggerElement
{
get => (FrameworkElement)GetValue(TriggerElementProperty);
set => SetValue(TriggerElementProperty, value);
}
internal static readonly DependencyProperty TriggerElementProperty = DependencyProperty.Register(
"TriggerElement", typeof(UIElement), typeof(FellowPopup), new PropertyMetadata(null, OnTriggerChanged));
/// <summary>
/// 触发位置更新的控件的属性
/// 此属性应该是TriggerElement的属性。
/// 当此属性的值发生变化时，会触发FellowPopup的UpdateLocation方法。
/// </summary>
public DependencyProperty TriggerProperty
{
get => (DependencyProperty)GetValue(TriggerPropertyProperty);
set => SetValue(TriggerPropertyProperty, value);
}
internal static readonly DependencyProperty TriggerPropertyProperty = DependencyProperty.Register(
"TriggerProperty", typeof(DependencyProperty), typeof(FellowPopup), new PropertyMetadata(null, OnTriggerChanged));
private static void OnTriggerChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FellowPopup fp = (FellowPopup)d;
if (fp.TriggerElement == null || fp.TriggerProperty == null) return;
// 如果定义属性的类，与TriggerElement类相同，或者TriggerElement类是它的子类
Type propertyType = fp.TriggerProperty.OwnerType;
Type elementType = fp.TriggerElement.GetType();
if ((elementType != propertyType) && (!elementType.IsSubclassOf(propertyType))) throw new ArgumentException("TriggerElement不包含TriggerProperty属性");
DependencyPropertyHelper.RegisterDependencyPropertyChanged(fp.TriggerElement, fp.TriggerProperty, delegate (object sender, EventArgs args)
{
fp.UpdateLocation();
}, false);
}
#endregion
static FellowPopup()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FellowPopup), new FrameworkPropertyMetadata(typeof(FellowPopup)));
}
/// <summary>
/// 打开窗体
/// </summary>
private void Open()
{
_popupWnd = new Window()
{
Topmost = true,
ShowActivated = false,
AllowsTransparency = true,
WindowStyle = WindowStyle.None,
BorderThickness = new Thickness(0),
SizeToContent = SizeToContent.WidthAndHeight,
WindowStartupLocation = WindowStartupLocation.Manual,
Background = this.Background,
Content = this.Content,
ContentStringFormat = this.ContentStringFormat,
ContentTemplate = this.ContentTemplate,
ContentTemplateSelector = this.ContentTemplateSelector,
};
UpdateLocation();
_popupWnd.Show();
}
// 关闭_popup窗体，并回收
private void Close()
{
if (_popupWnd != null)
{
_popupWnd.Close();
GC.SuppressFinalize(_popupWnd);
}
}
/// <summary>
/// 更新弹出窗体的位置。
/// </summary>
private void UpdateLocation()
{
if (_popupWnd == null) return;
if(PlacementTarget == null)
{
_popupWnd.Left = 0;
_popupWnd.Top = 0;
return;
}
double contentWidth = _popupWnd.Content == null ? 0 : ((FrameworkElement)_popupWnd.Content).ActualWidth;
double contentHeght = _popupWnd.Content == null ? 0 : ((FrameworkElement)_popupWnd.Content).ActualHeight;
Point targetToScreen;
switch (Placement)
{
case PlacementMode.TopLeft:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget,new Point(0, 0));
_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;
_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;
break;
case PlacementMode.TopMiddle:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth/2, 0));
_popupWnd.Left = targetToScreen.X - contentWidth / 2 + HorizontalOffset;
_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;
break;
case PlacementMode.TopRight:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, 0));
_popupWnd.Left = targetToScreen.X + HorizontalOffset;
_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;
break;
case PlacementMode.LeftMiddle:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(0, PlacementTarget.ActualHeight / 2));
_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;
_popupWnd.Top = targetToScreen.Y - contentHeght / 2;
break;
case PlacementMode.RightMiddle:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, PlacementTarget.ActualHeight / 2));
_popupWnd.Left = targetToScreen.X + HorizontalOffset;
_popupWnd.Top = targetToScreen.Y - contentHeght / 2;
break;
case PlacementMode.BottomLeft:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(0, PlacementTarget.ActualHeight));
_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;
_popupWnd.Top = targetToScreen.Y + VerticalOffset;
break;
case PlacementMode.BottomMiddle:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth / 2, PlacementTarget.ActualHeight));
_popupWnd.Left = targetToScreen.X - contentWidth / 2 - HorizontalOffset;
_popupWnd.Top = targetToScreen.Y + VerticalOffset;
break;
case PlacementMode.BottomRight:
targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, PlacementTarget.ActualHeight));
_popupWnd.Left = targetToScreen.X + HorizontalOffset;
_popupWnd.Top = targetToScreen.Y + VerticalOffset;
break;
}
}
}
（1）在FellowPopup类中，定义了一个Window类型的变量_popup，用于展示“泡”的内容。PlacementTarget、Placement、HorizontalOffset、VerticalOffset四个属性，用于设置_popup的Left和Top属性，以确定_popup在屏幕中的位置。
这里需要注意，Visual.PointToScreen()方法，参数point是在Visual坐标空间的点，其返回值为将这个点，转换为屏幕坐标系的点。但转换后的点，未考虑到系统DPI及屏幕缩放的情况。因此，需要将这个点再运算，使之成为当前屏幕DPI及缩放模式下的点坐标。
（2）TriggerElement、TriggerProperty属性，用于指示，当哪个元素的哪个属性值发生变化时，更新位置。
要想让一个窗体跟着控件移动，就必须告诉窗体，控件当前的位置在哪儿，然后去计算窗体应该在哪儿。而在WPF中，几乎没有控件会实时报告自己的位置。因此，必须找到元素的一个属性，当元素的“位置”发生改变的时候，这个属性值会发生变化。
除了找到这样的一个属性外，还需要注册一个属性值发生改变时的回调方法。在本例中，滑块在滑动的过程中，本身没有属性（公开的）值发生改变，但是Slider的Value属性会发生改变。因此可以选择它，来触发FellowPopup的位置改变。
由此可见，PlacementTarge系列与TriggerElement可以是不同的。一个用于“布置”窗体，一个用于“触发”窗体。
-
使用自定义控件
定义好了控件后，就可以在Xaml中使用它了。继续改造Slider的模板：<!-- 别忘了转换器 --> <local:Double2IntConverter x:Key="double2Int" /> <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" /> <local:FellowPopup x:Name="popup" Background="Transparent" Placement="TopMiddle" PlacementTarget="{Binding ElementName=thumbEllipse}" TriggerElement="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}}" TriggerProperty="Slider.Value"> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <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={StaticResource double2Int}}"/> </Grid> </local:FellowPopup> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="popup" Property="IsOpen" Value="True"/> </Trigger> <Trigger Property="IsDragging" Value="True"> <Setter TargetName="popup" Property="IsOpen" Value="True"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Thumb.Template> </Thumb> </Track.Thumb> </Track> </Grid> </Border> </ControlTemplate> </Slider.Template> </Slider>
复制代码
注意Placement、TriggerElement、TriggerProperty、Text等属性的绑定方式。
至此，改造搞定。以第二种方式改造的Slider，“泡”可以显示在主窗体之上。没有任何东西会挡住他，以为它是TopMost的。另外也可以再添加自己的逻辑去设置“泡”的位置。
以上为自己学习总结，如有错误，请指正。
