windows phone (20) Iamge元素

之前有說道wp目前支援的圖片格式為png和jpeg ，我們可以通過設定Source屬性設定圖片源，下面要說的是Iamge元素的部分屬性，這就是Stretch,Opacity【作者：神舟龍】

Stretch屬性

image的展開行為有此屬性決定，此屬性是一個枚舉成員，有uniform,fill,uniformtofill,none;從網上找了一張圖片進行測試 ，是jpg格式的,看看有什麼不同吧；

xaml代碼：

 <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" ></Image>        </Grid>

實現的效果：

 

 此時屬性：Stretch=“uniform”

說明：此時圖片處於預設狀態，圖片會按照恰當的寬高比，同時展開到容器的大小，圖片一般會水平或者垂直置中（這個取決於圖片寬和高哪個長），uniform表示展開的程度上在橫縱都相同，所以看不到圖片有扭曲

 

xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="Fill"  ></Image>        </Grid>

實現的效果：

此時屬性：Stretch=“Fill”

說明：設定此屬性值表示圖片填充整個容器，縱橫防線方向的展開不同

 

xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="UniformToFill"  ></Image>        </Grid>

 此時效果：

 

 此時屬性：Stretch="UniformToFill"

 說明：設定此值表示在填充滿容器的基礎上，在縱橫方向上保持了相同的展開程度，從而保證了寬高比；

 

xaml代碼

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="None"  ></Image>        </Grid>

效果：

 

此時屬性： Stretch="None"

 說明：表示縱橫都不展開

Opacity屬性

 此屬性可以設定圖片的透明度，可以設定０～１的值對透明度進行控制，0為最暗，1為圖片原來亮度

xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" VerticalAlignment="Top" Opacity="0.1" Height="260">                           </Image>            <Image x:Name="img1" Source="psuCACFGYVT.jpg" VerticalAlignment="Bottom" Opacity="0.9" />        </Grid>

效果：

 

可以看到這兩個圖片的對比，就是簡單的透明度問題，此外你會發現，上面的圖片設定了高度，其相應的寬度也按照高寬比進行了縮小；這個屬性就是這個，比較有意思的是這個屬性OpacityMask

 

OpacityMask屬性

此屬性是Brush類型對象， 可以設定元素的某一部分逐漸消失

xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg"  VerticalAlignment="Top" Opacity="0.8" >                <Image.OpacityMask>                    <LinearGradientBrush>                        <GradientStop Color="Wheat" Offset="0"></GradientStop>                        <GradientStop Color="Wheat" Offset="0.5"></GradientStop>                        <GradientStop Color="Transparent" Offset="1"></GradientStop>                    </LinearGradientBrush>                </Image.OpacityMask>            </Image>                   </Grid>

 效果：

 

非常炫，話說這種效果處理照片的時候會用到

 

倒影效果實現

xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img1" VerticalAlignment="Top" Source="psuCACFGYVT.jpg"></Image>            <Image x:Name="img2" Source="psuCACFGYVT.jpg"  VerticalAlignment="Top" RenderTransformOrigin="0.5 1"   >                <Image.RenderTransform>                    <ScaleTransform ScaleY="-1"></ScaleTransform>                </Image.RenderTransform>                <Image.OpacityMask>                    <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">                        <GradientStop Offset="0" Color="#00000000"></GradientStop>                        <GradientStop Offset="1" Color="#40000000"></GradientStop>                    </LinearGradientBrush>                </Image.OpacityMask>            </Image>        </Grid>

實現的效果：

 

 從上面代碼中可以看到，我們設定了兩個圖片，其位置完全相同，然後我們在第二張圖片中重新定義了旋轉中心RenderTransformOrigin="0.5 1"，此點位置在第一張圖片的底部位置，然後使用縮放屬性ScaleY="-1"
這樣就使圖片發生了旋轉，然後再在Y軸上從0到1設定逐漸消失的效果；雖然使用OpacityMask很炫，但是也不能隨意使用，因為它會造成效能上的問題