小编Mit*_*der的帖子

我有一个包含一些元素以及一个按钮的扩展器。当扩展器合拢时，我想在扩展器的标题中显示按钮，以便于访问。扩展器扩展后，我希望按钮成为扩展器内容的一部分。

当扩展器展开和折叠时，我可以使标题中的按钮淡入和淡出，但我想更进一步。我希望扩展器内容中的按钮在折叠时向上移动到标题中的位置，在扩展时向下移动到内容的位置。

通过使用blend并在两个按钮之间绘制一条线并将其转换为运动路径，我可以稍微接近一点。但是，使用这种方法很难获得精确的定位。我的一部分感觉就像画出了一条路，使事情变得有些复杂。我想要的只是让按钮A动画成为按钮B。

目前，我只关心按钮的位置。这两个按钮的大小不同，但是对按钮的宽度和高度进行动画处理则更加简单：)

这是我快速制作的一个示例程序，用于演示我正在使用的程序。主要是为了提供视觉布局。此示例中不包括渐变动画和路径动画。

<Window x:Class="test.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:test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Background" Value="Red" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Window.Resources>

    <Grid>
        <Expander Margin="5" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" IsExpanded="True">
            <Expander.Header>
                <DockPanel Margin="5">
                    <TextBlock Margin="5" VerticalAlignment="Center">Hello World</TextBlock>
                    <Button Padding="5">Button</Button>
                </DockPanel>

            </Expander.Header>
            <Expander.Content>
                <StackPanel Orientation="Horizontal">
                    <Canvas Margin="5" Width="300" Background="Black" />

                    <StackPanel>
                        <StackPanel.Resources>
                            <Style TargetType="{x:Type RadioButton}">
                                <Setter Property="Margin" Value="5" />
                            </Style>
                        </StackPanel.Resources>
                        <RadioButton IsChecked="True">Option 1</RadioButton>
                        <RadioButton>Option 2</RadioButton>
                        <RadioButton>Option 3</RadioButton>
                        <RadioButton>Option 4</RadioButton> …