WPF的Storyboard和ScaleTransform

使用 WPF 的 Storyboard 和 ScaleTransform 来实现窗口元素的动画和翻转效果

将展示一个简单的应用程序，在这个程序中可以通过点击按钮来展开和折叠一个面板，同时按钮会进行翻转

使用 Storyboard 实现动画

<Window.Resources>
    <!-- 折叠动画 -->
    <Storyboard x:Key="CollapseAnimation">
        <DoubleAnimation Storyboard.TargetProperty="Width" To="0" Duration="0:0:0.3" />
    </Storyboard>

    <!-- 展开动画 -->
    <Storyboard x:Key="ExpandAnimation">
        <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:0.3" />
    </Storyboard>
</Window.Resources>

定义了两个简单的 DoubleAnimation，用于调整面板的宽度，从而实现展开和折叠的效果

使用 ScaleTransform 实现按钮翻转

private void Main_OnOnSwitch(object sender, RoutedEventArgs e)
{
    var button = (Button)e.OriginalSource;
    if (_isExpanded)
    {
        Storyboard collapseStoryboard = (Storyboard)FindResource("CollapseAnimation");
        collapseStoryboard.Begin(HistoricalRecords);
        button.RenderTransformOrigin = new Point(0.5, 0.5);
        button.RenderTransform = new ScaleTransform(1, 1); // 正常显示
    }
    else
    {
        Storyboard expandStoryboard = (Storyboard)FindResource("ExpandAnimation");
        expandStoryboard.Begin(HistoricalRecords);
        button.RenderTransformOrigin = new Point(0.5, 0.5);
        button.RenderTransform = new ScaleTransform(-1, 1); // 水平翻转
    }
    _isExpanded = !_isExpanded;
}

通过设置 ScaleX 为负值可以实现水平翻转