Windows Store App Image开发示例

通过上面的介绍，读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性，在实际的开发工作中，比较常用的是Image对象，下面以一个幼儿园识物识字卡应用为例，来帮助读者更好的理解Image对象、ImageBrush对象的使用方法。在本示例中，可以实现随机将若干图片以任意角度摆放在应用界面的任意位置上。同时在这个示例中还会介绍与图片手势操作相关的内容，通过对图片的手势操作可以实现图片的拖动、缩放和旋转效果。

启动Visual Studio 2012，新建一个Windows应用商店的空白应用程序项目，将其命名为GeneralCard，在解决方案资源管理器中新建一个名为Pictures的文件夹，向文件夹中添加一张背景图片和三张准备摆放在界面上的幼儿园识物识字卡图片。

打开MainPage.xaml文件，去除Grid元素自带的背景样式并添加一个<Grid.Background>标签，接着定义一个ImageBrush画刷，设置ImageBrush的ImageSource属性为背景图片的相对路径，这样就完成了背景图片的设置。同时添加一个TextBlock控件用来显示一行文字“幼儿园识物识字卡”，最后在Grid元素中添加一个用来存放显示图片的Canvas控件，并命名为“myCanvas”， 以便在后台代码中通过该名称来引用这个Canvas实例。代码如下所示：

<Grid>

    <Grid.Background>

        <ImageBrush ImageSource="Pictures/background.jpg"/>

    </Grid.Background>

    <TextBlock HorizontalAlignment="Left" Margin="47,40,0,0" TextWrapping="Wrap" Text="幼儿园识物识字卡" VerticalAlignment="Top" Height="89" Width="712" FontSize="48"/>

    <Canvas x:Name="myCanvas"/>

</Grid>

前台界面设计完成后，打开MainPage.xaml.cs文件编写后台代码。编写代码前，首先介绍一下本示例中用到的类和属性：

q  Border类，可以为其他对象设置边框和背景，Border类除了可以设置代表外观样式的属性外，还有RenderTransform属性，这个属性可以设置影响当前UI元素位置变化的信息。

q  CompositeTransform类，CompositeTransform类可以向界面元素应用多种转换操作，如摆放角度、位置等。

q  Random类，随机数生成器，可以生成需要的随机数。

接下来介绍如何使用后台代码向前台展示图片并对图片添加转换操作。MainPage构造方法的代码如下所示：

public MainPage()

{

    this.InitializeComponent();

    //存放Image对象的集合

    List<Image> images = new List<Image>();

    //创建Image对象

    Image image = new Image();

    image.Source = new BitmapImage(new Uri("ms-appx:///Pictures/bread.jpg"));

    images.Add(image);

    image = new Image();

    image.Source = new BitmapImage(new Uri("ms-appx:///Pictures/apple.jpg"));

    images.Add(image);

    image = new Image();

    image.Source = new BitmapImage(new Uri("ms-appx:///Pictures/meat.jpg"));

    images.Add(image);

    //随机数生成器

    Random random = new Random();

    //遍历images集合将图片显示在前台界面

    foreach (Image img in images)

    {

        Border border = new Border();

        CompositeTransform compositeTransform = new CompositeTransform();

        //设置填充规则

        img.Stretch = Stretch.Fill;

        img.ManipulationMode = ManipulationModes.All;

        //设置转换对象的属性

        compositeTransform.Rotation = (double)random.Next();

        compositeTransform.TranslateX = (double)random.Next(300, 800);

        compositeTransform.TranslateY = (double)random.Next(200, 400);

        //设置Border对象的位置变换信息

        border.RenderTransform = compositeTransform;

        //设置border的边框的颜色

        border.BorderBrush = new SolidColorBrush(Colors.Orange);

        //设置边框的粗细

        border.BorderThickness = new Thickness(3);

        border.Width = 200;

        border.Height = 150;

        //将img对象添加到border的Child属性中

        border.Child = img;

        //为border的ManipulationDelta事件添加处理方法

        border.ManipulationDelta +=Border_ManipulationDelta;

        //将border添加到myCanvas控件中

        myCanvas.Children.Add(border);

    }

}

上面的代码首先创建一个存放Image类对象的列表集合images。接着将图片的路径作为参数初始化一个Uri类的对象，然后将Uri类的对象作为参数获得BitmapImage类的对象，并赋值给Image类对象的Source属性，使用image对象的Add方法将图片添加到images集合中。依照上面的操作共添加三张图片。紧接着实例化一个Random类的对象random，用来生成随机数。

在images集合中添加完图片资源后，接下来遍历这个集合中的每一个Image类型的对象，把每一张图片都放在一个Border元素中，再将这个Border添加到之前定义好的Canvas画布中。在foreach循环中首先实例化一个Border类的对象border和CompositeTransform类的对象compositeTransform，接着分别设置如下属性：

q  img对象的Stretch属性，设置图片在Border元素中的填充方式为Fill。

q  ManipulationMode属性，设置界面元素的交互行为的可操作类型为All。

q  compositeTransform对象的Rotation、TranslateX和TranslateY属性，用之前定义的随机数对象random的Next(int minValue, int maxValue)返回一个介于minValue与 maxValue之间的随机数，分别给这三个属性赋值。

q  border对象的RenderTransform，将设置好的compositeTransform对象赋值给border对象的RenderTransform属性，这样就实现了border元素位置的随机摆放。

q  border对象的BorderBrush属性，设置border对象的边框颜色，这里通过新建一个单色画刷类对象来对其进行赋值。

q  border对象的BorderThickness，设置border对象的边框粗细。

q  border对象的Width和Height属性，设置控件的大小。

属性设置完成之后，将img对象赋给border对象的Child属性，通过Canvas对象的Children属性的Add方法将设置好的border对象添加到Canvas画布中。

将图片资源添加到前台界面后，接下来实现border对象的ManipulationDelta事件处理方法Border_ManipulationDelta()，对图片进行拖动、缩放和旋转等操作时执行这个事件处理方法，代码如下所示：

void Border_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)

{

    CompositeTransform imageTransform = (CompositeTransform)((Border)sender).RenderTransform;

    //设置图片的坐标位置

    imageTransform.Rotation += e.Delta.Rotation;

    imageTransform.TranslateX += e.Delta.Translation.X;

    imageTransform.TranslateY += e.Delta.Translation.Y;

    //设置图片的缩放比例

    imageTransform.ScaleX *= e.Delta.Scale;

    imageTransform.ScaleY *= e.Delta.Scale;

}

在上面的代码中，ManipulationDeltaRoutedEventArgs类型的参数e会为ManipulationDelta事件提供图像位置变化的相关数据，再将这些数据分别赋给对象的相应属性即可实现拖动、缩放和旋转等操作。首先将参数sender转换为Border类型的对象，将此对象的RenderTransform属性强制转换成CompositeTransform类型，并赋值给imageTransform对象。之后在imageTransform对象的Rotation属性的基础上添加角度变化的值e.Delta.Rotation，设置界面元素的旋转角度。同理根据e.Delta.Translation.X属性和e.Delta.Translation.Y属性设置界面元素移动后的位置。最后根据e.Delta.Scale属性设置界面元素的缩放比例。

启动调试，运行效果如图9-5所示，用户可以将图片摆放在应用界面的任意位置上，而且可以通过手势进行拖动、缩放等交互操作。

图9-5 运行效果图

通过以上内容的讲解，读者已经对Windows应用商店应用中的图像元素有了一定的了解，下面将介绍多媒体元素中的音频和视频元素实现方法。