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。它们是状态切换时执行的。和是状态切换后执行的。所以我设置了不同的动画。这里一定要多练以下。这里整体就这么多，配个图把，这里卡了我3个晚上。

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在干什么就行。目前这里不需要掌握，因为后面会讲到列表虚拟化和数据虚拟化，会更详细的讲相关的设计内容。这里只要直到，有自定义面板可以自己设计列表的呈现，就可以了。