[C1] 仿 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 里的样式设计的，现在还未加上工作簿，所以中间是空白部分，左边的按钮可在后期定义为工作簿的切换，还有一个新增工作簿，看心情实现吧