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

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