windows phone (20) Iamge元素

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

Stretch屬性

p_w_picpath的拉伸行爲有此屬性決定，此屬性是一個枚舉成員，有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很炫，但是也不能隨意使用，因爲它會造成性能上的問題