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屬性值的顯示效果