[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())
        }
    }
}

View Code

接着在自动生成的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>

View Code

这样以后就可以在其他界面里添加该扩展的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>

View Code

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