一天一天学 windows phone 控件 之 Image + InkPresenter（十四）

废话：因为周末 一老同学从外地来，陪了别人两天，顺便看了场演唱会，再送了下。就没时间更新了。

我们接着讲控件，先简单把Image控件说下，然后我们来说下绘图控件InkPresenter。

Image控件如果我们仅仅只是简单放置一个图片路径，那么我们看到的是当前容器大小的图。所以如果我们要显示更大的尺寸，我们需要在Image控件外套一个容器控件。页面的代码如下：

<Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="4*" />
                <RowDefinition Height="4*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <ScrollViewer Grid.Row="0"
                          Margin="15"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto">
                <Image Source="Image/1.jpg" Stretch="None" />
            </ScrollViewer>
            <Image Grid.Row="1"
                   Margin="15"
                   Source="Image/1.jpg"
                   Stretch="Uniform" />
            <HyperlinkButton Grid.Row="2"
                             Content="go to InkPresenter Page"
                             NavigateUri="/Page1.xaml" />
        </Grid>

如果如图

最后加了跳转到InkPresenter 控件的链接。我们添加InkPresenter这个控件就是我们常看到的画图控件，现在很多修改图片的软件应该就是这个控件的基础上改吧改吧就行了。页面代码如下：

<Grid x:Name="ContentPanel"
              Grid.Row="0"
              Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <InkPresenter Name="inkPrt"
                          Grid.Row="0"
                          Width="420"
                          Height="600"
                          Background="Violet"
                          LostMouseCapture="inkPrt_LostMouseCapture"
                          MouseLeftButtonDown="inkPrt_MouseLeftButtonDown"
                          MouseMove="inkPrt_MouseMove">
                <InkPresenter.Clip>
                    <RectangleGeometry Rect="0,0,420,600" />
                </InkPresenter.Clip>
            </InkPresenter>
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <RadioButton Checked="RadioButton_Checked">
                    <RadioButton.Content>
                        <Rectangle Width="30"
                                   Height="30"
                                   Fill="Blue" />
                    </RadioButton.Content>
                </RadioButton>
                <RadioButton Checked="RadioButton_Checked">
                    <RadioButton.Content>
                        <Rectangle Width="30"
                                   Height="30"
                                   Fill="Yellow" />
                    </RadioButton.Content>
                </RadioButton>
                <RadioButton Checked="RadioButton_Checked">
                    <RadioButton.Content>
                        <Rectangle Width="30"
                                   Height="30"
                                   Fill="Green" />
                    </RadioButton.Content>
                </RadioButton>
                <RadioButton Checked="RadioButton_Checked">
                    <RadioButton.Content>
                        <Rectangle Width="30"
                                   Height="30"
                                   Fill="Red" />
                    </RadioButton.Content>
                </RadioButton>
            </StackPanel>

        </Grid>

代码段

//按住到松开 的一笔
        Stroke MyStroke = null;
        //笔的外观
        DrawingAttributes myDrawing = null;
        //笔的粗细
        double strokeWeight = 10;
        public Page1()
        {
            InitializeComponent();
            //初始化画笔
            myDrawing = new DrawingAttributes();
            myDrawing.Color = Colors.White;
            myDrawing.Width = myDrawing.Height = strokeWeight;
        }

        private void inkPrt_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            this.inkPrt.CaptureMouse();
            //获取点
            StylusPointCollection stPoint = e.StylusDevice.GetStylusPoints(this.inkPrt);
            MyStroke = new Stroke(stPoint);
            if (MyStroke!=null)
            {
                MyStroke.DrawingAttributes = myDrawing;
            }
            //添加到集合中
            this.inkPrt.Strokes.Add(MyStroke);

        }

        private void inkPrt_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (MyStroke!=null)
            {
                MyStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(this.inkPrt));
            }
        }

        private void inkPrt_LostMouseCapture(object sender, System.Windows.Input.MouseEventArgs e)
        {
            //松开的时候 释放
            MyStroke = null;
        }
        //这个就是RadionButton  去获取颜色的方法。然后将取到的颜色赋值给画笔
        private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            RadioButton rb = e.OriginalSource as RadioButton;

            Rectangle rec = rb.Content as Rectangle;

            if (rec!=null)
            {
                myDrawing = new DrawingAttributes();
                //这个就是获取RadioButton 的Content 属性中的Color
                myDrawing.Color = ((SolidColorBrush)rec.Fill).Color;
                myDrawing.Width = myDrawing.Height = strokeWeight;
            }
        }
    }

如图

差不多就是这个效果了。

源码下载地址：http://download.csdn.net/detail/gongkepop/6246413

(写的不好请见谅，有不对请留言告知我，免得误人子弟。）