WPF教程十三：自定义控件进阶可视化状态与自定义Panel
如果你敲了上一篇的代码，经过上一篇各种问题的蹂躏，我相信自定义控件基础部分其实已经了解的七七八八了。那么我们开始进阶，现在这篇讲的才是真正会用到的核心的东西。简化你的代码。给你提供更多的可能，掌握了这篇，才能发挥出来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
}
protected void ChangedVisualState(bool value)
{
if (IsFlipped)
{
VisualStateManager.GoToState(this, "Flipped", value);
}
else
{
VisualStateManager.GoToState(this, "Normal", value);
}
}
同时修改依赖项属性IsFlipped的Set方法，当IsFlipped发生改变时，去修改VisualState。（PS：这里经过大佬们的提醒，在这种属性值的Get、Set里尽量不要写内容，容易养成习惯以后给自己留坑，SetValue代码走不到，这部分代码修改如下：）
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),new PropertyMetadata(false,IsFlippedChanged));
private static void IsFlippedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is FlipContentPanel flipContentPanel)
{
flipContentPanel.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="显示详情"/>
</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="收起"/>
</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在干什么就行。目前这里不需要掌握，因为后面会讲到列表虚拟化和数据虚拟化，会更详细的讲相关的设计内容。这里只要直到，有自定义面板可以自己设计列表的呈现，就可以了。
