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="0"></GradientStop>
<GradientStop Color="Blue" Offset="1"></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="18" TextDecorations="underline">脑白金</Run>啊 啊！史玉柱<LineBreak></LineBreak>祝全国人民新年快乐。优惠价<Run Foreground="Red" FontSize="18" FontStyle="Italic" TextDecorations="underline">298</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(2015, 5, 1); dp1.DisplayDateEnd = new DateTime(2015,7, 2); 设置之前的时间为XX废弃 int yesterdayYear = DateTime.Now.AddDays(-1).Year int yesterdayMonth = DateTime.Now.AddDays(-1).Month; int yesterday = DateTime.Now.AddDays(-1).Day; dp1.BlackoutDates.Add(new CalendarDateRange(new DateTime(0001, 1, 1), new DateTime (yesterdayYear, yesterdayMonth, yesterday)));
(9)设置滚动条Slider最小值1,最大值100,当前值50
说明:
Minimum="1" Maximum="100" Value="50"
(10)设置进度条ProgressBar最小值1,最大值100,当前值50
说明:
Minimum="1" Maximum="100" Value="50"
(11)设置图片的source和stretch显示方式属性
说明:stretch指图片的显示方式
(12)Rectange控件填充蓝色，显示在窗体的右下角
说明:填充颜色Fill="Red"
(13)设置Border控件边框度度为1，绿色
说明:
<Border BorderThickness="1" 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(500); dt.Tick += dt_Tick; dt.Start(); } void dt_Tick(object sender, EventArgs e) { pb1.Value += 3; }
5，作业--控件(答案见第9节)
(1)用一个进度条显示视频播放的进度
(2)两组单选框，分别表示年级和性别，一个TextBlock用于显示所选的值
(3)一个ListBox包括以下几个数据项图片+文字,红色文字,绿色文字,色块+文字,一个TextBlock显示所选的值
6，Grid讲解(见Project6)
(1)布局容器有哪几种
说明:Grid 采用行列表格的形式布局
StackPanel 控件以垂直或水平堆积的形式排列
Canvas 绝对定位
(2)使用Grid布局一个用户注册的界面(姓名，密码，性别，电话，注册按钮)
说明:
<Border BorderThickness="1" BorderBrush="#dcdcdc" Width="520" Height="350"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="173"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.ColumnSpan="2" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center">请填写资料</TextBlock> <TextBlock Grid.Row="1" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">姓 名:</TextBlock> <TextBlock Grid.Row="2" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">密 码:</TextBlock> <TextBlock Grid.Row="3" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">性 别:</TextBlock> <TextBlock Grid.Row="4" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">电 话:</TextBlock> <TextBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width="200"></TextBox> <PasswordBox Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width="200"></PasswordBox> <RadioButton Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" IsChecked="true" GroupName="sex">男</RadioButton> <RadioButton Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="60,0,0,0" GroupName="sex">女</RadioButton> <TextBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width="200"></TextBox> <Button Grid.Row="5" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Left" Content="注册" Width="100" Height="25" ></Button> </Grid> </Border>
7，作业--Grid布局(答案见第11节)(见Project7)
根据选择图片列表中的不同项，显示放大图片
(1)布局:两行两列
第1列:第一行显示“请选选择图片” 第2行放一个图片名称列表的Combox
第二列共1行: 显示放大的图片
说明:
给图片赋值
this.img1.Source = new BitmapImage(new Uri(src, UriKind.RelativeOrAbsolute));
布局
<Border BorderThickness="1" BorderBrush="#dcdcdc" Width="450" Height="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0">请选择图片:</TextBlock> <ComboBox Name="cmb1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="120" Margin="0,10,10,0" SelectionChanged="ComboBox_SelectionChanged"> <ComboBoxItem>1.jpg</ComboBoxItem> <ComboBoxItem>2.jpg</ComboBoxItem> <ComboBoxItem>3.jpg</ComboBoxItem> </ComboBox> <Image Name="img1" Grid.Column="1" Grid.RowSpan="2" 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="1" BorderBrush="red" Width="400" Height="100" Margin="5,5,5,0"><!--第1种--> <Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="180"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="1.jpg" Width="170" Height="100" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="1" Margin="5,5,5,5" FontSize="14" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </Grid> </Border> <Border BorderThickness="1" BorderBrush="red" Width="400" Height="100" Margin="5,5,5,0"><!--第2种--> <StackPanel Orientation="Horizontal"> <Image Grid.Column="0" Source="3.jpg" Width="170" Height="100" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="1" Margin="5,5,5,5" Width="210" FontSize="14" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </StackPanel> </Border> <Border BorderThickness="1" BorderBrush="red" Width="400" Height="100" Margin="5,5,5,0"> <StackPanel Orientation="Horizontal"> <Image Grid.Column="0" Source="3.jpg" Width="170" Height="100" Stretch="Fill" Margin="5,5,5,5" /> <TextBlock Grid.Column="1" Margin="5,5,5,5" Width="210" FontSize="14" TextWrapping="Wrap"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TextBlock> </StackPanel> </Border> </StackPanel>
(4)Canvas控件如何控制其容器内的内容绝对定位
说明:
<Canvas>
<Button Content="点我" Width="100" Height="25" Canvas.Top="100" Canvas.Left="30" />
</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 += 10; 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 0: sp1.Children.Add(new Page1()); break; case 1: sp1.Children.Add(new Page2()); break; case 2: sp1.Children.Add(new Page3()); break; } }
<Border BorderThickness="1" BorderBrush="#dcdcdc" Width="400" Height="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="40"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="80"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Foreground="Red" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"> 2012 美 女 排 行 榜 </TextBlock> <ListBox Name="lbx1" Grid.Row="1" Grid.Column="0" Foreground="Red" HorizontalAlignment="Center" Height="258" Margin="19,0,18,0" VerticalAlignment="Bottom" SelectionChanged="ListBox_SelectionChanged"> <ListBoxItem>美女一</ListBoxItem> <ListBoxItem>美女二</ListBoxItem> <ListBoxItem>美女三</ListBoxItem> </ListBox> <StackPanel Name="sp1" Grid.Row="2" Grid.Column="1"></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="150"></Setter>
<Setter Property="Height" Value="30"></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="150" Height="25" Margin="32,87,218,188"></TextBox>
3定义全局样式
<Application.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="120"></Setter>
<Setter Property="Height" Value="30"></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)了解几种样式的优先级,
说明:控件样式>页面样式>样式文件>全局样式
