XAML基础教程

通过这一节课，对XAML概念，XAML基础语法（如：命名空间、对象、属性和事件等）有更深的理解，掌握如何通过XAML代码生成常用控件。XAML概览notetoGeorge/tofromJohn/fromheadingReminder/headingbodyDon'tforgetthemeeting!/body/noteXAML=ExtensibleApplicationMarkupLanguageRectangleFill=RedWidth=150Height=100/Pagex:Class=App1.MainPageIsTabStop=falsexmlns=:x=:local=using:App1xmlns:d=:mc=:Ignorable=dx:Key为ResourceDictionary中的每个资源设置一个唯一键x:Class为XAML页提供代码隐藏的类的命名空间和类名称，并命名由标记编译器的生成操作在应用程序模型中创建或链接的类x:Name处理XAML中定义的对象元素后，为运行时代码中存在的实例指定运行时对象名称Canvas/CanvasCanvasRectangle/Rectangle/CanvasRectangle/CanvasWidth=150Height=150Background=Red/CanvasWidth=150Height=150Background=Red/CanvasEllipseWidth=150Height=150Ellipse.FillSolidColorBrushColor=Green//Ellipse.Fill/EllipseTextBlockWindows8/TextBlockTextBlockWidth=200TextWrapping=WrapWindows8是微软即将推出的最新Windows系列系统。Windows8支持个人电脑（Intel平台系统）及平面电脑（Intel平台系统或ARM平台系统）。Windows8大幅改变以往的操作逻辑，提供更佳的屏幕触控支持。/TextBlockRectangleWidth=200Height=150Rectangle.FillLinearGradientBrushGradientStopCollectionGradientStopOffset=0.0Color=Gold/GradientStopOffset=1.0Color=Green//GradientStopCollection/LinearGradientBrush/Rectangle.Fill/Rectangle省略GradientStopCollection隐式的属性设置方法RectangleWidth=200Height=150Rectangle.FillLinearGradientBrushLinearGradientBrush.GradientStopsGradientStopOffset=0.0Color=Gold/GradientStopOffset=1.0Color=Green//LinearGradientBrush.GradientStops/LinearGradientBrush/Rectangle.Fill/Rectangle附加属性作用于支持附加属性的元素附加属性是由支持附加属性的父元素产生作用，支持附加属性的元素会继承所在的父元素的属性附加属性的格式：AttachedPropertyProvider.PropertyNameCanvasRectangleCanvas.Left=50Canvas.Top=50Width=200Height=150RadiusX=10RadiusY=10Fill=Gold//Canvas低高优先级别Page.ResourcesStylex:Key=ButtonStyleTargetType=ButtonSetterProperty=ForegroundValue=Red/SetterProperty=FontSizeValue=24//Style/Page.ResourcesButtonContent=依赖属性测试Style={StaticResourceButtonStyle}Width=240/ButtonContent=依赖属性测试Style={StaticResourceButtonStyle}Width=240Foreground=YellowFontFamily=14/ButtonClick=Button_Click_1/privatevoidButton_Click_1(objectsender,RoutedEventArgse){}TextBoxText=”{BindingPath=UserName}”/TextBoxText={BindingElementName=sliderOneTimeDataSource,Path=Value,Mode=OneTime}…/ListBoxHeight=200ItemsSource={BindingSource={StaticResourceteamsCVS}}ListBox.ItemTemplateDataTemplateBorderBackground={BindingColor}Width=200CornerRadius=10HorizontalAlignment=LeftTextBlockText={BindingName}Style={StaticResourceBasicTextStyle}HorizontalAlignment=CenterFontWeight=Bold//Border/DataTemplate/ListBox.ItemTemplate/ListBoxStylex:Key=ButtonStyleTargetType=ButtonSetterProperty=TemplateSetter.ValueControlTemplateTargetType=ButtonGridBackground=TransparentTextBlockx:Name=textText={TemplateBindingContent}Style={StaticResourceSubheaderTextStyle}//Grid/ControlTemplate/Setter.Value/Setter/StyleBindingRelativeSource={RelativeSourceSelf}.../objectproperty={BindingRelativeSource={RelativeSourceSelf}...}.../BindingRelativeSource={RelativeSourceTemplatedParent}.../objectproperty={BindingRelativeSource={RelativeSourceTemplatedParent}...}.../TextBoxText={BindingPath=UserName}ToolTipService.ToolTip={BindingText,RelativeSource={RelativeSourceSelf}}/•目标对象将作为源对象绑定到自身•可以实现同一对象元素不同属性之间的绑定操作StyleTargetType=local:CalendarSetterProperty=TemplateSetter.ValueControlTemplateTargetType=local:CalendarGridTextBlockText={BindingPath=Namer,RelativeSource={RelativeSourceTemplatedParent},Mode=TwoWay}/TextBlockText={TemplateBindingNamer}//Style演示Canvas…ButtonCanvas.Left=200Canvas.Top=50Content=“Item1”Background=“GreenWidth=150Height=“50“/…………/CanvasGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsGrid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitionsButtonGrid.Row=“2“Grid.Column=“0Content=“Item2”Background=“GreenWidth=“200Height=100/…/Grid55StackPanelOrientation=“Horizontal”ButtonContent=“Item1”Background=“GreenWidth=“200Height=100/ButtonContent=“Item2”…/…/StackPanel演示基础控件按钮复选框组合框日期选取器单选按钮超链接列表框评级进度条进度环时间选取器切换开关滑块ButtonMargin=0,0,0,0“Content=ButtonClick=Button_ClickHorizontalAlignment=LeftVerticalAlignment=Top/privatevoidButton_Click(objectsender,RoutedEventArgse){}RadioButtonx:Name=RadioButton1Content={BindingText,ElementName=RadioButtonContent}“Grid.Row=4“Margin=0,0,0,0“HorizontalAlignment=Left“VerticalAlignment=Top/HyperlinkButtonContent={BindingText,ElementName=HyperlinkButtonContent}“Grid.Row=3“Margin=5,0,0,0“Click=HyperlinkButton_Click“VerticalAlignment=Top/voidHyperlinkButton_Click(objectsender,RoutedEventArgse){ClickMessage2.Text=YouclickedtheHyperlinkButton;}重要属性：NavigateUri当点击HyperlinkButton跳转到的地址CheckBoxx:Name=CheckBox1Content={BindingText,ElementName=CheckBoxContent}“Grid.Row=2