ui最好的网站,电子商务网络营销方式,wordpress 标签作用,网站实名审核以下内容是个人理解#xff0c;不保证正确性。且假设使用C##xff0c;并且有一定的相关知识和XML基础。 silverlight是什么#xff0c;能做什么 silverlight用XAML来做前端界面#xff0c;用.NET或者JS作为程序脚本支持#xff0c;在浏览器内外运行的应用。可以认为和FLA… 以下内容是个人理解不保证正确性。且假设使用C#并且有一定的相关知识和XML基础。 silverlight是什么能做什么 silverlight用XAML来做前端界面用.NET或者JS作为程序脚本支持在浏览器内外运行的应用。可以认为和FLASH 和ADOBE AIR有很大的功能重叠。 当然他能做大部分flash或者air程序的工作。 silverlight知识层次 包括控件、布局、多媒体、XAML基础、属性和事件、数据、网络、调试等等。 SL的界面可以用XAML和C#或者其他写。一般都用XAML所以要先介绍XAML。 0.预防针 本文将按照个人的语言习惯将同一类object称作一个标签集。 此外用VS2008或2010新建一个SL工程可以看到每个XAML下都有一个同名CS文件这是XAML对应的控制类。此外SL还有资源树类似于QT中的资源文件可以设定一个唯一关键字访问资源。 1.XAML基础 XAML是一种标记语言就是包装过的XML。每个XML开头都有声明命名空间。所以 1.1 Namespace UserControl x:ClassMySilverlight.Page xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Grid BackgroundOldLace/Grid/UserControl 简单地来说UserControl代表了这个XAML继承自UserControl类该类提供基本的UI。随后的x:Class表示这个XAML对应的CS文件中的类名。扩展x:key 为资源树中的内容提供唯一标示x:Name 为一个控件之类的提供唯一标示xmls开头的行定义默认的XAML命名空间只需要复制粘贴就行了和XML一样这些都是固定的。注意如果要用到SL SDK的类需要声明xmls:sdk1.2 XAML语法 因为XAML是封装XML所以就是那些用name/name, name/,name propertyXXX/这些。当然属性除了可以在XAML中直接定义也可以在对应的CS文件里定义。 2.控件 查看silverlight支持的控件或者按照功能分类的基本控件 2.1 基本控件列表 按钮Button,HyberlinkButton(单击打开链接),RepeatButton按下状态下不断发送单击事件 选择checkBox,ComboBox,ListBox,RadioBox,Slider 日期选择Calendar,DataPicker 文本显示TextBlock,RickTextBox 可编辑文本RichTextBox AutoCompleteBox自动完成带下拉菜单类似浏览器地址栏, TextBox, PasswordBox 进度条ProcessBar 数据表DataGrid, TreeView, DataPager 多媒体Image ,InkPresenter绘画板, MediaElement, MultiScaleImage HTML加载WebBrowser 布局Border,Canvas,Grid.......... 对话框Open/SaveFileDialog, ChildWindow, Popup 等等控件 如果你熟悉图形界面编程大多数控件都和其他UI库没差别。 2.2 控件的外观 空间通常都有比如Height, Width, Background等属性对于panel还有margin之类的。可以用XML的属性设置方法设或者在对应的CS中设置。这些都很简单。 也可以在空间中添加style子标签进行大量style定义。 也可以通过将Style声明为资源resources为多个同类控件定制统一外观。方法是 在XAML文件的布局中声明这个布局的resources属性添加style标签用TargetType说明控件类型并用x:key定义一个关键字。用Setter定义详细的控件setter有两个属性property和value。 在需要应用该style的空间上添加一个style属性值就是该style对应的key StackPanel.ResourcesStyle TargetTypeButton x:KeymyButtonStyleSetter PropertyBackground ValuePurple /Setter PropertyForeground Value#9900FF /Setter PropertyHeight Value50 /Setter PropertyWidth Value100 /Setter PropertyMargin Value5 /Setter PropertyHorizontalContentAlignment ValueCenter /Setter PropertyVerticalContentAlignment ValueCenter /Setter PropertyCursor ValueHand /Setter PropertyFontSize Value14 //Style/StackPanel.ResourcesButton x:Namebutton3 Width130 ContentClick Me Instead! Style{StaticResource myButtonStyle}/ 2.3 深层定制控件 Style定义的内容有限使用templates可以更深层定制一个控件。声明方法跟style一样。 可以作为某控件的一个标签 Button ContentButton1Button.TemplateControlTemplate TargetTypeButton!--Define the ControlTemplate here.--/ControlTemplate/Button.Template/Button 或者作为一个资源,只是标签是ControlTemplate其他和style一样。 当然template也可以作为style的一个setter定义在style中这种方式也更常用。这时property是template StackPanelStackPanel.ResourcesStyle TargetTypeButton x:KeynewTemplate Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeButton...... 控件通常是用更小的部件拼接成的比如说button有一个矩形区域和一个border这些部件称作FrameElement. Template必须声明一个Root FrameElement一般是Border?下列代码演示对button外观的定制 ControlTemplate TargetTypeButtonBorder x:NameRootElementBorder.BackgroundSolidColorBrush x:NameBorderBrush ColorBlack//Border.Background...... ControlTemplate当然就是template声明用x:Name声明了Border是一个rootElement 注意到代码中的TemplateBinding模板绑定标签意思就是说这个属性将留给使用附加有该template的控件的用户决定而不由templates定义死。有些属性是由ControlTemplate的父类继承的无需声明模板绑定比如FontSize等。参看详细声明 此外Button还有各种状态点击鼠标悬浮按下等等要对不同的状态定制可以使用VisualState标签。不同的states组成VisualStateGroups。就Button而言有CommonStates和FocusStates两组。下面代码演示了添加方法 ControlTemplate TargetTypeButtonBorder x:NameRootElementVisualStateManager.VisualStateGroupsVisualStateGroup x:NameCommonStatesVisualState x:NameNormal /...... 此外VisualStateGroup还有一个Transitions属性可以包含VisualTransition子标签。因为默认的动画是延迟一秒如果想自定义动画时间可以使用这个标签。VisualTransition包含From,To,GeneratedDuration分别是状态转换的两边和 时间值。该标签可以用StoryBoard子标签定义一个详细的动画。 VisualTransition FromMouseOver ToNormal GeneratedDuration0:0:1.5 使用templates最方便的就是修改默认template,可以避免很多麻烦。 3. 布局 SL的Panel控件包括 canvas: 在该区域内使用坐标值定义子控件的位置这也是唯一允许控件重叠的布局StackPanel横向或者纵向排列控件Orientation属性Grid类似图标的布局有raw和column空间之间的距离有margin属性这些都很简单参见MSDN 4. 事件处理 事件响应的简单实现是在支持事件的空间标签上添加相应的属性比如button支持click时间就在button标签中添加click属性click的值是处理函数slot的函数名函数在XAML对应的CS文件中实现。 也可以在cs文件中使用buttonName.clickfunctionName;添加处理函数。处理函数的形参是固定的object sender,RoutedEventArgs e 了解更多或者为自定义控件添加事件 5. 多媒体 5.1图形 5.1.1 Shape Shape是一种UI元素可以用在各种Panel里面。包括Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。 所有的Shape元素公用的三个属性是Stroke,StrokeThickness和Fill分别是轮廓定义轮廓粗细和填充。其坐标用X1,X2....等属性定义坐标以Shape元素被定义的位置为坐标原点。 代码 Canvas Height300 Width300!-- Draws a diagonal line from (10,10) to (50,50) and moves it 100 pixels to the right. --Line X110 Y110 X250 Y250 StrokeThickness10 Canvas.Left100Line.StrokeRadialGradientBrush GradientOrigin0.5,0.5 Center0.5,0.5 RadiusX0.5 RadiusY0.5RadialGradientBrush.GradientStopsGradientStop ColorRed Offset0 /GradientStop ColorBlue Offset0.5 //RadialGradientBrush.GradientStops/RadialGradientBrush/Line.Stroke/Line Line就是直线Ellipse是椭圆Path路径 path有一个Data属性其值是一个用特殊语法标记的字符串查看语法 5.1.2 形状变换 Transform标签集可以用于2D图形变换包括括旋转 (RotateTransform)、缩放 (ScaleTransform)、斜切 (SkewTransform) 和转换 (TranslateTransform)。就Shape而言所有Shape都有一个RenderTransform属性可以接受Transform标签集作为其子标签。如果要应用多个Tramsform则需要添加TransformGroup标签。 代码 Grid x:NameLayoutRoot BackgroundWhiteRectangle Width50 Height50 FillRoyalBlueRectangle.RenderTransformRotateTransform Angle45 //Rectangle.RenderTransform/Rectangle/Grid 5.2 Brush 就像任何绘图软件一样除了能画形状还需要定制一种画笔可以产生一个填充区域你也可以把line看做一个填充区域吧 。Brush标签集有SolidColorBrush有一个Color属性用于定义任何shape的fill属性LinearGradientBrush线性渐变和RadialGradientBrush辐射渐变和ImageBrushVideoBrush。 注意颜色可以有透明值Color属性支持ARGB颜色#AARRGGBB。 思考一下在PS中渐变是怎么产生的首先线性渐变需要一个渐变方向角度其次可以设置多个位置设置它们的颜色我称之为关键颜色程序会产生从一个颜色到另一个的渐变。在SL中线性渐变的角度由StartPoint 和 EndPoint定义他们都是point值且只能取0-1之间的小数。比如从(0,0) 到(1,1)将定义一个对角线渐变。而关键颜色值通过GradientStop定义该标签有两个属性Color和Offset基于StartPoint的偏移值 代码 1 StackPanel 2 !-- This rectangle is painted with a horizontal linear gradient. -- 3 Rectangle Width200 Height100 4 Rectangle.Fill 5 LinearGradientBrush StartPoint0,0.5 EndPoint1,0.5 6 GradientStop ColorYellow Offset0.0 / 7 GradientStop ColorRed Offset0.25 / 8 GradientStop ColorBlue Offset0.75 / 9 GradientStop ColorLimeGreen Offset1.0 /10 /LinearGradientBrush11 /Rectangle.Fill12 /Rectangle13 /StackPanel 而对于辐射渐变我们需要一个椭圆区域所以需要X,Y轴长和圆心在该区域内设定一个渐变核心点然后以之为中心展开渐变对应了RadialGradientBrush的GradientOrigin、Center、RadiusX 和 RadiusY属性。 ImageBrush有ImageSource和Stretch有Fill, None、Uniform 或 UniformToFil四个可选值两个属性定义一个图像填充笔刷。顾名思义就不多说了。 5.3 Deep Zoom 简单说就是SL提供的一种图像缩放技术。使用Deep Zoom Composer创建dzi格式的图像或图像序列然后在SL中加载。SL提供了一些相关API如果你很感兴趣可以看看Deep Zoom 5.4 动画 用StoryBoard标签为一个UI组件提供一组动画每一个动画可以用XXAnimation标签标示比如创建一个变化值为小数的动画就用DoubleAnimation. Animation标签集有From,To,Duaration, AutoReverse, RepeatBehaviour等属性。此外Animation还可以指定其作用对象TargetName以及作用属性TargetProperty。StoryBoard也可以作为一个panel元素的元素和Style,templates一样通过x:Name访问或者通过事件处理函数中调用动画的begin函数触发。 下面有个简单的实例 代码 StackPanelStackPanel.Resources!-- Animates the rectangles opacity. --Storyboard x:NamemyStoryboardDoubleAnimationStoryboard.TargetNameMyAnimatedRectangle Storyboard.TargetPropertyOpacity From1.0 To0.0 Duration0:0:1 AutoReverseTrue RepeatBehaviorForever //Storyboard/StackPanel.ResourcesRectanglex:NameMyAnimatedRectangle Width100 Height100 FillBlue //StackPanel Animation还提供了一个XXXAnimation.EasingFunction子集可以为动画进行缓冲、反弹等等效果 代码 StackPanel.ResourcesStoryboard x:NamemyStoryboardDoubleAnimation From30 To200 Duration00:00:3 Storyboard.TargetNamemyRectangle Storyboard.TargetPropertyHeightDoubleAnimation.EasingFunctionBounceEase Bounces2 EasingModeEaseOut Bounciness2 //DoubleAnimation.EasingFunction/DoubleAnimation/Storyboard/StackPanel.Resources 关键帧动画则用XXXAnimationUsingKeyFrames标签集定义。他没有fromto标签而是从一个关键帧用制定方法变化到下一个关键帧变化方法由关键帧标签说明。关键帧标签有三种DiscreteDoubleKeyFrame、LinearDoubleKeyFrame 和 SplineDoubleKeyFrame。分别是均匀变化突然出现和加速出现(?) 5.5 音频和视频 使用MediaElement标签即可 6. SL高级特性 这里高级指适合看MSDN的部分 L支持Array,ListT,Dictionarykey,value等数据结构。SL插件为应用程序提供1MB的本地存储空间。查看如何存储 SL提供了API允许HTTP请求查看cookies等查看网络通信特性 至此笔记暂时完结稍后有空可能完善修改一下。 转载于:https://www.cnblogs.com/superx/archive/2010/11/22/1863970.html
