LayoutAnimation
LayoutAnimation和MultiLayoutPanel
有某种动画值得特别注意。当元素具有某些属性，如Width，Height或Margin(统称为“布局属性”)改变或当它在视图树中的位置改变时，布局动画。
计算大型UX文档的布局可能相当昂贵。当使用更改动画制作动画布局属性时，我们运行强制每个框架计算新布局的风险。这很容易导致帧丢失。
保险丝提供了一个整洁的替代品:LayoutAnimation触发器。
例如，我们可以使用Set并使用LayoutAnimation对这个变化作出反应，而不是使用变化来动画化一个元素的宽度。在`LayoutAnimation’中，我们指定元素如何从上一个位置移动/调整大小到新位置。
这里有一个简单的例子:
<面板>
<Panel ux:Name =“panel”Width =“50”Height =“50”Background =“Teal”>
<LayoutAnimation>
<Resize X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
<Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
</ LayoutAnimation>
<Clicked>
<Set panel.Width =“200”/>
<Set panel.Height =“300”/>
</ Clicked>
</ Panel>
</ Panel>
已单击触发器中有两个设置操作。他们设置面板的宽度和高度。
Panel有一个LayoutAnimation，它有一个调整大小和移动动画。这两个动画都有自己的“RelativeTo”属性设置为“LayoutChange”。这意味着它们将从计算新布局之前的任何值生成到任何新值。因为改变面板的宽度和高度导致它的位置改变，我们还使用移动动画制作一个平滑的动画。
动画其他布局属性
LayoutAnimation打开了一个全世界的可能性。我们可以例如使用它来动画化一个elements对齐:
<面板>
<Panel ux:Name =“panel”Width =“50”Height =“50”Background =“Teal”Alignment =“Center”>
<LayoutAnimation>
<Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
</ LayoutAnimation>
<Clicked>
<Set panel.Alignment =“BottomRight”/>
</ Clicked>
</ Panel>
</ Panel>
在本示例中，我们使用设置操作将面板的对齐从中心更改为BottomRight。我们使用布局动画和移动，以使它移动到新的位置。
MultiLayoutPanel
MultiLayout允许我们在不同的布局之间移动元素。这允许我们在视觉树中的不同位置之间移动元素，还可以在特定布局之间切换。
占位符
Placeholder元素用于引用视觉树中的其他元素。“占位符”本身是一个Element，它可以有自己的布局属性。
当我们想为同一个Element定义两个不同的位置或布局时，使用“占位符”。我们使用占位符Target属性来引用我们想要作为plceholder的Element。元素定义本身也必须包装在一个Placeholder中。把它当作一个元素从一个“Placeholder”转移到另一个。
<Placeholder Height =“50”>
<Rectangle ux:Name =“rectangle1”Fill =“Red”/>
</ Placeholder>
<Placeholder Target =“rectangle1”Height =“100”/>
请注意，第二个“占位符”引用Rectangle，而不是其他的“占位符”。
要在两个占位符之间切换，我们需要使用MultiLayout。我们可以将MultiLayout应用于任何Panel类型或使用MultiLayoutPanel。下面是我们如何将上面的例子应用到StackPanel:
<StackPanel>
<MultiLayout LayoutElement =“placeholder2”/>
<Placeholder Name =“placeholder1”Height =“70”>
<Rectangle Name =“rectangle1”Fill =“Red”Margin =“25,5”/>
</ Placeholder>
<Placeholder Name =“placeholder2”Target =“rectangle1”Height =“100”/>
</ StackPanel>
通过更改MultiLayout的LayoutElement属性，我们可以在“placeholder1”和“placeholder2”之间移动Rectangle。请注意，Rectangle具有其Margin属性设置。因此，当它移动到另一个Placeholder时，该属性仍然存在。然而，高度是在占位符本身设置的，因此会改变。
这里有一个快速示例，显示了如何将Rectangle从一个Panel移动到另一个。在这个例子中，我们使用一个MultilayoutPanel和一个DockLayout。我们把三个panel放在里面，docket到不同的位置。我们使用占位符来引用一个Rectangle，并在三个panel之间移动。
<MultiLayoutPanel ux:Name =“multiLayoutPanel”>
<DockLayout />
<Panel ux:Name =“panel1”>
<Placeholder Width =“50”Height =“50”>
<Rectangle ux:Name =“rect”Fill =“Teal”>
<LayoutAnimation>
<Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“1”/>
<Resize X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“1”/>
</ LayoutAnimation>
</ Rectangle>
<Clicked>
<Set multiLayoutPanel.LayoutElement =“panel2”/>
</ Clicked>
</ Placeholder>
</ Panel>
<Panel ux:Name =“panel2”Dock =“Right”Width =“200”>
<Placeholder Target =“rect”>
<Clicked>
<Set multiLayoutPanel.LayoutElement =“panel3”/>
</ Clicked>
</ Placeholder>
</ Panel>
<Panel ux:Name =“panel3”Dock =“Bottom”Height =“100”>
<Placeholder Target =“rect”>
<Clicked>
<Set multiLayoutPanel.LayoutElement =“panel1”/>
</ Clicked>
</ Placeholder>
</ Panel>
</ MultiLayoutPanel>
查看这些例子以了解使用LayoutAnimation和MultiLayout的灵感。