ywg 发表于 2018-6-17 15:25:03

windows phone (18) Border元素


  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;
[*]      }
[*]复制代码
  

  效果:


跬步积千里
页: [1]
查看完整版本: windows phone (18) Border元素