建站
咨詢
售后
建站咨詢
新聞中心
問題描述
今天測試人員提了一個易用性的BUG，主要是說系統(tǒng)目前使用的樹型控件不支持自動擴(kuò)張列的寬度。其實客戶那邊已經(jīng)對這個問題提了多次，不過由于對WPF只是入門級，所以一直都沒改。這兩天項目比較閑，就花了些時間把這個問題改了。原問題如下：
圖1 問題描述
背景
樹型控件在GIX4系統(tǒng)中已經(jīng)被大量使用。這個控件是一年前其它同事在網(wǎng)上搜索到，再引入的。
一開始的時候，要解決這個問題，想到的最直接的方案是這樣的：找到***列中的Expander控件（加號：），然后監(jiān)聽它的“Expanded”事件；在事件處理程序中，計算所需要的寬度，然后設(shè)置為控件的寬度。
按照這個方案去實際寫代碼時，發(fā)現(xiàn)并沒有想象中那么簡單，發(fā)現(xiàn)了很多問題。例如，Expander并不是Expander控件，而是一個ToggleButton，而且是寫在模板中的，TreeGridRowPresenter中的Expander的類型也只是UIElement，也就是說，不能把Expander從UIElement轉(zhuǎn)換為ToggleButton，這樣程序會寫得很死。又如，如何計算***列的所需要寬度。
雖然我們項目中是有整個控件的源碼，但是整合進(jìn)來后別的同事已經(jīng)對它進(jìn)行了很多修改，所以只有在網(wǎng)上找到最原始的源碼來研究。發(fā)現(xiàn)，原來這個樹型控件的方案是Avalon Team自己給出的：《TreeListView: Show Hierarchy Data with Details in Columns》。然后Ricciolo對它進(jìn)行了一些研究：《Fun With GridView*RowPresenter》,***他給出了一個較完整的版本：《A complete WPF TreeListView control》。
學(xué)習(xí)并研究了它的源碼，***總結(jié)出以下幾個子問題，這些問題是要上面提及的BUG所需要解決的：
四個待解決的問題
1. 何時觸發(fā)是最合適的？在何處觸發(fā)調(diào)整寬度的代碼？
2. 如何找到樹型控件的所有GridViewRowPresenter。
3. GridViewRowPresenter中，如何把***列的控件找到。
4. ***列控件的組成結(jié)構(gòu)是怎么樣的，它所需要的大小如何求出，是否可以直接使用Measure和DesiredSize。
一步一步解決
***個問題，何時觸發(fā)這個功能？其實我是要在點(diǎn)擊后，當(dāng)子節(jié)點(diǎn)都加載好后，然后計算出合適的大小，再設(shè)置給列對象。我先在TreeListView的OnExpanded事件處理程序中嘗試編寫代碼獲取每一個TreeListView，但是發(fā)現(xiàn)這個事件在發(fā)生時，所有的子節(jié)點(diǎn)并沒有生成，所以不能通過ItemContainerGenerator.GetContainerForItem方法獲取到窗口，此方案失敗。接著，我查看了ItemsControl的接口聲明，發(fā)現(xiàn)ItemContainerGenerator屬性有事件StatusChanged。所以我就改為監(jiān)聽這個事件，并判斷如果當(dāng)它的Status變?yōu)镃ontainersGenerated時，就表示所有子節(jié)點(diǎn)已經(jīng)生成了。代碼如下：
- this.ItemContainerGenerator.StatusChanged += (o, e) =>
- {
- if (this.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
- {
- this.AdjustFirstColumnWidth();
- }
- };
但是同樣發(fā)現(xiàn)新的問題，這時候雖然窗口對象TreeListView已經(jīng)生成，但是它下面的所有Visual Child都沒有生成，這樣同樣無法獲取到它里面用來顯示每一行的GridRowPresenter。所以只有改成了這樣：
- public TreeListViewItem()
- {
- this.PrepareToAdjustFirstColumnWidth();
- }
- private void PrepareToAdjustFirstColumnWidth()
- {
- this.ItemContainerGenerator.StatusChanged += (o, e) =>
- {
- if (this.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
- {
- if (this.Items.Count > 0)
- {
- var item = this.Items[this.Items.Count - 1];
- var treeItem = this.ItemContainerGenerator.ContainerFromItem(item)
- as TreeListViewItem;
- treeItem.Loaded += (oo, ee) =>
- {
- this.AdjustFirstColumnWidth();
- };
- }
- }
- };
- }
這樣，***一個孩子的可視內(nèi)容都加載好后，才會觸發(fā)調(diào)整寬度的代碼。
第二個問題比較簡單，看了TreeListView的源碼后，發(fā)現(xiàn)它在TreeListViewItem類的模板中使用了GridViewRowPresenter類，然后為它定義了名字：“PART_Header”。在模板中以PART_起頭的控件是控件的約定，具體內(nèi)容見：《WPF Parts Control Model》。所以我可以使用以下方法找到它，而不用考慮新的模板是否有它：
- private TreeGridViewRowPresenter FindGridRow()
- {
- var rowPresenter = this.Template.FindName("PART_Header", this)
- as TreeGridViewRowPresenter;
- return rowPresenter;
- }
要解決第三個問題，我們需要知道GridViewRowPresenter中如何生成一行，并知道***生成的控件結(jié)構(gòu)。先看看GridViewRowPresenter***生成的控件結(jié)構(gòu)，這里我使用的是Snoop：
圖2 用Snoop查看TreeGridViewRowPresenter的可視化結(jié)構(gòu)
我們發(fā)現(xiàn)，GridViewRowPresenter下只是簡單的包含了幾個可視元素，它們剛好是每一列所顯示的內(nèi)容。再查看GridViewRowPresenter的源代碼，發(fā)現(xiàn)它擁有以下屬性：public GridViewColumnCollection Columns{get;set;}、internal UIElementCollection InternalCollection{get;set;}，進(jìn)一步分析后，我猜測性地得出以下結(jié)論：GridViewRowPresenter.InternalCollection簡單地包含了所有列的顯示元素，它會根據(jù)Columns屬性中各行對這些可視元素進(jìn)行維護(hù)，讓它們顯示得跟表格一樣。
至此，第三個問題解決了：
- var firstColumn = VisualTreeHelper.GetChild(rowPresenter, 0) as UIElement;
***一個問題，是過程中最麻煩的一個問題。我們看到，圖2中該行下的***個元素是***列的顯示元素，顯示了“2.1”。但是文本左邊的Expander控件卻是TreeGridViewRowPresenter的***一個可視化孩子。而且縮進(jìn)并不是一個控件。那么這是怎么一回事呢？看了TreeGridViewRowPresenter的源碼后，發(fā)現(xiàn)原來是它主動把Expander放在了***：
- public class TreeGridViewRowPresenter : GridViewRowPresenter
- {
- protected override System.Windows.Media.Visual GetVisualChild(int index)
- {
- // Last element is always the expander
- // called by render engine
- if (index < base.VisualChildrenCount) return base.GetVisualChild(index);
- if (index == base.VisualChildrenCount) return this.lbRowNo;
- return this.Expander;
- }
- protected override int VisualChildrenCount
- {
- get
- {
- // Last element is always the expander
- if (this.Expander != null)
- return base.VisualChildrenCount + 2;
- else
- return base.VisualChildrenCount + 1;
- }
- }
- }
而文本前面先顯示縮進(jìn)，然后再顯示Expander的原因是由于TreeGridViewRowPresenter類重寫了FrameworkElement.ArrangeOverride方法。在該方法中，它把***列的元素顯示的長度變短在之前顯示一段縮進(jìn)的空白和Expander控件:
- protected override Size ArrangeOverride(Size arrangeSize)
- {
- Size s = base.ArrangeOverride(arrangeSize);
- if (this.Columns == null || this.Columns.Count == 0) return s;
- UIElement expander = this.Expander;
- double current = 0;
- double max = arrangeSize.Width;
- for (int x = 0; x < this.Columns.Count; x++)
- {
- GridViewColumn column = this.Columns[x];
- // Actual index needed for column reorder
- UIElement uiColumn = (UIElement)base.GetVisualChild((int)ActualIndexProperty.GetValue(column, null));
- // Compute column width
- double w = Math.Min(max, (Double.IsNaN(column.Width)) ? (double)DesiredWidthProperty.GetValue(column, null) : column.Width);
- // First column indent
- if (x == 0 && expander != null)
- {
- double indent = FirstColumnIndent + expander.DesiredSize.Width;
- uiColumn.Arrange(new Rect(current + indent, 0, w - indent, arrangeSize.Height));
- }
- else
- {
- uiColumn.Arrange(new Rect(current, 0, w, arrangeSize.Height));
- }
- max -= w;
- current += w;
- }
- // Show expander
- if (expander != null)
- {
- expander.Arrange(new Rect(this.FirstColumnIndent, 0, expander.DesiredSize.Width, expander.DesiredSize.Height));
- }
- return s;
- }
分析到這里，就知道如何計算出***列的最終寬度了：
- private double GetFirstColumnDesiredWidth()
- {
- var rowPresenter = this.FindGridRow();
- if (VisualTreeHelper.GetChildrenCount(rowPresenter) <= 0) return 0;
- //GridViewRowPresenter中的每一個元素表示一列。
- var firstColumn = VisualTreeHelper.GetChild(rowPresenter, 0) as UIElement;
- var desiredWidth = firstColumn.DesiredSize.Width;
- //需要的寬度前，需要加上列的縮進(jìn)和Expander的寬度。
- var indent = rowPresenter.FirstColumnIndent + rowPresenter.Expander.DesiredSize.Width;
- return indent + desiredWidth + ENSURE_SIZE;
- }
加上以下這段代碼后，程序終于可以正確運(yùn)行了。
總結(jié)
解決這個問題，花了一天多的時間，主要原因還是因為對WPF還是處在入門的級別。其中學(xué)到了以下內(nèi)容：
熟悉了TreeView、TreeViewItem、ItemsControl的使用及樹型控件的原理。
樹型表格控件TreeListView的設(shè)計過程（見之前的文章）。
熟悉了Measure的使用。
鏈接：http://www.cnblogs.com/zgynhqf/archive/2010/08/05/1793405.html
網(wǎng)站欄目：由一個Bug引出的自動擴(kuò)張WPF樹型表格列寬問題
轉(zhuǎn)載源于：http://m.5511xx.com/article/dpeopcj.html
