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);


        }

 效果：

 

 這篇比較基礎