在Windows应用商店应用中可以使用两种方法来显示图片,这两种方法分别为使用Image对象和使用ImageBrush对象。Image对象可以直接呈现一幅图像,而ImageBrush对象则可以用一幅图像来绘制其他对象。

9.2.1 Image和ImageBrush

本节将介绍Image对象和ImageBrush对象的使用方法、常用属性等,下面先通过一个示例介绍Image对象的使用方法。

首先新建一个Windows应用商店的空白应用程序项目,并命名为ImageSample,在项目中新建一个名为Picture的文件夹,向文件夹中添加一张要显示的图片car.jpg。然后打开项目的MainPage.xaml文件,在Grid元素中添加一个Image控件,代码如下所示:

<Image HorizontalAlignment="Center" Height="650" Margin="237,64,237,0" VerticalAlignment="Top" Width="892" Source="Picture/car.jpg"/>

在上面的代码中,使用Source属性指定了Image控件显示的图像路径。启动调试后,可以看到,图像的显示效果如图9-1所示。

图9-1使用Image对象显示图片的效果图

接下来介绍ImageBrush对象,它与Image对象非常相似,区别在于Image对象用于直接显示图像,而ImageBrush对象则是用一幅图像绘制其他对象区域,例如可以在Ellipse对象的Fill属性中使用ImageBrush对象,或者在Canvas对象的Backgruond属性中使用ImageBrush对象。

下面通过一个示例介绍如何在Ellipse控件的Fill属性中使用ImageBrush对象来显示图像。

首先新建一个Windows应用商店的空白应用程序项目,命名为ImageBrushSample,在项目中新建一个名为Picture的文件夹,并向文件夹中添加一张要显示的图片car.jpg。然后打开项目的MainPage.xaml文件,在Grid元素中添加如下代码:

<Ellipse Width="1206" Height="638" HorizontalAlignment="Left" Margin="80,70,0,0" Stroke="Black" VerticalAlignment="Top" >

     <Ellipse.Fill>

         <ImageBrush ImageSource="Picture/car.jpg"/>

     </Ellipse.Fill>

</Ellipse>

在上面的代码中,首先添加一个Ellipse元素并设置其属性,接着在Ellipse.Fill属性中使用ImageBrush控件的ImageSource属性指定要显示的图像路径。启动调试后,可以看到图像显示效果如图9-2所示。

图9-2 通过ImageBrush绘制的Ellipse控件的效果图

了解了Image对象和ImageBrush对象的基本用法后,下面介绍它们的属性,这两个对象的属性类似,常用的属性如下:

q  Source属性,表示图片的地址源,支持本地图片,同时也支持网络图片。

q  Opacity属性,表示图片的不透明度,该属性可以设置为0.0至1.0的任意值,0.0表示图像完全透明,1.0表示图像完全不透明。

q  Clip属性,该属性可以精确裁减图片,只有在裁剪区域内的图像才会被显示,但目前尚不支持非矩形区域裁剪。

q  Stretch属性,表示图片的呈现状态,共有4种属性值,分别为None、Uniform、UniformToFill、Fill,这4种Stretch属性值的显示效果如图9-3所示。

图9-3 不同Stretch属性值的显示效果

m  None值表示图像不会拉伸以填充溢出部分的尺寸。在将Stretch属性设定为该值时必须小心,如果原图像尺寸大于显示区域尺寸,那么设定为该值将导致图像被裁减,这通常是不可取的,因为在这种情况下并不能像刻意裁剪那样控制被裁减掉的图像部分。

m  Uniform值表示图像将被按比例拉伸以适应输出尺寸,即图像有一边满足规定的尺寸即可,图像的原始宽高比例将被保存下来,该值为Stretch属性的默认值。

m  UniformToFill值表示图像将被按比例拉伸以完全填充输出区域,图像的原始宽高比例将被保存下来。

m  Fill值表示图像将被按比例拉伸以适应输出尺寸,即图像有一边满足规定的尺寸即可,由于设定为该值时图像内容的宽高是被分别按比例拉伸的,因此图像的原始宽高比例将不会保存,在显示时图像有可能扭曲。

接下来通过一个示例,具体展示各种Stretch属性值的显示效果,读者可以仔细体会它们之间的差别,以便在使用时灵活选择各种Stretch属性值。

首先在Visual Studio 2012中新建一个Windows应用商店的空白应用程序项目,并命名为ImageStretch,在项目中新建一个名为Picture的文件夹,并向文件夹中添加一张需要显示的图片car.jpg。然后打开项目的MainPage.xaml文件,在界面上添加一个Image控件并命名为CarImage,用于显示图片,接着添加4个Button控件,用来设置Stretch属性的4个属性值,完成之后的代码如下所示:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Image x:Name="CarImage" HorizontalAlignment="Center" Height="608" Margin="40,84,419,76" VerticalAlignment="Center" Width="1007" Source="Picture/car.jpg"/>

    <Button x:Name="NoneButton" Content="None" HorizontalAlignment="Left" Height="98" Margin="1058,64,0,0" VerticalAlignment="Top" Width="272" FontSize="36" Click="NoneButton_Click"/>

    <Button x:Name="UniformButton" Content="Uniform" HorizontalAlignment="Left" Height="98" Margin="1058,248,0,0" VerticalAlignment="Top" Width="272" FontSize="36" Click="UniformButton_Click"/>

    <Button x:Name="UniformToFillButton" Content="UniformToFill" HorizontalAlignment="Left" Height="98" Margin="1058,438,0,0" VerticalAlignment="Top" Width="272" FontSize="36" Click="UniformToFillButton_Click"/>

    <Button x:Name="FillButton" Content="Fill" HorizontalAlignment="Left" Height="98" Margin="1058,616,0,0" VerticalAlignment="Top" Width="272" FontSize="36" Click="FillButton_Click"/>

</Grid>

布局好前台界面后,接下来打开项目中的MianPage.xaml.cs文件,为4个Button控件添加Click事件处理方法,实现单击不同按钮将CarImage控件的Stretch属性值设置为None、Uniform、UniformToFill和Fill,从而改变图片的显示效果。

首先添加Name属性为“NoneButton”按钮的Click事件处理方法,单击按钮将CarImage控件的Stretch属性值设置为None,代码如下所示:

private void NoneButton_Click(object sender, RoutedEventArgs e)

{

    //设置Stretch属性值为None

    CarImage.Stretch = Stretch.None;

}

然后添加Name属性为“UniformButton”按钮的Click事件处理方法,单击按钮将CarImage控件的Stretch属性值设置为Uniform,代码如下所示:

private void UniformButton_Click(object sender, RoutedEventArgs e)

{

    //设置Stretch属性值为Uniform

CarImage.Stretch = Stretch.Uniform;

}

接下来添加Name属性为“UniformToFillButton”按钮的Click事件处理方法,单击按钮将CarImage控件的Stretch属性值设置为UniformToFill,代码如下所示:

private void UniformToFillButton_Click(object sender, RoutedEventArgs e)

{

    //设置Stretch属性值为UniformToFill

CarImage.Stretch = Stretch.UniformToFill;

}

最后添加Name属性为“FillButton”按钮的Click事件处理方法,单击按钮将CarImage控件的Stretch属性值设置为Fill,代码如下所示:

private void FillButton_Click(object sender, RoutedEventArgs e)

{

    //设置Stretch属性值为Fill

CarImage.Stretch = Stretch.Fill;

}

启动调试,分别为将Stretch属性值设定为None、Uniform、UniformToFill、Fill后的图像显示效果对比如图9-4所示。

 

(a)Stretch属性值为None                           (b)Stretch属性值为Uniform

 

(c)Stretch属性值为UnifromToFill                  (d)Stretch属性值为Fill

图9-4 四种Strech属性值的显示效果

Windows Store App 图像的更多相关文章

  1. 在桌面程序上和Metro/Modern/Windows store app的交互(相互打开,配置读取)

    这个标题真是取得我都觉得蛋疼..微软改名狂魔搞得我都不知道要叫哪个好.. 这边记录一下自己的桌面程序跟windows store app交互的过程. 由于某些原因,微软的商店应用的安全沙箱导致很多事情 ...

  2. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

  3. Windows store app[Part 4]:深入WinRT的异步机制

    接上篇Windows store app[Part 3]:认识WinRT的异步机制 WinRT异步机制回顾: IAsyncInfo接口:WinRT下异步功能的核心,该接口提供所有异步操作的基本功能,如 ...

  4. Windows store app[Part 3]:认识WinRT的异步机制

    WinRT异步机制的诞生背景 当编写一个触控应用程序时,执行一个耗时函数,并通知UI更新,我们希望所有的交互过程都可以做出快速的反应.流畅的操作感变的十分重要. 在连接外部程序接口获取数据,操作本地数 ...

  5. 05、Windows Store app 的图片裁切(更新)

    在 Win Phone Silverlight api 中,有一个 PhotoChooserTask 选择器,指定宽.高属性,在选择图片的时候, 可以进行裁切,代码: PhotoChooserTask ...

  6. 01、Windows Store APP 设置页面横竖屏的方法

    在 windows phone store app 中,判断和设置页面横竖屏的方法,与 silverlight 中的 Page 类 不同,不能直接通过 Page.Orientation 进行设置.而是 ...

  7. Windows store app[Part 1]:读取U盘数据

    Windows 8系统下开发App程序,对于.NET程序员来说,需要重新熟悉下类库. 关于WinRT,引用一张网上传的很多的结构图: 图1 针对App的开发,App工作在系统划定的安全沙箱内,所以通过 ...

  8. Windows store app Settings 的 应用 ( viewmodel + windows.storage)

    1.在首页 加入 一个元素(加下滑线的).此元素绑定了两个属性 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. Windows Store App JavaScript 开发:获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

随机推荐

  1. python-进程,线程,协程

    1.进程和线程  进程定义:进程是正在运行的程序的实例,进程是内核分配资源的最基本的单元,而线程是内核执行的最基本单元,进程内可以包含多个线程,只要记住这三个要点,就可以很清楚的理清进程和线程的行为模 ...

  2. 封装好的AFN网络请求框架和MBProgress

    demo:https://github.com/IMCCP/CCPAFNNetworking(收藏下来)

  3. 获取去除参数url地址

    获取url地址除去?后的链接地址 var url = "12345.htm?x=666&y=777"; if(url.indexOf("?") != - ...

  4. TortoiseSVN客户端重新设置用户名和密码

    TortoiseSVN客户端重新设置用户名和密码 在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么 ...

  5. HQL查询——关联和连接

    HQL查询--关联和连接 为了便于理解有关的使用关联和连接进行HQL查询,首先提供两个具有关联关系的持久化类:Person类和MyEvent类 Person类: import javax.persis ...

  6. String 字符串递归截取字节字符串

    public static String idgui(String s,int num)throws Exception{ int changdu = s.getBytes("UTF-8&q ...

  7. Spark学习(三) -- SparkContext初始化

    标签(空格分隔): Spark 本篇博客以WordCount为例说明Spark Job的提交和运行,包括Spark Application初始化.DAG依赖性分析.任务的调度和派发.中间计算结果的存储 ...

  8. 【Android 疑难杂症1】android.content.ActivityNotFoundException: Unable to find explicit activity class

    android.content.ActivityNotFoundException: Unable to find explicit activity class {com.example.cnote ...

  9. 【问题】AndroidStudio导入项目一直卡在Building gradle project infod的最快速解决方案

    原因 AndroidStudio导入项目一直卡在Building gradle project info的原因, 是因为导入的这个项目使用的gradle版本与本地已经拥有的gradle版本不一致,导致 ...

  10. C# 文件及文件夹深度复制

    完善了下 文件中的文件及文件夹中的复制!如果有更优解决方案请不吝指教 protected void FileDepthCopy(string source, string target){ if (D ...