目标：在两周内完成一个界面的功能
第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)了解几种样式的优先级,
说明:控件样式>页面样式>样式文件>全局样式