[Silverlight] 仿Excel扩展C1FlexGrid控件

一  分析阶段

根据Excel表格区域的划分,如下图,基本上以4行*3列的框架搭建;

第一行为列头区域     ==>  C1FlexGrid.ColumnHeaders

第二行为单元格区域  ==>  C1FlexGrid.Cells

第三行为列尾区域     ==>  C1FlexGrid.ColumnFooters

第四行为横向滚动条区域,在Excel里还有工作簿页签等;

第一列为行头区域     ==>  C1FlexGrid.RowHeaders

第二列为单元格区域

第三列为纵向滚动条区域;

在CFlexGrid里还有BottomLeftCells,TopLeftCells两个区域,楼主做了一个Demo,然后把各个区域用背景色标识区域,如下图:

二  扩展C1FlexGrid框架

在Silverlight中新建一个模版化控件,

将该模版化控件继承于C1FlexGrid,并在构造函数中默认初始化50行10列;代码如下:

public class SLFlexGridExt : C1FlexGrid
{
    /// <summary>
    /// 构造函数
    /// </summary>
    public SLFlexGridExt()
    {
        this.DefaultStyleKey = typeof(SLFlexGridExt)

        // 默认添加50行10列
        for (int i = 0; i < 50; i++)
        {
            Rows.Add(new Row())
        }
        for (int c = 0; c < 10; c++)
        {
            Columns.Add(new Column())
        }
    }
}

接着在自动生成的Themes/Generic.xaml中对该模版化控件进行样式设置;

<!-- style for main control -->
<Style TargetType="local:SLFlexGridExt">
    <!-- properties -->
    <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="RowBackground" Value="{StaticResource _RowBackground}" />
            <Setter Property="AlternatingRowBackground" Value="{StaticResource _AlternatingRowBackground}" />
            <Setter Property="HeaderGridLinesBrush" Value="{StaticResource _HeaderGridLinesBrush}" />
            <Setter Property="GridLinesBrush" Value="{StaticResource _GridLinesBrush}" />
            <Setter Property="FrozenLinesBrush" Value="{StaticResource _FrozenLinesBrush}" />
            <Setter Property="GroupRowBackground" Value="{StaticResource _GroupRowBackground}" />
            <Setter Property="CursorBackground" Value="{StaticResource _CursorBackground}" />
            <Setter Property="SelectionBackground" Value="{StaticResource _SelectionBackground}" />
            <Setter Property="RowHeaderBackground" Value="{StaticResource _RowHeaderBackground}" />
            <Setter Property="ColumnHeaderBackground" Value="{StaticResource _ColumnHeaderBackground}" />
            <Setter Property="TopLeftCellBackground" Value="{StaticResource _TopLeftCellBackground}" />
            <Setter Property="BottomRightCellBackground" Value="{StaticResource _BottomRightCellBackground}" />

            <!-- Excel behavior by default -->
            <Setter Property="AllowDragging" Value="None" />
            <Setter Property="AllowSorting" Value="False" />
            <Setter Property="AllowResizing" Value="Both" />
            <Setter Property="ShowMarquee" Value="True" />
            <Setter Property="GridLinesVisibility" Value="All" />
            <Setter Property="ClipboardCopyMode" Value="ExcludeHeader" />
            <Setter Property="ClipboardPasteMode" Value="ExcludeHeader" />
            <Setter Property="KeyActionTab" Value="MoveAcross" />
            <Setter Property="AreRowGroupHeadersFrozen" Value="False" />

            <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="local:SLFlexGridExt">
                                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                    <Grid x:Name="_root">
                                            <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <!-- vertical scrollbar -->
                                            <ScrollBar x:Name="_sbV" Orientation="Vertical" Grid.Column="2" Grid.RowSpan="2" />
                                            <!-- horizontal scrollbar -->
                                            <ScrollBar x:Name="_sbH" Orientation="Horizontal" Grid.Row="3" Grid.ColumnSpan="3" />
                                    </Grid>
                                </Border>
                        </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>

这样以后就可以在其他界面里添加该扩展的C1FlexGrid控件,

先添加该扩展控件所在命名空间:

xmlns:my="clr-namespace:Memento.SLFlexGrid;assembly=SLFlexGrid"

然后添加该控件

<my:SLFlexGridExt x:Name="flex" Grid.Row="2" Margin="0 4 0 0" />

即可,预览效果如下图:

现在还是跟未扩展前的C1FlexGrid差不多,

接下来就要像Excel那样,在左下角加入切换工作簿的两个按钮,和工作簿页签的TabControl,以及添加新工作簿的按钮,

只要在之前扩展的基础上,修改Themes/Generic.xaml,定义想要的样式布局即可:

<Grid x:Name="_tabHolder" Grid.Row="3" Grid.ColumnSpan="2" Background="DarkGray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="_spButtonPanel" Orientation="Horizontal">
            <Button Height="20" Width="20" />
            <RepeatButton Height="20" Width="20" />
            <RepeatButton Height="20" Width="20" />
            <Button Height="20" Width="20" />
        </StackPanel>
        <c1:C1TabControl x:Name="_tabs" Grid.Column="1"  FontSize="12" Padding="0" Margin="0 -1 0 0" IsTabStop="False" TabItemShape="Sloped" TabStripPlacement="Bottom" TabStripOverlap="8" />
    </Grid>

    <!-- horizontal scrollbar -->
    <ScrollBar x:Name="_sbH" Orientation="Horizontal" Grid.Column="2" />
</Grid>

效果如下图,这里楼主是按照ComponentOne官网提供的ExcelBook.5Demo里的样式设计的,现在还未加上工作簿,所以中间是空白部分,左边的按钮可在后期定义为工作簿的切换,还有一个新增工作簿,看心情实现吧

时间: 2024-11-10 00:54:33

[Silverlight] 仿Excel扩展C1FlexGrid控件的相关文章

仿微信小视频播放控件

变量如下: private SurfaceHolder mSurfaceHolder; private MediaPlayer mPlayer; 构造函数内获取 SurfaceHolder,并设置回调接口 Callback: public MoviePlayerView(Context context, AttributeSet attrs, int defStyle) {   super(context, attrs, defStyle);      mSurfaceHolder = this

扩展GridView控件——为内容项添加拖放及分组功能

引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项.打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现GridView的使用."Tiles"提供了一个简单易用,平铺方式来组织内容显示.Windows8的开始菜单是最典型的GridView 示例."开始菜单"显示了系统中安装的所有应用程序,而且支持重新排列. 本文源于我们项目的开发人员,他们想在项目中提供与GridView相同的用户体验,想要创建类GridView控件

高仿IOS7日期选择控件

高仿IOS7日期选择控件 高仿IOS7.QQ等日期选择控件,滑动选择,高端大气上档次,可直接运用于项目中... 下载地址:http://www.devstore.cn/code/info/965.html 运行截图:   

前端心得---仿IOS拾取器控件(转轮控件)

希望做一个类似IOS拾取器的控件,在IOS上该控件的效果是这样的:,我也把该效果称之为为轮子效果. 要实现这个效果,能够用到的技术点非常简单,无非是transform的translate3d和rotate,不过要想很好的实现,还要建立一个精确的数学模型,来解决如何[摆放]的问题.特别是这个效果不是静态的,需要满足鼠标滑动的时,这个轮子要转起来,这就需要仔细思索了.当然,在最开始重点还是要搞清楚自变量是什么.因变量是什么.它们之间的关系是什么以及该需求的一些性质.找到了好的性质,可以减轻工作量,并

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

Excel VBA TextBox控件的滚动条不能刷新

问题:Excel中Textbox控件以及Form里的Textbox控件,当直接填充的内容很长时,滚动条不能实时刷新. 现象: 修改后: 原因: 虽然已经向Textbox的Text里设置了内容,但此时Textbox并没有被激活,焦点也没有变化,所以,Textbox的滚动条没有被刷新出来. 修改后的VBA程序: -----------------------ActiveX Textbox-------------------------- Private Sub CommandButton1_Cli

扩展GroupBox控件

1.GroupBox的边框颜色可以自行设置: 2.GroupBox可以设置边框的为圆角: 3.设置GroupBox标题在控件中的位置. 4.设置GroupBox标题的字体和颜色. 具体实现步骤Panel扩展一样,直接看具体的代码,代码如下: public class GroupBoxEx : GroupBox { private Font _titleFont = new Font("宋体", 10, FontStyle.Regular); private Color _titleCo

Barcode Professional for Silverlight条码生成和打印控件下载及使用介绍

Barcode Professional for Silverlight是一款轻量级的.NET程序集,为你的SilverLight应用程序生成高质量的基于矢量的条形码,支持条码生成和打印,支持当前大多数1维和2维条形码,包含:Code 39, Code 128, GS1-128, GS1 DataBar (RSS-14), EAN 13 & UPC, Postal (USPS, British Royal Mail, Australia Post, DHL, etc.), Data Matrix

Android开发技巧——定制仿微信图片裁剪控件

拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动和放大的是图片,裁剪框不动. 裁剪框外的内容要有半透明黑色遮罩. 裁剪框下面要显示一行提示文字(这点我至今还是持保留意见的). 在Android中,裁剪图片的控件库还是挺多的,特别是github上比较流行的几个,都已经进化到比较稳定的阶段,但比较遗憾的是它们的裁剪过程是拖动或缩放裁剪框,于是只好自己