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属性值的显示效果