windows phone (18) Border元素

原文: windows phone (18) Border元素

 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>

 隐藏文件代码：

View Code

///   <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;
        }

 效果：

 

 

                                                                                                                                                                            跬步积千里