WPF Implementation of the drag-and-drop panel

The functions to be implemented here are similarBlendMiddle work panel-you can zoom in and drag the content.

There should be many ways to implement this function. In additionBlend 3AddedMousedragelementbehaviorThe implementation of this function seems simpler,MousedragelementbehaviorIs based onRendertransformTo achieve the drag effect. The result is that the scroll bar cannot be correctly displayed.

The following provides a relatively simple solution.CustomcontrolZooming and dragging are enabled, and the scroll bar can be displayed normally.

 

CodeAs follows:

Designviewer

Using System. windows;
Using System. Windows. controls;
Using System. Windows. Controls. primitives;
Using System. Windows. input;

Namespace Designview
{
///   <Summary>
///  
///   </Summary>
Public   Class Designviewer: contentcontrol
{
# Region Private Fields

PrivateThickness beginmargin;
PrivateViewbox;

# Endregion

# RegionConstructors

StaticDesignviewer ()
{
Defaultstylekeyproperty. overridemetadata (Typeof(Designviewer ),NewFrameworkpropertymetadata (Typeof(Designviewer )));
}

# Endregion

# RegionEvent Handlers

Public   Override   Void Onapplytemplate ()
{
Base . Onapplytemplate ();
Viewbox = Template. findname ( " Part_viewbox " , This ) As Viewbox;
Thumb = Template. findname ( " Part_thumb " , This ) As Thumb;

If (viewbox ! = null )
{< br> viewbox. previewmouseleftbuttondown += onthumbpreviewmouseleftbuttondown;
}

If (thumb ! = null )
{< br> thumb. dragdelta += ondragdelta;
thumb. dragstarted += ondragstarted;
}< BR >}

Private VoidOnthumbpreviewmouseleftbuttondown (ObjectSender, mousebuttoneventargs E)
{
E. Handled= True;
}

Private   Void Ondragdelta ( Object Sender, dragdeltaeventargs E)
{
Viewbox. Margin =   New Thickness ()
{
Top = Beginmargin. Top + E. verticalchange *   2 ,
Left = Beginmargin. Left + E. horizontalchange *   2
};
}

Private VoidOndragstarted (ObjectSender, dragstartedeventargs E)
{
Beginmargin=Viewbox. margin;
}

# Endregion
}
}

ItsStyleAs follows: 

 

Design viewer Style

< Resourcedictionary
Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "Http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns: Local = "CLR-namespace: designview" >
< Style X: Key = "Dragthumbstyle"
Targettype =" {X: Type thumb} " >
< Setter Property = "Stylus. ispressandholdenabled" Value = "False" />
< Setter Property = "Template" >
< Setter. Value >
< Controltemplate Targettype =" {X: Type thumb} " >
< Border Background = "#00000000" />
</ Controltemplate >
</ Setter. Value >
</ Setter >
</ Style >

< Controltemplate X: Key = "Designviewertemplate"
Targettype =" {X: type local: designviewer} " >
< Dockpanel >
< Slider X: Name = "Slider"
Value = "1" Maximum = "25"
Dockpanel. Dock = "TOP" />
< Scrollviewer Verticalscrollbarvisibility = "Auto"
Horizontalscrollbarvisibility = "Auto" >
< Grid >
< Thumb X: Name = "Part_thumb"
Style =" {Staticresource dragthumbstyle} " />
< Viewbox X: Name = "Part_viewbox" Stretch = "NONE"
Rendertransformorigin = "0.5, 0.5" >
< Viewbox. layouttransform >
< Scaletransform Scalex =" {Binding value, elementname = slider} "
Scaley =" {Binding value, elementname = slider} " />
</ Viewbox. layouttransform >
< Contentpresenter Content =" {Templatebinding content} " />
</ Viewbox >
</ Grid >
</ Scrollviewer >
</ Dockpanel >
</ Controltemplate >

< Style Targettype =" {X: type local: designviewer} " >
< Setter Property = "Template"
Value =" {Staticresource designviewertemplate} " />
</ Style >
</ Resourcedictionary >

 

 

Viewbox is used.AndSliderUsed to control scaling.ThumbControls control the drag and drop function, of course,ScrollviewerTo display the scroll bar.

 

CompleteProgramYou can download it here.