网站开发iis怎么配置,深圳燃气公司服务电话,网站登陆界面怎么做,百度seo报价方法使用过office的visio软件画图的小伙伴都知道#xff0c;画图软件分为两部分#xff0c;左侧图形库#xff0c;存放各种图标#xff0c;右侧是一个画布#xff0c;将左侧图形库的图标控件拖拽到右侧画布#xff0c;就会生成一个新的控件#xff0c;并且可以自由拖动。那如…使用过office的visio软件画图的小伙伴都知道画图软件分为两部分左侧图形库存放各种图标右侧是一个画布将左侧图形库的图标控件拖拽到右侧画布就会生成一个新的控件并且可以自由拖动。那如何在WPF程序中实现类似的功能呢今天就以一个简单的小例子简述如何在WPF中实现控件的拖拽和拖动仅供学习分享使用如有不足之处还请指正。 涉及知识点 WPF控件的拖拽与拖动主要涉及知识点如下所示
容器布局本示例采用左右布局主容器采用Grid并分成两列进行布局左侧图标库采用UniformGrid布局右侧画布采用Canvas布局。控件拖拽当图标库中的图标控件被鼠标按下时通过调用 DragDrop.DoDragDrop方法实现拖拽功能并且设置画布的AllowDrop属性为true并触发拖拽松开事件。控件拖动当图标库中的图标拖拽到新画布容器后就会生成一个新的控件通过属性按下事件鼠标移动事件鼠标升起事件来实现控件的拖动。 实现步骤 1. 页面布局 根据布局说明页面分为左右两部分【Grid容器】左侧图标库【UniformGrid】右侧画布【Canvas】如下所示
Window x:ClassDemoDragAndDrop.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:ihttp://schemas.microsoft.com/xaml/behaviorsxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:DemoDragAndDropmc:IgnorabledTitleMainWindow Height450 Width800i:Interaction.Triggersi:EventTrigger EventNameLoadedi:InvokeCommandAction Command{Binding WinLoadedCommand} CommandParameter{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeWindow}}//i:EventTrigger/i:Interaction.TriggersGridGrid.ColumnDefinitionsColumnDefinition WidthAuto/ColumnDefinitionColumnDefinition Width*/ColumnDefinition/Grid.ColumnDefinitionsBorder Grid.Column0 BorderBrushLightGray BorderThickness1/BorderBorder Grid.Column1 BorderBrushLightGray BorderThickness1/BorderUniformGrid Grid.Column0 Columns2 VerticalAlignmentTopUniformGrid.ResourcesStyle TargetTypeTextBlockSetter PropertyWidth Value100/SetterSetter PropertyHeight Value40/SetterSetter PropertyFontSize Value18/SetterSetter PropertyTextAlignment ValueCenter/SetterSetter PropertyPadding Value10/SetterSetter PropertyMargin Value5/SetterSetter PropertyBackground ValueBlue/SetterSetter PropertyFontWeight ValueBold/SetterSetter PropertyForeground ValueWhite/Setter/Style/UniformGrid.ResourcesTextBlock Text文本 TagTexti:Interaction.Triggersi:EventTrigger EventNameMouseLeftButtonDowni:InvokeCommandAction Command{Binding IconMouseLeftDownCommand} CommandParameter{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeTextBlock}}//i:EventTrigger/i:Interaction.Triggers/TextBlockTextBlock Text按钮 TagButtoni:Interaction.Triggersi:EventTrigger EventNameMouseLeftButtonDowni:InvokeCommandAction Command{Binding IconMouseLeftDownCommand} CommandParameter{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeTextBlock}}//i:EventTrigger/i:Interaction.Triggers/TextBlockTextBlock Text单选按钮/TextBlockTextBlock Text复选按钮/TextBlockTextBlock Text圆形/TextBlockTextBlock Text长方形/TextBlockTextBlock Text直线/TextBlockTextBlock Text三角形/TextBlock/UniformGridCanvas x:Namecontainer Grid.Column1 AllowDropTrue BackgroundWhitei:Interaction.Triggersi:EventTrigger EventNameDropi:InvokeCommandAction Command{Binding CanvasDropCommand} PassEventArgsToCommandTrue//i:EventTrigger/i:Interaction.Triggers/Canvas/Grid
/Window 注意在页面布局中为图标库中的图标绑定了MouseLeftButtonDown事件命令当鼠标左键按下时触发对应的事件并开始拖拽。如下所示
private ICommand iconMouseLeftDownCommand;public ICommand IconMouseLeftDownCommand
{get {if (iconMouseLeftDownCommand null){iconMouseLeftDownCommand new RelayCommandobject(IconMouseLeftDown);}return iconMouseLeftDownCommand; }
}private void IconMouseLeftDown(object sender)
{var tag (sender as TextBlock)?.Tag?.ToString();if (tag null){return;}var data new DragDropData() { Tag tag };//开启准备拖动操作DragDrop.DoDragDrop((DependencyObject)sender, data, DragDropEffects.Copy);
} 注意在调用DragDrop.DoDragDrop方法开始拖拽时此方法有三个参数【DoDragDrop(DependencyObject dragSource, object data, DragDropEffects allowedEffects)】说明如下
第一个参数是拖拽源控件。第二个参数用于传递数据可以传递参数用于区分详细信息。第三个参数是拖拽效果
在画布容器中松开拖拽的鼠标左键时触发画布Drop事件在此事件中创建新的控件如下所示
private ICommand canvasDropCommand;public ICommand CanvasDropCommand
{get {if (canvasDropCommand null){canvasDropCommand new RelayCommandDragEventArgs(CanvasDrop);}return canvasDropCommand; }
}private void CanvasDrop(DragEventArgs e)
{var data e.Data.GetData(typeof(DragDropData)) as DragDropData;if (data ! null){var position e.GetPosition(this.containerCanvas);if (data.Tag Text){//创建文本Border border new Border();border.BorderThickness new Thickness(1);border.BorderBrush Brushes.Black;TextBlock text new TextBlock(){Width 120,Height 30,Text 文本1,FontSize 14,Background Brushes.LightGray,TextAlignment TextAlignment.Center,Padding new Thickness(5)};border.Child text;border.MouseDown Container_Control_MouseDown;border.MouseMove Container_Control_MouseMove;border.MouseUp Container_Control_MouseUp;this.containerCanvas.Children.Add(border);Canvas.SetLeft(border, position.X - 60);Canvas.SetTop(border, position.Y - 15);}if (data.Tag Button){Button button new Button(){Width 120,Height 30,Content 按钮1,FontSize 14,Background Brushes.LightGray,HorizontalContentAlignment HorizontalAlignment.Center,VerticalContentAlignment VerticalAlignment.Center,Padding new Thickness(5),BorderBrush Brushes.Black,BorderThickness new Thickness(1)};button.AddHandler(Button.MouseDownEvent,new MouseButtonEventHandler( Container_Control_MouseDown),true);button.AddHandler(Button.MouseMoveEvent, new MouseEventHandler(Container_Control_MouseMove), true);button.AddHandler(Button.MouseUpEvent, new MouseButtonEventHandler(Container_Control_MouseUp), true);this.containerCanvas.Children.Add(button);Canvas.SetLeft(button, position.X - 60);Canvas.SetTop(button, position.Y - 15);}}
} 注意在此事件中以下几点需要注意
通过e.Data.GetData方法获取传递的参数。通过e.GetPosition方法获取鼠标相对位置。参数是相对的对象如Canvas容器等。容器的Drop事件中根据传递的内容创建控件对象并为新创建的控件对象绑定MouseDownMouseMoveMouseUp方法。其中Button按钮由于鼠标按下事件和本省自带的Click事件相冲突所以需要通过AddHandler方法添加鼠标事件。通过Canvas.SetLeftCanvas.SetTop方法设置控件对象在画布容器中的位置。 2. 控件拖动 在控件对象的MouseDownMouseMoveMouseUp三个事件中实现控件的拖动效果。即在MouseDown时开始MouseMove中不断设置控件的LeftTop的值随鼠标而动在MouseUp时停止。
private void Container_Control_MouseUp(object sender, MouseButtonEventArgs e)
{if(e.LeftButton MouseButtonState.Released){Mouse.Capture(null);}
}private void Container_Control_MouseMove(object sender, MouseEventArgs e)
{if (e.LeftButton MouseButtonState.Pressed){var position e.GetPosition(this.containerCanvas);Canvas.SetLeft((UIElement)sender,position.X-60);Canvas.SetTop((UIElement)sender,position.Y-15);}
}private void Container_Control_MouseDown(object sender, MouseButtonEventArgs e)
{if(e.LeftButton MouseButtonState.Pressed){Mouse.Capture((IInputElement)sender);}
} 注意启动Mouse.Capture功能是为了捕获鼠标的焦点使其在鼠标移动期间一直保持焦点防止鼠标与控件分离。 示例效果 本示例主要为了说明只是简单地 实现了控件拖拽拖动等效果具体如下所示 以上就是WPF之控件拖拽与拖动的全部内容希望能够一起学习共同进步。
