Windows Store App 图像
在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 图像的更多相关文章
- 在桌面程序上和Metro/Modern/Windows store app的交互(相互打开,配置读取)
这个标题真是取得我都觉得蛋疼..微软改名狂魔搞得我都不知道要叫哪个好.. 这边记录一下自己的桌面程序跟windows store app交互的过程. 由于某些原因,微软的商店应用的安全沙箱导致很多事情 ...
- Windows Store App 过渡动画
Windows Store App 过渡动画 在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...
- Windows store app[Part 4]:深入WinRT的异步机制
接上篇Windows store app[Part 3]:认识WinRT的异步机制 WinRT异步机制回顾: IAsyncInfo接口:WinRT下异步功能的核心,该接口提供所有异步操作的基本功能,如 ...
- Windows store app[Part 3]:认识WinRT的异步机制
WinRT异步机制的诞生背景 当编写一个触控应用程序时,执行一个耗时函数,并通知UI更新,我们希望所有的交互过程都可以做出快速的反应.流畅的操作感变的十分重要. 在连接外部程序接口获取数据,操作本地数 ...
- 05、Windows Store app 的图片裁切(更新)
在 Win Phone Silverlight api 中,有一个 PhotoChooserTask 选择器,指定宽.高属性,在选择图片的时候, 可以进行裁切,代码: PhotoChooserTask ...
- 01、Windows Store APP 设置页面横竖屏的方法
在 windows phone store app 中,判断和设置页面横竖屏的方法,与 silverlight 中的 Page 类 不同,不能直接通过 Page.Orientation 进行设置.而是 ...
- Windows store app[Part 1]:读取U盘数据
Windows 8系统下开发App程序,对于.NET程序员来说,需要重新熟悉下类库. 关于WinRT,引用一张网上传的很多的结构图: 图1 针对App的开发,App工作在系统划定的安全沙箱内,所以通过 ...
- Windows store app Settings 的 应用 ( viewmodel + windows.storage)
1.在首页 加入 一个元素(加下滑线的).此元素绑定了两个属性 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Windows Store App JavaScript 开发:获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
随机推荐
- python-进程,线程,协程
1.进程和线程 进程定义:进程是正在运行的程序的实例,进程是内核分配资源的最基本的单元,而线程是内核执行的最基本单元,进程内可以包含多个线程,只要记住这三个要点,就可以很清楚的理清进程和线程的行为模 ...
- 封装好的AFN网络请求框架和MBProgress
demo:https://github.com/IMCCP/CCPAFNNetworking(收藏下来)
- 获取去除参数url地址
获取url地址除去?后的链接地址 var url = "12345.htm?x=666&y=777"; if(url.indexOf("?") != - ...
- TortoiseSVN客户端重新设置用户名和密码
TortoiseSVN客户端重新设置用户名和密码 在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么 ...
- HQL查询——关联和连接
HQL查询--关联和连接 为了便于理解有关的使用关联和连接进行HQL查询,首先提供两个具有关联关系的持久化类:Person类和MyEvent类 Person类: import javax.persis ...
- String 字符串递归截取字节字符串
public static String idgui(String s,int num)throws Exception{ int changdu = s.getBytes("UTF-8&q ...
- Spark学习(三) -- SparkContext初始化
标签(空格分隔): Spark 本篇博客以WordCount为例说明Spark Job的提交和运行,包括Spark Application初始化.DAG依赖性分析.任务的调度和派发.中间计算结果的存储 ...
- 【Android 疑难杂症1】android.content.ActivityNotFoundException: Unable to find explicit activity class
android.content.ActivityNotFoundException: Unable to find explicit activity class {com.example.cnote ...
- 【问题】AndroidStudio导入项目一直卡在Building gradle project infod的最快速解决方案
原因 AndroidStudio导入项目一直卡在Building gradle project info的原因, 是因为导入的这个项目使用的gradle版本与本地已经拥有的gradle版本不一致,导致 ...
- C# 文件及文件夹深度复制
完善了下 文件中的文件及文件夹中的复制!如果有更优解决方案请不吝指教 protected void FileDepthCopy(string source, string target){ if (D ...