Silverlight——施工计划日报表(二)

简介: 转自http://www.cnblogs.com/codelove/archive/2011/05/28/2060806.html近来一直在加班,基本上没有个人时间。所以更新不会很即时。 长话短说,先从界面代码开始吧。

转自http://www.cnblogs.com/codelove/archive/2011/05/28/2060806.html

近来一直在加班,基本上没有个人时间。所以更新不会很即时。

长话短说,先从界面代码开始吧。界面代码很简单,如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
< UserControl xmlns:sdk = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  xmlns:toolkit = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class = "PlansView.ShowPlans"
     xmlns:BubbleCremeTheme = "System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.BubbleCremeTheme"
     mc:Ignorable = "d"
     d:DesignHeight = "300" d:DesignWidth = "400" Loaded = "UserControl_Loaded" >
     < toolkit:BubbleCremeTheme >
         < StackPanel   Name = "stackPanel1" FlowDirection = "LeftToRight" HorizontalAlignment = "Left" >
             < StackPanel Orientation = "Vertical" >
                 < TextBlock Height = "23" Name = "txtTitle" HorizontalAlignment = "Center" Text = "标题" FontSize = "18" FontWeight = "Bold" Opacity = "0.7" RenderTransformOrigin = "0.5,0.5" >
                     < TextBlock.RenderTransform >
                         < CompositeTransform />
                     </ TextBlock.RenderTransform >
                 < TextBlock.Foreground >
                     < LinearGradientBrush EndPoint = "0.5,1" MappingMode = "RelativeToBoundingBox" StartPoint = "0.5,0" >
                         < GradientStop Color = "Black" Offset = "1" />
                         < GradientStop Color = "#FFE49C9C" />
                     </ LinearGradientBrush >
                 </ TextBlock.Foreground >
                 </ TextBlock >
                 < StackPanel Orientation = "Horizontal" HorizontalAlignment = "Right" >
                     
                     < Button Content = "一键标记为完成" Name = "btnFilishAll" Width = "130" Margin = "5,0,5,0" Click = "btnFilishAll_Click" />
                     < Button Content = "全屏" Name = "BtnFullScreen" Width = "100" Margin = "5,0,5,0" Click = "BtnFullScreen_Click" />
                     < Button Content = "提交" Name = "btnSubmit" Width = "100"  Click = "Button_Click" Margin = "5,0,5,0" />
                 </ StackPanel >
                 < ScrollViewer HorizontalContentAlignment = "Left" HorizontalAlignment = "Left" HorizontalScrollBarVisibility = "Auto" VerticalScrollBarVisibility = "Auto" MaxHeight = "513" >
                     < ScrollViewer.BorderBrush >
                         < LinearGradientBrush EndPoint = "0.5,1.5" StartPoint = "0.5,0" >
                             < GradientStop Color = "#FFE0E3BC" />
                             < GradientStop Color = "#FF6C6C5C" Offset = "1" />
                         </ LinearGradientBrush >
                     </ ScrollViewer.BorderBrush >
                     < Border BorderBrush = "#FF333333" BorderThickness = "2" Background = "#FFC1C1C1" >
                         < Grid x:Name = "gdPlans" Background = "#FFC1C1C1" MouseRightButtonDown = "gdPlans_MouseRightButtonDown" >
 
                         </ Grid >
                     </ Border >
                 </ ScrollViewer >
             </ StackPanel >
         </ StackPanel >
     </ toolkit:BubbleCremeTheme >
</ UserControl >

值得注意的是,这里用到了Silverlight 4.0工具包里面的BubbleCremeTheme主题。在使用的时候,注意引用,如 “xmlns:BubbleCremeTheme="System.Windows.Controls.Theming; assembly=System.Windows.Controls.Theming.BubbleCremeTheme"”。然后需要注意的是,使用了 ScrollViewer 实现滚动条,在ScrollViewer 里面放了一个Border 控件,用于绘制边框。在Border 控件里面,用到了Grid 控件。所有的数据都是基于Grid 控件生成的。

界面元素定义好了。接下来如下公共属性:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#region 公共属性
         /// <summary>
         /// 日期格式(day、week、month)
         /// </summary>
         public string DateType { get ; set ; }
         /// <summary>
         /// 行号
         /// </summary>
         public int RowIndex { get ; set ; }
         /// <summary>
         /// 开始时间
         /// </summary>
         public DateTime StartDate { get ; set ; }
         /// <summary>
         /// 设置日期列数
         /// </summary>
         public int DateColCount { get ; set ; }
         /// <summary>
         /// 文本列列数
         /// </summary>
         public int NameColumns { get ; set ; }
         /// <summary>
         /// 计划列头
         /// </summary>
         public string [] PlanHeads { get ; set ; }
         /// <summary>
         /// 日期列背景色
         /// </summary>
         public Color DayBackGroundColor { get ; set ; }
         /// <summary>
         /// 数据
         /// </summary>
         List<PlansData> LstPlansData { get ; set ; }
         /// <summary>
         /// 是否已经显示设置完成的提示
         /// </summary>
         public bool HasShowSetFilishTip { get ; set ; }
         Dictionary< string , string > dicInitParams;
         //行背景(用于时间段)
         private static List<ImageBrush> RowBackGroundLst;
         private ImageBrush FilishImageBrush;
         /// <summary>
         /// 周的日数(默认7)
         /// </summary>
         int _weekDayCount;
         #endregion
?
1
属性定义好了,那么这些值是怎么传递过来的呢?使用的是InitParams。如下面代码:
?
1
  
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
public ShowPlans()
{
     try
     {
         InitializeComponent();
         SetInitialValue();
         #region 设置显示的时间段
         if (DateType == "day" && txtTitle.Text.Length > 0)
         {
             txtTitle.Text += string .Format( "({0}~{1})" , StartDate.ToShortDateString(), StartDate.AddDays(DateColCount).ToShortDateString());
         }
         #endregion
     }
     catch (Exception ex)
     {
         MessageBox.Show( "参数初始化出错:" + ex.Message, "错误" , MessageBoxButton.OK);
     }
}
#region 参数初始化
/// <summary>
/// 数据初始化
/// StartDate:开始日期,默认为当前时间
/// DateType:日期类型,可选值为(day、week、month),默认为day
/// DateColCount:日期列数,day默认为30,week默认为10,month默认为12
/// Title:标题
/// PlanHeads:文字标头,多列需用“;”分隔。值需用Url编码。
/// Data:数据。格式为Json,需用Url编码。映射的类为PlansData。
/// DayBackGroundColor:日期列背景色
/// WeekDayCount:周涵盖的天数(默认7)
/// OnlyResponseHasEdit:仅仅只输出编辑项
/// </summary>
private void SetInitialValue()
{
     RowIndex = 0;
     #region 设置默认值
     StartDate = DateTime.Now;
     DateColCount = 30;
     DateType = "day" ;
     NameColumns = 1;
     DayBackGroundColor = Colors.White;
     HasShowSetFilishTip = false ;
     #region 图片画刷
     RowBackGroundLst = new List<ImageBrush>()
     {
         new ImageBrush()
         {
             ImageSource= new BitmapImage( new Uri( "plink.png" , UriKind.Relative))
         },
         new ImageBrush()
         {
             ImageSource= new BitmapImage( new Uri( "blue.png" , UriKind.Relative))
         },
         new ImageBrush()
         {
             ImageSource= new BitmapImage( new Uri( "red.png" , UriKind.Relative))
         },
         new ImageBrush()
         {
             ImageSource= new BitmapImage( new Uri( "green.png" , UriKind.Relative))
         },
     };
     FilishImageBrush =
         new ImageBrush()
        {
            ImageSource = new BitmapImage( new Uri( "red.png" , UriKind.Relative))
        };
     #endregion
     #endregion
     #region 设置初始化参数
     dicInitParams = App.Current.Host.InitParams as Dictionary< string , string >;
     if (dicInitParams != null && dicInitParams.Count > 0)
     {
         //标题
         if (dicInitParams.ContainsKey( "Title" ))
             txtTitle.Text = dicInitParams[ "Title" ] ?? string .Empty;
         else
             txtTitle.Visibility = Visibility.Collapsed;
         //设置开始日期
         if (dicInitParams.ContainsKey( "StartDate" ))
             StartDate = Convert.ToDateTime(dicInitParams[ "StartDate" ]);
         //周涵盖天数(仅当DateType=week时启用)
         _weekDayCount = 7;
         //日期列背景色
         if (dicInitParams.ContainsKey( "DayBackGroundColor" ))
             DayBackGroundColor = ReturnColorFromString(dicInitParams[ "DayBackGroundColor" ]);
         //日期类型
         if (dicInitParams.ContainsKey( "DateType" ))
         {
             DateType = dicInitParams[ "DateType" ];
             if (DateType == "week" )
             {
                 if (!dicInitParams.ContainsKey( "DateColCount" ))
                 {
                     DateColCount = 10;
                 }
                 if (dicInitParams.ContainsKey( "WeekDayCount" ))
                 {
                     _weekDayCount = Convert.ToInt32(dicInitParams[ "WeekDayCount" ]);
                 }
             }
             else if (DateType == "month" )
             {
                 if (!dicInitParams.ContainsKey( "DateColCount" ))
                 {
                     DateColCount = 12;
                 }
             }
         }
         //日期列列数
         if (dicInitParams.ContainsKey( "DateColCount" ))
             DateColCount = Convert.ToInt32(dicInitParams[ "DateColCount" ]);
 
         //文本列列头
         if (dicInitParams.ContainsKey( "PlanHeads" ))
         {
             PlanHeads = HttpUtility.UrlDecode(dicInitParams[ "PlanHeads" ]).Split( ';' );
             NameColumns = PlanHeads.Length;
         }
     #endregion
     }
     else
     {
         MessageBox.Show( "启动参数未设置" );
     }
}
#endregion
参数设置好了,但是数据还没有呢?在上一篇——《Silverlight——施工计划日报表(一)》中介绍过数据类了。首先在Silverlight项目中定义PlansData类,具体属性如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
using System;
using System.Collections.Generic;
 
namespace PlansView
{
     /// <summary>
     /// 数据
     /// </summary>
     public class PlansData
     {
         public List<Plan> LstPlan { get ; set ; }
         /// <summary>
         /// 计划时间集合
         /// </summary>
         public List<PlanDate> LstPlanDate { get ; set ; }
 
     }
     /// <summary>
     /// 计划
     /// </summary>
     public class Plan
     {
         /// <summary>
         /// 计划名称
         /// </summary>
         public string PlanName { get ; set ; }
     }
     /// <summary>
     /// 计划日期
     /// </summary>
     public class PlanDate
     {
         /// <summary>
         /// 说明
         /// </summary>
         public string Explain { get ; set ; }
         /// <summary>
         /// 开始时间
         /// </summary>
         public DateTime? StartDate { get ; set ; }
         /// <summary>
         /// 结束时间
         /// </summary>
         public DateTime? EndDate { get ; set ; }
         /// <summary>
         /// 允许的最小值
         /// </summary>
         public DateTime? MinDate { get ; set ; }
         /// <summary>
         /// 允许的最大值
         /// </summary>
         public DateTime? MaxDate { get ; set ; }
         /// <summary>
         /// 是否只读
         /// </summary>
         public bool IsReadOnly { get ; set ; }
         /// <summary>
         /// 是否允许超过当前时间
         /// </summary>
         public bool CanGreaterThanNow { get ; set ; }
         /// <summary>
         /// 是否已编辑
         /// </summary>
         public bool HasEdit { get ; set ; }
         /// <summary>
         /// 是否已完成
         /// </summary>
         public bool IsFlish { get ; set ; }
         /// <summary>
         /// 是否允许撤销
         /// </summary>
         public bool AllowCancel { get ; set ; }
         /// <summary>
         /// 是否允许为空(必填情况下,无法提交数据)
         /// </summary>
         public bool AllowBlank { get ; set ; }
         /// <summary>
         /// 自定义标记
         /// </summary>
         public string Tag { get ; set ; }
     }
}

这个类是用来控制数据行的。开始时间和结束时间控制显示的条状的长度。接下来,需要使用JSON.NET组件(http://james.newtonking.com/projects/json-net.aspx)。

下载好该组件后, 引用Json.Silverlight(Silverlight的JSON组件用起来不方便)。这样我们就可以很方便的将JSON字符串反序列化成对象 了,也可以将对象序列化成JSON字符串。于是,只需要在InitParams传入JSON字符串,然后反序列话即可。如下所示:

?
1
2
3
4
5
6
7
#region 设置数据
private void LoadData()
{
     if (dicInitParams != null && dicInitParams.ContainsKey( "Data" ))
         LstPlansData = JsonConvert.DeserializeObject<List<PlansData>>(HttpUtility.UrlDecode(dicInitParams[ "Data" ]));
}
#endregion

那么InitParams如何设置呢,测试页(.aspx页面)页面元素如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< form id = "form1" runat = "server" style = "height:100%" >
< div id = "silverlightControlHost" >
     < object data = "data:application/x-silverlight-2," type = "application/x-silverlight-2" width = "100%" height = "100%" >
       < param name = "source" value = "ClientBin/PlansView.xap" />
       < param name = "onError" value = "onSilverlightError" />
       < param name = "background" value = "white" />
       < param name = "minRuntimeVersion" value = "4.0.50826.0" />
       < param name = "autoUpgrade" value = "true" />
       < param name = "initParams" value='<%=InitParams %>' />
       < a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style = "text-decoration:none" >
           < img src = "http://go.microsoft.com/fwlink/?LinkId=161376" alt = "获取 Microsoft Silverlight" style = "border-style:none" />
       </ a >
     </ object >< iframe id = "_sl_historyFrame" style = "visibility:hidden;height:0px;width:0px;border:0px" ></ iframe ></ div >
</ form >

在后来代码中,InitParams 如此定义:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
public string InitParams { get ; set ; }
protected void Page_Load( object sender, EventArgs e)
{
     if (!IsPostBack)
     {
         try
         {
             InitParams = "Title=施工计划,DateColCount=80,PlanHeads=工程名称,Data=" ;
             List<PlansData> _lstPlansData = new List<PlansData>();
             LoadData(_lstPlansData);
             InitParams += HttpUtility.UrlEncode(JsonConvert.SerializeObject(_lstPlansData, Formatting.Indented));
             //LogManager.WriteTraceLog(JsonConvert.SerializeObject(_lstPlansData, Formatting.Indented));
 
         }
         catch (Exception ex)
         {
             LogManager.WriteErrorLog(ex);
         }
     }
}
 
private static void LoadData(List<PlansData> _lstPlansData)
{
     PlansData _planData1 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "木工轻钢割断墙" }
         },
         LstPlanDate = new List<PlanDate>()
         {
                 new PlanDate(){StartDate=DateTime.Now,EndDate=DateTime.Now.AddDays(3),Explain= "基准时间" ,IsReadOnly= true },
                 new PlanDate(){StartDate=DateTime.Now.AddDays(1),EndDate=DateTime.Now.AddDays(4),Explain= "计划时间" ,CanGreaterThanNow= true },
                 new PlanDate(){StartDate=DateTime.Now.AddDays(2),EndDate=DateTime.Now.AddDays(5),Explain= "实际时间" ,IsFlish= true ,AllowBlank= false }
         }
     };
     _lstPlansData.Add(_planData1);
     PlansData _planData2 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "贴文化石,刷漆" }
         },
         LstPlanDate = new List<PlanDate>()
         {
             new PlanDate(){StartDate=DateTime.Now.AddDays(5),EndDate=DateTime.Now.AddDays(16),Explain= "计划时间" ,CanGreaterThanNow= true },
             new PlanDate(){StartDate=DateTime.Now.AddDays(4),EndDate=DateTime.Now.AddDays(15),Explain= "实际时间" }
         }
     };
     _lstPlansData.Add(_planData2);
     PlansData _planData3 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "石膏板吊棚" }
         },
         LstPlanDate = new List<PlanDate>()
         {
             new PlanDate(){StartDate=DateTime.Now.AddDays(5),EndDate=DateTime.Now.AddDays(18),Explain= "基准时间" ,IsReadOnly= true ,CanGreaterThanNow= true },
             new PlanDate(){StartDate=DateTime.Now.AddDays(8),EndDate=DateTime.Now.AddDays(12),Explain= "计划时间" },
         }
     };
     _lstPlansData.Add(_planData3);
     PlansData _planData4 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "大白乳胶漆" }
         },
         LstPlanDate = new List<PlanDate>()
         {
             new PlanDate(){StartDate=DateTime.Now.AddDays(15),EndDate=DateTime.Now.AddDays(18),Explain= "基准时间" ,IsReadOnly= true },
             new PlanDate(){StartDate=DateTime.Now.AddDays(19),EndDate=DateTime.Now.AddDays(25),Explain= "计划时间" },
             new PlanDate(){StartDate=DateTime.Now,EndDate=DateTime.Now.AddDays(5),Explain= "实际时间" }
         }
     };
     _lstPlansData.Add(_planData4);
     PlansData _planData5 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "铺地板" }
         },
         LstPlanDate = new List<PlanDate>()
         {
             new PlanDate(){StartDate=DateTime.Now.AddDays(3),EndDate=DateTime.Now.AddDays(5),Explain= "基准时间" },
             new PlanDate(){StartDate=DateTime.Now.AddDays(6),EndDate=DateTime.Now.AddDays(15),Explain= "计划时间" },
             new PlanDate(){StartDate=DateTime.Now.AddDays(7),EndDate=DateTime.Now.AddDays(19),Explain= "实际时间" }
         }
     };
     _lstPlansData.Add(_planData5);
     PlansData _planData6 = new PlansData()
     {
         LstPlan = new List<Plan>()
         {
             new Plan(){PlanName= "测试1" }
         },
         LstPlanDate = new List<PlanDate>()
         {
             new PlanDate(){StartDate=DateTime.Now,EndDate=DateTime.Now,Explain= "基准时间" },
             new PlanDate(){StartDate=DateTime.Now.AddDays(6),EndDate=DateTime.Now.AddDays(15),Explain= "计划时间" },
             new PlanDate(){StartDate=DateTime.Now.AddDays(79),EndDate=DateTime.Now.AddDays(79),Explain= "实际时间" }
         }
     };
     _lstPlansData.Add(_planData6);
?
1
}
先写到这里吧。本文是按初学者的角度来写的,如果你是老手,那么有些内容就可以直接略过了,如果有不当之处,请指教;
如果你是初学者,还有不明白的,那么可以说明。
Silverlight我也只是入门而已,一直在加班,从未停歇过。仅仅只是地铁上看完了风云的书,然后花3天时间做了这个,待完善处还很多。
希望此文能够对大家有所帮助。
有时间我会继续写完的。
 
目录
相关文章
|
BI
Silverlight——施工计划日报表(一)
转自http://www.cnblogs.com/codelove/archive/2011/05/26/2058068.html 前一段时间,客户需要一个施工计划报表,要求能够直观的看到各个计划的实施时间,而且能够修改。
791 0
|
JavaScript UED
Silverlight——施工计划日报表(四)——自适应浏览器窗口
转自http://www.cnblogs.com/codelove/archive/2011/06/12/2079232.html 在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:   那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。
1039 0
|
JavaScript 前端开发 开发工具
Silverlight——施工计划日报表(三)
转自http://www.cnblogs.com/codelove/archive/2011/06/03/2071267.html 近来非常忙,睡觉时间都不够。这一篇,尽量说完整吧,由于时间紧,可能不会详细讲解。
1003 0
|
JavaScript UED
Silverlight——施工计划日报表(四)——自适应浏览器窗口
在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:   那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。
988 0
|
BI
Silverlight——施工计划日报表(一)
前一段时间,客户需要一个施工计划报表,要求能够直观的看到各个计划的实施时间,而且能够修改。琢磨着,决定用Silverlight搞定好了。效果如下: 用户可以通过右键菜单的【完成】选项来标记完成,左键选择单元格来设置时间段。
876 0
|
JSON 数据格式 开发工具
Silverlight——施工计划日报表(二)
Silverlight——施工计划日报表(一) 近来一直在加班,基本上没有个人时间。所以更新不会很即时。 长话短说,先从界面代码开始吧。界面代码很简单,如下所示: ...
643 0
|
JavaScript 前端开发 开发工具
Silverlight——施工计划日报表(三)
近来非常忙,睡觉时间都不够。这一篇,尽量说完整吧,由于时间紧,可能不会详细讲解。   这一篇主要内容有:界面调整与布局、日期计划网格和内容绘制、提交事件(Silverlight调用JS函数)、进度条显示与隐藏(JS调用Silverlight函数)、左击选择时间段、右键菜单、设置完成状态、全屏等等。
700 0