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. 复制代码 

效果:

 

 

                                                                                                                                                                           

跬步积千里