神舟龙

 在应用程序中，如果需要几个按钮或者菜单来执行一些普通的命令，就应该考虑使用ApplicationBar,因为silverlight并没有定义任何常用的菜单或者工具，我们通常称ApplicationBar为应用程序栏，该类定义在命名空间Microsoft.Phone.Shell中， 在改命名空间中还定义了ApplicationBarIconButton和ApplicationBarMenuItem,这些类都派生自Object 而非DeendecyObject,UIElement和FramworkElement类，严格的说ApplicationBar并不是可视化树的一部 分（未映射到 xmlns），ApplicationBar对象在xaml文件中作为PhoneApplicationPage的ApplicationBar属性存 在，当手机水平放置或者垂直放置时都是一样的效果，且无法自定义ApplicationBar；ApplicationBar最多可以包含四个按钮，因为 一般使用图片进行设置按钮，这些按钮通常称之为图标，且图标一般为png格式，图标的宽和高都应为48像素，并通常是透明的；【作者：神舟龙】
示例
下面的示例就是实现一个简易的播放器，并且有播放，暂停，重新开始和转至结尾，四个功能图标，首先从新浪下载图标，参考书给的微软的下载地址已经删除 ，并在项目里建立一个Image文件，用于保存四个图片
 

 并 把每个图片的属性中的【生成操作】设置为内容，如果设置生成操作为Resource，ApplicationBar就无法智能的找到这些图像；因为 ApplicationBar不是标准的silverlight的一部分，因此XML命名空间声明需要将XML的“Shell”命名空间与.NET命名空 间Microsoft.Phone.Shell关联起来，标准的MainPage.xaml已经为我们做好了这些
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
下面就是设置这四个按钮，我们直接把IDE已经注释掉的部分重新启用，稍微改一下就ok
<!--演示 ApplicationBar 用法的示例代码-->     <phone:PhoneApplicationPage.ApplicationBar>         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">             <shell:ApplicationBar.Buttons>             <shell:ApplicationBarIconButton x:Name="appbarRewindButton" IconUri="/Images/appbar.transport.rew.rest.png" Text="重置" IsEnabled="False" Click="appbarRewindButton_Click"/>             <shell:ApplicationBarIconButton x:Name="appbarPlayButton" IconUri="/Images/appbar.transport.play.rest.png" Text="开始"  IsEnabled="False" Click="appbarPlayButton_Click"/>             <shell:ApplicationBarIconButton x:Name="appbarPauseButton" IconUri="/Images/appbar.transport.pause.rest.png" Text="暂定"  IsEnabled="False" Click="appbarPauseButton_Click"/>             <shell:ApplicationBarIconButton x:Name="appbarEndButton" IconUri="/Images/appbar.transport.ff.rest.png" Text="结束"  IsEnabled="False" Click="appbarEndButton_Click"/>             </shell:ApplicationBar.Buttons>         </shell:ApplicationBar>     </phone:PhoneApplicationPage.ApplicationBar> 
从上面代码中可以看到ApplicationBar有一个Buttons属性，该属性是该类的内容属性，所以该属性不是必须出现的，Buttons集合最 多可以包含四个ApplicationBarIconButton 对象，每个ApplicationBarIconButton 对象可以设置ICONURI，X：Name和Text，其中ICONURI表示路径，Text表示说明文字；当你按下一个图标时，该图标会产生一定的偏 移，作为操作反馈，如果按下省略号，则会把Text设置的文字进行显示



如果你不希望ApplicationBar在开始时进行显示，可以设置
<shell:ApplicationBar IsVisible="False"> 
ApplicationBar 也定义了前景色和背景色，如果改变了手机的主题颜色，那么默认的ApplicationBar 颜色也会有改变
ApplicationBar 还可以设置Opacity属性，默认情况下是1，此时ApplicationBar占用页面内容区域之外的区域空间，如果设置为其他值比如0.5，此时 ApplicationBar则与页面的其他内容共享空间，但是图标总是在最前端显示，文档建议设置值为1,0.5,0
 
<shell:ApplicationBar IsVisible="True" Opacity="0.5"> 
效果：

 ZIndex
这 也是一个附加属性，表示canvas的children集合内的子元素的显示顺序，在canvas中的元素默认情况下是后面的子元素覆盖前面的子元素，所 以我们可以使用此附加属性更改显示属性，ZIndex其实是一个虚拟的Z轴，正方向延伸出屏幕的，ZIndex的数值越大，表示在越向外，越小越容易被覆 盖，所以如果想设置某个子元素显示，可以设置ZIndex较大值，ZIndex默认值为0；
触摸处理
下面演示的示例是通过改变RenderTransform属性上的变形对象，从而是元素可以在屏幕上移动，也可以通过在代码中设置left和top附加属性移动Canvas中的元素；
首先在Canva中绘制三个Ellipse元素，并设置演示为红色，绿色和蓝色，另外当移动哪一个ellipse对象的时候，它的ZIndex就会在最上层，也就是设置移动的对象ZIndex值比其他两个大
xaml部分代码:
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Canvas Name="cav">                 <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Red"></Ellipse>                 <Ellipse Canvas.Left="150" Canvas.Top="150" Width="100" Height="100" Fill="Green"></Ellipse>                 <Ellipse Canvas.Left="250" Canvas.Top="250" Width="100" Height="100" Fill="Blue"></Ellipse>             </Canvas>         </Grid> 
xaml代码比较简单，两个附加属性设置相对位置，宽和高相等做圆，填充三个不同的颜色；在这里我们重写 OnManipulationStarted和OnManipulationDelta方法，在OnManipulationStarted方法中 e.ManipulationContainer = cav;
部分隐藏代码
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)         {             //获得定义坐标的容器             e.ManipulationContainer = cav;             base.OnManipulationStarted(e);         }                 int i = 0;         protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)         {                         //获得引发事件的元素             UIElement eelement = e.OriginalSource as UIElement;             //获得修改             Point translation = e.DeltaManipulation.Translation;                         //设置新位置             Canvas.SetLeft(element,Canvas.GetLeft(element)+translation.X);             Canvas.SetTop(element, Canvas.GetTop(element) + translation.Y);             Canvas.SetZIndex(element, i++);              e.Handled = true;             base.OnManipulationDelta(e);         } 
 无任何移动下的效果
 
上 面中我们看到一个新方法就是Canvas.GetLeft(element)，这个是获得子元素在canvas中的left值，同理 Canvas.GetTop(element)，还有可以看到Canvas.SetZIndex(element, i++);把移动的元素放在最外层
看看移动的效果吧
 
 另一张截图：

 
Canvas 元素表示定制一个区域，并可以通过相对坐标定义子元素位置，在一下情况下Canvas是不可见的
 



Height 属性等于 0。


Width 属性等于 0。


Opacity 属性等于 0。


Canvas 的某个上级对象不可见。

Background等于null
Visiblity属性等于Collapsed


 下面是一个的示例是一个绘制奥运五环旗的效果
xaml主要代码：
<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Canvas>                <Canvas.Resources>                    <Style x:Key="ellipseStyle" TargetType="Ellipse">                        <Setter Property="Width" Value="100"></Setter>                        <Setter Property="Height" Value="100"></Setter>                        <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}"></Setter>                        <Setter Property="StrokeThickness" Value="9"></Setter>                    </Style>                </Canvas.Resources>                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Blue" Canvas.Left="50" Canvas.Top="0"></Ellipse>                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Yellow" Canvas.Left="150" Canvas.Top="0"></Ellipse>                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Black" Canvas.Left="250" Canvas.Top="0"></Ellipse>                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Green" Canvas.Left="100" Canvas.Top="50"></Ellipse>                <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Red" Canvas.Left="200" Canvas.Top="50"></Ellipse>            </Canvas>        </Grid> 
从上面代码中可以看到我们定义了一个Style对象，定义在Canvas.Resources集合中，为每一个Elliips定义了宽和高，并且宽 和高相同，所以就是圆了，并且定义了颜色和粗细为9，显然我们在用到这个这个Style对象后，有使用了Stroke属性，所以Style对象中的 Stroke属性设置的也就没有用了；我们看以看到在Ellipse中的属性Canvas.Left和Canvas.Top，Lefe表示该子元素左侧位 置Canvas的距离，Top表示子元素顶部位置Canvas的距离
显示的效果：
 
如果背景色是黑的，五环中的黑色圈就像是不出来，所以背景设置成了浅色。其实有个蹊跷的地方，就是在Ellipse 中使用Canvas.Left和Canvas.right,这就是附加属性，Left和Top实际上是定义在Canvas类中的，但是这些属性可以在其元 素进行设置（如果设置在非子元素，该设置将被忽略），其实之前我们已经用到了，比如Grid.Row
 下面的示例是演示代码怎么设置附加属性
xaml文件代码如下：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Canvas Name="cav" SizeChanged="cav_SizeChanged">             </Canvas>         </Grid> 
显然这里canvas并没有占有实际的空间，因为我们并没有看到最上面那些属性，并且grid也是显示的，但是它仍然有具体的大小和SizeChange 事件，当SizeChange事件触发是，首先要情况所有的子元素，然后再通过循环创建新的Ellipse对象，并添加到Canvas中去
// 构造函数         public MainPage()         {             InitializeComponent();         }          private void cav_SizeChanged(object sender, SizeChangedEventArgs e)         {             cav.Children.Clear();             for (double y = 0; y < e.NewSize.Height; y++)             {                 for (int x = 0; x < e.NewSize.Width; x++)                 {                     Ellipse el = new Ellipse();                     el.Width = 100;                     el.Height = 100;                     //代码读取自定义样式                     el.Stroke = this.Resources["PhoneAccentBrush"] as Brush;                     el.StrokeThickness = 9;                     Canvas.SetLeft(el, x);                     Canvas.SetTop(el, y);                      cav.Children.Add(el);                 }             }         } 
 设置附加属性Left和Top
Canvas.SetLeft(el, x);

Canvas.SetTop(el, y);
这两个方法是在Canvas中定义的静态方法，可以在未添加子元素和添加子元素后使用这些方法，或者在Canvas对象不存在的时候调用；也可以把静态方法换成
el.SetValue(Canvas.LeftProperty,x); el.SetValue(Canvas.TopProperty,y); 
 SetValue方法是访问一个有DependencyObject创建和维护的内部字典表，第一个参数是key，第二个是value
 
 [/img]..

 
ScrollViewer类表示可包含其他可见元素的可滚动区域， 一般会用在屏幕的宽度和高度不够用时，作为一种延伸使用，参考书上称之为滚动条，在默认的情况下垂直滚动条是可见的，水平滚动条不显示，即 VerticalScrollBarVisibility和HorizontalScrollBarVisibility两个属性，这两个属性的值是 ScrollBarVisibility枚举成员【作者：神舟龙】
Visible 显示滚动条；Hidden不显示滚动条；Auto 需要时显示；Disabled 可见但是不响应触摸事件，这两个属性也正是下面会用到的，下面示例中把程序标题给更改了，为了显示更好的效果
xaml代码：
<!--TitlePanel 包含应用程序的名称和页标题-->         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">                          <StackPanel.Resources>                 <Style x:Key="stStyle" TargetType="TextBlock">                     <Setter Property="TextTrimming" Value="WordEllipsis"></Setter>                     <Setter Property="FontSize" Value="23"></Setter>                     <Setter Property="Foreground" Value="BlueViolet"></Setter>                     <Setter Property="HorizontalAlignment" Value="Center"></Setter>                 </Style>             </StackPanel.Resources>             <TextBlock x:Name="ApplicationTitle" Text="笑一笑" Style="{StaticResource stStyle}"/>         </StackPanel> 
可以看到的是我们自定义了样式，这里定义的原则是先定义再使用，即上面代码中的textblock 不能再样式之上，如果这样系统就会报错；
内容区域的xaml代码：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Grid.Resources>                 <Style x:Key="paragraphStyle" TargetType="TextBlock">                     <Setter Property="TextWrapping" Value="Wrap"></Setter>                     <Setter Property="Margin" Value="5"></Setter>                     <Setter Property="FontSize" Value="19"></Setter>                 </Style>             </Grid.Resources>             <ScrollViewer Padding="5" >                 <StackPanel>                     <TextBlock Style="{ StaticResource paragraphStyle}">                        一天中午下班,由于天气挺好.大家就在食堂打了饭一起在外面吃饭.                         我就问了,用什么方法修理别人最惨,大家都在一起笑谈自己的看法.<LineBreak/>  　　                   一会就见我侄女打着饭来了,她开口就问:你们在聊什么啊?我就说:如果你恨一个人,                         你认为用什么方法可以修理的他最惨.她张口就说:找人海扁他一顿,我就说了:                         皮肉之伤过几天就好了,这有什么.她又说了:找几个人狠狠的羞辱他一番,呵呵!心灵上的创伤,                         随着时间流逝,也会慢慢的好起来的.我说不算什么?当时她一听,把手里的碗往花台上一放,双手往腰间一插,右手往上一指,                         嘿嘿!嫁给他!我当时无语了,她说:我用一生来折磨他还不够吗?<LineBreak/>  　　                  从那以后她多了一个外号叫(二莽)                     </TextBlock>                     <Line  StrokeThickness="9" Stroke="Blue"  X1="0" Y1="20" X2="480" Y2="20"></Line>                     <TextBlock Style="{StaticResource paragraphStyle}">                         <Run> 一对年轻人谈恋爱，男的想试探女的是否能做到守身如玉，便问女友道：“如果你深夜一人在街上走，突然来了一个男人要和你亲嘴，你怎么办？”                          女友答道：“我会反抗，并打他一个耳光。”                          男的又问：“如果又来一个喝醉酒了的男人一下子要抱住你，你怎么办？”                          女友答道：“我会全力反抗，不让他得逞。”                          男的听了，高兴地连连点头，继续问道：“假如又走来一个很帅的男人，向你提出那种要求，你怎么办？”                          女友听了，回答说：“你要知道，                        </Run>                         <Run FontStyle="Italic">一个女人的反抗毕竟是有限的！” </Run>                     </TextBlock>                     <Line Stroke="Blue" StrokeThickness="9"  X1="0" Y1="20" X2="480" Y2="20"></Line>                     <TextBlock x:Name="tb3" Style="{StaticResource paragraphStyle }">                         收到一条短信：“今日15点31分开始起，我老婆就要开始陪别人的老公睡啦，我还得幸福的伺候着洗漱更衣沐浴，没办法他带枪来的。”看了百思不得其解，咋会有这么贱的人。后来一看发信人，我了个去，生孩子居然有这样报喜的！                      </TextBlock>                 </StackPanel>                              </ScrollViewer>         </Grid> 
可以看到这里也有用到自定义样式，内外边距分别是5，书上说这样有利于阅读，不过看到效果后，确实感觉不错；代码中用到的stackPanel默认 为垂直分布，你可以设置Orientation="Horizontal"为水平方向对子元素进行排列；在每个段落之前都有Unicode字符“ ” 表示所在行缩进一个字符的宽度
 Line类
上面代码中还使用Line，在两个点之间绘制一条直线 ，需要满足的基本属性是X1，X2,Y1,Y2其中X1，Y1作为起点，X2，Y2作为终点，并以此进行连接成一条直线；可以使用Stroke设置颜色，并使用StrokeThickness设置显示的粗细，这里为了效果，设置的比较粗；
看效果图吧：
 
 ScrollViewer默认垂直是显示的，所以效果如上，那么我们设置水平滚动条显示效果会如何那；直接在scrollviewer标签中加HorizontalScrollBarVisibility="Visible"即可，代码不在贴出，直接来效果吧
 
这里需要注意的是我们在样式中已经设置了自动换行，但是因为我们设置水平滚动条显示，所以字行换行的行的概念也就没有了；但是我想知道如果文字不换行的情况下，水平方向上显示的文字是多长，事实或许并不是我们想象中的那么好

在wp中我们也会用到隐藏某个元素，已达到某种效果，刚刚从文章看到了，分享一下【作者：神舟龙】
Visibility
此属性能非常方便的实现隐藏某个元素，但是visibility属性不是boolean类型，他是visibility类型，..

 
Grid是唯一可以在内部定制单元格的panel类，我们可以在grid中定制单元格，然后通过grid.row和grid.column定位grid包含的元素在哪个位置，功能比较强大，用到的时候比较多，且看他的属性：【作者：神舟龙】
 
Background
 
获取或设置一个用于填充面板的 Brush所以我们可以对其背景进行绘制 ，比如下面的案例：
<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"                           >            <Grid.Background>                <RadialGradientBrush>                    <GradientStop Offset="0.9" Color="DarkBlue"></GradientStop>                    <GradientStop Offset="0.8" Color="Firebrick"></GradientStop>                </RadialGradientBrush>            </Grid.Background>        </Grid> 
它的显示效果：
 
 Clip
 
 
获取或设置用于定义Grid的内容边框的 Geometry，下面的效果是实现的类似于天狗吃月最后一刻的效果
xaml代码：
 
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"               >             <Grid.Background>                 <RadialGradientBrush>                     <GradientStop Offset="0.9" Color="White"></GradientStop>                     <GradientStop Offset="0.8" Color="Black"></GradientStop>                 </RadialGradientBrush>             </Grid.Background>             <Grid.Clip>                 <EllipseGeometry Center="240 250" RadiusX="180" RadiusY="190"></EllipseGeometry>             </Grid.Clip>         </Grid> 
效果：
 

 话说这样的效果还不错，只不过他不能通过修改参数实现天狗吃月的全过程，上面出现的效果是无意中做出了的；

Geometry 类

 
为用于定义几何形状的对象提供基类，所以EllipseGeometry,GeometryGroup等所继承它的类都可以，比如我们使用RectangelGeoMetry获取矩形剪辑区域
 
xaml代码：
<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"              >            <Grid.Background>                <RadialGradientBrush>                    <GradientStop Offset="0.1" Color="Purple"></GradientStop>                    <GradientStop Offset="0.2" Color="Blue"></GradientStop>                </RadialGradientBrush>            </Grid.Background>            <Grid.Clip>                <RectangleGeometry >                    <RectangleGeometry.Rect>                        <Rect X="20" Y="30" Width="300" Height="400"></Rect>                    </RectangleGeometry.Rect>                </RectangleGeometry>            </Grid.Clip>        </Grid> 
效果：

之前有说道wp目前支持的图片格式为png和jpeg ，我们可以通过设置Source属性设置图片源，下面要说的是Iamge元素的部分属性，这就是Stretch,Opacity【作者：神舟龙】
Stretch属性
image的拉伸行为有此属性决定，此属性是一个枚举成员，有uniform,fill,uniformtofill,none;从网上找了一张图片进行测试 ，是jpg格式的,看看有什么不同吧；
xaml代码：
<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" ></Image>        </Grid> 
实现的效果：
 
 此时属性：Stretch=“uniform”
说明：此时图片处于默认状态，图片会按照恰当的宽高比，同时拉伸到容器的大小，图片一般会水平或者垂直居中（这个取决于图片宽和高哪个长），uniform表示拉伸的程度上在横纵都相同，所以看不到图片有扭曲
 
xaml代码：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="Fill"  ></Image>         </Grid> 
实现的效果：

此时属性：Stretch=“Fill”
说明：设置此属性值表示图片填充整个容器，纵横防线方向的拉伸不同
 
xaml代码：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="UniformToFill"  ></Image>         </Grid> 
 此时效果：

 TextBlock

一般用于显示文本的元素，我们最为经常用到的是该类的Text属性，其实显示文本有两种呈现方式，一个是设置内部文本Text，另一种就是在Inlines 集合中创建一个新的 Run 对象和LineBreak对象，我们称之为内联文本；【作者：神舟龍】
Run 标签内容成为 Text 属性的值,该类具有TextBlock类所具有的部分属性，比如FontFamily,FontSize,FontStretch,Foregroud等等；
LineBreak  新起一行，是换行标签
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <TextBlock x:Name="tbShow" Text="文字示例" Foreground="White"    VerticalAlignment="Center" HorizontalAlignment="Center">                 <TextBlock.Inlines>                     <Run Foreground="Blue" Text="ddd"  ></Run>                 </TextBlock.Inlines>             </TextBlock>         </Grid> 
 可以看到我们在Run标签和TextBlock标签都设置的前景色和显示的文字，可是效果如何那，效果：
 
 所以我们确定如果TextBlock标签和TextBlock标签内定义Run标签的属性相重复时，两者的属性互不相干，但是Run设置的显示文本在TextBlock属性Text之后，要把程序运行起来，设计器直接看会是这样的错误结果，
 

 
 再看下面的例子，我们对Run标签的一些属性进行了一些罗列：
 
<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tbShow" Text="文字示例" Foreground="White"    VerticalAlignment="Center" HorizontalAlignment="Center">                <Run Foreground="Blue">前景色Blue</Run><LineBreak></LineBreak>                 <Run FontStyle="Italic">字体样式Italic</Run><LineBreak></LineBreak>                <Run  FontSize="30">字体30</Run><LineBreak></LineBreak>                <Run  TextDecorations="Underline">下划线</Run><LineBreak></LineBreak>                  <Run  TextDecorations="Underline"                         FontSize="30"                        FontStyle="Italic"                        Foreground="Blue"                        Text="综合" ></Run><LineBreak></LineBreak>            </TextBlock>        </Grid> 
 实现的是这样的效果：

 Border类是对某一个对象的周围边框，背景，或者同时绘制两者，首先看一个简单的例子进行分析【作者：神舟龍】
xaml文件：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Border Background="DarkCyan" BorderBrush="Coral"  BorderThickness="20"  CornerRadius="19">                 <TextBlock x:Name="tbShow" Text="边框元素示例" VerticalAlignment="Center" HorizontalAlignment="Center">                     <TextBlock.RenderTransform>                         <CompositeTransform Rotation="30"></CompositeTransform>                     </TextBlock.RenderTransform>                 </TextBlock>             </Border>         </Grid> 
上面代码中BorderBrush表示边框颜色，它是Brush类型的，所以可以设置渐变画刷；BorderThickness表示边框的粗细，它 是Thickness类型的，Thickness是用于Margin和Padding的结构体，所以可以分别为上下左右设置不同个宽 度；CornerRadius表示设置边框角的半径，它是CornerRadius结构体，所以运行为四个角设置不同的圆角半径值；可以看到 TextBlock直接镶嵌在Border中，这是因为Border有个属性是Child，因为Child属性是Border的 ContentProperty属性，所以Border.Child标记不是必须的，实现的效果：
 
 需 要注意的是Child属性只能设置一个UIElement类型的元素，所以我们可以在里面放些textblock，image等，如果要在border里 进行元素扩展，可以使用面板stackpanel，canvas，grid,里面嵌套其他元素；从上图可以看出，我们定义的border是整个填充 grid的，这是因为border元素的水平位置HorizontalAlignment和垂直位置VerticalAlignment默认值为Stretch，所以会拉伸填充整个父元素,所以一般会设置border的宽和高；

下面的示例在隐藏文件cs实现的四个角的圆角半径不同，边框的每个边的粗细不同，并绘制边框颜色xaml文件代码：
<!--ContentPanel - 在此处放置其他内容-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">             <Border x:Name="bd" Background="DarkCyan" ManipulationDelta="bd_ManipulationDelta">                 <TextBlock x:Name="tbShow" Text="边框元素示例" VerticalAlignment="Center" HorizontalAlignment="Center">                     <TextBlock.RenderTransform>                         <CompositeTransform Rotation="30"></CompositeTransform>                     </TextBlock.RenderTransform>                 </TextBlock>             </Border>         </Grid> 
 隐藏文件代码：
// <summary>         /// 触摸移动实现         /// </summary>         /// <param name="sender"></param>         /// <param name="e"></param>         private void bd_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)         {             //左上右下             Thickness thickNess = new Thickness(10, 20, 30, 40);             //设置不同的粗细             bd.BorderThickness = thickNess;             //设置左上，右上，左下，右下的圆角半径值             CornerRadius cornerRadius = new CornerRadius(10, 20, 30, 40);             bd.CornerRadius = cornerRadius;              LinearGradientBrush lgb = new LinearGradientBrush();             GradientStopCollection gsc = new GradientStopCollection();             GradientStop gs1 = new GradientStop();             gs1.Color = Color.FromArgb(122, 102, 213, 167);             gs1.Offset = 0.2;             gsc.Add(gs1);             GradientStop gs2 = new GradientStop();             gs2.Color = Color.FromArgb(102, 102, 133, 167);             gs2.Offset = 0.7;             gsc.Add(gs2);             lgb.GradientStops = gsc;             //实现边框颜色             bd.BorderBrush = lgb;         } 复制代码 
效果：
 
 
                                                                                                                                                                           
跬步积千里
 [/img]..

 
ManipulationDelta事件会是在触摸位置发生变化是引发，比如可以根据用户在触摸屏中移动的位置，图片发生相应的位移，根据客户两手指在触摸屏上的位置，进行图片的放大缩小；这里用到的案例就是对图片实现位移和缩放；
MainPage.xaml主要代码：
 

 <!--ContentPanel - 在此处放置其他内容-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Image Source="1.jpg" x:Name="imgScale" Width="200" Height="200"  ManipulationDelta="imgScale_ManipulationDelta" >              

            </Image>

        </Grid>

 效果：
 
 从上面可以看到我们引用了一张图片，并设置了ManipulationDelta事件，该事件的实现是：
View Code