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>

隱藏檔案代碼：

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

 效果：

 

 

跬步積千裡