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，p_w_picpath等，如果要在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;
        }
複製代碼

效果：

 

 

                                                                                                                                                                           

跬步積千里