Silverlight学习之图像

Silverlight目前只支持.png和.jpg两种格式的图片。

引用图片

引用图片可以用Image标签，然后指定其Source属性

<StackPanel x:Name="LayoutRoot" Background="Orange">
        <Image Source="Resources/4.png" Width="200" Height="150" />
        <Image Source="Resources/5.png" Width="200" Height="150" Margin="20"/>

 </StackPanel>

效果

 

图片画刷

ImageBrush也是画刷的一种，可以填充元素的背景等等

 <StackPanel x:Name="ImageBrush">
            <Rectangle Width="200" Height="150" Stroke="Black" StrokeThickness="2">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="Resources/4.png"/>
                </Rectangle.Fill>
            </Rectangle>
  </StackPanel>

效果

 

图片拉伸

图片拉伸有四种形式

None：没有拉伸，按照图片原来的大小

Fill: 填充整个区域，不按任何比例，容易破坏图片。

Uniform：按照一定比例拉伸，直到一条边达到规定区域的尺寸为止，其余部分不会填充。

UniformFill:按照一顶比例拉伸，直到完全填充规定的区域，超出的部分将被剪去。

图片默认的为Uniform

 <StackPanel x:Name="ImageFill" Orientation="Horizontal">
            <TextBlock Text="Default"></TextBlock>
            <Border BorderBrush="Orange" BorderThickness="2" Width="200" Height="150">
                <Image Source="Resources/9.jpg"/>
            </Border>
            <TextBlock Text="None"></TextBlock>
            <Border BorderBrush="Orange" BorderThickness="2" Width="200" Height="150">
                <Image Source="Resources/9.jpg" Stretch="None"/>
            </Border>
            <TextBlock Text="Fill"></TextBlock>
            <Border BorderBrush="Orange" BorderThickness="2" Width="300" Height="150">
                <Image Source="Resources/9.jpg" Stretch="Fill"/>
            </Border>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
        <TextBlock Text="Uniform"></TextBlock>
            <Border BorderBrush="Orange" BorderThickness="2" Width="200" Height="150">
                <Image Source="Resources/9.jpg" Stretch="Uniform"/>
            </Border>
            <TextBlock Text="UniformToFill"></TextBlock>
            <Border BorderBrush="Orange" BorderThickness="2" Width="200" Height="150">
                <Image Source="Resources/9.jpg" Stretch="UniformToFill"/>
            </Border>
        </StackPanel>

效果

 

 

图片透明度

图片的透明度用Opacity来表示，值的范围从0到1，数字越大表示越不透明。

 <StackPanel x:Name="ImageSource" Orientation="Horizontal">
        <Image Source="Resources/4.png" Width="200" Height="150" Margin="20" Opacity="1"/>
        <Image Source="Resources/5.png" Width="200" Height="150" Margin="20" Opacity="0.3"/>
  </StackPanel>

效果

 

图片剪裁

图片剪裁用到图片的Clip属性，可以根据自己的需要在Clip中设置各种几何图形，从而得到不同形状的图片

 <StackPanel x:Name="ImageSource" Orientation="Horizontal">
        <Image x:Name="imgNormal" Source="Resources/4.png" Width="200" Height="150" Margin="20" />

 
            <Image x:Name="imgClip" Source="Resources/5.png" Width="200" Height="150" Margin="20">
                <Image.Clip>
                    <EllipseGeometry RadiusX="60" RadiusY="60" Center="70,70"/>
                </Image.Clip>
            </Image>
        </StackPanel>

效果