穩紮穩打Silverlight(4) - 2.0控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100302">[源碼下載下傳]</a>

穩紮穩打Silverlight(4) - 2.0控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image

介紹

Silverlight 2.0 控件一覽：DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image 

線上DEMO

示例 

1、DataGrid.xaml

&lt;UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"    x:Class="Silverlight20.Control.DataGrid" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;!-- 

                背景邦定方式，自動生成列 

                --&gt; 

                &lt;data:DataGrid x:Name="dgrd" AutoGenerateColumns="True"&gt;&lt;/data:DataGrid&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

DataGrid.xaml.cs

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Net; 

using System.Windows; 

using System.Windows.Controls; 

using System.Windows.Documents; 

using System.Windows.Input; 

using System.Windows.Media; 

using System.Windows.Media.Animation; 

using System.Windows.Shapes; 

namespace Silverlight20.Control 

{ 

        public partial class DataGrid : UserControl 

        { 

                public DataGrid() 

                { 

                        InitializeComponent(); 

                        BindData(); 

                } 

                void BindData() 

                        var source = new Data.SourceData(); 

                        // 設定 DataGrid 的資料源 

                        dgrd.ItemsSource = source.GetData().Take(10); 

        } 

}

2、DatePicker.xaml

&lt;UserControl x:Class="Silverlight20.Control.DatePicker" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    

        xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"&gt; 

                TextBox 結合 Calendar，經典的選擇日期的方式 

                SelectedDateFormat - 被選中的日期的顯示格式 [System.Windows.Controls.DatePickerFormat枚舉] 

                        SelectedDateFormat.Short - 簡短格式。預設值。如2008-10-10 

                        SelectedDateFormat.Long - 非簡短格式。如2008年10月10日 

                &lt;basics:DatePicker Width="200" SelectedDateFormat="Short"&gt;&lt;/basics:DatePicker&gt; 

3、Grid.xaml

&lt;UserControl x:Class="Silverlight20.Control.Grid" 

        Width="Auto" Height="500"&gt; 

        &lt;!-- 

        Grid - 表格式布局模式 

                Grid.RowDefinitions - 用于定義 Grid 中的行 

                Grid.ColumnDefinitions - 用于定義 Grid 中的列 

                Grid.ShowGridLines - 顯示網格 

                Grid.Row - 控件所在的 Grid 的行的索引 

                Grid.Column - 控件所在的 Grid 的列的索引 

                Grid.RowSpan - 合并行。 控件所在行，以及控件所在行之後的需要連續合并的行的總行數 

                Grid.ColumnSpan - 合并列。 控件所在列，以及控件所在列之後的需要連續合并的列的總列數 

                Width - 寬度 

                MinWidth - 最小寬度 

                MaxWidth - 最大寬度 

                Height - 高度 

                MinHeight - 最小高度 

                MaxHeight - 最大高度 

        Width 和 Height 的可用值 

        Auto - 自動設定為一個合适的值。預設值 

        Pixel - 像素值 

        * - 比例值。如 * 就是全部，2* &amp; 8* 就是分别占20%和80% 

        --&gt; 

        &lt;Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"&gt; 

                &lt;Grid.RowDefinitions&gt; 

                        &lt;RowDefinition Height="50" /&gt; 

                        &lt;RowDefinition Height="3*" /&gt; 

                        &lt;RowDefinition Height="7*" /&gt; 

                        &lt;RowDefinition Height="*" MinHeight="200" MaxHeight="500" /&gt; 

                        &lt;RowDefinition Height="Auto" /&gt; 

                &lt;/Grid.RowDefinitions&gt; 

                &lt;Grid.ColumnDefinitions&gt; 

                        &lt;ColumnDefinition /&gt; 

                &lt;/Grid.ColumnDefinitions&gt; 

                &lt;TextBox Grid.Row="0" Grid.Column="0" Background="red" Text="abc" /&gt; 

                &lt;TextBox Grid.Row="0" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" /&gt; 

                &lt;TextBox Grid.Row="1" Grid.Column="0" Background="red" Text="abc" /&gt; 

                &lt;TextBox Grid.Row="1" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" /&gt; 

                &lt;TextBox Grid.Row="2" Grid.Column="0" Background="red" Text="abc" /&gt; 

                &lt;TextBox Grid.Row="2" Grid.Column="1" Background="red" Text="abc" Grid.RowSpan="2" VerticalAlignment="Bottom" /&gt; 

                &lt;TextBox Grid.Row="2" Grid.Column="2" Background="red" Text="abc" /&gt; 

                &lt;TextBox Grid.Row="3" Grid.Column="2" Background="red" Text="abc" /&gt; 

                &lt;TextBox Grid.Row="4" Grid.Column="2" Background="red" Text="abc" /&gt; 

        &lt;/Grid&gt; 

4、GridSplitter.xaml

&lt;UserControl x:Class="Silverlight20.Control.GridSplitter" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        &lt;Grid x:Name="LayoutRoot" Background="White"&gt; 

                        &lt;RowDefinition Height="100" /&gt; 

                        &lt;RowDefinition Height="5" /&gt; 

                        &lt;ColumnDefinition Width="100" /&gt; 

                        &lt;ColumnDefinition Width="5" /&gt; 

                &lt;Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/&gt; 

                &lt;Rectangle Grid.Row="0" Grid.Column="2" Fill="Green" /&gt; 

                &lt;Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue" /&gt; 

                &lt;Rectangle    Grid.Row="2" Grid.Column="2" Fill="Yellow" /&gt; 

                ShowsPreview - 拖動 GridSplitter 時，是要即時顯示拖動結果（false 預設值），還是要先預覽GridSplitter被拖動的位置（true） 

                &lt;basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt; 

                &lt;basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt; 

5、HyperlinkButton.xaml

&lt;UserControl x:Class="Silverlight20.Control.HyperlinkButton" 

                NavigateUri - 超級連結的目标位址 

                TargetName - 目标名 

                &lt;HyperlinkButton Content="http://webabcd.cnblogs.com" NavigateUri="http://webabcd.cnblogs.com/" HorizontalContentAlignment="Center" TargetName="_blank" Background="Black" Foreground="White" Margin="5" Width="200" /&gt; 

                HyperlinkButton.Content - 超級連結所顯示的内容 

                &lt;HyperlinkButton NavigateUri="http://webabcd.cnblogs.com/" TargetName="_blank" Margin="5" Width="200"&gt; 

                        &lt;HyperlinkButton.Content&gt; 

                                &lt;Image Source="/Silverlight20;component/Images/Logo.jpg" /&gt; 

                        &lt;/HyperlinkButton.Content&gt; 

                &lt;/HyperlinkButton&gt; 

6、Image.xaml

&lt;UserControl x:Class="Silverlight20.Control.Image" 

                Source - 程式目錄下的圖檔檔案位址 

                &lt;Image Source="/Logo.jpg" Margin="5" Width="100"    /&gt; 

                Source - 程式集内的圖檔檔案位址 [/程式集名;component/圖檔路徑] 

                &lt;Image Source="/Silverlight20;component/Images/Logo.jpg" Margin="5" Width="200" /&gt; 

                Source - 網際網路的圖檔檔案位址 

                &lt;Image Source="http://silverlight.net/Themes/silverlight/images/logo.jpg" Margin="5" Width="100" /&gt; 

                Source - 背景方式設定Image的Source 

                &lt;Image x:Name="img" Margin="5" Width="100" /&gt; 

                &lt;Image x:Name="img2" Margin="5" Width="100" /&gt; 

Image.xaml.cs

using System.Windows.Media.Imaging; 

using System.Windows.Resources; 

        public partial class Image : UserControl 

                public Image() 

                        // 背景方式設定Image的Source 

                        img.Source = new BitmapImage(new Uri("/Silverlight20;component/Images/Logo.jpg", UriKind.Relative)); 

                        StreamResourceInfo sri = Application.GetResourceStream( 

                                new Uri("/Silverlight20;component/Images/Logo.jpg", UriKind.Relative)); 

                        BitmapImage imageSource = new BitmapImage(); 

                        imageSource.SetSource(sri.Stream); 

                        img2.Source = imageSource; 

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342806，如需轉載請自行聯系原作者