随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


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


作者:webabcd


介绍
Silverlight 2.0 控件一览:DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image


在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


示例
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" />
        
<Rectangle  Grid.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
[源码下载]