[C1] 分离 C1FlexGrid 滚动条

一  场景介绍

Silverlight 5.0 的 C1FlexGrid 控件里自带的滚动条，是嵌入在 C1FlexGrid 宽度和高度的范围里的，效果如下图所示：

（未隐藏自带滚动条）

（隐藏自带的滚动条）

其中行高的定义如下：

<c1:C1FlexGrid x:Name="flxg" Width="300" Height="200"
               Grid.Row="0" HeadersVisibility="None" 
               AlternatingRowBackground="AliceBlue" Background="LightGray"
               GridLinesVisibility="All" GridLinesBrush="Black">
    <c1:C1FlexGrid.Rows>
        <c1:Row Height="100" />
        <c1:Row Height="100" />
    </c1:C1FlexGrid.Rows>
    <c1:C1FlexGrid.Columns>
        <c1:Column Width="100" />
        <c1:Column Width="100" />
        <c1:Column Width="100" />
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

即使把 C1FlexGrid 的行、宽设置成所有 行高和 或所有 列宽和，自带的滚动条还是会显示出来，但实际上如果隐藏掉 C1FlexGrid 自带的滚动条，效果就好看多了，所以就想把 C1FlexGrid 自带的滚动条隐藏掉，然后在下方或右侧加一个自己的滚动条，来操作滚动 C1FlexGrid。

二  解决思路

1、C1FlexGrid 的属性 ScrollPosition 可以获取或设置其自带的滚动条的偏移量；

2、C1FlexGrid 中与滚动有关的事件有，ScrollPositionChanging 和 ScrollPositionChanged，断点调试实验一下即可知道当执行到 ScrollPositionChanged 事件时，C1FlexGrid 的 ScrollPosition 属性值更新为滚动条的偏移量；

3、当 C1FlexGrid 触发 ScrollPositionChanged 事件时，更新自定义滚动条（ScrollBar）的偏移值；自定义滚动条（ScrollBar）的 ValueChanged 事件触发时，更新 C1FlexGrid 的 ScrollPosition 属性值；

4、注意 C1FlexGrid 的 ScrollPosition 属性为负，ScrollBar 的 Value 属性值为正，注意正负转换；

5、ScrollBar 的 Maximum 属性：设置滚动条可滑动的最大值，应等于 C1FlexGrid 可视范围之外的长度或宽度值；

6、ScrollBar 的 ViewportSize 属性：设置滚动条上白条的长度值，应该等于 C1FlexGrid 的宽度值，即可视范围的长度或宽度值；

三  部分代码

根据 C1FlexGrid 初始化滚动条

/// <summary>
/// 根据 C1FlexGrid 初始化滚动条
/// </summary>
/// <param name="flexGrid"></param>
private void InitScrollbar(C1FlexGrid flexGrid)
{
	double allColumnsWidth = 0;
	double allRowsHeight = 0;
	foreach (Column col in flexGrid.Columns)
	{
		allColumnsWidth += col.Width.Value;
	}
	foreach (Row row in flexGrid.Rows)
	{
		allRowsHeight += row.Height;
	}
	// 当所有行高和大于 C1FlexGrid 框的高度，则纵向滚动条可用
	if (allRowsHeight > flexGrid.Height)
	{
		scrollbarVert.Visibility = Visibility.Visible;
		// 纵向滚动条的最大值应该是 C1FlexGrid 中超出可见范围剩余的高度
		scrollbarVert.Maximum = allRowsHeight - flexGrid.Height;
		// 滚动条上白条的长度应该是 C1FlexGrid 可见范围的高度
		scrollbarVert.ViewportSize = flexGrid.Height;
		scrollbarHori.SmallChange = 1;// 滚动改变的最小值
	}
	else
	{
		scrollbarVert.Visibility = Visibility.Collapsed;
	}
	// 当所有列宽和大于 C1FlexGrid 框的宽度，则横向滚动条可用
	if (allColumnsWidth > flexGrid.Width)
	{
		scrollbarHori.Visibility = Visibility.Visible;
		// 横向滚动条的最大值应该是 C1FlexGrid 中超出可见范围剩余的宽度
		scrollbarHori.Maximum = allColumnsWidth - flexGrid.Width;
		// 滚动条上白条的长度应该是 C1FlexGrid 可见范围的宽度
		scrollbarHori.ViewportSize = flexGrid.Width;
		scrollbarHori.SmallChange = 1;// 滚动改变的最小值
	}
	else
	{
		scrollbarHori.Visibility = Visibility.Collapsed;
	}
}

C1FlexGrid触发滚动事件

// C1FlexGrid 的滚动事件
private void flxg_ScrollPositionChanged(object sender, EventArgs e)
{
	Point position = flxg.ScrollPosition;// C1FlexGrid 当前滚动条的位置
	txtMsg1.Text = "C1FlexGrid: " + position.X + "," + position.Y;
	// 更新自定义滚动条
	scrollbarHori.Value = -position.X;
	scrollbarVert.Value = -position.Y;
}

横/纵滚动条滑动事件

// 横向滚动条
private void scrollbarHori_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
	// 注意，滚动条控件 Scrollbar 的 value 值是正数，与 C1FlexGrid 的滚动条位置正好相反
	flxg.ScrollPosition = new Point(-scrollbarHori.Value, flxg.ScrollPosition.Y);
}

// 纵向滚动条
private void scrollbarVert_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
	// 注意，滚动条控件 Scrollbar 的 value 值是正数，与 C1FlexGrid 的滚动条位置正好相反
	flxg.ScrollPosition = new Point(flxg.ScrollPosition.X, -scrollbarVert.Value);
}

四  后话

C1FlexGrid 在 ScrollBar 部分我觉得做的并不精致，当把 C1FlexGrid 的长、宽设置成完全等于所有行高和、所有列宽和时，如上面所说 C1FlexGrid 自带的滚动条会显示出来，如果这时候要完全显示 C1FlexGrid 右下角那个单元格时，滚动条的偏移量为（-3，-3）；

所以如果按照我上面的代码执行，然后再把自定义的两个滚动条拉到最下面或最右侧，此时 C1FlexGrid 的滚动条偏移量还差3，如下图所示：

滚动条拉到极端时偏移量显示为（-200，-150）

最后一个单元格完全显示时，偏移量显示为（-203，-153）

所以实际上在给自定义滚动条 ScrollBar 设置最大偏移值时，应另外加3，即 scrollbarVert.Maximum = allRowsHeight - flexGrid.Height + 3;

这样就完全同步了；