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

简介: Silverlight——施工计划日报表(一) 近来一直在加班,基本上没有个人时间。所以更新不会很即时。 长话短说,先从界面代码开始吧。界面代码很简单,如下所示: ...

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

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

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

<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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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 控件生成的。

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

#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
属性定义好了,那么这些值是怎么传递过来的呢?使用的是InitParams。如下面代码:
 
        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类,具体属性如下:
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字符串,然后反序列话即可。如下所示:

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

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

    <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 如此定义:

        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);
        }
先写到这里吧。本文是按初学者的角度来写的,如果你是老手,那么有些内容就可以直接略过了,如果有不当之处,请指教;
如果你是初学者,还有不明白的,那么可以说明。
Silverlight我也只是入门而已,一直在加班,从未停歇过。仅仅只是地铁上看完了风云的书,然后花3天时间做了这个,待完善处还很多。
希望此文能够对大家有所帮助。
有时间我会继续写完的。
目录
相关文章
|
BI
Silverlight——施工计划日报表(一)
转自http://www.cnblogs.com/codelove/archive/2011/05/26/2058068.html 前一段时间,客户需要一个施工计划报表,要求能够直观的看到各个计划的实施时间,而且能够修改。
761 0
|
JSON 数据格式 开发工具
Silverlight——施工计划日报表(二)
转自http://www.cnblogs.com/codelove/archive/2011/05/28/2060806.html 近来一直在加班,基本上没有个人时间。所以更新不会很即时。 长话短说,先从界面代码开始吧。
822 0
|
JavaScript UED
Silverlight——施工计划日报表(四)——自适应浏览器窗口
转自http://www.cnblogs.com/codelove/archive/2011/06/12/2079232.html 在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:   那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。
976 0
|
JavaScript 前端开发 开发工具
Silverlight——施工计划日报表(三)
转自http://www.cnblogs.com/codelove/archive/2011/06/03/2071267.html 近来非常忙,睡觉时间都不够。这一篇,尽量说完整吧,由于时间紧,可能不会详细讲解。
937 0
|
JavaScript UED
Silverlight——施工计划日报表(四)——自适应浏览器窗口
在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:   那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。
920 0
|
BI
Silverlight——施工计划日报表(一)
前一段时间,客户需要一个施工计划报表,要求能够直观的看到各个计划的实施时间,而且能够修改。琢磨着,决定用Silverlight搞定好了。效果如下: 用户可以通过右键菜单的【完成】选项来标记完成,左键选择单元格来设置时间段。
773 0
|
JavaScript 前端开发 开发工具
Silverlight——施工计划日报表(三)
近来非常忙,睡觉时间都不够。这一篇,尽量说完整吧,由于时间紧,可能不会详细讲解。   这一篇主要内容有:界面调整与布局、日期计划网格和内容绘制、提交事件(Silverlight调用JS函数)、进度条显示与隐藏(JS调用Silverlight函数)、左击选择时间段、右键菜单、设置完成状态、全屏等等。
651 0

热门文章

最新文章