Windows Phone 8.1中圓形圖片或頭像的製作、最佳化以及Stretch的四個屬性值的區別

標籤：windows phone 8.1   圓形圖片或頭像製作   stretch的四個屬性值的區別   decodepixelheight   decodepixelwidth   

開篇之前，認識一下Stretch的四個不同的屬性值：

現在很多應用的頭像或者其他UI設計都偏向於圓形，當然也存在方塊形的Metro風格的布局。在Win10手機預覽版裡的

連絡人頭像都改成圓形顯示了。其實真不知道微軟怎麼想的，有些自己創造或者發起的東西自己又不堅持了，然後被

蘋果安卓的發揚光大，這不是給別人做嫁妝嘛。這樣市場怎麼起得來，真是恨鐵不成鋼啊。

算了，廢話一大堆，在程式員看來，有需求就必須要實現，也必須有實現的方法。很簡單方法如下：

兩種方式，前者普遍，後者重在最佳化。

<Grid>    <Grid.RowDefinitions>        <RowDefinition/>        <RowDefinition/>    </Grid.RowDefinitions>    <Grid Grid.Row="0">        <Ellipse Height="200" Width="200">            <Ellipse.Fill>                <ImageBrush ImageSource="Assets/Images/icon.jpg" Stretch="UniformToFill" />            </Ellipse.Fill>        </Ellipse>    </Grid>    <Grid Grid.Row="1">        <Ellipse Height="200" Width="200">            <Ellipse.Fill>                <ImageBrush>                    <ImageBrush.ImageSource>                        <BitmapImage DecodePixelHeight="200" DecodePixelWidth="200" UriSource="Assets/Images/icon.jpg"/>                    </ImageBrush.ImageSource>                    <ImageBrush.Stretch>                        <Stretch>UniformToFill</Stretch>                    </ImageBrush.Stretch>                </ImageBrush>            </Ellipse.Fill>        </Ellipse>    </Grid></Grid>

既定顯示效果：

以上兩種方法，乍一看沒啥區別。就是多了DecodePixelHeight和DecodePixelWidth 這兩個屬性設定。而後者是為

了節省記憶體而存在的。試想這麼兩個情況：

情況一：如果你原圖是一個電腦壁紙，相當於1920*1200的那種，而你顯示圓形圖片或頭像只需要顯示其中的一部

分，那麼你初期LOAD的時候，應用要用這個圖片需要進行解碼，這麼大一個圖片，解碼就要耗很大的記憶體。當然這

種情況一般不會出現，我們預設的圖片肯定是已經裁剪到適當尺碼的。但是這種情況也需要考慮到。

情況二：當我們大量顯示這種圓形圖片的時候，比如應用裡顯示很多的使用者資訊，就免不了帳戶圖片的集中陳列了，

而就算你預設的圖片尺寸適當，但是當數量至上的時候，自然是很耗費記憶體的，程式也會因此而崩潰掉的。

所以基於兩種情形，我們可以總結兩種方法之間的差異是ImageBrush的到底是不是根據實際大小渲染圖片這一區

別，而實際情況下使用ImageBrush將不會得到自動根據需要渲染大小來進行解碼的功能。那我們怎麼來實現根據實

際大小來渲染圖片呢？就是那兩個屬性幫忙了。所以說DecodePixelHeight和DecodePixelWidth還是很好的夥伴

的。對於記憶體的最佳化還是蠻有用的。

這裡引用一句話：

注意：自動根據需要渲染大小來解碼的這個功能是指即使一個圖片是比較大的，但只解碼需要渲染的大小。所以，如

果你有一個 2000 像素乘以 2000 像素大小的圖片，但僅僅需要渲染成 100 像素乘以 100 像素大小的時候，我們將

圖片解碼為 100 像素乘以 100 像素的話，就可以節省大量的記憶體了。

推薦連結：

BitmapImage.DecodePixelType Property

BitmapImage.DownloadProgress Event

Windows Phone 8.1中圓形圖片或頭像的製作、最佳化以及Stretch的四個屬性值的區別