Silverlight之 xaml布局
目标:在两周内完成一个界面的功能
第1阶段:完成xaml的布局
准备:视频4-14节
第2阶段: 完成环状图 柱状图 TreeView样式
准备: 矢量绘图 telerik 自定义控件 自定义控件
1,新建第一个sl项目(见Project1)
(1) 了解sl项目和网站的关系
说明:sl好比是客户端,web好比是服务端,编译后,sl会生成一个xap文件到web项目中.通过浏览器就可以访问sl的内容了
(2)了解sl项目编译后生成的文件
说明:sl编译后,会生成一个xap文件,实则是一个zip压缩包
解压后,包含一个dll文件和一个AppManifest文件
(3)网页中如何引用一个sl项目
说明:通过在页面中调用一个object插件,类似于flash的插入一样.当然它要求客户端电话需要安装一个微型的.net环境,只要5M,如果没有装,它会在线自动下载安装
(4)在sl项目中,如何新建一个xaml页面,并且将其用设置成起始页
说明:右键项目-->添加新建项-->Silverlight用户控件
在app.xaml.cs文件中this.RootVisual = new xaml文件名()
(5)oob的访问形式,以及其它的访问形式
说明:oob是允许在浏览器以外访问
右击sl项目-->属性-->勾选'允许在浏览器外运行应用程序'
(6)sl项目的路径如何出现中文字符,会怎么样
说明:如果出现中文路径,在oob访问下,是无法访问的
2,4种xaml属性设置语法(见Project2)
(1)设置控件的属性有哪些方法
说明:1,直接在元素内使用 <Button name="btn1" content="确定" />
2,<Button name="btn1"><Button.Content><textbox text="确定" /></Button.Content></Button>
3,<TextBlock>aaa</TextBlock>
4,<GradientStopCollection> <!-- 此节点可以省略-->
(2)margin属性的用法
说明:margin="左,上,右,下",一般配合HorizontalAlignment和VerticalAlignment使用
(3)Label和TextBlock区别是什么
说明:TextBlock支持手机访问,Label不能
2,TextBlock可以支持文字换行,部分文字标不同的颜色.Label不可以
(4)用Rectangle控件实现一个三色渐变的效果
说明:
<Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStopCollection> <!-- 此节点可以省略--> <GradientStop Color="red" Offset=""></GradientStop> <GradientStop Color="Blue" Offset=""></GradientStop> <GradientStop Color="Yellow" Offset="0.5"></GradientStop> </GradientStopCollection> </LinearGradientBrush> </Rectangle.Fill>
(5)下载Silverlight4中文帮助
3,TextBlock介绍(见Project3)
(1)TextBlock的水平位置和垂直位置与margin的关系
说明:margin="左,上,右,下",一般配合HorizontalAlignment和VerticalAlignment使用
(2)maxwidth,minwidth的使用
说明:适用于不同分辩率下的设备,访问时样式不乱
(3)给TextBlock添加一个红色的边框
说明:<Border BorderThickness="1" BorderBrush="red"
(4)写个按钮事件,如果TextBlock隐藏则显示,显示则隐藏.思考visiblity是什么类型
说明:Visibility是一个Enum类型
(5)设置TextBlock的透明度
说明Opacity="0.5"(值从0至1)
(6)设置TextBlock的字体:蓝色,换行,部分文字显示红色
说明:TextWrapping="Wrap"可以让文本换行,文本内容内换行用<LineBreak/>
<TextBlock TextWrapping="Wrap" Name="tb1" Margin="10,10,0,10"> 今年过节不收礼啊,收礼只收<Run Foreground="Blue" FontSize="" TextDecorations="underline">脑白金</Run>啊 啊!史玉柱<LineBreak></LineBreak>祝全国人民新年快乐。优惠价<Run Foreground="Red" FontSize="" FontStyle="Italic" TextDecorations="underline"></Run>元 </TextBlock>
(7)LineBreak的使用
说明:用于文本内容内换行
(8)如何让最外层的Grid铺满整个窗口
说明:将最外层的Grid宽高去掉
4,常用控件(见Project4)
(1)将TextBox控件设置成只读的
说明:IsReadOnly="True"
(2)选中TextBox中的文本,字的颜色变绿,背景色变红
说明:
<TextBox SelectionForeground="Green" SelectionBackground="Red"
(3)知道Button的Content是什么类型
说明: object类型,可以放任何控件
(4)将CheckBox中文本显示为一张图片,并设置成已选(了解isChecked有三个值)
说明:IsChecked="true"(可为"")
(5)点击3个RadioButton,只有一个被选中
说明:通过GroupName属性来设置
(6)ListBox中选项设置成图片,Rectangle,文本,并打印出被选的index值
说明:通过ListBoxItem子元素来设置,可用SelectedIndex来表示index值
(7)在Combox中选项设置成图片,红色色块,文本,默认显示第2项(写在load事件中)
说明:通过ComboxItem子元素来设置
写在UserControl_Loaded事件中(注意区分它和LayoutRoot_Loaded区别,前者加载resource资源)
(8)DataPicker控件的使用(它的标签是以sdk开头,手机中不支持)
说明:
设置默认日期 dp1.Text = DateTime.Now.ToString(); 设置一个可靠日期的区段 dp1.DisplayDateStart = new DateTime(, , ); dp1.DisplayDateEnd = new DateTime(,, ); 设置之前的时间为XX废弃 int yesterdayYear = DateTime.Now.AddDays(-).Year int yesterdayMonth = DateTime.Now.AddDays(-).Month; int yesterday = DateTime.Now.AddDays(-).Day; dp1.BlackoutDates.Add(new CalendarDateRange(new DateTime(, , ), new DateTime (yesterdayYear, yesterdayMonth, yesterday)));
(9)设置滚动条Slider最小值1,最大值100,当前值50
说明:
Minimum="" Maximum="" Value=""
(10)设置进度条ProgressBar最小值1,最大值100,当前值50
说明:
Minimum="" Maximum="" Value=""
(11)设置图片的source和stretch显示方式属性
说明:stretch指图片的显示方式
(12)Rectange控件填充蓝色,显示在窗体的右下角
说明:填充颜色Fill="Red"
(13)设置Border控件边框度度为1,绿色
说明:
<Border BorderThickness="" BorderBrush="Green"
(14)了解MediaElement控件支持的视频格式及编码
注意:视频拷到Silverlight项目中,要将生成操作改成resource,编译时,才会打包到xap中
如果用手机播放视频,一般限制不超过90M。所以,通常视频播放不用下载到本地,而是通过http协议从服务器上获取
(15)使用MediaElement控件播放一个视频,初始不播放,并用3个按钮分别控制播放,暂停,停止操作
说明:AutoPlay="true"表示自动播放
播放play(),暂停pause(),停止stop()
(16)窗体加载时,用DispatchTime定时器控制进度条每3秒增值10
说明:
private void UserControl_Loaded(object sender, RoutedEventArgs e) { DispatcherTimer dt = new DispatcherTimer(); dt.Interval = TimeSpan.FromMilliseconds(); dt.Tick += dt_Tick; dt.Start(); } void dt_Tick(object sender, EventArgs e) { pb1.Value += ; }
5,作业--控件(答案见第9节)
(1)用一个进度条显示视频播放的进度
(2)两组单选框,分别表示年级和性别,一个TextBlock用于显示所选的值
(3)一个ListBox包括以下几个数据项图片+文字,红色文字,绿色文字,色块+文字,一个TextBlock显示所选的值
6,Grid讲解(见Project6)
(1)布局容器有哪几种
说明:Grid 采用行列表格的形式布局
StackPanel 控件以垂直或水平堆积的形式排列
Canvas 绝对定位
(2)使用Grid布局一个用户注册的界面(姓名,密码,性别,电话,注册按钮)
说明:
<Border BorderThickness="" BorderBrush="#dcdcdc" Width="" Height=""> <Grid> <Grid.RowDefinitions> <RowDefinition Height=""></RowDefinition> <RowDefinition Height=""></RowDefinition> <RowDefinition Height=""></RowDefinition> <RowDefinition Height=""></RowDefinition> <RowDefinition Height=""></RowDefinition> <RowDefinition Height=""></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=""></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="" Grid.ColumnSpan="" FontSize="" VerticalAlignment="Center" HorizontalAlignment="Center">请填写资料</TextBlock> <TextBlock Grid.Row="" Grid.Column="" FontSize="" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">姓 名:</TextBlock> <TextBlock Grid.Row="" Grid.Column="" FontSize="" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">密 码:</TextBlock> <TextBlock Grid.Row="" Grid.Column="" FontSize="" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">性 别:</TextBlock> <TextBlock Grid.Row="" Grid.Column="" FontSize="" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">电 话:</TextBlock> <TextBox Grid.Row="" Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width=""></TextBox> <PasswordBox Grid.Row="" Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width=""></PasswordBox> <RadioButton Grid.Row="" Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" IsChecked="true" GroupName="sex">男</RadioButton> <RadioButton Grid.Row="" Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="60,0,0,0" GroupName="sex">女</RadioButton> <TextBox Grid.Row="" Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width=""></TextBox> <Button Grid.Row="" Grid.Column="" VerticalAlignment="Center" HorizontalAlignment="Left" Content="注册" Width="" Height="" ></Button> </Grid> </Border>
7,作业--Grid布局(答案见第11节)(见Project7)
根据选择图片列表中的不同项,显示放大图片
(1)布局:两行两列
第1列:第一行显示“请选选择图片” 第2行放一个图片名称列表的Combox
第二列共1行: 显示放大的图片
说明:
给图片赋值
this.img1.Source = new BitmapImage(new Uri(src, UriKind.RelativeOrAbsolute));
布局
<Border BorderThickness="" BorderBrush="#dcdcdc" Width="" Height=""> <Grid> <Grid.RowDefinitions> <RowDefinition Height=""></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=""></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="" Grid.Column="" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0">请选择图片:</TextBlock> <ComboBox Name="cmb1" Grid.Row="" Grid.Column="" HorizontalAlignment="Right" VerticalAlignment="Top" Width="" Margin="0,10,10,0" SelectionChanged="ComboBox_SelectionChanged"> <ComboBoxItem>.jpg</ComboBoxItem> <ComboBoxItem>.jpg</ComboBoxItem> <ComboBoxItem>.jpg</ComboBoxItem> </ComboBox> <Image Name="img1" Grid.Column="" Grid.RowSpan="" Source="1.jpg" VerticalAlignment="Top" Stretch="Fill" Margin="10,10,10,10"></Image> </Grid> </Border>
8,StackPanel和Canvas控件的使用,
(1)3种布局控件有哪些区别,它们的使用场景是什么
(2)控制StackPanel垂直和水平布局的属性是什么
说明:Orientation="Vertical"
(3)使用StackPanel布局:3行垂直排列的图片(左)和文本(右)布局,每块外加红色边框
说明:
<StackPanel Orientation="Vertical"> <Border BorderThickness="" BorderBrush="red" Width="" Height="" Margin="5,5,5,0"><!--第1种--> <Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=""></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Image Grid.Column="" Source="1.jpg" Width="" Height="" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="" Margin="5,5,5,5" FontSize="" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </Grid> </Border> <Border BorderThickness="" BorderBrush="red" Width="" Height="" Margin="5,5,5,0"><!--第2种--> <StackPanel Orientation="Horizontal"> <Image Grid.Column="" Source="3.jpg" Width="" Height="" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="" Margin="5,5,5,5" Width="" FontSize="" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </StackPanel> </Border> <Border BorderThickness="" BorderBrush="red" Width="" Height="" Margin="5,5,5,0"> <StackPanel Orientation="Horizontal"> <Image Grid.Column="" Source="3.jpg" Width="" Height="" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="" Margin="5,5,5,5" Width="" FontSize="" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </StackPanel> </Border> </StackPanel>
(4)Canvas控件如何控制其容器内的内容绝对定位
说明:
<Canvas> <Button Content="点我" Width="" Height="" Canvas.Top="" Canvas.Left="" /> </Canvas>
(5)如何获取和设置在Canvas容器中控件的x,y坐标值
说明:控件.GetValue(Canvas.LeftProperty)
控件.SetValue(Canvas.LeftProperty,x)
(6)用Canvas装一个TextBox,实现当点击按钮时,TextBox向右移动
说明:
double x = (double)txt1.GetValue(Canvas.LeftProperty); double y = (double)txt1.GetValue(Canvas.TopProperty); tb1.Text = "x:" + x + " y:" + y; x += ; txt1.SetValue(Canvas.LeftProperty,x);
9,作业--布局控件练习(答案见第13节)(见Project9)
(1)布局:两行,第一行背景是个渐变,文本居中;
第2行,第1列放一个显示图片名称列表的ListBox,第2列显示一张放大的图片
说明:作一个StackPanel容器,添加页面
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { sp1.Children.Clear(); switch (lbx1.SelectedIndex) { case : sp1.Children.Add(new Page1()); break; case : sp1.Children.Add(new Page2()); break; case : sp1.Children.Add(new Page3()); break; } }
<Border BorderThickness="" BorderBrush="#dcdcdc" Width="" Height=""> <Grid> <Grid.RowDefinitions> <RowDefinition Height=""></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=""></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="" Grid.ColumnSpan="" Foreground="Red" FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center"> 美 女 排 行 榜 </TextBlock> <ListBox Name="lbx1" Grid.Row="" Grid.Column="" Foreground="Red" HorizontalAlignment="Center" Height="" Margin="19,0,18,0" VerticalAlignment="Bottom" SelectionChanged="ListBox_SelectionChanged"> <ListBoxItem>美女一</ListBoxItem> <ListBoxItem>美女二</ListBoxItem> <ListBoxItem>美女三</ListBoxItem> </ListBox> <StackPanel Name="sp1" Grid.Row="" Grid.Column=""></StackPanel> </Grid> </Border>
10,四种样式(见Project10)
(1)有哪四种样式的写法
说明:
1定义在控件内部
<TextBox Width="100" Height="30" Background="Green" Foreground="Red" HorizontalAlignment="left" VerticalAlignment="Top" Margin="5,5,5,5" />
2定义页面级的样式
<UserControl.Resources> <Style TargetType="TextBox"> <Setter Property="Width" Value=""></Setter> <Setter Property="Height" Value=""></Setter> <Setter Property="Foreground" Value="Blue"></Setter> <Setter Property="Background" Value="Yellow"></Setter> </Style> <Style x:Key="txtStyle" TargetType="TextBox"> <Setter Property="Background" Value="Black"></Setter> </Style> </UserControl.Resources>
<TextBox></TextBox> <TextBox Style="{StaticResource txtStyle}" Width="" Height="" Margin="32,87,218,188"></TextBox>
3定义全局样式
<Application.Resources> <Style TargetType="Button"> <Setter Property="Width" Value=""></Setter> <Setter Property="Height" Value=""></Setter> <Setter Property="Foreground" Value="Green"></Setter> <Setter Property="Background" Value="Red"></Setter> </Style> </Application.Resources>
4,样式文件
<UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Dictionary1.xaml"></ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
(2)页面样式,写不写x:key有什么区别,如何在一个控件中使用该样式
说明:类似于css样式中的className
可以在控件中使用Style="{StaticResource key}"名称
(3)在app.xaml中定义全局样式
说明:在<Application.Resources>节点下写样式,它应用于所有页面
(4)如何将样式定义在一个单独的文件中,并且在窗口引用它们
说明:
将页面样式定义在一个字典xaml文件中
(5)了解几种样式的优先级,
说明:控件样式>页面样式>样式文件>全局样式
Silverlight之 xaml布局的更多相关文章
- WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形
原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...
- 自适应XAML布局经验总结 (四)区域布局设计模式
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面介绍区域布局设计模式. 7. 头尾模式 页面有时分为顶部栏,中间内容和底部栏三部分.这时可以使 ...
- 自适应XAML布局经验总结 (三) 局部布局设计模式2
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面继续介绍局部布局设计模式. 5. 工具箱模式 绘图,三维模型操作等需要工具的情况,可以使用带分 ...
- 自适应XAML布局经验总结 (二) 局部布局设计模式1
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面开始介绍局部布局设计模式. 1. 工具栏模式 适用于工具栏,标题等的布局. 此块布局区域外层使 ...
- 自适应XAML布局经验总结 (一)原则和页面结构设计
XAML布局回顾 Grid和StackPanel是核心布局,尤其以Grid最为重要. Grid是网格布局,XAML的设计者有可能参考了Html里的Table设计了Grid布局,但进行了改进.Html中 ...
- silverlight generic.xaml 包含中文 编译错误的问题
发现我在一个dll工程里面新建一个xaml文件起名成generic.xaml 如果这个xaml里面存在中文则会编译错误,发现这样建立的xaml使用的是gb2312编码 果断文件-另存为-编码另存为 u ...
- WPF,Silverlight与XAML读书笔记(3) - 标记扩展
hystar的.Net世界 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 103 文章- 0 评论- 107 WPF,Silverlight与XAML读书笔记(3) - 标记扩展 说 ...
- WPF,Silverlight与XAML读书笔记第四十五 - 外观效果之模板
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...
- WPF,Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...
随机推荐
- POJ 1166 The Clocks
高斯消元法第四个冠军,这个称号是非常令人兴奋~~ 题目大意: 给出9个钟表的状态.给出九种操作,问最少要操作几次能把全部的钟表调回12点. 解题思路: 对于9个钟表分别列方程,然后高斯消元就可以.因为 ...
- 《转》MFC网络编程学习
原地址:http://www.cnblogs.com/renyuan/archive/2013/06/04/3117006.html要学习好网路编程,主要看以下几个方面: 1.掌握概念,诸如:同步(S ...
- [Android学习笔记]RelativeLayout的使用
RelativeLayout是相对布局控件,在屏幕适配的时候非常有用,在此记录一些它的常用属性 第一类:属性值为true或falseandroid:layout_centerHrizontal ...
- Rudiments 0.42 发布,C++ 常用工具包 - 开源中国社区
Rudiments 0.42 发布,C++ 常用工具包 - 开源中国社区 Rudiments 0.42 发布,C++ 常用工具包
- 百度地图AP1
百度地图API的用法 百度地图API演示样例 百度地图API学习总结 <1> <%@ Page Language="C#" Inherits="Syst ...
- Android设计模式(二)--策略模式
1.定义: The Strategy Pattern defines a family of algorithms,encapsulates each one,and makes them inter ...
- ZOJ 1610 间隔染色段树
要长8000仪表板.间染色的范围,问:最后,能看到的颜色,而且颜色一共有段出现 覆盖段 数据对比水 水可太暴力 段树: #include "stdio.h" #include ...
- EF 打造冲不掉的标签
应用场景: 在用EF的Datebase Fitst模式开发时,实体都是有T4文件根据数据库来生成,并且是每次保存都会重新生成,如果我们在有T4生成的实体类上加上验证标签,那么以保存就会丢失, 解决方案 ...
- Coreseek:indexer crashed神秘
浩哥前两天让我再Coreseek该指数再次这样做,由于需求方面变化不大,公司名称应出现指数.在添加的配置文件的面孔sql_field_string:串场.. 此属性特别有用,因为它不仅作为过滤器的特性 ...
- JS经常使用正則表達式【分享】
工作中JS经常使用表达式: 1)2010-09-10类型日期校验 2)推断正整数.字符串长度 3)校验长度,和是否空 4)推断字符串是否为空 5)比較字符大小 6)推断字符串长度 7)推断格式是否为E ...