WP7的控件开发入门（三）

关于作图部分我想说的是完全可以通过Blend工具，简单的实现，几乎不用自己直面代码，但是为了控件部分知识的全面性，我还是强忍着学习了这一部分，并做了记录如下： 

绘图控件

 

InkPresenter 控件

 <InkPresenter 

                Height="518" 

                HorizontalAlignment="Left" 

                Margin="28,40,0,0" 

                Name="inkPresenter1" 

                VerticalAlignment="Top" 

                Width="390" 

                Background="White"

                MouseMove="inkPresenter1_MouseMove"

                LostMouseCapture="inkPresenter1_LostMouseCapture"

                MouseLeftButtonDown="inkPresenter1_MouseLeftButtonDown"

                /> 

代码实现

 先定义 Stroke NewStroke;

  private void inkPresenter1_MouseMove(object sender, MouseEventArgs e)

        {

            if(NewStroke != null)

            {

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

            }

        }

        private void inkPresenter1_LostMouseCapture(object sender, MouseEventArgs e)

        {

            NewStroke = null;

        }

        private void inkPresenter1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            inkPresenter1.CaptureMouse();

            StylusPointCollection point = new StylusPointCollection();

            point.Add(e.StylusDevice.GetStylusPoints(inkPresenter1));

            NewStroke = new Stroke();

            inkPresenter1.Strokes.Add(NewStroke);

        }

Path控件以及它众多的子效果

<Path Height="150" 

                  HorizontalAlignment="Left" 

                  Margin="5,5,0,0" 

                  Name="path1" 

                  Stroke="Red" 

                  StrokeThickness="5" 

                  VerticalAlignment="Top" 

                  Width="200"

                  Fill="Blue">

                <Path.Data>

                    <EllipseGeometry Center="100,100"

                                     RadiusX="80"

                                     RadiusY="40">

                    </EllipseGeometry>

                </Path.Data>

            </Path>

绘制圆形 

<Path VerticalAlignment="Top"

                  HorizontalAlignment="Left"

                  Margin="10,10,0,0"

                  Height="300"

                  Width="400"

                  Stroke="Red"

                  StrokeThickness="2"

                  Fill="Green">

                <Path.Data>

                    <GeometryGroup FillRule="EvenOdd">

                        <EllipseGeometry Center="180,120"

                                         RadiusX="140"

                                         RadiusY="80"/>

                        <RectangleGeometry Rect="50,150,300,100"

                                           />

                    </GeometryGroup>

                </Path.Data>

            </Path>

绘制两个图片重叠的效果 

            

<Path Height="400"

                  Width="400"

                  VerticalAlignment="Top"

                  HorizontalAlignment="Left"

                  Margin="1,1,0,0"

                  Stroke="Yellow"

                  StrokeThickness="3"

                  Data="M 10,40 L 200,40 V 100 H 40 S 60,200,200,200"

                  >

</Path>

绘制线条 

 Ellipse控件与Rectangle控件那个简单的就不多说了，记得矩形控件的圆角效果

 

 <Ellipse Height="100" 

                     HorizontalAlignment="Left" 

                     Margin="88,69,0,0" 

                     Name="ellipse1" 

                     Stroke="Red" 

                     StrokeThickness="1" 

                     VerticalAlignment="Top" 

                     Width="200" 

                     Fill="Green"/>

            <Rectangle Height="110" 

                       HorizontalAlignment="Left" 

                       Margin="88,0,0,95" 

                       Name="rectangle1" 

                       Stroke="Red" 

                       StrokeThickness="1" 

                       VerticalAlignment="Bottom" 

                       Width="237" 

                       RadiusX ="20"

                       RadiusY="20"

                       Fill="Blue"/>

Line控件画直线

 

<Line Width="300"

                  Height="300"

                  VerticalAlignment="Top"

                  HorizontalAlignment="Left"

                  Margin="20,20,0,0"

                  X1="30" Y1="30"

                  X2="250" Y2="250"

                  Stroke="Yellow"

                  StrokeThickness="10"

                  />

Polygon 多边形控件，指定点后是封闭的

            <Polygon Width="200"

                  Height="200"

                  VerticalAlignment="Top"

                  HorizontalAlignment="Left"

                  Margin="3,3,0,0"

                  Points="3,3 180,10 150,100"

                  Stroke="Yellow"

                  StrokeThickness="10"

                  />

Polyline控件是折线，把点连接起来，不封闭 

            <Polyline Width="200"

                  Height="200"

                  VerticalAlignment="Top"

                  HorizontalAlignment="Left"

                  Margin="30,300,0,0"

                  Points="40,30 180,30 100,190"

                  Stroke="Yellow"

                  StrokeThickness="10"

                  />

 Glyphs 该控件用于加载字库改变字体

<Glyphs HorizontalAlignment="Left"

                    VerticalAlignment="Top"

                    Margin="3,3,0,0"

                    Width="400"

                    Height="400"

                    FontUri="cuti.ttf"

                    OriginX="1"

                    OriginY="200"

                    Fill="Green"

                    FontRenderingEmSize="100"

                    UnicodeString="hello world">

            </Glyphs>

  OriginX="1"

  OriginY="200"这两个值，所定位的点，指的是显示字的左下角那个点

 -------------------以上都是绘图控件--------------------------------------

Map控件

 <my:Map 

                Height="500" 

                HorizontalAlignment="Left" 

                VerticalAlignment="Top" 

                Margin="20,20,0,0" 

                Name="map1" 

                Width="500" 

                CredentialsProvider="hello world" //此处需要填写注册的账号，需要去bingmap官网注册获得一个key。

                ScaleVisibility="Visible"

                Center="30,120" //定位的中心点

                ZoomBarVisibility="Visible"//显示缩放按钮

                Mode="Aerial"//地图模式的选择，默认的是Road，显示道路，当先模式显示的是卫星地图

                ZoomLevel="15"/> //缩放的比例

 加载显示的时候显示点的标示

  private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

        {

            Pushpin pin = new Pushpin();

            pin.Location = new System.Device.Location.GeoCoordinate(30,120);

            pin.Width = 30;

            pin.Height = 30;

            pin.Content = "hello world";

            pin.Background = new SolidColorBrush(Colors.Blue);

            map1.Children.Add(pin);

        } 

 在查找点上还可以显示地点的标志建筑的图片，设置具体的显示方式之类的额外实现在此就不在赘述了

 自己模拟机上的样子，有点丑啊嘿嘿