WPF：从WPF Diagram Designer Part 2学习面板、缩略图、框线选择和工具箱

　　在从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转中介绍了图形设计器的移动、大小和旋转等功能的实现，本篇继续第二部分，学习设计面板、缩略图、框线旋转和工具箱等功能的实现。 

WPF Diagram Designer - Part 2

设计面板(Designer Canvas ：variable size, scrollable)

　　在从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转中的示例出来的设计器，当把设计对象拖动到DesignerCanvas边界外时，因为DesignerCanvas没有滚动条，我们会发现再也找不到这个对象了。想到解决最简单的办法就是给DesignerCanvas添加一个ScrollViewer，但是这个办法解决不了这个问题，因为当拖动到Canvas之外时，并不会出发Canvas的大小发生变化，所以仍旧没有滚动条，为了解决这个问题，我们则必须在设计对象移动和改变大小时去调整Canvas的大小。

　　WPF控件提供一个MeassureOverride允许控件计算希望的大小，再返回WPF框架来进行布局。我们可以在DesignerCanvas中重载这个方法来解决上面所说的问题，重载方法如下：

代码

protected override Size MeasureOverride(Size constraint)
{
Size size = new Size();
foreach (UIElement element in base .Children)
{
double left = Canvas.GetLeft(element);
double top = Canvas.GetTop(element);
left = double .IsNaN(left) ? 0 : left;
top = double .IsNaN(top) ? 0 : top;

// measure desired size for each child
element.Measure(constraint);

Size desiredSize = element.DesiredSize;
if ( ! double .IsNaN(desiredSize.Width) && ! double .IsNaN(desiredSize.Height))
{
size.Width = Math.Max(size.Width, left + desiredSize.Width);
size.Height = Math.Max(size.Height, top + desiredSize.Height);
}
}
// for aesthetic reasons add extra points
size.Width += 10 ;
size.Height += 10 ;
return size;
}

　　注：当设计对象很多时，我猜测可能会有性能问题。在ZoomableApplication2: A Million Items介绍了一个可以显示百万级对象的示例，不知道能否解决这个性能问题，先把这个在这里留个足迹，以便以后可以找到

缩略图（Zoombox）

缩略图如上图所示，使用ZoomBox时需要传入一个  ScrollViewer="{Binding ElementName=DesignerScrollViewer}"，以便可以通过移动缩略图上的选择框来移动DesignerCanvas

代码文件【ZoomBox.cs】如下：

代码

public class ZoomBox : Control
{
private Thumb zoomThumb;
private Canvas zoomCanvas;
private Slider zoomSlider;
private ScaleTransform scaleTransform;
private DesignerCanvas designerCanvas;

public ScrollViewer ScrollViewer
{
get { return (ScrollViewer)GetValue(ScrollViewerProperty); }
set { SetValue(ScrollViewerProperty, value); }
}

public static readonly DependencyProperty ScrollViewerProperty =
DependencyProperty.Register( " ScrollViewer " , typeof (ScrollViewer), typeof (ZoomBox));

public override void OnApplyTemplate()
{
base .OnApplyTemplate();

if ( this .ScrollViewer == null )
return ;

this .designerCanvas = this .ScrollViewer.Content as DesignerCanvas;
if ( this .designerCanvas == null )
throw new Exception( " DesignerCanvas must not be null! " );

this .zoomThumb = Template.FindName( " PART_ZoomThumb " , this ) as Thumb;
if ( this .zoomThumb == null )
throw new Exception( " PART_ZoomThumb template is missing! " );

this .zoomCanvas = Template.FindName( " PART_ZoomCanvas " , this ) as Canvas;
if ( this .zoomCanvas == null )
throw new Exception( " PART_ZoomCanvas template is missing! " );

this .zoomSlider = Template.FindName( " PART_ZoomSlider " , this ) as Slider;
if ( this .zoomSlider == null )
throw new Exception( " PART_ZoomSlider template is missing! " );

this .designerCanvas.LayoutUpdated += new EventHandler( this .DesignerCanvas_LayoutUpdated);

this .zoomThumb.DragDelta += new DragDeltaEventHandler( this .Thumb_DragDelta);

this .zoomSlider.ValueChanged += new RoutedPropertyChangedEventHandler < double > ( this .ZoomSlider_ValueChanged);

this .scaleTransform = new ScaleTransform();
this .designerCanvas.LayoutTransform = this .scaleTransform;
}

private void ZoomSlider_ValueChanged( object sender, RoutedPropertyChangedEventArgs < double > e)
{
double scale = e.NewValue / e.OldValue;

double halfViewportHeight = this .ScrollViewer.ViewportHeight / 2 ;
double newVerticalOffset = (( this .ScrollViewer.VerticalOffset + halfViewportHeight) * scale - halfViewportHeight);

double halfViewportWidth = this .ScrollViewer.ViewportWidth / 2 ;
double newHorizontalOffset = (( this .ScrollViewer.HorizontalOffset + halfViewportWidth) * scale - halfViewportWidth);

this .scaleTransform.ScaleX *= scale;
this .scaleTransform.ScaleY *= scale;

this .ScrollViewer.ScrollToHorizontalOffset(newHorizontalOffset);
this .ScrollViewer.ScrollToVerticalOffset(newVerticalOffset);
}

private void Thumb_DragDelta( object sender, DragDeltaEventArgs e)
{
double scale, xOffset, yOffset;
this .InvalidateScale( out scale, out xOffset, out yOffset);

this .ScrollViewer.ScrollToHorizontalOffset( this .ScrollViewer.HorizontalOffset + e.HorizontalChange / scale);
this .ScrollViewer.ScrollToVerticalOffset( this .ScrollViewer.VerticalOffset + e.VerticalChange / scale);
}

private void DesignerCanvas_LayoutUpdated( object sender, EventArgs e)
{
double scale, xOffset, yOffset;
this .InvalidateScale( out scale, out xOffset, out yOffset);

this .zoomThumb.Width = this .ScrollViewer.ViewportWidth * scale;
this .zoomThumb.Height = this .ScrollViewer.ViewportHeight * scale;

Canvas.SetLeft( this .zoomThumb, xOffset + this .ScrollViewer.HorizontalOffset * scale);
Canvas.SetTop( this .zoomThumb, yOffset + this .ScrollViewer.VerticalOffset * scale);
}

private void InvalidateScale( out double scale, out double xOffset, out double yOffset)
{
// designer canvas size
double w = this .designerCanvas.ActualWidth * this .scaleTransform.ScaleX;
double h = this .designerCanvas.ActualHeight * this .scaleTransform.ScaleY;

// zoom canvas size
double x = this .zoomCanvas.ActualWidth;
double y = this .zoomCanvas.ActualHeight;

double scaleX = x / w;
double scaleY = y / h;

scale = (scaleX < scaleY) ? scaleX : scaleY;

xOffset = (x - scale * w) / 2 ;
yOffset = (y - scale * h) / 2 ;
}

样式文件【ZoomBox.xaml】 如下：

代码

< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " {x:Type s:ZoomBox} " >
< Border CornerRadius = " 1 "
BorderThickness = " 1 "
Background = " #EEE "
BorderBrush = " DimGray " >
< Expander IsExpanded = " True "
Background = " Transparent " >
< Border BorderBrush = " DimGray "
BorderThickness = " 0,1,0,0 "
Padding = " 0 "
Height = " 180 " >
< Grid >
< Canvas Margin = " 5 "
Name = " PART_ZoomCanvas " >
< Canvas.Background >
< VisualBrush Stretch = " Uniform "
Visual = " {Binding RelativeSource={RelativeSource TemplatedParent}, Path=ScrollViewer.Content} " />
Canvas.Background >
< Thumb Name = " PART_ZoomThumb "
Cursor = " SizeAll " >
< Thumb.Style >
< Style TargetType = " Thumb " >
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " Thumb " >
< Rectangle StrokeThickness = " 1 "
Stroke = " Black "
Fill = " Transparent " />
ControlTemplate >
Setter.Value >
Setter >
Style >
Thumb.Style >
Thumb >
Canvas >
Grid >
Border >
< Expander.Header >
< Grid >
< Grid.ColumnDefinitions >
< ColumnDefinition Width = " Auto " />
< ColumnDefinition Width = " * " />
Grid.ColumnDefinitions >
< Slider Name = " PART_ZoomSlider "
VerticalAlignment = " Center "
HorizontalAlignment = " Center "
Margin = " 0 "
Ticks = " 25,50,75,100,125,150,200,300,400,500 "
Minimum = " 25 "
Maximum = " 500 "
Value = " 100 "
IsSnapToTickEnabled = " True "
IsMoveToPointEnabled = " False " />

< TextBlock Text = " {Binding ElementName=PART_ZoomSlider, Path=Value} "
Grid.Column = " 1 "
VerticalAlignment = " Center "
HorizontalAlignment = " Right "
Margin = " 0,0,14,0 " />
< TextBlock Text = " % "
Grid.Column = " 1 "
VerticalAlignment = " Center "
HorizontalAlignment = " Right "
Margin = " 1,0,2,0 " />
Grid >
Expander.Header >
Expander >
Border >
ControlTemplate >
Setter.Value >
Setter >
Style >

框线选择（Rubberband selection）

• Adorner、Adorner Layer

框线是通过第一篇说过的Adorner来做的，其实在WPF中很多地方都用到了这个功能，如光标、高亮等。这些Adorner都是放在一个Adorner Layer上，MSDN解释说Adorner Layer是置于一个窗口内所有其它控件之上的。AdornerLayer类只能通过 AdornerLayer.GetAdornerLayer(this) 获取。还可以参考：Defining WPF Adorners in XAML   Group Sort Adorner ListView

• DesignerCanvas生成RubberbandAdorner
  当按住鼠标左键点击DesignerCanvas时将生成RubberbandAdorner，代码如下：

  代码

  public class DesignerCanvas : Canvas
  {
  ...
  
  protected override void OnMouseMove(MouseEventArgs e)
  {
  base .OnMouseMove(e);
  
  if (e.LeftButton != MouseButtonState.Pressed)
  this .dragStartPoint = null ;
  
  if ( this .dragStartPoint.HasValue)
  {
  AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer( this );
  if (adornerLayer != null )
  {
  RubberbandAdorner adorner = new RubberbandAdorner( this , dragStartPoint);
  if (adorner != null )
  {
  adornerLayer.Add(adorner);
  }
  }
  
  e.Handled = true ;
  }
  }
  
  ...
  }
• 生成RubberbandAdorner : Adorner
  
  代码

  public class RubberbandAdorner : Adorner
  {
  ....
  
  private Point ? startPoint, endPoint;
  
  protected override void OnMouseMove(MouseEventArgs e)
  {
  if (e.LeftButton == MouseButtonState.Pressed)
  {
  if ( ! this .IsMouseCaptured)
  {
  this .CaptureMouse();
  }
  
  this .endPoint = e.GetPosition( this );
  this .UpdateRubberband();
  this .UpdateSelection();
  e.Handled = true ;
  }
  }
  
  private void UpdateRubberband()
  {
  double left = Math.Min( this .startPoint.Value.X, this .endPoint.Value.X);
  double top = Math.Min( this .startPoint.Value.Y, this .endPoint.Value.Y);
  
  double width = Math.Abs( this .startPoint.Value.X - this .endPoint.Value.X);
  double height = Math.Abs( this .startPoint.Value.Y - this .endPoint.Value.Y);
  
  this .rubberband.Width = width;
  this .rubberband.Height = height;
  Canvas.SetLeft( this .rubberband, left);
  Canvas.SetTop( this .rubberband, top);
  }
  
  private void UpdateSelection()
  {
  Rect rubberBand = new Rect( this .startPoint.Value, this .endPoint.Value);
  foreach (DesignerItem item in this .designerCanvas.Children)
  {
  Rect itemRect = VisualTreeHelper.GetDescendantBounds(item);
  Rect itemBounds = item.TransformToAncestor
  (designerCanvas).TransformBounds(itemRect);
  
  if (rubberBand.Contains(itemBounds))
  {
  item.IsSelected = true ;
  }
  else
  {
  item.IsSelected = false ;
  }
  }
  }
  ...
  }

   

工具箱Toolbox (drag & drop)

• Toolbox

工具箱Toolbox是一个ItemsControl控件，它的子是ToolboxItem类型。

代码Toolbox.cs如下：

 

代码

public class Toolbox : ItemsControl
{
private Size defaultItemSize = new Size( 65 , 65 );
public Size DefaultItemSize
{
get { return this .defaultItemSize; }
set { this .defaultItemSize = value; }
}

protected override DependencyObject GetContainerForItemOverride()
{
return new ToolboxItem();
}

protected override bool IsItemItsOwnContainerOverride( object item)
{
return (item is ToolboxItem);
}
}

Toolbox使用WrapPanel显示ToolboxItem，样式文件Toolbox.xaml如下：

 

 

代码

< Style TargetType = " {x:Type s:ToolboxItem} " >
< Setter Property = " Control.Padding "
Value = " 5 " />
< Setter Property = " ContentControl.HorizontalContentAlignment "
Value = " Stretch " />
< Setter Property = " ContentControl.VerticalContentAlignment "
Value = " Stretch " />
< Setter Property = " ToolTip "
Value = " {Binding ToolTip} " />
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " {x:Type s:ToolboxItem} " >
< Grid >
< Rectangle Name = " Border "
StrokeThickness = " 1 "
StrokeDashArray = " 2 "
Fill = " Transparent "
SnapsToDevicePixels = " true " />
< ContentPresenter Content = " {TemplateBinding ContentControl.Content} "
Margin = " {TemplateBinding Padding} "
SnapsToDevicePixels = " {TemplateBinding UIElement.SnapsToDevicePixels} " />
Grid >
< ControlTemplate.Triggers >
< Trigger Property = " IsMouseOver "
Value = " true " >
< Setter TargetName = " Border "
Property = " Stroke "
Value = " Gray " />
Trigger >
ControlTemplate.Triggers >
ControlTemplate >
Setter.Value >
Setter >
Style >

< Style TargetType = " {x:Type s:Toolbox} " >
< Setter Property = " SnapsToDevicePixels "
Value = " true " />
< Setter Property = " Focusable "
Value = " False " />
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate >
< Border BorderThickness = " {TemplateBinding Border.BorderThickness} "
Padding = " {TemplateBinding Control.Padding} "
BorderBrush = " {TemplateBinding Border.BorderBrush} "
Background = " {TemplateBinding Panel.Background} "
SnapsToDevicePixels = " True " >
< ScrollViewer VerticalScrollBarVisibility = " Auto " >
< ItemsPresenter SnapsToDevicePixels = " {TemplateBinding UIElement.SnapsToDevicePixels} " />
ScrollViewer >
Border >
ControlTemplate >
Setter.Value >
Setter >
< Setter Property = " ItemsPanel " >
< Setter.Value >
< ItemsPanelTemplate >
< WrapPanel Margin = " 0,5,0,5 "
ItemHeight = " {Binding Path=DefaultItemSize.Height, RelativeSource={RelativeSource AncestorType=s:Toolbox}} "
ItemWidth = " {Binding Path=DefaultItemSize.Width, RelativeSource={RelativeSource AncestorType=s:Toolbox}} " />
ItemsPanelTemplate >
Setter.Value >
Setter >
Style >

 

• ToolboxItem

ToolboxItem是显示在工具箱中的对象，我们可以通过鼠标点击它进行选择，然后拖拽到DesignerCanvas来生成一个设计对象，示例中是通过XamlWriter.Save保存到DataObject，然后在DesignerCanvas接收这个对象，这部分在进行自己的设计器开发时会进行更改
ToolboxItem的代码如下：

代码

public class ToolboxItem : ContentControl
{
private Point ? dragStartPoint = null ;

static ToolboxItem()
{
FrameworkElement.DefaultStyleKeyProperty.OverrideMetadata( typeof (ToolboxItem),
new FrameworkPropertyMetadata( typeof (ToolboxItem)));
}

protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
{
base .OnPreviewMouseDown(e);
this .dragStartPoint = new Point ? (e.GetPosition( this ));
}

protected override void OnMouseMove(MouseEventArgs e)
{
base .OnMouseMove(e);
if (e.LeftButton != MouseButtonState.Pressed)
{
this .dragStartPoint = null ;
}
if ( this .dragStartPoint.HasValue)
{
Point position = e.GetPosition( this );
if ((SystemParameters.MinimumHorizontalDragDistance <=
Math.Abs(( double )(position.X - this .dragStartPoint.Value.X))) ||
(SystemParameters.MinimumVerticalDragDistance <=
Math.Abs(( double )(position.Y - this .dragStartPoint.Value.Y))))
{
string xamlString = XamlWriter.Save( this .Content);
DataObject dataObject = new DataObject( " DESIGNER_ITEM " , xamlString);

if (dataObject != null )
{
DragDrop.DoDragDrop( this , dataObject, DragDropEffects.Copy);
}
}
e.Handled = true ;
}
}
}

DesignerItem增加IsSelected属性

DesignerItem增加是否选择属性，代码如下：

代码

public class DesignerItem : ContentControl
{
public bool IsSelected
{
get { return ( bool )GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.Register( " IsSelected " , typeof ( bool ),
typeof (DesignerItem),
new FrameworkPropertyMetadata( false ));
...

}

在MouseDown事件时会去设置IsSelected属性：

 

 

代码

protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
{
base .OnPreviewMouseDown(e);
DesignerCanvas designer = VisualTreeHelper.GetParent( this ) as DesignerCanvas;

if (designer != null )
{
if ((Keyboard.Modifiers &
(ModifierKeys.Shift | ModifierKeys.Control)) != ModifierKeys.None)
{
this .IsSelected = ! this .IsSelected;
}
else
{
if ( ! this .IsSelected)
{
designer.DeselectAll();
this .IsSelected = true ;
}
}
}

e.Handled = false ;
}

IsSelected属性触发ResizeDecorator是否显示：

代码

< Style TargetType = " {x:Type s:DesignerItem} " >
< Setter Property = " MinHeight " Value = " 50 " />
< Setter Property = " MinWidth " Value = " 50 " />
< Setter Property = " SnapsToDevicePixels " Value = " true " />
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " {x:Type s:DesignerItem} " >
< Grid DataContext = " {Binding RelativeSource={RelativeSource TemplatedParent},
Path = .} " >
< s:MoveThumb
x:Name = " PART_MoveThumb "
Cursor = " SizeAll "
Template = " {StaticResource MoveThumbTemplate} " />
< ContentPresenter
x:Name = " PART_ContentPresenter "
Content = " {TemplateBinding ContentControl.Content} "
Margin = " {TemplateBinding Padding} " />
< s:ResizeDecorator x:Name = " PART_DesignerItemDecorator " />
Grid >
< ControlTemplate.Triggers >
< Trigger Property = " IsSelected " Value = " True " >
< Setter TargetName = " PART_DesignerItemDecorator "
Property = " ShowDecorator " Value = " True " />
Trigger >
ControlTemplate.Triggers >
ControlTemplate >
Setter.Value >
Setter >
Style >

DesignerItem支持移动选择区域

  

DesignerItem默认允许移动的是一个透明的矩形区域，如上图左边这个。我们一般希望点击这个形状内部才允许移动和选择，这时候我们可以通过DesignerItem.MoveThumbTemplate来更改这个支持Move的区域，代码如下：

< Path Stroke = " Red " StrokeThickness = " 5 " Stretch = " Fill " IsHitTestVisible = " false "
Data = " M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z " >
< s:DesignerItem. MoveThumbTemplate >
< ControlTemplate >
< Path Data = " M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z "
Fill = " Transparent " Stretch = " Fill " />
ControlTemplate >
s:DesignerItem. MoveThumbTemplate   >
Path >

 

 

 

欢迎转载，转载请注明：转载自周金根 [ http://zhoujg.cnblogs.com/ ]