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應用商店應用中的圖像元素有了必定的瞭解，下面將介紹多媒體元素中的音頻和視頻元素實現方法。