windows phone (18) Border元素

ywg

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

• <!--ContentPanel - 在此处放置其他内容-->
  
•         <Grid x:Name=&quot;ContentPanel&quot; Grid.Row=&quot;1&quot; Margin=&quot;12,0,12,0&quot;>
  
•             <Border Background=&quot;DarkCyan&quot; BorderBrush=&quot;Coral&quot;  BorderThickness=&quot;20&quot;  CornerRadius=&quot;19&quot;>
  
•                 <TextBlock x:Name=&quot;tbShow&quot; Text=&quot;边框元素示例&quot; VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot;>
  
•                     <TextBlock.RenderTransform>
  
•                         <CompositeTransform Rotation=&quot;30&quot;></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=&quot;ContentPanel&quot; Grid.Row=&quot;1&quot; Margin=&quot;12,0,12,0&quot;>
  
•             <Border x:Name=&quot;bd&quot; Background=&quot;DarkCyan&quot; ManipulationDelta=&quot;bd_ManipulationDelta&quot;>
  
•                 <TextBlock x:Name=&quot;tbShow&quot; Text=&quot;边框元素示例&quot; VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot;>
  
•                     <TextBlock.RenderTransform>
  
•                         <CompositeTransform Rotation=&quot;30&quot;></CompositeTransform>
  
•                     </TextBlock.RenderTransform>
  
•                 </TextBlock>
  
•             </Border>
  
•         </Grid>
  

　　

　　隐藏文件代码：
　　

• // <summary>
  
•         /// 触摸移动实现
  
•         /// </summary>
  
•         /// <param name=&quot;sender&quot;></param>
  
•         /// <param name=&quot;e&quot;></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;
  
•         }
  
• 复制代码
  

　　

　　效果：

跬步积千里