[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。

二  解決思路

一、C1FlexGrid 的屬性 ScrollPosition 能夠獲取或設置其自帶的滾動條的偏移量；

二、C1FlexGrid 中與滾動有關的事件有，ScrollPositionChanging 和 ScrollPositionChanged，斷點調試實驗一下便可知道當執行到 ScrollPositionChanged 事件時，C1FlexGrid 的 ScrollPosition 屬性值更新爲滾動條的偏移量；

三、當 C1FlexGrid 觸發 ScrollPositionChanged 事件時，更新自定義滾動條（ScrollBar）的偏移值；自定義滾動條（ScrollBar）的 ValueChanged 事件觸發時，更新 C1FlexGrid 的 ScrollPosition 屬性值；

四、注意 C1FlexGrid 的 ScrollPosition 屬性爲負，ScrollBar 的 Value 屬性值爲正，注意正負轉換；

五、ScrollBar 的 Maximum 屬性：設置滾動條可滑動的最大值，應等於 C1FlexGrid 可視範圍以外的長度或寬度值；

六、ScrollBar 的 ViewportSize 屬性：設置滾動條上白條的長度值，應該等於 C1FlexGrid 的寬度值，即可視範圍的長度或寬度值；

三  部分代碼

根據 C1FlexGrid 初始化滾動條

  1 /// <summary>
  2 /// 根據 C1FlexGrid 初始化滾動條
  3 /// </summary>
  4 /// <param name="flexGrid"></param>
  5 private void InitScrollbar(C1FlexGrid flexGrid)
  6 {
  7 	double allColumnsWidth = 0;
  8 	double allRowsHeight = 0;
  9 	foreach (Column col in flexGrid.Columns)
 10 	{
 11 		allColumnsWidth += col.Width.Value;
 12 	}
 13 	foreach (Row row in flexGrid.Rows)
 14 	{
 15 		allRowsHeight += row.Height;
 16 	}
 17 	// 當全部行高和大於 C1FlexGrid 框的高度，則縱向滾動條可用
 18 	if (allRowsHeight > flexGrid.Height)
 19 	{
 20 		scrollbarVert.Visibility = Visibility.Visible;
 21 		// 縱向滾動條的最大值應該是 C1FlexGrid 中超出可見範圍剩餘的高度
 22 		scrollbarVert.Maximum = allRowsHeight - flexGrid.Height;
 23 		// 滾動條上白條的長度應該是 C1FlexGrid 可見範圍的高度
 24 		scrollbarVert.ViewportSize = flexGrid.Height;
 25 		scrollbarHori.SmallChange = 1;// 滾動改變的最小值
 26 	}
 27 	else
 28 	{
 29 		scrollbarVert.Visibility = Visibility.Collapsed;
 30 	}
 31 	// 當全部列寬和大於 C1FlexGrid 框的寬度，則橫向滾動條可用
 32 	if (allColumnsWidth > flexGrid.Width)
 33 	{
 34 		scrollbarHori.Visibility = Visibility.Visible;
 35 		// 橫向滾動條的最大值應該是 C1FlexGrid 中超出可見範圍剩餘的寬度
 36 		scrollbarHori.Maximum = allColumnsWidth - flexGrid.Width;
 37 		// 滾動條上白條的長度應該是 C1FlexGrid 可見範圍的寬度
 38 		scrollbarHori.ViewportSize = flexGrid.Width;
 39 		scrollbarHori.SmallChange = 1;// 滾動改變的最小值
 40 	}
 41 	else
 42 	{
 43 		scrollbarHori.Visibility = Visibility.Collapsed;
 44 	}
 45 }

View Code

C1FlexGrid觸發滾動事件

  1 // C1FlexGrid 的滾動事件
  2 private void flxg_ScrollPositionChanged(object sender, EventArgs e)
  3 {
  4 	Point position = flxg.ScrollPosition;// C1FlexGrid 當前滾動條的位置
  5 	txtMsg1.Text = "C1FlexGrid: " + position.X + "," + position.Y;
  6 	// 更新自定義滾動條
  7 	scrollbarHori.Value = -position.X;
  8 	scrollbarVert.Value = -position.Y;
  9 }

View Code

橫/縱滾動條滑動事件

  1 // 橫向滾動條
  2 private void scrollbarHori_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
  3 {
  4 	// 注意，滾動條控件 Scrollbar 的 value 值是正數，與 C1FlexGrid 的滾動條位置正好相反
  5 	flxg.ScrollPosition = new Point(-scrollbarHori.Value, flxg.ScrollPosition.Y);
  6 }
  7 
  8 // 縱向滾動條
  9 private void scrollbarVert_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
 10 {
 11 	// 注意，滾動條控件 Scrollbar 的 value 值是正數，與 C1FlexGrid 的滾動條位置正好相反
 12 	flxg.ScrollPosition = new Point(flxg.ScrollPosition.X, -scrollbarVert.Value);
 13 }

View Code

四  後話

C1FlexGrid 在 ScrollBar 部分我以爲作的並不精緻，當把 C1FlexGrid 的長、寬設置成徹底等於全部行高和、全部列寬和時，如上面所說 C1FlexGrid 自帶的滾動條會顯示出來，若是這時候要徹底顯示 C1FlexGrid 右下角那個單元格時，滾動條的偏移量爲（-3，-3）；

因此若是按照我上面的代碼執行，而後再把自定義的兩個滾動條拉到最下面或最右側，此時 C1FlexGrid 的滾動條偏移量還差3，以下圖所示：

滾動條拉到極端時偏移量顯示爲（-200，-150）

最後一個單元格徹底顯示時，偏移量顯示爲（-203，-153）

因此實際上在給自定義滾動條 ScrollBar 設置最大偏移值時，應另外加3，即 scrollbarVert.Maximum = allRowsHeight - flexGrid.Height + 3;

這樣就徹底同步了；