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：

 <Rectangle Width="200" Height="150">
            <Rectangle.Fill>
                <SolidColorBrush>red</SolidColorBrush>
            </Rectangle.Fill>
        </Rectangle>

 

示例：LinearGradientBrush

 <Rectangle Width="200" Height="150">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Coral" Offset="0.1"></GradientStop>
                    <GradientStop Color="CadetBlue" Offset="0.2"></GradientStop>
                    <GradientStop Color="Yellow" Offset="0.4"></GradientStop>
                    <GradientStop Color="Brown" Offset="0.6"></GradientStop>
                    <GradientStop Color="Chartreuse" Offset="0.8"></GradientStop>
                    <GradientStop Color="Cornsilk" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

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

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

示例：RadialGradientBrush

 <Rectangle Width="200" Height="150" >
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="Coral" Offset="0.1"></GradientStop>
                    <GradientStop Color="CadetBlue" Offset="0.2"></GradientStop>
                    <GradientStop Color="Yellow" Offset="0.4"></GradientStop>
                    <GradientStop Color="Brown" Offset="0.6"></GradientStop>
                    <GradientStop Color="Chartreuse" Offset="0.8"></GradientStop>
                    <GradientStop Color="Cornsilk" Offset="1"></GradientStop>
                </RadialGradientBrush>
            </Rectangle.Fill>

Name和x:Name的区别：

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

 

示例：ImageBrush

<Rectangle Width="200" Height="150" >
            <Rectangle.Fill>
                <ImageBrush ImageSource="mm.jpg">
                    
                </ImageBrush>
            </Rectangle.Fill>
        </Rectangle>

变换：Transform

 

RotateTransform：旋转变换。

ScaleTransform：缩放变换。

SkewTransform：倾斜变换。

TranslateTransform：平移变换。

 

示例：RotateTransform:

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

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

<Image Source="mm.jpg" Height="200" Width="150">
            <Image.RenderTransform>
                <RotateTransform Angle="15" CenterX="75" CenterY="100"
>
                    
                </RotateTransform>
            </Image.RenderTransform>
        </Image>

示例：ScaleTransform  

 <Image.RenderTransform>
                <ScaleTransform ScaleY="2">
                    
                </ScaleTransform>

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

  <Image Source="mm.jpg" Height="200" Width="150">
            <Image.RenderTransform>
                <SkewTransform AngleX="10" AngleY="10">
                    
                </SkewTransform>
            </Image.RenderTransform>

3D投射：

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

<Image Source="mm.jpg" Height="200" Width="150">
            <Image.Projection>
                <PlaneProjection RotationX="60">
                    
                </PlaneProjection>
            </Image.Projection>
        </Image>