Silverlight学习之路（三）
三、common graphic 属性
1、Opacity属性
设置范围是0.0～1.0。0.0代表全透明，即不可见。1.0为不透明
<Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
2、OpacityMask 属性
这个属性是附着在控件上的，作用是在原有的基础上，增加透明度渐变
<Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Rectangle.OpacityMask>
<LinearGradientBrush>
<GradientStop Offset="0.25" Color="#00000000"/>
<GradientStop Offset="1" Color="#FF000000"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
3、Clip 属性
用于剪切图像大小
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Ellipse.Clip>
<RectangleGeometry Rect="0, 0, 100, 100"/>
</Ellipse.Clip>
</Ellipse>
也属于控件属性
RenderTransform属性
用于对其外形进行变换，如位置，大小，角度
<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
Fill="Green">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX=".5" ScaleY="1.2"/>
<SkewTransform AngleX="30"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<TransformGroup>的作用是将几种效果进行叠加
四、Image
1、Image元素
主要是用于显示JPG和PNG图像的，source属性用于指定其路径
<Image Source="star.png" />
2、Stretch 属性
作用是对图像进行拉伸。可用属性值有None, Fill, Uniform, UniformToFill
区别是
None, 图像的原始大小，不进行处理
Fill, 将图像完全填充，破坏其图像纵横比率
Uniform, 最适合容器大小填充容器，不破坏其图像纵横比率
UniformToFill, 最适合容器大小填充容器，不破坏其图像纵横比率
上面两个的区别是，前者最适应的是容器的最小宽度/长度，后者是最大宽度/长度
五、TextBlock
1、TextBlock元素
顾名思义，不用多说了
<TextBlock>hello world!</TextBlock>
2、common TextBlock 属性
FontSize: 字体大小（像素）
FontStyle: 字体样式, Normal 或者 Italic.
FontStretch: 字体拉伸. UltraCondensed, ExtraCondensed, Condensed, SemiCondensed,
Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded.
FontWeight: 字体粗细. Choices are Thin, ExtraLight, Light, Normal, Medium, SemiBold,
Bold, ExtraBold, Black, ExtraBlack.
FontFamily: 字体族.
Foreground: 指定一个画笔，来填充字体颜色
3、Run 属性
在TextBlock中指定不同的字体样式
<TextBlock>
Hello <Run FontSize="30">world</Run>
</TextBlock>
4、可以指定多个字体
<TextBlock FontFamily="Arial, Times New Roman"
Text="Hello World" FontSize="20"/>
六、Media
1、在页面添加Media元素，source属性
<MediaElement
Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
2、useful MediaElement 属性
Stretch
控制MediaElement的伸展
IsMute
控制是否静音
Volume
控制音量，0.0～1.0之间，默认为0.5
3、控制media的重放和全屏
xaml code：
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">
<MediaElement x:Name="media"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300" />
<Canvas x:Name="buttonPanel">
<!-- Stops media playback.-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>
<!-- Pauses media playback. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>
<!-- Begins media playback. -->
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>
<!-- Switches to full screen mode. -->
<Canvas MouseLeftButtonDown="toggle_fullScreen"
Canvas.Left="190" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="85">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Gray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen</TextBlock>
</Canvas>
</Canvas>
</Canvas>
javascript code：
function media_stop(sender, args) {
sender.findName("media").stop();
}
function media_pause(sender, args) {
sender.findName("media").pause();
}
function media_begin(sender, args) {
sender.findName("media").play();
}
function canvas_loaded(sender, args)
{
var plugin = sender.getHost();
plugin.content.onfullScreenChange = onFullScreenChanged;
}
function toggle_fullScreen(sender, args)
{
var silverlightPlugin = sender.getHost();
silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;
}
function onFullScreenChanged(sender, args)
{
var silverlightPlugin = sender.getHost();
var buttonPanel = sender.findName("buttonPanel");
if (silverlightPlugin.content.fullScreen == true)
{
buttonPanel.opacity = 0;
}
else
{
buttonPanel.opacity = 1;
}
var mediaPlayer = sender.findName("media");
mediaPlayer.width = silverlightPlugin.content.actualWidth;
mediaPlayer.height = silverlightPlugin.content.actualHeight;
}
4、使用VideoBrush
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300"
Opacity="0" IsMuted="True" />
<TextBlock Canvas.Left="10" Canvas.Top="10"
FontFamily="Verdana"
FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
<TextBlock.Foreground>
<VideoBrush SourceName="myMediaElement" />
</TextBlock.Foreground>
</TextBlock>
</Canvas>
1、Opacity属性
设置范围是0.0～1.0。0.0代表全透明，即不可见。1.0为不透明
<Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
2、OpacityMask 属性
这个属性是附着在控件上的，作用是在原有的基础上，增加透明度渐变
<Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Rectangle.OpacityMask>
<LinearGradientBrush>
<GradientStop Offset="0.25" Color="#00000000"/>
<GradientStop Offset="1" Color="#FF000000"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
3、Clip 属性
用于剪切图像大小
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Ellipse.Clip>
<RectangleGeometry Rect="0, 0, 100, 100"/>
</Ellipse.Clip>
</Ellipse>
也属于控件属性
RenderTransform属性
用于对其外形进行变换，如位置，大小，角度
<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
Fill="Green">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX=".5" ScaleY="1.2"/>
<SkewTransform AngleX="30"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<TransformGroup>的作用是将几种效果进行叠加
四、Image
1、Image元素
主要是用于显示JPG和PNG图像的，source属性用于指定其路径
<Image Source="star.png" />
2、Stretch 属性
作用是对图像进行拉伸。可用属性值有None, Fill, Uniform, UniformToFill
区别是
None, 图像的原始大小，不进行处理
Fill, 将图像完全填充，破坏其图像纵横比率
Uniform, 最适合容器大小填充容器，不破坏其图像纵横比率
UniformToFill, 最适合容器大小填充容器，不破坏其图像纵横比率
上面两个的区别是，前者最适应的是容器的最小宽度/长度，后者是最大宽度/长度
五、TextBlock
1、TextBlock元素
顾名思义，不用多说了
<TextBlock>hello world!</TextBlock>
2、common TextBlock 属性
FontSize: 字体大小（像素）
FontStyle: 字体样式, Normal 或者 Italic.
FontStretch: 字体拉伸. UltraCondensed, ExtraCondensed, Condensed, SemiCondensed,
Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded.
FontWeight: 字体粗细. Choices are Thin, ExtraLight, Light, Normal, Medium, SemiBold,
Bold, ExtraBold, Black, ExtraBlack.
FontFamily: 字体族.
Foreground: 指定一个画笔，来填充字体颜色
3、Run 属性
在TextBlock中指定不同的字体样式
<TextBlock>
Hello <Run FontSize="30">world</Run>
</TextBlock>
4、可以指定多个字体
<TextBlock FontFamily="Arial, Times New Roman"
Text="Hello World" FontSize="20"/>
六、Media
1、在页面添加Media元素，source属性
<MediaElement
Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
2、useful MediaElement 属性
Stretch
控制MediaElement的伸展
IsMute
控制是否静音
Volume
控制音量，0.0～1.0之间，默认为0.5
3、控制media的重放和全屏
xaml code：
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">
<MediaElement x:Name="media"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300" />
<Canvas x:Name="buttonPanel">
<!-- Stops media playback.-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>
<!-- Pauses media playback. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>
<!-- Begins media playback. -->
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>
<!-- Switches to full screen mode. -->
<Canvas MouseLeftButtonDown="toggle_fullScreen"
Canvas.Left="190" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="85">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Gray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen</TextBlock>
</Canvas>
</Canvas>
</Canvas>
javascript code：
function media_stop(sender, args) {
sender.findName("media").stop();
}
function media_pause(sender, args) {
sender.findName("media").pause();
}
function media_begin(sender, args) {
sender.findName("media").play();
}
function canvas_loaded(sender, args)
{
var plugin = sender.getHost();
plugin.content.onfullScreenChange = onFullScreenChanged;
}
function toggle_fullScreen(sender, args)
{
var silverlightPlugin = sender.getHost();
silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;
}
function onFullScreenChanged(sender, args)
{
var silverlightPlugin = sender.getHost();
var buttonPanel = sender.findName("buttonPanel");
if (silverlightPlugin.content.fullScreen == true)
{
buttonPanel.opacity = 0;
}
else
{
buttonPanel.opacity = 1;
}
var mediaPlayer = sender.findName("media");
mediaPlayer.width = silverlightPlugin.content.actualWidth;
mediaPlayer.height = silverlightPlugin.content.actualHeight;
}
4、使用VideoBrush
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300"
Opacity="0" IsMuted="True" />
<TextBlock Canvas.Left="10" Canvas.Top="10"
FontFamily="Verdana"
FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
<TextBlock.Foreground>
<VideoBrush SourceName="myMediaElement" />
</TextBlock.Foreground>
</TextBlock>
</Canvas>
