一 分析阶段
根据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