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)了解几种样式的优先级,

说明:控件样式>页面样式>样式文件>全局样式