[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 里的樣式設計的，現在還未加上工作簿，所以中間是空白部分，左邊的按鈕可在后期定義為工作簿的切換，還有一個新增工作簿，看心情實現吧