WPF：从WPF Diagram Designer Part 2学习面板、缩略图、框线选择和工具箱-下
代码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/ ]