WP7基本控件

Windows phone程序生成文件是xap格式，是一个压缩包，安装时系统自动把xap解压到手机上。

Image控件：

    Resource、Content的区别。如果生成操作是“资源（Resource）” 则是生成到dll中；如果是“内容（Content）”则是生成到xap包中。采用Resource方式可以通过“/程序集名;component/图片路径”的方式引用，比较适合开发组件用

 

页面布局：

     页面布局指的就是控件的大小、位置的控制，最简单的页面布局就是根据坐标、尺寸进行布局。缺点是当页面发生尺寸变化、手机方向旋转等情况的时候页面可能会乱掉。就像HTML中如果绝对定位几个元素（position:absolute）页面很难看，而如果有多个span以float:left布局，则会随着浏览器的大小而自动变化，这就叫布局(Layout)。

 

Silverlight中有Canvas、StackPanel、Grid三种基本布局容器，放在布局容器中的控件按照布局容器的特点进行布局。

 

 

Canvas

   就是根据坐标、大小进行绝对定位布局

   Canvas.Top属性指定控件左上角的纵坐标； Canvas.Left属性指定控件左上角的横坐标。

补充：代码设置Top、Left等附加属性的方法：Canvas.SetTop。

 

StackPanel

    是把子控件横向或者纵向排列。用Orientation属性设定排列方向：Horizontal（水平）、Vertical（纵向，默认值）

Grid

   类似于HTML中的Table布局，将容器分为几行几列，可以设定某个元素显示到某个格中，也可以设定跨多行多列。

   首先定义行数和列数，以及占的宽、高；Grid.Column、Grid.Row设定所在的行、列；Grid.ColumnSpan、Grid.RowSpan设定占据的行、列

 

画刷：Brush

 

 

Silverlight的界面都是使用画刷（Brush）画出来的，可以改变不同的画刷画不同的内容：

  SolidColorBrush：实心颜色画刷

  LinearGradientBrush：渐变画刷

  RadialGradientBrush：径向渐变画刷（以圆心散射）

  ImageBrush：图片画刷

示例：SolidColorBrush：

1  <Rectangle Width="200" Height="150">

2             <Rectangle.Fill>

3                 <SolidColorBrush>red</SolidColorBrush>

4             </Rectangle.Fill>

5         </Rectangle>

 

示例：LinearGradientBrush

 1  <Rectangle Width="200" Height="150">

 2             <Rectangle.Fill>

 3                 <LinearGradientBrush>

 4                     <GradientStop Color="Coral" Offset="0.1"></GradientStop>

 5                     <GradientStop Color="CadetBlue" Offset="0.2"></GradientStop>

 6                     <GradientStop Color="Yellow" Offset="0.4"></GradientStop>

 7                     <GradientStop Color="Brown" Offset="0.6"></GradientStop>

 8                     <GradientStop Color="Chartreuse" Offset="0.8"></GradientStop>

 9                     <GradientStop Color="Cornsilk" Offset="1"></GradientStop>

10                 </LinearGradientBrush>

11             </Rectangle.Fill>

12         </Rectangle>

LinearGradientBrush默认是从左上角（0,0）渐变到右下角（1，1）

设置下属性<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

示例：RadialGradientBrush

 1  <Rectangle Width="200" Height="150" >

 2             <Rectangle.Fill>

 3                 <RadialGradientBrush>

 4                     <GradientStop Color="Coral" Offset="0.1"></GradientStop>

 5                     <GradientStop Color="CadetBlue" Offset="0.2"></GradientStop>

 6                     <GradientStop Color="Yellow" Offset="0.4"></GradientStop>

 7                     <GradientStop Color="Brown" Offset="0.6"></GradientStop>

 8                     <GradientStop Color="Chartreuse" Offset="0.8"></GradientStop>

 9                     <GradientStop Color="Cornsilk" Offset="1"></GradientStop>

10                 </RadialGradientBrush>

11             </Rectangle.Fill>

Name和x:Name的区别：

     所有的可视控件都继承自FrameworkElement， FrameworkElement类中定义类Name属性。继承自FrameworkElement的类即可以使用Name也可以使用x:Name，但是不是FrameworkElement子类只能使用x:Name。

 

示例：ImageBrush

1 <Rectangle Width="200" Height="150" >

2             <Rectangle.Fill>

3                 <ImageBrush ImageSource="mm.jpg">

4                     

5                 </ImageBrush>

6             </Rectangle.Fill>

7         </Rectangle>

变换：Transform

 

RotateTransform：旋转变换。

ScaleTransform：缩放变换。

SkewTransform：倾斜变换。

TranslateTransform：平移变换。

 

示例：RotateTransform:

Angle为旋转角度，顺时针为正，逆时针为负

CenterX, CenterY可以设置旋转的坐标；默认是以左上角为中心点

1 <Image Source="mm.jpg" Height="200" Width="150">

2             <Image.RenderTransform>

3                 <RotateTransform Angle="15" CenterX="75" CenterY="100"

4 >

5                     

6                 </RotateTransform>

7             </Image.RenderTransform>

8         </Image>

示例：ScaleTransform  

1  <Image.RenderTransform>

2                 <ScaleTransform ScaleY="2">

3                     

4                 </ScaleTransform>

示例：SkewTransform--一般用来做倒影的，翻页！非常的漂亮

1   <Image Source="mm.jpg" Height="200" Width="150">

2             <Image.RenderTransform>

3                 <SkewTransform AngleX="10" AngleY="10">

4                     

5                 </SkewTransform>

6             </Image.RenderTransform>

3D投射：

RotationX  RotationY  可以设置投射的角度。可以让图片围绕自己的一个中心轴旋转；效果非常的炫

1 <Image Source="mm.jpg" Height="200" Width="150">

2             <Image.Projection>

3                 <PlaneProjection RotationX="60">

4                     

5                 </PlaneProjection>

6             </Image.Projection>

7         </Image>