底圖控件分為預顯層和圖形層，預顯層用來輔助畫圖者更準確的繪制圖型，圖形層用來顯示操作者繪制好的圖形。

　　底圖控件提供"捕捉鼠標操作實現繪圖功能"(見目標1)

　　預顯層需要實現"繪線輔助提示功能"(見目標2)

　　圖形層需要實現"繪圖預顯功能"(見目標3)

　　底圖控件(代碼如下)

1、捕捉鼠標操作實現繪圖功能

<UserControl x:Class="fxhomeSoftMaps.baseMap"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="//schemas.microsoft.com/expression/blend/2008"
xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:fxhomeSoftMaps">

<Grid x:Name="LayoutRoot">
<Grid x:Name="previewLayer" Background="#FF00D6B4"
MouseLeftButtonDown="previewLayer_MouseLeftButtonDown"
MouseMove="previewLayer_MouseMove"
KeyDown="previewLayer_KeyDown"
>
<my:baseMap_point VerticalAlignment="Top" x:Name="bPoint" HorizontalAlignment="Left" Visibility="Collapsed"/>
<my:baseMap_previewLine x:Name="bLine" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="graphicsLayer">
</Grid>
</Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace fxhomeSoftMaps
{
public partial class baseMap : UserControl
{
public baseMap()
{
InitializeComponent();
}

#region 屬性

//線路集合
private List<Line> _lineList;
public List<Line> lineList
{
get
{
return _lineList;
}
set
{
_lineList = value;
}
}

//畫線開關
private bool _lineState = true;
public bool lineState
{
get
{
return _lineState;
}
set
{
_lineState = value;
}
}
//線段開關
private bool lineSegment = false;
#endregion

#region 預覽圖層-畫線操作
//鼠標按下
private void previewLayer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{

if (lineState)
{
//設置預顯開始點
bPoint.X = e.GetPosition(null).X;
bPoint.Y = e.GetPosition(null).Y;
bPoint.Visibility = Visibility.Visible;
//設置預顯線
bLine.X1 = bPoint.X;
bLine.Y1 = bPoint.Y;
bLine.X2 = bPoint.X;
bLine.Y2 = bPoint.Y;
bLine.Visibility = Visibility.Visible;

//打開線段開關
lineSegment = true;
if (lineSegment == false)
{

}
}
}
//鼠標移動
private void previewLayer_MouseMove(object sender, MouseEventArgs e)
{
if (lineState)
{
bLine.X2 = e.GetPosition(null).X;
bLine.Y2 = e.GetPosition(null).Y;
}
}
//按鍵
private void previewLayer_KeyDown(object sender, KeyEventArgs e)
{
//如果按ESC 取消畫線
if (e.Key == Key.Escape)
{
bPoint.Visibility = Visibility.Collapsed;
bLine.Visibility = Visibility.Collapsed;
}
}
#endregion
 

#region 圖形圖層操作

#endregion
}
}

2、繪線輔助提示功能(如圖)

1.1 預顯線開始點控件(代碼如下)

<UserControl x:Class="fxhomeSoftMaps.baseMap_point"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="//schemas.microsoft.com/expression/blend/2008"
xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="4" Height="4">

<Grid x:Name="LayoutRoot" Margin="-2,-2,0,0">
<Ellipse x:Name="baseMapPoint">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF00A7FF" Offset="0"/>
<GradientStop Color="#FF44FBFF" Offset="1"/>
<GradientStop Color="#FF14C0FF" Offset="0.575"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace fxhomeSoftMaps
{
public partial class baseMap_point : UserControl
{
public baseMap_point()
{
InitializeComponent();
}

public Double X
{
get { return (Double)GetValue(XProperty); }
set { SetValue(XProperty, value); }
}

// Using a DependencyProperty as the backing store for X. This enables animation, styling, binding, etc...
public static readonly DependencyProperty XProperty =
DependencyProperty.Register("X", typeof(Double), typeof(baseMap_point), new PropertyMetadata(null));

public Double Y
{
get { return (Double)GetValue(YProperty); }
set { SetValue(YProperty, value); }
}

// Using a DependencyProperty as the backing store for Y. This enables animation, styling, binding, etc...
public static readonly DependencyProperty YProperty =
DependencyProperty.Register("Y", typeof(Double), typeof(baseMap_point), new PropertyMetadata(null));

}
}

1.2 預顯線結束控件(代碼如下)

<UserControl x:Class="fxhomeSoftMaps.baseMap_previewArrow"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="//schemas.microsoft.com/expression/blend/2008"
xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="30">

<Grid x:Name="LayoutRoot" Margin="-15,-15,0,0">
<Line StrokeThickness="2" Y2="30" X2="15" X1="15" Stroke="#FFC00000" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Line Y1="15" X2="30" Y2="15" Stroke="#FFC00000" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Ellipse HorizontalAlignment="Left" Height="10" Margin="10,10,0,0" StrokeThickness="2" VerticalAlignment="Top" Width="10">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF5AFF00" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace fxhomeSoftMaps
{
public partial class baseMap_previewArrow : UserControl
{
public baseMap_previewArrow()
{
InitializeComponent();
}
}
}

1.3 預顯線控件[包含以上兩個控件](代碼如下)

<UserControl x:Name="userControl" x:Class="fxhomeSoftMaps.baseMap_previewLine"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="//schemas.microsoft.com/expression/blend/2008"
xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:fxhomeSoftMaps">

<Grid x:Name="LayoutRoot">
<Line x:Name="baseMapLine" Stroke="#FFC00000" StrokeThickness="2" StrokeDashArray="2 2" X1="{Binding X1, ElementName=userControl, Mode=TwoWay}" Y1="{Binding Y1, ElementName=userControl, Mode=TwoWay}" X2="{Binding X2, ElementName=userControl, Mode=TwoWay}" Y2="{Binding Y2, ElementName=userControl, Mode=TwoWay}"/>
<my:baseMap_previewArrow x:Name="baseMap_previewArrow"/>
</Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace fxhomeSoftMaps
{
public partial class baseMap_previewLine : UserControl
{
public baseMap_previewLine()
{
InitializeComponent();
}

#region 附加屬性

public Double X1
{
get { return (Double)GetValue(X1Property); }
set { SetValue(X1Property, value); }
}

// Using a DependencyProperty as the backing store for X1. This enables animation, styling, binding, etc...
public static readonly DependencyProperty X1Property =
DependencyProperty.Register("X1", typeof(Double), typeof(baseMap_previewLine), new PropertyMetadata(null));

public Double X2
{
get { return (Double)GetValue(X2Property); }
set
{
SetValue(X2Property, value);
baseMap_previewArrow.Margin = new Thickness(baseMapLine.X2, baseMapLine.Y2, 0, 0);
}
}

// Using a DependencyProperty as the backing store for X2. This enables animation, styling, binding, etc...
public static readonly DependencyProperty X2Property =
DependencyProperty.Register("X2";, typeof(Double), typeof(baseMap_previewLine), new PropertyMetadata(null));

public Double Y1
{
get { return (Double)GetValue(Y1Property); }
set { SetValue(Y1Property, value); }
}

// Using a DependencyProperty as the backing store for Y1. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Y1Property =
DependencyProperty.Register("Y1", typeof(Double), typeof(baseMap_previewLine), new PropertyMetadata(null));

public Double Y2
{
get { return (Double)GetValue(Y2Property); }
set
{
SetValue(Y2Property, value);
baseMap_previewArrow.Margin = new Thickness(baseMapLine.X2, baseMapLine.Y2, 0, 0);
}
}

// Using a DependencyProperty as the backing store for Y2. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Y2Property =
DependencyProperty.Register("Y2", typeof(Double), typeof(baseMap_previewLine), new PropertyMetadata(null));
#endregion
}
}