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

2016-08-20 10:59:25来源:http://webabcd.blog.51cto.com/1787395/342806作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(4) - 2.0控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image
作者:webabcd介绍Silverlight 2.0 控件一览:DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image在线DEMOhttp://webabcd.blog.51cto.com/1787395/342779示例1、DataGrid.xaml

<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"> <StackPanel HorizontalAlignment="Left"> <!-- 后台邦定方式,自动生成列 --> <data:DataGrid x:Name="dgrd" AutoGenerateColumns="True"></data:DataGrid> </StackPanel> </UserControl>

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

<UserControl x:Class="Silverlight20.Control.DatePicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"> <StackPanel HorizontalAlignment="Left"> <!-- TextBox 结合 Calendar,经典的选择日期的方式 SelectedDateFormat - 被选中的日期的显示格式 [System.Windows.Controls.DatePickerFormat枚举] SelectedDateFormat.Short - 简短格式。默认值。如2008-10-10 SelectedDateFormat.Long - 非简短格式。如2008年10月10日 --> <basics:DatePicker Width="200" SelectedDateFormat="Short"></basics:DatePicker> </StackPanel> </UserControl>


3、Grid.xaml

<UserControl x:Class="Silverlight20.Control.Grid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Width="Auto" Height="500"> <!-- 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* & 8* 就是分别占20%和80% --> <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="3*" /> <RowDefinition Height="7*" /> <RowDefinition Height="*" MinHeight="200" MaxHeight="500" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBox Grid.Row="0" Grid.Column="0" Background="red" Text="abc" /> <TextBox Grid.Row="0" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" /> <TextBox Grid.Row="1" Grid.Column="0" Background="red" Text="abc" /> <TextBox Grid.Row="1" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" /> <TextBox Grid.Row="2" Grid.Column="0" Background="red" Text="abc" /> <TextBox Grid.Row="2" Grid.Column="1" Background="red" Text="abc" Grid.RowSpan="2" VerticalAlignment="Bottom" /> <TextBox Grid.Row="2" Grid.Column="2" Background="red" Text="abc" /> <TextBox Grid.Row="3" Grid.Column="2" Background="red" Text="abc" /> <TextBox Grid.Row="4" Grid.Column="2" Background="red" Text="abc" /> </Grid> </UserControl>


4、GridSplitter.xaml

<UserControl x:Class="Silverlight20.Control.GridSplitter" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="5" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="5" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/> <Rectangle Grid.Row="0" Grid.Column="2" Fill="Green" /> <Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue" /> <RectangleGrid.Row="2" Grid.Column="2" Fill="Yellow" /> <!-- ShowsPreview - 拖动 GridSplitter 时,是要即时显示拖动结果(false 默认值),还是要先预览GridSplitter被拖动的位置(true) --> <basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> <basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Grid> </UserControl>


5、HyperlinkButton.xaml

<UserControl x:Class="Silverlight20.Control.HyperlinkButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <!-- NavigateUri - 超级链接的目标地址 TargetName - 目标名 --> <HyperlinkButton Content="http://webabcd.cnblogs.com" NavigateUri="http://webabcd.cnblogs.com/" HorizontalContentAlignment="Center" TargetName="_blank" Background="Black" Foreground="White" Margin="5" Width="200" /> <!-- HyperlinkButton.Content - 超级链接所显示的内容 --> <HyperlinkButton NavigateUri="http://webabcd.cnblogs.com/" TargetName="_blank" Margin="5" Width="200"> <HyperlinkButton.Content> <Image Source="/Silverlight20;component/Images/Logo.jpg" /> </HyperlinkButton.Content> </HyperlinkButton> </StackPanel> </UserControl>


6、Image.xaml

<UserControl x:Class="Silverlight20.Control.Image" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <!-- Source - 程序目录下的图片文件地址 --> <Image Source="/Logo.jpg" Margin="5" Width="100"/> <!-- Source - 程序集内的图片文件地址 [/程序集名;component/图片路径] --> <Image Source="/Silverlight20;component/Images/Logo.jpg" Margin="5" Width="200" /> <!-- Source - 互联网的图片文件地址 --> <Image Source="http://silverlight.net/Themes/silverlight/images/logo.jpg" Margin="5" Width="100" /> <!-- Source - 后台方式设置Image的Source --> <Image x:Name="img" Margin="5" Width="100" /> <Image x:Name="img2" Margin="5" Width="100" /> </StackPanel> </UserControl>

Image.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; using System.Windows.Media.Imaging; using System.Windows.Resources; namespace Silverlight20.Control { public partial class Image : UserControl { public Image() { InitializeComponent(); // 后台方式设置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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台