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);

        } 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2012-03-31 18:42  张小然  阅读(1378)  评论(3编辑  收藏  举报