windows phone (20) Image元素

之前有說道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很炫，但是也不能隨意使用，因為它會造成性能上的問題