如何在自定义TabControl中为y比例设置动画？

Question

我为我的工作修改并简化了TabControl。现在我将在两个TabItem之间为Chang设置Animate - Y-Scale不再像hartcut那样但是有一个柔软的滑动 - 你知道我该怎么做？

非常感谢。

<Window 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" mc:Ignorable="d"
        x:Class="tabControl.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480">
    <Window.Resources>
        <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid x:Name="grid" ClipToBounds="true" SnapsToDevicePixels="true"
                                KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="0" />
                            </Grid.RowDefinitions>
                            <StackPanel IsItemsHost="True" />
                            <Border x:Name="ContentPanel" Grid.Column="1"
                                    KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="0"
                                    KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"
                                    VerticalAlignment="Top">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        VerticalAlignment="Top" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <StackPanel Margin="150,100">
            <TabControl Style="{DynamicResource TabControlStyle1}">
                <TabItem Header="TabItem">
                    <Grid Background="red" Height="100" />
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="blue" Height="200" />
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="yellow" Height="100" />
                </TabItem>
            </TabControl>
            <Border Background="Azure" Height="200" BorderBrush="Black" BorderThickness="1" />
        </StackPanel>
    </Grid>
    <!-- ... -->

---

感谢您的帮助。

我已经使用您的示例的VisualStateGroup扩展我的样式，但它不起作用。也许ListBox和TabControl之间有什么不同？

        <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid x:Name="grid" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0"/>
                        </Grid.RowDefinitions>
                        <StackPanel IsItemsHost="True"/>
                        <Grid x:Name="ContentPanel" Grid.Column="1">

                        <ContentPresenter x:Name="Compact" Opacity="1" ContentSource="SelectedContent" VerticalAlignment="Top">
                            <ContentPresenter.LayoutTransform>
                                <ScaleTransform ScaleY="1" />
                            </ContentPresenter.LayoutTransform>
                        </ContentPresenter>

                        <ContentPresenter x:Name="Details" Opacity="0" ContentSource="SelectedContent" VerticalAlignment="Top">
                            <ContentPresenter.LayoutTransform>
                                <ScaleTransform ScaleY="0" />
                            </ContentPresenter.LayoutTransform>
                        </ContentPresenter>

                        <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="SelectionStates">
                        <VisualState Name="Unselected">
                            <Storyboard SpeedRatio="2">
                                <DoubleAnimation To="1" Storyboard.TargetName="Compact" Storyboard.TargetProperty="Opacity" />
                                <DoubleAnimation To="1" Storyboard.TargetName="Compact" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                <DoubleAnimation To="0" Storyboard.TargetName="Details" Storyboard.TargetProperty="Opacity" />
                                <DoubleAnimation To="0" Storyboard.TargetName="Details" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                            </Storyboard>
                        </VisualState>

                        <VisualState Name="Selected">
                            <Storyboard SpeedRatio="2">
                                <DoubleAnimation To="0" Storyboard.TargetName="Compact" Storyboard.TargetProperty="Opacity" />
                                <DoubleAnimation To="0" Storyboard.TargetName="Compact" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                <DoubleAnimation To="1" Storyboard.TargetName="Details" Storyboard.TargetProperty="Opacity" />
                                <DoubleAnimation To="1" Storyboard.TargetName="Details" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>