0%

WP7开发 图像控件Image的使用

Image控件可以让我们在程序中显示一张指定的图片. XAML代码添加控件:

<Image Height="244" HorizontalAlignment="Left"  Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="330" Source="/Test;component/Images/Koala.jpg" />

Source指定的是相对路径/Images目录下的Koala.jpg文件,可以选中Image控件,在属性的Source后点”…”按钮图形化添加硬盘上的图片,Visual Studio会自动把选中的图片添加进项目. Stretch属性是设定图片的显示方法: 值None为按图片自身分辨率显示,如果Image控件的宽度或高度小于图片的宽度或高度,超出的部分就看不到了. 值Fill指用拉伸的方式填满Image控件. 值Uniform是指按原图片的宽高比例,适应Image控件的宽或高,以达到Image控件宽高中较小值为准(除去图片宽高比例),所以,总是能全部显示图片 值UniformToFill是指按原图片的宽高比例,适应Image控件的宽或高,但是以达到Image控件宽高中较大值为准(除去图片宽高比例),所以,只有当Image控件的宽高比例与图片相同时,才能完整显示图片. 后面两个值表达得不是很清楚,自己试试就知道了. C#代码中修改显示的图片:

BitmapImage myImage=new BitmapImage(new Uri("/Test;component/Images/car.jpg",UriKind.Relative));
//可以使用BitmapImage myImage = new BitmapImage(new Uri("http://img04.taobaocdn.com/tps/i4/T140KqXgRgXXXXXXXX-152-202.jpg", UriKind.Absolute));
//的形式来显示网络图片,UriKind指的是Uri的类别,相对路径或绝对路径
image1.Source=myImage;

图片的缩放. 图片的缩放,把显示的显示方式设为Uniform,再同时把Image的Height和Width属性乘以同一个值就可以了,放大就大于1,缩小就小于1.但是如果直接这么操作,手机屏幕很小,很可能会无法显示图片的一部分.我们可以把Image控件放进ScrollView里来解决,这样,我们就可以在屏幕上上下左右拖动来浏览图片.

 <ScrollViewer Height="298" Width="387" Margin="52,75,29,234" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
    <Image Height="239" HorizontalAlignment="Left"  Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="322" Source="/Test;component/Images/Koala.jpg" />
 </ScrollViewer>

放大缩小代码:

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            image1.Width *= 1.2;
            image1.Height *= 1.2;
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            image1.Width *= 0.8;
            image1.Height *= 0.8;
        }