- A+
如果你敲了上一篇的代码，经过上一篇各种问题的蹂躏，我相信自定义控件基础部分其实已经了解的七七八八了。那么我们开始进阶，现在这篇讲的才是真正会用到的核心的东西。简化你的代码。给你提供更多的可能，掌握了这篇，才能发挥出来WPF的威力。这一篇学完我们的鸟枪就要换大炮了。
ColorPicker例子分离了行为和可视化外观，其他人员可以动态改变外观的模板。因为不涉及到状态，所以来说相对简单。现在我们来基于现在的内容深入一个难的。
首先创建通过自定义FlipContentPanel控件学习自定义控件下VisualStateManager的使用，一个同类型的数据，我们给2个展示状态，一个是简易的页面、另外一个是详细的页面，我们通过一个状态切换这2种不同UI的呈现效果，状态切换时播放一个过渡动画。这一篇主要是基于上一篇的ColorPicker学习到的自定义控件的知识结合visualStateManager、动画来实现一个基于状态切换的页面。通过状态来管理并控制页面呈现的内容，这样就可以通过状态来实现不同的外观，同时基于自定义控件可以很轻松的实现复杂的效果，并且代码易于维护。
首先，我们创建一个继承自Control的FlipContentPanel自定义无外观控件类。该类包含2个状态：Flipped和Normal。
我们将使用是否是Flipped来控制页面切换2个不同的呈现内容。
重复使用propdp=>2次tab创建我们需要的3个依赖项属性DetailsContent、OverviewContent、IsFlipped，代码如下：
public object DetailsContent { get { return (object)GetValue(DetailsContentProperty); } set { SetValue(DetailsContentProperty, value); } } // Using a DependencyProperty as the backing store for DetailsContent. This enables animation, styling, binding, etc... public static readonly DependencyProperty DetailsContentProperty = DependencyProperty.Register("DetailsContent", typeof(object), typeof(FlipContentPanel)); public object OverviewContent { get { return (object)GetValue(OverviewContentProperty); } set { SetValue(OverviewContentProperty, value); } } // Using a DependencyProperty as the backing store for OverviewContent. This enables animation, styling, binding, etc... public static readonly DependencyProperty OverviewContentProperty = DependencyProperty.Register("OverviewContent", typeof(object), typeof(FlipContentPanel)); public bool IsFlipped { get { return (bool)GetValue(IsFlippedProperty); } set { SetValue(IsFlippedProperty, value); } } // Using a DependencyProperty as the backing store for IsFlipped. This enables animation, styling, binding, etc... public static readonly DependencyProperty IsFlippedProperty = DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipContentPanel)); 在静态构造函数中给FlipContentPanel.cs添加默认外观。
static FlipContentPanel() { DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipContentPanel), new FrameworkPropertyMetadata(typeof(FlipContentPanel))); } 我们设计了2个页面，一个DetailsContent页面，一个OverviewContent页面，我们在这2个页面的默认样式中各添加一个按钮，用来控制切换VisualState。在上一篇讲的OnApplyTemplate()中我们从模板中获取控件，然后绑定触发事件。这一篇我们结合模板中的按钮在onApplyTemplate()的过程中查找元素并添加事件，用于控制切换状态，这样内置集成在自定义控件中的好处是如果有元素了就附加事件，如果没有就不附加事件，两个按钮起名为FlipButton和FlipButtonAlternate。
public override void OnApplyTemplate() { base.OnApplyTemplate(); ToggleButton flipButton = base.GetTemplateChild("FlipButton") as ToggleButton; if (flipButton != null) { flipButton.Click += FlipButton_Click; } ToggleButton flipAlternateButton = base.GetTemplateChild("FlipButtonAlternate") as ToggleButton; if (flipAlternateButton != null) { flipAlternateButton.Click += FlipButton_Click; } ChangedVisualState(false); } private void FlipButton_Click(object sender, RoutedEventArgs e) { this.IsFlipped = !this.IsFlipped } private void ChangedVisualState(bool value) { if (IsFlipped) { VisualStateManager.GoToState(this, "Flipped", value); } else { VisualStateManager.GoToState(this, "Normal", value); } } 同时修改依赖项属性IsFlipped的Set方法，当IsFlipped发生改变时，去修改VisualState。
public bool IsFlipped { get { return (bool)GetValue(IsFlippedProperty); } set { SetValue(IsFlippedProperty, value); ChangedVisualState(true); } } 这样加上2个状态，2个按钮在模板中我们就有4个对象。我们使用特性在类上方标明这4个对象。
[TemplateVisualState(Name = "Flipped",GroupName = "VisualState")] [TemplateVisualState(Name ="Normal",GroupName = "VisualState")] [TemplatePart(Name = "FlipButton", Type = typeof(ToggleButton))] [TemplatePart(Name = "FlipButtonAlternate", Type = typeof(ToggleButton))] public class FlipContentPanel : Control 这样我们的FlipContentPanel无外观自定义控件就写完了。他包含了2个状态，会从控件模板中获取2个按钮，并添加事件，用于切换页面。在静态构造函数中还会读取默认外观。
接下来我们去写FlipContentPanel的默认外观。
新建一个资源字典名字叫做FlipContentPanel：
在其中添加Style，TargetType为我们的FlipContentPanel并重写template。
Template中的ContrlTemplate我们在一个Grid中写2个同样大小和位置的Border。这2个border中包含我们用来呈现2个不同页面内容的ContentPresenter。然后通过切换2个Border的Visibility属性来控制2个border的（相当于页面的）显示或隐藏的切换。
对应的ContentPresenter 绑定我们的依赖项属性OverviewContent和DetailsContent。每个ContentPresenter上面还有一个固定位置的ToggleButton，用来切换当前的显示内容，这2个ToggleButton的Name保持和无外观控件中我们定义的FlipButton和FlipButtonAlternate一致，用于在OnApplyTemplate()阶段能给这2个ToggleButton绑定事件，用于切换VisualState。同时我们在ControlTemplate中添加VisualState的管理器。用于切换状态，其实VisualStateManager这里想使用的好也需要单独讲一下，我在这里就被坑了2天。想实现的功能特别牛逼，但是发现这里如果应用不好的话，问题会特别多，实现出来的效果跟预期不一样。以后会单独在Blend下讲这个VisualStateManager。因为他有VisualStateGrounps的概念。可以很好的完成很多种状态之前的切换。这里我们就写一个最简单的切换过程中渐显和渐隐，整体代码如下：
<Style TargetType="{x:Type local:FlipContentPanel}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:FlipContentPanel}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="VisualState"> <VisualStateGroup.Transitions> <VisualTransition From="Normal" To="Flipped" GeneratedDuration="0:0:0.5"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DetailsContentBorder"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualTransition> <VisualTransition From="Flipped" To="Normal" GeneratedDuration="0:0:0.5" > <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DetailsContentBorder"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="Flipped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OverviewContentBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Normal"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DetailsContentBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="OverviewContentBorder" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualWidth}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <Grid> <ContentPresenter Content="{TemplateBinding OverviewContent}"/> <ToggleButton x:Name="FlipButton" Width="50" Height="50" VerticalAlignment="Bottom" HorizontalAlignment="Left" Content="显示详情"> </ToggleButton> </Grid> </Border> <Border x:Name="DetailsContentBorder" BorderBrush="{TemplateBinding BorderBrush}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualWidth}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <Grid> <ContentPresenter Content="{TemplateBinding DetailsContent}"/> <ToggleButton x:Name="FlipButtonAlternate" Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="30" Content="收起"> </ToggleButton> </Grid> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 注意上面的代码中From="Normal" To="Flipped" 和From="Flipped" To="Normal"2个VisualTransition。它们是状态切换时执行的。
XAML使用的代码如下，然后配个图：
<Window x:Class="CustomElement.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:CustomElement" xmlns:usercontrols="clr-namespace:CustomElement.UserControls" xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid Background="Firebrick"> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="*"/> <RowDefinition Height="30"/> </Grid.RowDefinitions> <lib:FlipContentPanel x:Name="flipPanel" Background="AntiqueWhite" Grid.Row="1" BorderBrush="DarkBlue" BorderThickness="3" IsFlipped="false"> <lib:FlipContentPanel.DetailsContent> <Grid> <TextBlock Background="Red" Text="我是详情页"/> </Grid> </lib:FlipContentPanel.DetailsContent> <lib:FlipContentPanel.OverviewContent> <Grid> <TextBlock Background="Yellow" Text="我是列表页"/> </Grid> </lib:FlipContentPanel.OverviewContent> </lib:FlipContentPanel> </Grid> </Window> 
进来下更进一步积累自定义控件的知识，学习自定义面板及构建自定义绘图控件。
创建自定义面板是一种比较常见的自定义控件开发子集。面板驻留一个或多个子元素，并且实现了特定的布局逻辑以恰当地安排其子元素。如果希望构建自己的可拖动的工具栏或可停靠的窗口系统，自定义面板是很重要的元素。当创建需要非标准特定布局的组合控件时，自定义面板通常是很有用的，例如停靠工具栏。
面板在工作时，主要有2件事情：负责改变子元素尺寸和安排子元素的两步布局过程。第一个阶段是测量阶段（measure pass），在这一阶段面板决定其子元素希望具有多大的尺寸。第二个阶段是排列阶段（layout pass），在这一阶段为每个控件指定边界。这两个步骤是必须的，因为在决定如何分割可用空间时，面板需要考虑所有子元素的期望。
可以通过重写MeasureOverride()和ArrangeOverride()方法，为这两个步骤添加自己的逻辑，这两个方法作为WPF布局系统的一部分在FrameworkElement类种定义的。使用MeasureOverride()和ArrangeOverride()方法代替在UIElement类中定义的MeasureCore()和ArrangeCore()。这2个方法是不能被重写的。
接下来我们分析一下这2个方法都在做什么：
1.MeasureOverride()
首先使用MeasureOverride()方法决定每个子元素希望多大的空间，每个MeasureOverride()方法的实现负责遍历子元素集合，并调用每个子元素的Measure()方法。当调用Measure()方法时，需要提供边界框-决定每个子控件最大可用控件的Size对象。在MeasureOverride()方法的最后，面板返回显示所有子元素所需的空间，并返回它们所期望的尺寸。在测量过程的结尾，布局容器必须返回它所期望的尺寸。在简单的面板中，可以通过组合每个资源需要的期望尺寸计算面板所期望的尺寸。
2.ArrangeOverride()方法
测量完所有元素后，就可以在可用的空间中排列元素了。布局系统调用面板的ArrangeOverride()方法，而面板为每个子元素调用Arrange()方法，以告诉子元素为它分配了多大的空间。
当时有Measure()方法测量条目时，传递能够定义可用空间边界的Size对象。当时有Arrange()方法放置条目时，传递能够定义条目尺寸和位置的System.Windows.Rect对象。
了解了这两步，我们来实现一个Canvas面板。
Canvas面板在它们希望的位置放置子元素，并且为子元素设置它们希望的尺寸。所以，Canvas面板不需要计算如何分割可用空间。MeasureOverride()阶段可以为每个子元素提供无限的空间。
protected override Size MeasureOverride(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。我们只用Left和Top附加依赖项属性来实现一个简易版。
public class CanvasClone : Panel { protected override Size MeasureOverride(Size availableSize) { Size size = new Size(double.PositiveInfinity, double.PositiveInfinity); foreach (UIElement element in base.InternalChildren) { element.Measure(size); } return new Size(); } protected override Size ArrangeOverride(Size finalSize) { foreach (UIElement element in base.InternalChildren) { double x = 0; double y = 0; double left = Canvas.GetLeft(element); if (!double.IsNaN(left)) { x = left; } double top = Canvas.GetTop(element); if(!double.IsNaN(top)) { y = top; } element.Arrange(new Rect(new Point(x, y), element.DesiredSize)); } return finalSize; } } Xaml代码：
<Window x:Class="CustomElement.CustomPanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:CustomElement" xmlns:customPanel="clr-namespace:CustomElement.Panels" mc:Ignorable="d" Title="CustomPanel" Height="450" Width="800"> <Grid> <customPanel:CanvasClone> <TextBlock Text="asg" Canvas.Left="100" Canvas.Top="100"/> </customPanel:CanvasClone> </Grid> </Window> 我们就看到了TextBlock被放置在了靠近左上角100,100的位置。。这里不考虑其他问题，因为只是为了了解自定义面板。
接下来我们创建一个扩展的WrapPanel面板。WrapPanel的工作原理是，该面板逐个布置其子元素，一旦当前行宽度用完，就会切换到下一行。但有时我们需要强制立即换行，以便在新行中启动某个特定控件。尽管WrapPanel面板原本没有提供这一功能，但通过创建自定义控件可以方便地添加该功能。只需要添加一个请求换行的附加依赖项属性即可。此后，面板中的子元素可使用该属性在适当位置换行。
我们添加WrapBreakPanel类，继承自Panel。这里因为要自定义所以不使用代码片段添加附加依赖项属性，而是手写，并设置AffectsMeasure和AffectsArrange为True。我们要在每次LineBreakBefore属性变更时，都触发新的排列阶段。在测量阶段元素按行排列，除非太大或者LineBreakBefore属性设置为true，否则每个元素都被添加到当前行中。
using System; using System.Windows; using System.Windows.Controls; namespace CustomElement.Panels { public class WrapBreakPanel : Panel { static WrapBreakPanel() { FrameworkPropertyMetadata metadata = new FrameworkPropertyMetadata(); metadata.AffectsArrange = true; metadata.AffectsMeasure = true; LineBreakBeforeProperty = DependencyProperty.RegisterAttached("LineBreakBefore", typeof(bool), typeof(WrapBreakPanel), metadata); } public static readonly DependencyProperty LineBreakBeforeProperty; public static void SetLineBreakBefore(UIElement element, Boolean value) { element.SetValue(LineBreakBeforeProperty, value); } public static Boolean GetLineBreakBefore(UIElement element) { return (bool)element.GetValue(LineBreakBeforeProperty); } protected override Size MeasureOverride(Size availableSize) { Size currentLineSize = new Size(); Size panelSize = new Size(); foreach (UIElement element in base.InternalChildren) { element.Measure(availableSize); Size desiredSize = element.DesiredSize; if (GetLineBreakBefore(element) || currentLineSize.Width + desiredSize.Width > availableSize.Width) { //切换到新行，空间用完，或者通过设置附加依赖项属性请求换行 panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width); panelSize.Height += currentLineSize.Height; currentLineSize = desiredSize; //如果元素太宽无法使用最大行宽进行匹配，则只需要为其指定单独的行。 if (desiredSize.Width > availableSize.Width) { panelSize.Width = Math.Max(desiredSize.Width, panelSize.Width); panelSize.Height += desiredSize.Height; currentLineSize = new Size(); } } else { //添加到当前行。 currentLineSize.Width += desiredSize.Width; //确保线条与最高的元素一样高 currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height); } } //返回适合所有元素所需的大小。 //通常，这是约束的宽度，高度基于元素的大小。 //但是，如果一个元素的宽度大于面板的宽度。 //所需的宽度将是该行的宽度。 panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width); panelSize.Height += currentLineSize.Height; return panelSize; } protected override Size ArrangeOverride(Size finalSize) { 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 > finalSize.Width) { //换行 arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, i); accumulatedHeight += currentLineSize.Height; currentLineSize = desiredSize; if (desiredSize.Width > finalSize.Width) { arrangeLine(accumulatedHeight, desiredSize.Height, i, ++i); accumulatedHeight += desiredSize.Height; currentLineSize = new Size(); } firstInLine = i; } else { //继续当前前行。 currentLineSize.Width += desiredSize.Width; currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height); } } if (firstInLine < elements.Count) { arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, elements.Count); } return finalSize; } 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; } } } } 调用的XAML代码：
<Window x:Class="CustomElement.CustomPanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:CustomElement" xmlns:customPanel="clr-namespace:CustomElement.Panels" mc:Ignorable="d" Title="CustomPanel" Height="450" Width="800"> <Grid> <customPanel:CanvasClone> <TextBlock Text="asg" Canvas.Left="100" Canvas.Top="100"/> </customPanel:CanvasClone> <customPanel:WrapBreakPanel> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button customPanel:WrapBreakPanel.LineBreakBefore="True" FontWeight="Bold" Content="Button with Break"/> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> <Button>No Break Here</Button> </customPanel:WrapBreakPanel> </Grid> </Window> 在MeasureOverride阶段，主要是测量元素的位置和是否需要换行。在ArrangeOverride阶段，每计算满显示一行的元素后，就开始绘制这一行。这里只需要了解着这个MeasureOverride和ArrangeOverride在干什么就行。目前这里不需要掌握，因为后面会讲到列表虚拟化和数据虚拟化，会更详细的讲相关的设计内容。这里只要直到，有自定义面板可以自己设计列表的呈现，就可以了。
