WP7基础学习第五讲

本节内容：

绘图控件和Map控件
绘图控件：InkPresenter/Path/Ellipse/Rectangle/Line/Polygon/Polyline/Glyphs
1.InkePresenter:产生手写效果(触屏书写)
事件：第一个：获取鼠标位置；
<InkPresenter Height="512" HorizontalAlignment="Left" Margin="24,65,0,0" Name="inkpresenter1" VerticalAlignment="Top" Width="444" LostMouseCapture="inkPresenter1_LostMouseCapture"
MouseLeftButtonDown="inkPresenter1_MouseLeftButtonDown"
MouseMove="inkPresenter1_MouseMove" Background="White"/>

this.inkPresenter1.Strokes.Add(NewStroke);
NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter1));

代码的添加：
(1).声明字段：
Stroke NewStroke;
(2)在LostMouseCapture事件中：
NewStroke=null;//鼠标已经抬起，离开
(3)在MouseLeftButtonDown事件中：
inkPresenter1.CaptureMouse();//捕获鼠标
//获取坐标点的集合
StylusPointCollection spc=new StylusPointCollection();
//添加到集合，初始化
spc.Add(e.StylusDeice.GetStylusPonits(inkPresenter1));
NewStroke=new Stroke();
this.inkPresenter1.Strokes.Add(NewStroke);
(4).在鼠标移动时，MouseMove事件中：（保存写的点集合）
if(NewStroke !=null)
NewStroke.StylusPoints.Add(e.StylusPoints(inkPresenter1));

2.Path:(路径控件)
通过Markup Syntax来绘制一系列的线条；Geometries来绘制形状
<Path Height="428" HorizontalAlignment="Left" Name="path1"
Margin="12,127,0,0" Stroke="Red" StrokeThickness="10" VerticalAlignment="Top" Width="456" Fill="Green">
<Path.Data>
<EllipseGeometry Center="200,200" RadiusX="100" RadiusY="30"/>
</Path.Data>
</Path>

<Path Height="428" HorizontalAlignment="Left"   Margin="12,137,0,0" Name="path1" Stroke="Red"   StrokeThickness="10" VerticalAlignment="Top" Width="456"
Fill="Green">
<Path.Data>
<GeometryGroup FillRule="EvenOdd">(叠加：此去除叠加部分)
   <EllipseGeometry Center="200,200" RadiusX="100"         RadiusY="150"/>
   <RectangleGeometry Rect="100,200,300,200"/>
</GeometryGroup>
</Path.Data>
</Path>

绘制线条：Mini-Language命令
-移动命令：
-M：绝对起始点
-m：相对前一点的起始点（如：M 100,200）
-直线命令：
-L/I：直线的结束点（如：L 100,200）
-水平线命令：
-H/h:x坐标（如：H 20）
-垂线命令：
-V/v:y坐标（如：V 100）
-三次贝塞尔曲线命令：
-C/c：控制点坐标、控制点坐标、结束点坐标
(如：C 100,200 200,400 300,200)
-二次贝塞尔曲线命令：
-Q/q:控制点坐标、结束点坐标
（如：Q 100,200 300,200）
-光滑三次贝塞尔曲线命令：
-S/s:控制点坐标、结束点坐标
（如：S 100,200 200,300）
-光滑二次贝塞尔曲线命令：
-T/t:控制点、结束点
（如：T 100,200 200,300）
-圆弧命令：
-A/a:弧大小（半径值）、弧角、优势弧标记
（1大于等于180度，0小于180度）、正负弧标记、结束点
-（如：A 5,5 0 0 0 100,1）
-闭合命令：
-Z/z：将创建的曲线封闭

3.Ellipse:绘制圆形、椭圆形
<Ellipse Height="200" HorizontalAlignment="Left" Margin="136,56,0,0" Name="ellipse1" Stroke="Red" StrokeThickness="2" VerticalAlignment="Top" Width="200"/>
<Ellipse Height="312" HorizontalAlignment="Left" Margin="136,283,0,0" Name="ellipse2" Stroke="Red" StrokeThickness="2" VerticalAlignment="Top" Width="200"/>

4.Rectangle:绘制矩形或圆角矩形
<Rectangle Height="154" HorizontalAlignment="Left" Margin="119,80,0,0" Name="rectangle1" Stroke="Red" StrokeThickness="1" VertialAlignment="Top" Width="213" RadiusX="50" RadiusY="50"/>
<Rectangle Height="184" HorizontalAlignment="Left" Margin="126,37,0,0" Name="rectangle2" Stroke="Red" StrokeThickness="1" VerticalAlignment="Top" Width="214"/>

5.Line:绘制两点间的直线
<Line X1="10" Y1="50" X2="350" Y2="50" Stroke="Red" StrokeThickness="5" Margin="36,144,23,324"/>
<Line X1="200" Y1="10" X2="200" Y2="300" Stroke="Blue" StrokeThickness="5" Margin="36,144,23,147"/>

6.Polygon:绘制封装多边形
<Polygon Height="249" HorizontalAlignment="Left" Margin="104,95,0,0" Name="polygon1" Stroke="Red" StrokeThickness="5" VerticalAlignment="Top" Width="336"
Points="10,10 200,25 300,175 200,200" Fill="blue"/>

7.Polyline:（多边线）绘制封闭、开放多边形
(必须手工封闭：在起点和结点坐标一样)
<Polyline Height="307" HorizontalAlignment="Left" Margin="36,131,0,0" Name="polyline1" Stroke="Red" StrokeThickness="15" VerticalAlignment="Top" Width="394"
Points="50,25 0,100 100,200 150,250 270,150"/>

8.Glyphs:加载字体库
（绘制字母、符号、字符等；主要用来显示Unicode字符；徐啊哟加载字体库或从网上下载字体库）
<Glyphs HorizontalAlignment="Left" Margin="36,34,0,0" Name="glyphs1" VerticalAlignment="Top" Height="474" Width="407" FontUir="msyhdb.ttf" FontRenderingEmSize="100"
StyleSimlations="BoldItalicSimulation" Fill="Red" OriginX="20" OriginY="200" UnicodeString="中国"/>

Map控件:(地图控件)
与BingMap的比较；简单使用；深入使用
与BingMap的比较：加载的地图；缩放显示；属性的不同；地图的标记不同

简单使用：
注册地图：https://www.bingmapsportal.com/
CredentialsProvider:填写申请到的Register key

设置中心点：
<my:Map Height="607" Mode="Aerial" Name="map1"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="468" CredentialsProvider="申请的map id 号"
ZoomBarVisibility="Collapsed" ZoomLevel="15"
Center="30.259497,120.129798" />

设置中心点代码：
map1.Center=new GeoCoordinate(30.259497,120.129798);

显示模式设置：两种显示方式Road、Aerial
显示缩放按钮：ZoomBarVisibility属性
显示比例尺：ScaleVisibility属性

深入使用：
加一个标记：Pushpin
Pushpin pin=new Pushpin();
pin.Location=new GeoCoordinate(30.259497,120.129798);
pin.Width=200;
pin.Height=200;
pin.Content="test";
pin.Background=new SolidColorBrush(Color.Red);

---加到地图上：map1.Children.Add(pin);----
----------------------------------------------------

绘制多边形区域：MapPolygon(自动封闭)
MapPolygon polygon=new MapPolygon();
polygon.Locations=new LocationCollection()
{
new GeoCoordinate(30.259497,120.129798),
new GeoCoordinate(30.259497,120.129798),
new GeoCoordinate(30.259497,120.129798),
};

--注意对填充、边框、边框的粗细、透明度的设置--
polygon.Fill=new System......
polygon.Stroke=new System......
polygon.StrokeThichness=5;
polygon.Opacity=0.7;
map1.Children.Add(polygon);
-----------------------------------------------------

绘制多边线：MapPolyline（不自动封闭）
MapPolyline polyline=new MapPolyline();
polyline.Stroke=new SolidColorBrush(Colors.Red);
polyline.Locations=new LocationCollection()
{
new GeoCoordinate(30.259497,120.129798),
new GeoCoordinate(30.259497,120.129798),
}

--注意对边框、边框粗细透明度的设置--
polyline.Stroke=new SolidColorBrush(Color.Red);
polyline.StrokeThichness=5;
polyline.Opacity=0.7;
map1.Children.Add(polyline);
------------------------------------------------------

在地图上加图片:MapLayer
加入图片：
Image image=new Image();
image.Width=100;
image.Height=100;
image.Scoure=new BitmapImage(new Uri("Tuli.jpg"),UriKind.Relative)
---添加图片，注意图片的大小，不会随缩放改变-------
MapLayer imagelayer=new MapLayer();
imagelayer.AddChild(image, new GeoCoordinate(30.259497,120.129798),PositionOrigin.BottomLeft);

map1.Children.Add(imagelayer);
------------------------------------------------------