windows phone (18) Border元素

 Border类是对某一个对象的周围边框，背景，或者同时绘制两者，首先看一个简单的例子进行分析【作者：神舟龍】

xaml文件：

1. <!--ContentPanel - 在此处放置其他内容--> 
2.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
3.             <Border Background="DarkCyan" BorderBrush="Coral"  BorderThickness="20"  CornerRadius="19"> 
4.                 <TextBlock x:Name="tbShow" Text="边框元素示例" VerticalAlignment="Center" HorizontalAlignment="Center"> 
5.                     <TextBlock.RenderTransform> 
6.                         <CompositeTransform Rotation="30"></CompositeTransform> 
7.                     </TextBlock.RenderTransform> 
8.                 </TextBlock> 
9.             </Border> 
10.         </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文件代码：

1. <!--ContentPanel - 在此处放置其他内容--> 
2.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
3.             <Border x:Name="bd" Background="DarkCyan" ManipulationDelta="bd_ManipulationDelta"> 
4.                 <TextBlock x:Name="tbShow" Text="边框元素示例" VerticalAlignment="Center" HorizontalAlignment="Center"> 
5.                     <TextBlock.RenderTransform> 
6.                         <CompositeTransform Rotation="30"></CompositeTransform> 
7.                     </TextBlock.RenderTransform> 
8.                 </TextBlock> 
9.             </Border> 
10.         </Grid> 

 隐藏文件代码：

1. // <summary> 
2.         /// 触摸移动实现 
3.         /// </summary> 
4.         /// <param name="sender"></param> 
5.         /// <param name="e"></param> 
6.         private void bd_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
7.         { 
8.             //左上右下 
9.             Thickness thickNess = new Thickness(10, 20, 30, 40); 
10.             //设置不同的粗细 
11.             bd.BorderThickness = thickNess; 
12.             //设置左上，右上，左下，右下的圆角半径值 
13.             CornerRadius cornerRadius = new CornerRadius(10, 20, 30, 40); 
14.             bd.CornerRadius = cornerRadius; 
15.  
16.             LinearGradientBrush lgb = new LinearGradientBrush(); 
17.             GradientStopCollection gsc = new GradientStopCollection(); 
18.             GradientStop gs1 = new GradientStop(); 
19.             gs1.Color = Color.FromArgb(122, 102, 213, 167); 
20.             gs1.Offset = 0.2; 
21.             gsc.Add(gs1); 
22.             GradientStop gs2 = new GradientStop(); 
23.             gs2.Color = Color.FromArgb(102, 102, 133, 167); 
24.             gs2.Offset = 0.7; 
25.             gsc.Add(gs2); 
26.             lgb.GradientStops = gsc; 
27.             //实现边框颜色 
28.             bd.BorderBrush = lgb; 
29.         } 
30. 复制代码 

效果：

本文转自shenzhoulong  51CTO博客，原文链接：http://blog.51cto.com/shenzhoulong/841791，如需转载请自行联系原作者