windows phone (21) Grid元素的Background和Clip

 

Grid是唯一可以在內部定製儲存格的panel類，我們可以在grid中定製儲存格，然後通過grid.row和grid.column定位grid包含的元素在哪個位置，功能比較強大，用到的時候比較多，且看他的屬性：【作者：神舟龍】

 

Background

 

擷取或設定一個用於填充面板的 Brush所以我們可以對其背景進行繪製 ，比如下面的案例：

 

 <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"                           >            <Grid.Background>                <RadialGradientBrush>                    <GradientStop Offset="0.9" Color="DarkBlue"></GradientStop>                    <GradientStop Offset="0.8" Color="Firebrick"></GradientStop>                </RadialGradientBrush>            </Grid.Background>        </Grid>

它的顯示效果：

 

 Clip

 

 

擷取或設定用於定義Grid的內容邊框的
Geometry，下面的效果是實現的類似於天狗吃月最後一刻的效果

xaml代碼：

 

<!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"              >            <Grid.Background>                <RadialGradientBrush>                    <GradientStop Offset="0.9" Color="White"></GradientStop>                    <GradientStop Offset="0.8" Color="Black"></GradientStop>                </RadialGradientBrush>            </Grid.Background>            <Grid.Clip>                <EllipseGeometry Center="240 250" RadiusX="180" RadiusY="190"></EllipseGeometry>            </Grid.Clip>        </Grid>

效果：

 

 話說這樣的效果還不錯，只不過他不能通過修改參數實現天狗吃月的全過程，上面出現的效果是無意中做出了的；

Geometry 類

為用於定義幾何形狀的對象提供基類，所以EllipseGeometry,GeometryGroup等所繼承它的類都可以，比如我們使用RectangelGeoMetry擷取矩形剪輯地區

 

xaml代碼：

 <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"              >            <Grid.Background>                <RadialGradientBrush>                    <GradientStop Offset="0.1" Color="Purple"></GradientStop>                    <GradientStop Offset="0.2" Color="Blue"></GradientStop>                </RadialGradientBrush>            </Grid.Background>            <Grid.Clip>                <RectangleGeometry >                    <RectangleGeometry.Rect>                        <Rect X="20" Y="30" Width="300" Height="400"></Rect>                    </RectangleGeometry.Rect>                </RectangleGeometry>            </Grid.Clip>        </Grid>

效果：

 

 

我們可以從隱藏檔案添加一些其他的元素：

// 建構函式        public MainPage()        {            InitializeComponent();            LayoutDesign();        }        private void LayoutDesign()        {            TextBlock DeptListHeading = new TextBlock();            DeptListHeading.Text = "Department";            ListBox DeptList = new ListBox();            DeptList.Items.Add("Finance");            DeptList.Items.Add("Marketing");            DeptList.Items.Add("Human Resources");            DeptList.Items.Add("Payroll");            DeptList.Items.Add(DeptListHeading);                          this.ContentPanel.Children.Add(DeptList);                   }

 效果：

 

 這篇比較基礎