windows phone (18) Border元素

最新推荐文章于 2013-06-04 15:32:00 发布

神舟龙

最新推荐文章于 2013-06-04 15:32:00 发布

阅读量948

点赞数

分类专栏： windows phone 文章标签： border windows phone object image 扩展

本文链接：https://blog.csdn.net/shenzhoulong001/article/details/7488383

版权

windows phone 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>

隐藏文件代码：

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

效果：