前面兩個章節分別介紹了兩個自定義控制項:自定義的ColorPicker和FlipPanel控制項。接下來介紹派生自定義面板以及構建自定義繪圖控制項。 創建自定義面板是一種特殊但較常見的自定義控制項開發子集。前面以及介紹過有關面板方面的知識，瞭解到面板駐留一個或多個子元素，並且實現了特定的佈局邏輯以恰當地安排 ...
前面兩個章節分別介紹了兩個自定義控制項:自定義的ColorPicker和FlipPanel控制項。接下來介紹派生自定義面板以及構建自定義繪圖控制項。
創建自定義面板是一種特殊但較常見的自定義控制項開發子集。前面以及介紹過有關面板方面的知識，瞭解到面板駐留一個或多個子元素，並且實現了特定的佈局邏輯以恰當地安排子元素。如果希望構建自己的可拖動的工具欄或可停靠的視窗系統，自定義面板是很重要的元素。當創建需要非標準特定佈局的組合控制項時，自定義面板通常很有用的，例如停靠工具欄。
接下里介紹一個基本的Canvas面板部分以及一個增強版本的WrapPanel面板兩個簡單的示例。
一、兩步佈局過程
每個面板都使用相同的設備：負責改變子元素尺寸和安排子元素的兩步佈局過程。第一階段是測量階段(measure pass),在這一階段面板決定其子元素希望具有多大的尺寸。第二個階段是排列階段(layout pass),在這一階段為每個控制項指定邊界。這兩個步驟是必需的，因為在決定如何分割可用空間時，面板需要考慮所有子元素的期望。
可以通過重寫名稱為MeasureOverride()和ArrangeOverride()方法，為這兩個步驟添加自己的邏輯，這兩個方法是作為WPF佈局系統的一部分在FrameworkElement類中定義的。奇特的名稱使用標識MeasureOverride()和ArrangeOverride()方法代替在MeasureCore()和ArrangeCore()方法中定義的邏輯，後兩個方法在UIElement類中定義的。這兩個方法是不能被重寫的。
1、MeasureOverride()方法
第一步是首先使用MeasureOverride()方法決定每個子元素希望多大的空間。然而，即使是在MeasureOverride()方法中，也不能為子元素提供無限空間，至少，也應當將自元素限制在能夠適應面板可用空間的範圍之內。此外，可能希望更嚴格地限制子元素。例如，具有按比例分配尺寸的兩行的Grid面板，會為子元素提供可用高度的一般。StackPanel面板會為第一個元素提供所有可用空間，然後為第二個元素提供剩餘的空間等等。
每個MeasureOverride()方法的實現負責遍歷子元素集合，並調用每個子元素的Measure()方法。當調用Measure()方法時，需要提供邊界框——決定每個子空間最大可用空間的Size對象。在MeasureOverride()方法的最後，面板返回顯示所有子元素所需的空間，並返回它們所期望的尺寸。
下麵是MeasureOverride()方法的基本結構，其中沒有具體的尺寸細節：
protected override Size MeasureOverride(Size constraint) { //Examine all the children foreach (UIElement element in base.InternalChildren) { //Ask each child how much space it would like,given the //availableSize constraint Size availableSize=new Size{...}; element.Measure(availableSize); //(you can now read element.DesiredSize to get the requested size.) } //Indicate how mush space this panel requires. //This will be used to set the DesiredSize property of the panel. return new Size(...); }
Measure()方法不返回數值。在為每個子元素調用Measure()方法之後，子元素的DesiredSize屬性提供了請求的尺寸。可以在為後續子元素執行計算是(以及決定面板需要的總空間時)使用這一信息。
因為許多元素直接調用了Measure()方法之後才會渲染它們自身，所以必須為每個子元素調用Measure()方法，即使不希望限制子元素的尺寸或使用DesiredSize屬性也同樣如此。如果希望讓所有子元素能夠自由獲得它們所希望的全部空間，可以傳遞在兩個方向上的值都是Double.PositiveInfinity的Size對象(ScrollViewer是使用這種策略的一個元素，原因是它可以處理任意數量的內容)。然後子元素會返回其中所有內容所需要的空間。否則，子元素通常會返回其中內容需要的空間或可用空間——返回較小值。
在測量過程的結尾，佈局容器必須返回它所期望的尺寸。在簡單的麵包中，可以通過組合每個子元素的期望尺寸計算面板所期望的尺寸。
Measure()方法觸發MeasureOverride()方法。所以如果在一個佈局容器中放置另一個佈局容器，當調用Measure()方法時，將會得到佈局容器及其所有子元素所需要的總尺寸。
2、ArrangeOverride()方法
測量完所有元素後，就可以在可用的空間中排列元素了。佈局系統調用面板的ArrangeOverride()方法，而面板為每個子元素調用Arrange()方法，以高速子元素為它分配了多大的控制項（Arrange()方法會觸發ArrangeOverride()方法，這與Measure()方法會觸發MeasureOverride()方法非常類似).
當使用Measure()方法測量條目時，傳遞能夠定義可用空間邊界的Size對象。當使用Arrange()方法放置條目時，傳遞能夠定義條目尺寸和位置的System.Windows.Rect對象。這時，就像使用Canvas面板風格的X和Y坐標放置每個元素一樣(坐標確定佈局容器左上角與元素左上角之間的距離)。
下麵是ArrangeOverride()方法的基本結構。
protected override Size ArrangeOverride(Size arrangeBounds) { //Examine all the children. foreach(UIElement element in base.InternalChildren) { //Assign the child it's bounds. Rect bounds=new Rect(...); element.Arrange(bounds); //(You can now read element.ActualHeight and element.ActualWidth to find out the size it used ..) } //Indicate how much space this panel occupies. //This will be used to set the AcutalHeight and ActualWidth properties //of the panel. return arrangeBounds; }
當排列元素時，不能傳遞無限尺寸。然而，可以通過傳遞來自DesiredSize屬性值，為元素提供它所期望的數值。也可以為元素提供比所需尺寸更大的空間。實際上，經常會出現這種情況。例如，垂直的StackPanel面板為其子元素提供所請求的高度，但是為了子元素提供面板本身的整個寬度。同樣，Grid面板使用具有固定尺寸或按比例計算尺寸的行，這些行的尺寸可能大於其內部元素所期望的尺寸。即使已經在根據內容改變尺寸的容器中放置了元素，如果使用Height和Width屬性明確設置了元素的尺寸，那麼仍可以擴展該元素。
當使元素比所期望的尺寸更大時，就需要使用HorizontalAlignment和VerticalAlignment屬性。元素內容被放置到指定邊界內部的某個位置。
因為ArrangeOverride()方法總是接收定義的尺寸(而非無限的尺寸)，所以為了設置面板的最終尺寸，可以返回傳遞的Size對象。實際上，許多佈局容器就是採用這一步驟來占據提供的所有空間。
二、Canvas面板的副本
理解這兩個方法的最快捷方法是研究Canvas類的內部工作原理，Canvas是最簡單的佈局容器。為了創建自己的Canvas風格的面板，只需要簡單地繼承Panel類，並且添加MeasureOverride()和ArrangeOverride()方法，如下所示：
public class CanvasClone:System.Windows.Controls.Panel { ... }
Canvas面板在他們希望的位置放置子元素，並且為子元素設置它們希望的尺寸。所以，Canvas面板不需要計算如何分割可用空間。這使得MeasureOverride()方法非常簡單。為每個子元素提供無限的空間：
protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize) { Size size = new Size(double.PositiveInfinity, double.PositiveInfinity); foreach (UIElement element in base.InternalChildren) { element.Measure(size); } return new Size(); }
註意，MeasureOverride()方法返回空的Size對象。這意味著Canvas 面板根本不請求人和空間，而是由用戶明確地為Canvas面板指定尺寸，或者將其放置到佈局容器中進行拉伸以填充整個容器的可用空間。
ArrangeOverride()方法包含的內容稍微多一些。為了確定每個元素的正確位置，Canvas面板使用附加屬性(Left、Right、Top以及Bottom)。附加屬性使用定義類中的兩個輔助方法實現：GetProperty()和SetProperty()方法。
下麵是用於排列元素的代碼：
protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize) { foreach (UIElement element in base.InternalChildren) { double x = 0; double y = 0; double left = Canvas.GetLeft(element); if (!DoubleUtil.IsNaN(left)) { x = left; } double top = Canvas.GetTop(element); if (!DoubleUtil.IsNaN(top)) { y = top; } element.Arrange(new Rect(new Point(x, y), element.DesiredSize)); } return finalSize; }
三、更好的WrapPanel面板
WrapPanel面板執行一個簡單的功能，該功能有有時十分有用。該面板逐個地佈置其子元素，一旦當前行的寬度用完，就會切換到下一行。但有時候需要採用一種方法來強制立即換行，以便在新行中啟動某個特定控制項。儘管WrapPanel面板原本沒有提供這一功能，但通過創建自定義控制項可以方便地添加該功能。只需要添加一個請求換行的附加屬性即可。此後，面板中的子元素可使用該屬性在適當位置換行。
下麵的代碼清單顯示了WrapBreakPanel類，該類添加了LineBreakBeforeProperty附加屬性。當將該屬性設置為true時，這個屬性會導致在元素之前立即換行。
public class WrapBreakPanel : Panel { public static DependencyProperty LineBreakBeforeProperty; static WrapBreakPanel() { FrameworkPropertyMetadata metadata = new FrameworkPropertyMetadata(); metadata.AffectsArrange = true; metadata.AffectsMeasure = true; LineBreakBeforeProperty = DependencyProperty.RegisterAttached("LineBreakBefore", typeof(bool), typeof(WrapBreakPanel), metadata); } ... }
與所有依賴項屬性一樣，LineBreakBefore屬性被定義成靜態欄位，然後在自定義類的靜態構造函數中註冊該屬性。唯一的區別在於進行註冊時使用的是RegisterAttached()方法而非Register()方法。
用於LineBreakBefore屬性的FrameworkPropertyMetadata對象明確指定該屬性影響佈局過程。所以，無論何時設置該屬性，都會觸發新的排列階段。
這裡沒有使用常規屬性封裝器封裝這些附加屬性，因為不在定義它們的同一個類中設置它們。相反，需要提供兩個靜態方法，這來改那個方法能夠使用DependencyObject.SetValue()方法在任意元素上設置這個屬性。下麵是LineBreakBefore屬性需要的代碼：
/// <summary> /// 設置附加屬性值 /// </summary> /// <param name="element"></param> /// <param name="value"></param> public static void SetLineBreakBefore(UIElement element, Boolean value) { element.SetValue(LineBreakBeforeProperty, value); } /// <summary> /// 獲取附加屬性值 /// </summary> /// <param name="element"></param> /// <returns></returns> public static Boolean GetLineBreakBefore(UIElement element) { return (bool)element.GetValue(LineBreakBeforeProperty); }
唯一保留的細節是當執行佈局邏輯時需要考慮該屬性。WrapBreakPanel面板的佈局邏輯以WrapPanel面板的佈局邏輯為基礎。在測量階段，元素按行排列，從而使面板能夠計算需要的總空間。除非太大或LineBreakBefore屬性被設置為true。否則每個元素都唄添加到當前行中。下麵是完整的代碼：
protected override Size MeasureOverride(Size constraint) { Size currentLineSize = new Size(); Size panelSize = new Size(); foreach (UIElement element in base.InternalChildren) { element.Measure(constraint); Size desiredSize = element.DesiredSize; if (GetLineBreakBefore(element) || currentLineSize.Width + desiredSize.Width > constraint.Width) { // Switch to a new line (either because the element has requested it // or space has run out). panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width); panelSize.Height += currentLineSize.Height; currentLineSize = desiredSize; // If the element is too wide to fit using the maximum width of the line, // just give it a separate line. if (desiredSize.Width > constraint.Width) { panelSize.Width = Math.Max(desiredSize.Width, panelSize.Width); panelSize.Height += desiredSize.Height; currentLineSize = new Size(); } } else { // Keep adding to the current line. currentLineSize.Width += desiredSize.Width; // Make sure the line is as tall as its tallest element. currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height); } } // Return the size required to fit all elements. // Ordinarily, this is the width of the constraint, and the height // is based on the size of the elements. // However, if an element is wider than the width given to the panel, // the desired width will be the width of that line. panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width); panelSize.Height += currentLineSize.Height; return panelSize; }MeasureOverride
上面代碼中的重要細節是檢查LineBreakBefore屬性。這實現了普遍WrapPanel面板沒有提供的額外邏輯。
ArrangeOverride()方法的代碼幾乎相同。區別在於：面板在開始佈局一行之前需要決定該行的最大高度(根據最高的元素確定)。這樣，每個元素可以得到完整數量的可用空間，可用控制項占用行的整個高度。與使用普通的WrapPanel面板進行佈局時的過程相同。下麵是完整的代碼：
protected override Size ArrangeOverride(Size arrangeBounds) { int firstInLine = 0; Size currentLineSize = new Size(); double accumulatedHeight = 0; UIElementCollection elements = base.InternalChildren; for (int i = 0; i < elements.Count; i++) { Size desiredSize = elements[i].DesiredSize; if (GetLineBreakBefore(elements[i]) || currentLineSize.Width + desiredSize.Width > arrangeBounds.Width) //need to switch to another line { arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, i); accumulatedHeight += currentLineSize.Height; currentLineSize = desiredSize; if (desiredSize.Width > arrangeBounds.Width) //the element is wider then the constraint - give it a separate line { arrangeLine(accumulatedHeight, desiredSize.Height, i, ++i); accumulatedHeight += desiredSize.Height; currentLineSize = new Size(); } firstInLine = i; } else //continue to accumulate a line { currentLineSize.Width += desiredSize.Width; currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height); } } if (firstInLine < elements.Count) arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, elements.Count); return arrangeBounds; } private void arrangeLine(double y, double lineHeight, int start, int end) { double x = 0; UIElementCollection children = InternalChildren; for (int i = start; i < end; i++) { UIElement child = children[i]; child.Arrange(new Rect(x, y, child.DesiredSize.Width, lineHeight)); x += child.DesiredSize.Width; } }ArrangeOverride
WrapBreakPanel面板使用起來十分簡便。下麵的一些標記演示了使用WrapBreakPanel面板的一個示例。在該例中，WrapBreakPanel面板正確地分割行，並且根據其子元素的尺寸計算所需的尺寸：
<Window x:Class="CustomControlsClient.WrapBreakPanelTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls" Title="WrapBreakPanelTest" Height="300" Width="300"> <StackPanel> <StackPanel.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Margin" Value="3"></Setter> <Setter Property="Padding" Value="5"/> </Style> </StackPanel.Resources> <TextBlock Padding="5" Background="LightGray">Content above the WrapBreakPanel.</TextBlock> <lib:WrapBreakPanel> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button lib:WrapBreakPanel.LineBreakBefore="True" FontWeight="Bold">Button with Break</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> </lib:WrapBreakPanel> <TextBlock Padding="5" Background="LightGray">Content below the WrapBreakPanel.</TextBlock> </StackPanel> </Window>
下圖顯示瞭如何解釋上面的標記：
