品牌网站建设源码,广安网站制作设计,建立电子商务网站目的,国内wordpress免费主题想做一个下图所示的Slider#xff0c;以冒泡的方式显示其Value值#xff0c;该怎么做呢#xff1f; 功能要求#xff0c;当鼠标放在滑块上的时候#xff0c;冒“泡”显示值#xff1b;当滑块移动的时候#xff0c;“泡”跟随移动。
看似简单的功能#xff0c;但要完美…想做一个下图所示的Slider以冒泡的方式显示其Value值该怎么做呢 功能要求当鼠标放在滑块上的时候冒“泡”显示值当滑块移动的时候“泡”跟随移动。
看似简单的功能但要完美实现确实要花费不少心思的。
方法一使用Canvas面板。
改造Slider Slider的样式改造比较简单重写其模板即可。 Slider.TemplateControlTemplate TargetTypeSliderBorder Nameborder SnapsToDevicePixelsTrueBackground{TemplateBinding Panel.Background} BorderBrush{TemplateBinding Border.BorderBrush} BorderThickness{TemplateBinding Border.BorderThickness} GridBorder BackgroundGray Height4 CornerRadius2/Track NamePART_Track Grid.Row1Track.DecreaseRepeatButtonRepeatButtonRepeatButton.TemplateControlTemplate TargetTypeRepeatButtonBorder Height4 CornerRadius2 Background#FF006CBE//ControlTemplate/RepeatButton.Template/RepeatButton/Track.DecreaseRepeatButtonTrack.ThumbThumb Namethumb VerticalAlignmentCenter FocusableFalseThumb.TemplateControlTemplate TargetTypeThumbGridEllipse NamethumbEllipse Width10 Height10 FillWhite StrokeThickness1 Stroke#FF006CBE //Grid/ControlTemplate/Thumb.Template/Thumb/Track.Thumb/Track/Grid/Border/ControlTemplate/Slider.Template/Slider添加“泡” 很明显这个“泡”的形状、文字都是一个元素因此需要使用面板来将两个元素组合起来。这里最好使用Canvas因为它的子元素是绝对定位的可以通过Canvas.Left、Canvas.Top等属性安排子元素的位置且Canvas也不会影响父元素的布局。因此将Slider的模板继续改造一下如下所示 Slider Nameslider Width255Slider.TemplateControlTemplate TargetTypeSliderBorder Nameborder SnapsToDevicePixelsTrueBackground{TemplateBinding Panel.Background} BorderBrush{TemplateBinding Border.BorderBrush} BorderThickness{TemplateBinding Border.BorderThickness} GridBorder BackgroundGray Height4 CornerRadius2/Track NamePART_Track Grid.Row1Track.DecreaseRepeatButtonRepeatButtonRepeatButton.TemplateControlTemplate TargetTypeRepeatButtonBorder Height4 CornerRadius2 Background#FF006CBE//ControlTemplate/RepeatButton.Template/RepeatButton/Track.DecreaseRepeatButtonTrack.ThumbThumb Namethumb VerticalAlignmentCenter FocusableFalseThumb.TemplateControlTemplate TargetTypeThumbGridEllipse NamethumbEllipse Width10 Height10 FillWhite StrokeThickness1 Stroke#FF006CBE /Canvas Namecanvas Opacity0Grid Canvas.Bottom10 Canvas.Left-8Path Width25 StretchUniform FillWhite Stroke#FF006CBE StrokeThickness1 DataM172,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 HorizontalAlignmentCenter Margin0,5,0,0 Text{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeSlider}, PathValue, Converter{StaticResource double2Int}}//Grid/Canvas/GridControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNamecanvas PropertyOpacity Value1//TriggerTrigger PropertyIsDragging ValueTrueSetter TargetNamecanvas PropertyOpacity Value1//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 namerelativeTo可视化对象。它的坐标系原点在左上角/param/// param namepoint在可视化对象坐标系中的点/param/// returns/returnspublic 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 nameRegister含有依赖属性的对象/param/// param namedependencyProperty依赖属性/param/// param nameaction要注册的值发生改变时的回调方法/param/// param namerunOnceImmediately是否立即执行一次/parampublic 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/// 顶部靠左/// /summaryTopLeft,/// summary/// 顶部居中/// /summaryTopMiddle,/// summary/// 顶部靠右/// /summaryTopRight,/// summary/// 左侧居中/// /summaryLeftMiddle,/// summary/// 右侧居中/// /summaryRightMiddle,/// summary/// 底部靠左/// /summaryBottomLeft,/// summary/// 底部居中/// /summaryBottomMiddle,/// summary/// 底部靠右/// /summaryBottomRight
}/// summary
/// 可跟随控件移动的弹出提示框。
/// /summary
public class FellowPopup : ContentControl
{private Window _popupWnd;/// summary/// 水平位置偏移量/// /summarypublic 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/// 垂直偏移量/// /summarypublic 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/// 放置位置/// /summarypublic 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/// 放置的目标元素/// /summarypublic 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则不显示提示框/// /summarypublic 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/// 触发位置更新的控件/// /summarypublic 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方法。/// /summarypublic 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);}#endregionstatic FellowPopup(){DefaultStyleKeyProperty.OverrideMetadata(typeof(FellowPopup), new FrameworkPropertyMetadata(typeof(FellowPopup)));}/// summary/// 打开窗体/// /summaryprivate 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/// 更新弹出窗体的位置。/// /summaryprivate 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及缩放模式下的点坐标。
2TriggerElement、TriggerProperty属性用于指示当哪个元素的哪个属性值发生变化时更新位置。
要想让一个窗体跟着控件移动就必须告诉窗体控件当前的位置在哪儿然后去计算窗体应该在哪儿。而在WPF中几乎没有控件会实时报告自己的位置。因此必须找到元素的一个属性当元素的“位置”发生改变的时候这个属性值会发生变化。
除了找到这样的一个属性外还需要注册一个属性值发生改变时的回调方法。在本例中滑块在滑动的过程中本身没有属性公开的值发生改变但是Slider的Value属性会发生改变。因此可以选择它来触发FellowPopup的位置改变。
由此可见PlacementTarge系列与TriggerElement可以是不同的。一个用于“布置”窗体一个用于“触发”窗体。 使用自定义控件 定义好了控件后就可以在Xaml中使用它了。继续改造Slider的模板 !-- 别忘了转换器 --local:Double2IntConverter x:Keydouble2Int / Slider Nameslider Width255Slider.TemplateControlTemplate TargetTypeSliderBorder Nameborder SnapsToDevicePixelsTrueBackground{TemplateBinding Panel.Background} BorderBrush{TemplateBinding Border.BorderBrush} BorderThickness{TemplateBinding Border.BorderThickness} GridBorder BackgroundGray Height4 CornerRadius2/Track NamePART_Track Grid.Row1Track.DecreaseRepeatButtonRepeatButtonRepeatButton.TemplateControlTemplate TargetTypeRepeatButtonBorder Height4 CornerRadius2 Background#FF006CBE//ControlTemplate/RepeatButton.Template/RepeatButton/Track.DecreaseRepeatButtonTrack.ThumbThumb Namethumb VerticalAlignmentCenter FocusableFalseThumb.TemplateControlTemplate TargetTypeThumbGridEllipse NamethumbEllipse Width10 Height10 FillWhite StrokeThickness1 Stroke#FF006CBE /local:FellowPopup x:Namepopup BackgroundTransparentPlacementTopMiddle PlacementTarget{Binding ElementNamethumbEllipse}TriggerElement{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeSlider}}TriggerPropertySlider.ValueGrid HorizontalAlignmentCenter VerticalAlignmentCenterPath Width25 StretchUniform FillWhite Stroke#FF006CBE StrokeThickness1 DataM172,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 HorizontalAlignmentCenter Margin0,5,0,0 Text{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeSlider}, PathValue, Converter{StaticResource double2Int}}//Grid/local:FellowPopup/GridControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNamepopup PropertyIsOpen ValueTrue//TriggerTrigger PropertyIsDragging ValueTrueSetter TargetNamepopup PropertyIsOpen ValueTrue//Trigger/ControlTemplate.Triggers/ControlTemplate/Thumb.Template/Thumb/Track.Thumb/Track/Grid/Border/ControlTemplate/Slider.Template/Slider复制代码 注意Placement、TriggerElement、TriggerProperty、Text等属性的绑定方式。
至此改造搞定。以第二种方式改造的Slider“泡”可以显示在主窗体之上。没有任何东西会挡住他以为它是TopMost的。另外也可以再添加自己的逻辑去设置“泡”的位置。
以上为自己学习总结如有错误请指正。
